/*
Created on : Jan 16, 2021
Author     : webiknows.com
Version: 1.1
*/
/*============================
 [Table of CSS]
 	1. Global variable css
	2. Background Color
	3. Color and Font
	4. Headings and Typographic Classes / .title, .uppercase etc
	5. Button
	6. Margins and Paddings
	7. Position
	8. Custom Checkbox and radio
	9. Reset Css
	10. Cus Scroll
	11. Ellipsis
  12. Animation
  13. FLOATING LABEL
  14. ACCORDION
========================================*/
/*-----------------
1. Global variable css
-----------------------*/
:root {
	--gradient-btn:  -webkit-linear-gradient(0deg, #394263 0%, #006796 100%);
    --primary-clr: #ed1c25;
    --secondary-clr: #006796;
    --text-clr: #333333;
    --accent-clr: #8f8d8d;
    --lightgrey-clr: #ededed;
    --ff-heading: 'Roboto', sans-serif;
    --ff-para: 'Merriweather', serif;
}

/*-----------------
2. Background Color
-----------------------*/
.bg-primary {background: var(--primary-clr);}
.bg-secondary {background: var(--secondary-clr);}
.bg-lightgrey {background: var(--lightgrey-clr);}
.bg-white {background: #fff !important;}
.bg-t {background: transparent !important;}
/*-----------------
3. Color and Fonts 
-----------------------*/
.primary-clr {color: var(--primary-clr);}
.secondary-clr {color: var(--secondary-clr);}
.text-clr {color: var(--text-clr) !important;}
.white {color: #fff !important;}
.green{color:#328200;}
.SocialHeading{color:#048ac7;}
.f-headind {font-family: var(--ff-heading);}
.f-para {font-family: var(--ff-para);}
/*-----------------
4. Headings and Typographic Classes / .title, .uppercase etc
-----------------------*/
/* - Font size classes - */
.big {font-size: 3.6rem;line-height: 4.8;}
.bigger {font-size: 4.8rem;line-height: 1.2;}
.super {font-size: 6rem;line-height: 1.2;margin-bottom: 0;}
.f-12 {font-size: 1.2rem;}
.f-13 {font-size: 1.3rem;}
.f-14 {font-size: 1.4rem;}
.f-16 {font-size: 1.6rem;}
.f-18 {font-size: 1.8rem;}
.f-20 {font-size: 2rem;}
.f-22 {font-size: 2.2rem;}
.f-24 {font-size: 2.4rem;}
.f-26 {font-size: 2.6rem;}
.f-28 {font-size: 2.8rem;}

/* - Font weight classes - */
.bold {font-weight: bold;}
.regular {font-weight: normal;}
.bold-500 {font-weight: 500;}
.bold-600 {font-weight: 600;}
.bold-700 {font-weight: 700;}

/* - Text transform classes - */
.txt-upper {text-transform: uppercase;}
.txt-lower {text-transform: lowercase;}
.txt-capital {text-transform: capitalize;}
.l-h-1 {line-height: 1;}
.l-h-2 {line-height: 1.2;}
.l-h-3 {line-height: 1.3;}
.l-h-4 {line-height: 1.4;}
.l-h-5 {line-height: 1.5;}
.l-h-6 {line-height: 1.6;}
.l-h-7 {line-height: 1.7;}
.l-h-8 {line-height: 1.8;}
.l-h-9 {line-height: 1.9;}
.l-h2 {line-height: 2;}

/*-----------------
5. Button  
-----------------------*/
.cus-primary-btn {
    color: #fff;
    background: var(--primary-clr);
    text-align: center;
    border: 1px solid var(--primary-clr);
    min-width: 100px;
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
    transition: all 0.3s;
}
.cus-primary-btn:hover {
    color: var(--primary-clr);
    background: var(--secondary-clr) ;
    border: 1px solid var(--secondary-clr);
}
.cus-primary-btn-outline {
    color: var(--primary-clr);
    background: transparent;
    text-align: center;
    border: 1px solid var(--primary-clr);
    min-width: 100px;
    font-weight: 600;
    font-size: 14px;
    line-height: 34px;
    transition: all 0.3s;
}
.cus-primary-btn-outline:hover {
    color: #fff !important;
    background: var(--secondary-clr) ;
    border: 1px solid var(--secondary-clr);
}

/*-----------------
7. Position
-----------------------*/
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.top-center {position: absolute;top: 0;left: 50%;transform: translate(-50%, 0);}  
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.bottom-left {position: absolute;bottom: 8px;left: 16px;}
.bottom-center {position: absolute;bottom: 0;left: 50%;transform: translate(-50%, -50%);}
.middle-left {position: absolute;top: 50%;left: 50%;transform: translate(0%, -50%);}
.middle-right {position: absolute;top: 50%;right: 0;transform: translate(0%, 0);}
.p-centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.v-center {-webkit-transform: translate(0,-50%);-o-transform: translate(0,-50%);transform: translate(0,-50%);top: 50%;margin: 0 auto;}
.modal-dialog-bottom {display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: flex-end; min-height: calc(100% - 0rem);}
.modal-rounded {border-radius: 8px 8px 0 0;}


/*-----------------
9. Reset Css
-----------------------*/
/* body {font-size: 10px;}

@media screen and (min-width: 320px) {
  body {font-size: 10px;}
  html {font-size: 80%;}
}
@media screen and (min-width: 991px) {
  body {font-size: 14px;}
  html {font-size: 100%;}
}  */
::selection {
  background-color: var(--primary-clr);
  color: #fff;
}
/*-----------------
11.Ellipsis
-----------------------*/
.ellipsis-line1 {  
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis-line2 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ellipsis-line3 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.ellipsis-line4 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.ellipsis-line5 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.ellipsis-line6 {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}


/*------------------------------
COMMON CSS
-------------------------------*/
.vw-100 {width: 100vw;}
.vh-100 {height: 100vh;}
.vh-48 {height: 48vh;}
.fit-image {object-fit: cover;}
.grayscale{filter: grayscale(100%);}
.shadow-light {box-shadow: 0 0 10px rgba(0,0,0,.05);}
.zoom-hover {transition: all .5s ease;}
.zoom-hover:hover {transform: scale(1.1);-webkit-transform: scale(1.1);}
.rotated_180 {transform: rotate(180deg);}
.listNone {
  list-style-type: none;
  padding: 0;
}
.text-justify {text-align: justify;}
.section-title__title,.section-title__tagline {text-transform: uppercase;letter-spacing: normal;}

.py_80 {
  padding: 80px 0;
}
.section-title__tagline,
.team-one__sub-title {
  color: var(--secondary-clr); 
}
.team-one__sub-title {
    font-size: 14px;
}
.become-volunteer-one__bg-box {
  background-color: #000;
}
.thm-btn {
  background-color: var(--secondary-clr);
  color: var(--lightgrey-clr);
}
.team-one__name {
  font-size: 18px;
}

.team-one,.feature-one {
  padding: 4rem 0 4rem;
}
.gallery-one__bottom {
  padding-bottom: 3rem;
}
.gallery-one__content {
  display: none;
}
.scroll-to-top2 {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: var(--oxpins-primary);
  position: fixed;
  bottom: 80px;
  right: 40px;
  z-index: 99;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* display: none; */
  border-radius: 50%;
  transition: all 0.4s ease;
}
/*------------------------------
HEADER
-------------------------------*/
.main-header {
  box-shadow: 0 2px 5px 0 hsla(0,0%,76.5%,.4);
}
.main-menu__logo a img {
  max-width: 100%;
}
.mobile-nav__content .logo-box a img {
  border-radius: 4px;
}
.Logo50Years {
  text-align: right;
}
.Logo50Years img {
  max-width: 200px;
}
.main-menu .main-menu__list>li>a,
.stricky-header .main-menu__list>li>a {
  color: #fff;
}
.main-menu__right-top {
  padding: 6px 0;
}
.page-header-bg {
  background-color: transparent;
}
.page-header {
  padding: 80px 0 80px;
}
/*------------------------------
FOOTER
-------------------------------*/
.site-footer {
  background-color: #313131;
}
.footer-widget__about-logo a img {
  max-width: 100%;
  border-radius: 10px;
}
.footer-widget__links-list li a,
.footer-widget__non-profit-list li a,
.footer-widget__contact-text,
.footer-widget__about-text {
  color: #FFF;
}
.site-footer-bg {
  opacity: 0.3;
}

/*------------------------------
Homepage
-------------------------------*/ 
.main-slider .container {
  padding-bottom: 100px;
  padding-top: 100px;
}
.BannersImg {
  position: absolute;
  left: 0;
  top: 0;
}
.main-slider .swiper-slide {
  background-color: transparent;
}
.main-slider__sub-title {
  font-size: 4rem;
}
.main-slider__title {
  color: #fff;
  text-transform: capitalize;
  font-size: 54px;
  line-height: 65px;
}
.feature-one img {
  border-radius: 50%;
}
.feature-one__single {
    background-color: #dbfcc7;
    overflow: hidden;
    padding: 20px;
    padding-top: 80px;
}
.feature-one__top {
  background: #6fb843;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.feature-one__top-icon:hover {
  background-color: #6fb843;
}
/* .feature-one__top-title a:hover {
  color: #6fb843;
} */
.feature-one__top-icon {
  height: 60px;
  width: 60px;
  background-color: var(--oxpins-white);
  border-radius: 50%;
  overflow: hidden;
  padding: 4px;
}
.feature-one__text {
  padding-bottom: 0;
  text-transform: capitalize;
  font-size: 30px;
  color: #333333;
}
.feature-one__point li+li {
  margin-top: 0;
}
.feature-one__single--two {
  background-color: #bfe5ff;
}
.feature-one__single--two .feature-one__top {
  background: #469bd4;
}
 .feature-one__single--two .feature-one__top-title a:hover {
  color: #469bd4;
}
/*
.feature-one__top-icon--two:hover {
  background-color: #469bd4 !important;
} */

.feature-one__single--tree {
  background-color: #ffdfa9;
}
.feature-one__single--tree .feature-one__top {
  background: var(--oxpins-primary);
}
.feature-one__single--tree .feature-one__top-title a:hover {
  color: var(--oxpins-primary);
}
.feature-one__top-icon--tree:hover {
  background-color: var(--oxpins-primary) !important;
}
.feature-one__point li .icon{
  background-color: transparent;
}
.feature-one__point li .icon span {
  color: #333333;
  font-size: 14px;
}
.feature-one__point li .text p {
  color: #333333; 
}
.team-one__img,
.team-one__img img {
  border-radius: 0;
}
.team-one__content {
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: -26px;
    z-index: 9;
    box-shadow: 0px 25px 70px rgba(0, 0, 0, 0.08);
    padding: 20px 0 20px;
}
.team-one__name a {
  color: var(--primary-clr);
}
.counterIncrement {
  padding-left: 2rem;
  list-style: none;
}
.counterIncrement li {
  counter-increment: my-counter;
  border-bottom: 1px dashed #d1d1d1;
  padding: 10px;
  margin-bottom: 10px;
}
.counterIncrement li h3 a {
 color: var(--secondary-clr);
 font-size: 1.2rem;
 text-transform: uppercase;
}
.counterIncrement li:before {
	  content: counter(my-counter) " ";
    color: #fff;
    font-size: 1.2rem;
    line-height: 2.5rem;
    background: var(--secondary-clr);
    height: 2rem;
    width: 2rem;
    display: inline-block;
    text-align: center;
    border-radius: 3rem;
    position: absolute;
    left: 0;
}
.EnvironmentalSec {background: #e6fed8;}
.EnvironmentalSec .card {min-height: 315px;}

.SocialSec {background: #eaf4fb;}
.SocialSec .card {min-height: 296px;}

.GovernanceSec {background: #ffeac6;}
.GovernanceSec .card {min-height: 405px;}
.GovernanceSec .section-title__title {color: #f6a61e;}

.infographicBox {
  border: 4px solid #ff6968;
  border-radius: 20px;
  padding: 7px;
  transition: all 0.3s ease-in;
  margin-bottom: 20px;
}
.infographicBox:hover .card {
  transform: scale(1.1);
  -webkit-box-shadow: 0px 0px 36px -12px rgba(255,105,104,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(255,105,104,1);
  box-shadow: 0px 0px 36px -12px rgba(255,105,104,1);
}

.infographicBox .card {
  border: 0px solid #ff6968;
  border-radius: 20px;
  padding:2.5rem 0;
  transition: all 0.3s ease-in;
}
.infographicBox .card .imgBox {
  height: 60px;
  width: 60px;
  background: #fc6867;
  border-radius: 50px;
  padding: 10px;
  margin: auto;
  text-align: center;
}
.infographicBox .card .imgBox img {
  border-radius: 0;
  height: 40px;
  width: auto;
  text-align: center;
}
.infographicBox .card h4 {
  text-transform: uppercase;
  color: #fc6867;
  margin: 14px 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
}
.infographicBox .card li {
  line-height: 1.5;
  text-transform: uppercase;
}
/* BOX2 */
.infographicBox.Box2 {
  border: 4px solid #ff8f61;
}
.infographicBox.Box2:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(255,143,97,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(255,143,97,1);
  box-shadow: 0px 0px 36px -12px rgba(255,143,97,1);
}
.infographicBox.Box2 .card .imgBox {
  background: #ff8f61;
}
.infographicBox.Box2 .card h4 {
  color: #ff8f61;
}
/* BOX3 */
.infographicBox.Box3 {
  border: 4px solid var(--secondary-clr);
}
.infographicBox.Box3:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(0,103,150,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(0,103,150,1);
  box-shadow: 0px 0px 36px -12px rgba(0,103,150,1);
}
.infographicBox.Box3 .card .imgBox {
  background: var(--secondary-clr);
}
.infographicBox.Box3 .card h4 {
  color: var(--secondary-clr);
}

/* BOX5 */
.infographicBox.Box5 {
  border: 4px solid #2C74B3;
}
.infographicBox.Box5:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(90,101,255,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(90,101,255,1);
  box-shadow: 0px 0px 36px -12px rgba(90,101,255,1);
}
.infographicBox.Box5 .card .imgBox {
  background: #2C74B3;
}
.infographicBox.Box5 .card h4 {
  color: #2C74B3;
}
/* BOX6 */
.infographicBox.Box6 {
  border: 4px solid #205295;
}
.infographicBox.Box6:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(122,84,255,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(122,84,255,1);
  box-shadow: 0px 0px 36px -12px rgba(122,84,255,1);
}
.infographicBox.Box6 .card .imgBox {
  background: #205295;
}
.infographicBox.Box6 .card h4 {
  color: #205295;
}
/* BOX7 */
.infographicBox.Box7 {
  border: 4px solid #f8a61d;
}
.infographicBox.Box7:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(248,166,29,1);
-moz-box-shadow: 0px 0px 36px -12px rgba(248,166,29,1);
box-shadow: 0px 0px 36px -12px rgba(248,166,29,1);
}
.infographicBox.Box7 .card .imgBox {
  background: #f8a61d;
}
.infographicBox.Box7 .card h4 {
  color: #f8a61d;
}
/* BOX8 */
.infographicBox.Box8 {
  border: 4px solid #4594c9;
}
.infographicBox.Box8:hover .card {
  --webkit-box-shadow: 0px 0px 36px -12px rgba(166,216,250,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(166,216,250,1);
  box-shadow: 0px 0px 36px -12px rgba(166,216,250,1);
}
.infographicBox.Box8 .card .imgBox {
  background: #4594c9;
}
.infographicBox.Box8 .card h4 {
  color: #4594c9;
}

/* GreenBox1 */
.infographicBox.GreenBox1 {
  border: 4px solid #018749;
}
.infographicBox.GreenBox1:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(111,184,66,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(111,184,66,1);
  box-shadow: 0px 0px 36px -12px rgba(111,184,66,1);
}
.infographicBox.GreenBox1 .card {
  background: #018749;
}
.infographicBox.GreenBox1 .card .imgBox {
  background: #00000043;
}
.infographicBox.GreenBox1 .card h4 {
  color: #fff;
}

/* GreenBox2 */
.infographicBox.GreenBox2 {
  border: 4px solid #17B169;
}
.infographicBox.GreenBox2:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(111,184,66,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(111,184,66,1);
  box-shadow: 0px 0px 36px -12px rgba(111,184,66,1);
}
.infographicBox.GreenBox2 .card {
  background: #17B169;
}
.infographicBox.GreenBox2 .card .imgBox {
  background: #00000043;
}
.infographicBox.GreenBox2 .card h4 {
  color: #fff;
}

/* BlueBox1 */
.infographicBox.BlueBox1 {
  border: 4px solid #2C74B3;
}
.infographicBox.BlueBox1:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(44,116,179,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(44,116,179,1);
  box-shadow: 0px 0px 36px -12px rgba(44,116,179,1);
}
.infographicBox.BlueBox1 .card {
  background: #2C74B3;
}
.infographicBox.BlueBox1 .card .imgBox {
  background: #00000043;
}
.infographicBox.BlueBox1 .card h4 {
  color: #fff;
}
/* BlueBox2 */
.infographicBox.BlueBox2 {
  border: 4px solid #205295;
}
.infographicBox.BlueBox2:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(44,116,179,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(44,116,179,1);
  box-shadow: 0px 0px 36px -12px rgba(44,116,179,1);
}
.infographicBox.BlueBox2 .card {
  background: #205295;
}
.infographicBox.BlueBox2 .card .imgBox {
  background: #00000043;
}
.infographicBox.BlueBox2 .card h4 {
  color: #fff;
}
/* YellowBox1 */
.infographicBox.YellowBox1 {
  border: 4px solid #e3a841;
}
.infographicBox.YellowBox1:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(241,182,83,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(241,182,83,1);
  box-shadow: 0px 0px 36px -12px rgba(241,182,83,1);
}
.infographicBox.YellowBox1 .card {
  background: #e3a841;
}
.infographicBox.YellowBox1 .card .imgBox {
  background: #00000043;
}
.infographicBox.YellowBox1 .card h4 {
  color: #fff;
}
/* YellowBox2 */
.infographicBox.YellowBox2 {
  border: 4px solid #de8d04;
}
.infographicBox.YellowBox2:hover .card {
  -webkit-box-shadow: 0px 0px 36px -12px rgba(241,182,83,1);
  -moz-box-shadow: 0px 0px 36px -12px rgba(241,182,83,1);
  box-shadow: 0px 0px 36px -12px rgba(241,182,83,1);
}
.infographicBox.YellowBox2 .card {
  background: #de8d04;
}
.infographicBox.YellowBox2 .card .imgBox {
  background: #00000043;
}
.infographicBox.YellowBox2 .card h4 {
  color: #fff;
}






.DownloadBox {
  border-radius: 20px;
  height: 230px;
  padding: 30px;
  position: relative;
  background-repeat: no-repeat;
  background-size: 105%;
  overflow: hidden;
  transition: 0.5s;
}
.DownloadBox:hover {
  box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(-10px);
}
.DownloadBox h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--secondary-clr);
    line-height: 28px;
}
.common-cta {
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  transition: all 0.5s ease;
  color: #333333;
  padding-left: 60px;
  position: relative;
  margin-top: 15px;
  font-weight: 500;
}
.DownloadBox .common-cta {
  position: absolute;
  bottom: 40px;
  left: 20px;
}
.common-cta .arrow {
  position: absolute;
  left: 20px;
  top: 0px;
}
.common-cta .arrow::before {
  content: '';
  position: absolute;
  width: 45px;
  height: 45px;
  border-radius: 100px;
  left: -13px;
  top: -8px;
  transform: scale(1);
  transition: 0.2s;
  background: #333333 url(/assets/images/icon/white-arrow.svg) no-repeat center center;
  background-size: 20px;
}

.DownloadBox.greenBG {
  background-color: #e6fed8;
}
.DownloadBox.blueBG {
  background-color: #eaf4fb;
}
.DownloadBox.yellowBG {
  background-color: #ffeac6;
}

/*------------------------------
Principles
-------------------------------*/
.Principles .PrinciplesBox1,
.Principles .PrinciplesBox2,
.Principles .PrinciplesBox3 {
  border: 2px solid #bdefa0;
  border-radius: 12px;
  position: relative;
  text-align: center;
  padding: 30px 20px;
}

.Principles .PrinciplesBox1::before,
.Principles .PrinciplesBox2::before,
.Principles .PrinciplesBox3::before {
  content: '';
  position: absolute;
  width: 106%;
  height: 50%;
  background: #bdefa0;
  border-radius: 0px 0px 12px 12px;
  bottom: -2px;
  left: -10px;
  transition: 0.5s;
}
.Principles .PrinciplesBox1 .PrinciplesBox1-inner,
.Principles .PrinciplesBox2 .PrinciplesBox1-inner,
.Principles .PrinciplesBox3 .PrinciplesBox1-inner {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  box-shadow: 0px 30px 20px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 20px;
  height: 270px;
}

.Principles .PrinciplesBox1 .PrinciplesBox1-inner img,
.Principles .PrinciplesBox2 .PrinciplesBox1-inner img,
.Principles .PrinciplesBox3 .PrinciplesBox1-inner img {
  margin-bottom: 8px;
}

.Principles .PrinciplesBox1 .PrinciplesBox1-inner p, 
.Principles .PrinciplesBox2 .PrinciplesBox1-inner p, 
.Principles .PrinciplesBox3 .PrinciplesBox1-inner p {
  color: #133346;
  font-size: 16px;
  line-height: 22px;
}
.Principles .PrinciplesBox1 .PrinciplesBox1-inner h4, 
.Principles .PrinciplesBox2 .PrinciplesBox1-inner h4, 
.Principles .PrinciplesBox3 .PrinciplesBox1-inner h4 {
  color: var(--text-clr);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
}
.Principles .PrinciplesBox1 .PrinciplesBox1-inner i, 
.Principles .PrinciplesBox2 .PrinciplesBox1-inner i, 
.Principles .PrinciplesBox3 .PrinciplesBox1-inner i {
  font-size: 50px;
  margin-bottom: 14px;
}
.Principles .PrinciplesBox1:hover::before, 
.Principles .PrinciplesBox2:hover::before, 
.Principles .PrinciplesBox3:hover::before {
  height: 103%;
  border-radius: 12px 12px 12px 12px;
}
.Principles .PrinciplesBox2::before {
  background: #abd7f6;
  width: 106%;
}
.Principles .PrinciplesBox2 {
  border: 2px solid #abd7f6;
}

.Principles .PrinciplesBox3::before {
  background: #f8ce87;
  width: 106%;
}
.Principles .PrinciplesBox3 {
  border: 2px solid #f8ce87;
}
.Principles .PrinciplesBox1 i {
  color:  #bdefa0;
}
.Principles .PrinciplesBox2 i {
  color:  #abd7f6;
}
.Principles .PrinciplesBox3 i {
  color: #f8ce87;
 }

/*------------------------------
Process
-------------------------------*/
#content {
  margin-top: 50px;
  text-align: center;
}

/* Timeline */
.timeline {
    border-left: 4px solid var(--primary-clr);
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background: var(--lightgrey-clr);
    color: var(--bs-gray-dark);
    margin: 50px auto;
    letter-spacing: 0.5px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 50px;
    list-style: none;
    text-align: left;
    max-width: 55%;
    transform: translateX(80px);
}
.timeline h1,
.timeline h2,
.timeline h3 {
  letter-spacing: 1.5px;
  font-size: 1.4em;
}
.timeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  margin-bottom: 50px;
  position: relative;
}
.timeline .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}
.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}
.timeline .event:before {
    left: -217.5px;
    color: var(--text-clr);
    content: attr(data-date);
    text-align: right;
    font-size: 1rem;
    min-width: 120px;
    font-weight: 600;
}
.timeline .event:after {
    box-shadow: 0 0 0 4px var(--oxpins-primary);
    left: -57.85px;
    background: var(--oxpins-extra);
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
    top: 5px;
}
/*------------------------------
POLICIES
-------------------------------*/
.donations-list__img img {
  max-height: 20.8rem;
  object-fit: cover;
}
.events-one__img img {
  height: 400px;
  object-fit: cover;
}
.gallery-page__img img {
  height: 450px;
  object-fit: cover;
}


 

/*######### MEDIA QUERY START HERE ########*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {

.GovernanceSec .card,.SocialSec .card,.EnvironmentalSec .card {min-height: 290px;}
.infographicBox .card {padding: 1rem 0;}
.section-title__title {
  font-size: 30px;
  line-height: 40px;
}


.gallery-one__single {width: 50%;}
.contact-one__inne{text-align: center;}
.contact-one__sub-title{font-size: 16px;}
.contact-one__number{margin-bottom: 10px;}
.become-volunteer-one__title {
  font-size: 36px;
  line-height: 50px;
}

  .BannersImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right 0;
  }
  .main-slider .container {
    background: #000000a6;
  }
  .main-slider__sub-title {
    font-size: 28px;
  }


  .main-menu__logo {
    text-align: center;
    padding: 6px 0;
  }

.main-menu__logo a img {
    max-width: 100%;
    margin: auto;
}
.page-header {
  padding: 41px 0 32px;
}
.timeline {max-width: 90%;transform: translateX(0px);}
.timeline .event:before {
  left: -3px;
  top: -24px;
}
.team-one__content {
  margin-top: -24px;
  padding: 10px 0 10px;
}
.team-one__name {font-size: 14px;line-height: 1.2;}

/* FOOTER */




 
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

} 

@media only screen and (max-width: 992px) {
  
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

/*background*/
.lg-bg-primary {background: var(--primary-clr) !important;}
.lg-bg-secondary {background: var(--secondary-clr) !important;}
.lg-bg-white {background: #fff !important;}
.lg-bg-greylight {background: #f3f3f3 !important;}
.lg-bg-t {background: transparent !important;}  


}  
    
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1299.98px) {
  .main-menu .main-menu__list>li+li, .stricky-header .main-menu__list>li+li {
    margin-left: 40px;
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}