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

@font-face {
    font-family: 'gilroybold';
    src: url('../fonts/gilroy-bold-webfont.eot');
    src: url('../fonts/gilroy-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-bold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-bold-webfont.woff') format('woff'),
         url('../fonts/gilroy-bold-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-bold-webfont.svg#gilroybold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gilroylight';
    src: url('../fonts/gilroy-light-webfont.eot');
    src: url('../fonts/gilroy-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-light-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-light-webfont.woff') format('woff'),
         url('../fonts/gilroy-light-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-light-webfont.svg#gilroylight') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{ overflow-x: hidden;  font-family: 'gilroylight'; background:#0D3F27;}
p{ font-size: 18px; line-height:1.5; margin-bottom:20px; color: #000; font-family: 'gilroylight';}
p:last-child{ margin-bottom:0;}


/* section{ height: 100vh; max-height: 100vh;} */

.flex{ display: flex;}
.flex-wrap{ flex-wrap: wrap;}
.img-fluid{ max-width: 100%; height: auto;}
.common-padding{ padding:80px 0;}


h1{ font-size:80px; line-height:1.125; font-weight: 700;  font-family: 'gilroybold';}
h2{ font-size:48px; line-height: 1.05; margin-bottom: 20px;  font-family: 'gilroybold';}
h2 span{ display: block;}

a{ font-size:16px; color:rgba(183, 15, 27, 1); line-height: 1; text-decoration: none;}
a:hover, a:focus, a:active{ text-decoration: none;}

.common-btn{ display: flex; flex-wrap:nowrap;}
figure{ margin: 0 !important;}

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


/**AUDIO**/
.position-relative{ position: relative;}
.z-index1{ z-index:1 !important;}
.z-index2{ z-index:2 !important;}
.z-index3{ z-index:3 !important;}
.z-index11{ z-index:11 !important;}

.mainOuter{ height: 100vh; max-height: inherit; overflow-x: hidden;}
.common-padding{ padding: 80px 0 !important;}
.container-fluid, .container{ z-index: 10;}

/**============================
BANNER
============================**/
.banner{height: 110vh !important; overflow:hidden; max-height: 110vh !important; background-color: #fff;}
.banner video{ transform: scaleX(-1); height: 100%; width: 100%; object-fit: cover;}
.banner-caption{ max-width:730px; position: absolute;top: 50%; transform: translate(0%,-50%); left: 10%; text-align: left; }
.banner-caption::before{ content:''; position: absolute;  border-radius: 728px; top: 50%; transform: translate(-50%,-50%); left: 50%; background: #222;  filter: blur(47px);}
.banner-caption p{ font-size:36px; line-height: 1.25; font-weight: 500; color: #fff;}


.vector-box{ position: absolute; top:50%; transform: translateY(-50%);  animation:float 3.5s ease-in-out infinite, sway calc(3.5s * 2) ease-in-out infinite; max-width: 10vw;}
.banner::before{ content:''; position: absolute; top:50%; left:-15vw; transform: translateY(-50%) translateX(-0); border:1px solid #fff; border-radius: 50%; height:40vw; width: 40vw; opacity: 0.5; z-index: 1; animation:spin 6s linear infinite;}


.banner-intro-outer{ background-color: #fff; padding:50px 0 100px; }
.banner-intro{ max-width: 925px; margin: 0 auto; background: #fff; text-align: center;}
.banner-intro p{color:#0D5D37; font-family: 'gilroylight'; font-size: 28px; line-height:1.5;}
.intro-with-shape{ margin-top: 60px; position: relative;}
.tag{padding:12px 48px; display:inline-block; background:#4fad73; color:#fff;  font-weight:600; font-size: 20px; line-height: 1.5;  text-align:center; 
    clip-path:polygon( 40px 0, 
    calc(100% - 40px) 0,
      100% 50%,               /* 3 — right tip */
      calc(100% - 40px) 100%, /* 4 — lower‐right */
      40px 100%,              /* 5 — lower‑left */
      0 50%                   /* 6 — left tip */
  ); 
}

.intro-with-shape::before{ content:''; position:absolute; width: 100px; height: 1px; background: #48A66D; left: -100px; top: 50%; transform: translateY(-50%);}
.intro-with-shape::after{ content:''; position:absolute; width: 100px; height: 1px; background: #48A66D;  right: -100px; top: 50%; transform: translateY(-50%);}


.cloud{ position: absolute; top:-16vw; width: 100%; left: 50%; transform: translateX(-50%); z-index: 0; height: 35vh;background: url(../images/cloud2.png) no-repeat; background-size: cover;} 
.cloud img{ width: auto; height: 100%;}





@keyframes spin{ 
   0% {
    transform: translateY(-50%) translateX(-20px) rotate(1turn);
  }
  50% {
    transform:translateY(-50%) translateX(0px) rotate(1turn);
  }
  100% {
    transform: translateY(-50%) translateX(20px) rotate(1turn);
  }  
}


@keyframes float {
  0% {
    transform: translateX(0) translateY(0) rotate(0);
  }
  50% {
    transform: translateX(30px) translateY(calc(-1 * 20px)) rotate(40deg);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
}


@keyframes sway {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-1 * 30px));
  }
}


/**COLOR**/
.text-yellow{ color: #FED65B !important;}
.text-white{ color: #fff !important;}
.text-red{color: #AE1E22 !important;}

/**heading**/
/* h2{color: #FFF;  font-family: 'gilroybold'; font-size: 48px; font-style: normal; font-weight: 400; line-height: 1.25; margin-bottom: 60px; display: flex; flex-wrap: nowrap; align-items: center; gap:15px; z-index: 9; position: relative;}
h2 .section-no{ color: #AE1E22; font-family: 'gilroylight';   font-size: 28px; font-style: normal; font-weight: 700; line-height: 1.25;} */


/****/
.left-right-outer{ background: #0D3F27; padding: 60px 0; position: relative;}
.left-right-outer:before{ content:''; position: absolute; top:30%; right: -10vw; border-radius: 50%; background: #48A66D; filter: blur(247px); width: 40vw; height: 40vw;z-index: -0;}
.left-right-outer::after{ content:''; position: absolute; bottom:10%; left: -10vw; border-radius: 50%; background: #48A66D; filter: blur(247px); width: 40vw; height: 40vw; z-index: -0;}

.left-right-row{ display: flex; flex-wrap:wrap; margin-bottom: 120px; align-items: center; position: relative; z-index: 9;}
.left-right-col{ max-width: 50%; flex: 0 0 50%;}

.left-content-right-img .left-content{ padding: 0 5vw 0 8vw;}
.left-content-left-img  .left-content{ padding: 0 8vw 0 5vw;}
.left-right-col .img-box img{ width: 100%;}


.left-right-col h2{ margin-bottom:40px;}
.left-right-col ul li, .left-right-col p{ font-size: 18px; line-height: 1.5; font-weight: 500; margin-bottom:30px; color: #fff; }
.left-right-col ul li{ padding-left:40px; position: relative;}
.left-right-col ul li span{ font-size: 28px; line-height: 1;color: #fff; font-weight:700; position: absolute; top:0px; left: 0; font-family: 'gilroybold';}


.left-content-right-img .left-right-col.right-img .img-box{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; overflow: hidden;}
.left-content-right-img .intro-with-shape::before{ width:8vw; left: -8vw;}
.left-content-right-img .intro-with-shape::after{ display: none;}

.left-content-left-img .left-right-col.right-img .img-box{ border-top-right-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden;}
.left-content-left-img .intro-with-shape::before{display: none;}
.left-content-left-img .intro-with-shape::after{width: 8vw; right: -8vw;}


/**inforaphic-list**/
.inforaphic-box { position: relative; z-index: 10;}
.inforaphic-list .large-info{ display: flex; flex-wrap: wrap; }
.inforaphic-list .large-info p{ font-size: 21px; line-height: 1.25; color: #fff; display: block; width: 100%; font-family: 'gilroybold'; margin-bottom: 0;}
.inforaphic-list .large-info .big-text{ font-size: 60px; line-height:1; margin-bottom:20px; font-weight: 600; color: #fff; display: block;  width: 100%;font-family: 'gilroybold';}
.inforaphic-list .large-info .measures-text{font-size: 30px; line-height:1.125; margin-bottom: 20px; font-weight: 500; color: #fff; display: block;  width: 100%;}

.inforaphic-list li{ flex: 0 0 33.33%; max-width: 33.33%;}
.inforaphic-list li figure{border-radius: 10px; background: rgba(255, 255, 255, 0.10); padding: 30px 30px 120px 30px; height: 100%; position: relative;}
.inforaphic-list li figure .info-img{ position:absolute; bottom:-25%; left: 50%; transform: translateX(-50%);}


.inforaphic-list li:nth-of-type(1)  .large-info{ text-align:left;}
.inforaphic-list li:nth-of-type(2)  .large-info{ text-align:center;}
.inforaphic-list li:nth-of-type(3)  .large-info{ text-align:right;}

.inforaphic-list li:nth-of-type(1) figure .info-img{ bottom: -8%;}
.inforaphic-list li:nth-of-type(2) figure .info-img{  bottom: -20%;}
.inforaphic-list li:nth-of-type(3) figure .info-img{ bottom: -18%; left: 0; transform: inherit;}

/**=======================================
Can you Guess the Names of the Birds below?
========================================**/
.text-green{ color: #48A66D !important;}
.can-you-guess-outer{ background: #fff;}
.introduction{ max-width: 630px; margin: 0 auto; text-align: center;}
.subintro{ font-size: 21px; line-height: 1.25; color: #222222;}

.can-you-guess-outer .cards-container{display:flex;flex-wrap:wrap;justify-content:center;margin:100px -15px 0;max-width:100%;width:100%}
.can-you-guess-outer .card{perspective:1000px;width:100%;max-width:33.33%;height:210px;position:relative;cursor:pointer;padding:0 15px;margin-bottom:30px;border:none}
.can-you-guess-outer .card-inner{transition:transform .6s;transform-style:preserve-3d;position:relative;width:100%;height:100%}
.can-you-guess-outer .card.flipped .card-inner{transform:rotateY(180deg)}
.can-you-guess-outer .card-front,
.can-you-guess-outer .card-back{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;flex-wrap:wrap}
.can-you-guess-outer .card-front{background-color:#059669;color:#fff}
.can-you-guess-outer .card-front::before{ content: ''; position: absolute; right: 30px; background: url(../images/bg-bird.png) no-repeat; top: 50%; transform: translateY(-50%);
    width: 30%; height: 55%; background-size: cover;} 
.can-you-guess-outer .card-front p{ color: #fff;}
.can-you-guess-outer .card-front .click-to-view{opacity:0; visibility: hidden; height: 0; transition: height 0.6s; position: absolute; bottom:30px;}
.can-you-guess-outer .card-front:hover .click-to-view{opacity:1; visibility: visible; height: 20px; }

.can-you-guess-outer .card-back{background-color:#fff;box-shadow:0 4px 12px #00000026;transform:rotateY(180deg);flex-direction:row; position: relative; }
.can-you-guess-outer .card-back::before{ content:'';position: absolute; top: 0;  bottom: 0; left: 0; right: 0;  background-color: rgba(0, 0, 0, 0.4); z-index:-1; border-radius: 20px;}
.can-you-guess-outer .card.flipped:nth-of-type(1) .card-back{ background-image: url(../images/can-u-know/can-u-know-bg-1.jpg); background-repeat: no-repeat; background-size: cover;}
.can-you-guess-outer .card.flipped:nth-of-type(2) .card-back{ background-image: url(../images/can-u-know/can-u-know-bg-2.webp); background-repeat: no-repeat; background-size: cover;}
.can-you-guess-outer .card.flipped:nth-of-type(3) .card-back{ background-image: url(../images/can-u-know/can-u-know-bg-3.jpg); background-repeat: no-repeat; background-size: cover;}
.can-you-guess-outer .card.flipped:nth-of-type(4) .card-back{ background-image: url(../images/can-u-know/can-u-know-bg-4.jpg); background-repeat: no-repeat; background-size: cover;}
.can-you-guess-outer .card.flipped:nth-of-type(5) .card-back{ background-image: url(../images/can-u-know/can-u-know-bg-5.jpg); background-repeat: no-repeat; background-size: cover;}
.can-you-guess-outer .card.flipped:nth-of-type(6) .card-back{ background-image: url(../images/can-u-know/can-u-know-bg-6.jpg); background-repeat: no-repeat; background-size: cover;}


.can-you-guess-outer .card-back img{height: 100%; width: 50%; position: ABSOLUTE; top: -50%; left: 50%; object-fit: contain; transform: translateX(-50%);}
.can-you-guess-outer .card-back div{padding-left:16px;text-align:left; margin-top: 20px; position: relative;}
.can-you-guess-outer .card-back h3{margin:0 0 0px;font-size:28px;font-weight:700; line-height: 1.25; color:#fff;}
.can-you-guess-outer .card-back p{margin-top:10px; font-size:16px; line-height: 1.5;color:#fff;}

.can-you-guess-outer .card:nth-of-type(5)  .card-back img,
.can-you-guess-outer .card.flipped:nth-of-type(5)  .card-back img{ left: 55%;}


/**===============================
Towards Nature Positive
===============================**/
.TowardsNaturePositive-outer{background: #0D3F27; padding: 60px 0; position: relative;}

/* .TowardsNaturePositive-logo-outer ul{ display: flex; flex-wrap: wrap;  align-items: center; position: relative; }
/* .TowardsNaturePositive-logo-outer ul::before{content: '';position: absolute;top:0;left: 0;background: url(../images/circle-bg.png) no-repeat;width: 44vw;height: 100%;}
.TowardsNaturePositive-logo-outer ul::after{content: '';position: absolute;top:0;right: 0;background: url(../images/circle-bg.png) no-repeat;transform: rotate(180deg);height: 100%;width: 44vw; z-index: 0;} */


.TowardsNaturePositive-logo-outer ul {
  display: flex;
  flex-wrap: wrap;
  /*align-items: stretch;*/ /* This ensures all flex items (li) stretch to the same height */
  position: relative;
   margin: 0 -15px;
}

.TowardsNaturePositive-logo-outer ul li {
  width: 33.33%;
  flex: 0 0 33.33%;
  position: relative;
  z-index: 10;

  display: flex; /* Make the li a flex container */
  flex-direction: column;
  min-height: 430px; 
  padding: 0 15px;
}

.TowardsNaturePositive-logo-outer ul li .inner-contain {
  padding:50px 50px;
  text-align: center;
  flex-grow: 1; /* This will make all inner-contain elements stretch equally */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center the content */
  height: 100%;
}


/* .TowardsNaturePositive-logo-outer ul li{  width: 33.33%; flex: 0 0 33.33%;position: relative; z-index: 10; background-size: cover !important;} */
.TowardsNaturePositive-logo-outer ul li:nth-of-type(1){background: url(../images/circle-img1.png) no-repeat; background-size: auto !important;}
.TowardsNaturePositive-logo-outer ul li:nth-of-type(2){background: url(../images/circle-img2.png) no-repeat; background-size: auto !important;}
.TowardsNaturePositive-logo-outer ul li:nth-of-type(3){background: url(../images/circle-img3.png) no-repeat; background-size: auto !important;}
/* .TowardsNaturePositive-logo-outer ul li .inner-contain{ padding: 80px 60px; text-align: center;} */
.TowardsNaturePositive-logo-outer ul li .inner-contain p{ font-size: 16px; line-height: 1.5; margin-bottom: 15px; color: #fff;  position: relative;}
.TowardsNaturePositive-logo-outer ul li .inner-contain img{ border-radius: 10px; overflow: hidden; max-width: 200px; margin: 0 auto 0px; position: absolute; top:-30px; left: 50%; transform: translateX(-50%);}


.TowardsNaturePositive-video { max-width: 995px; margin: 0 auto;}
.TowardsNaturePositive-video p{color: #FFF; text-align: center; font-family: 'gilroylight';font-size: 28px;font-style: normal;font-weight: 400;line-height: 1.5;  /* 171.429% */}
.TowardsNaturePositive-video video{ width: 100%; mix-blend-mode: multiply; margin-top: -80px;}


.TowardsNaturePositive-slider-row  .swiper { width: 100%; max-width: 100%; height: inherit;}
.TowardsNaturePositive-slider-row   .swiper-slide { background: #fff; border-radius: 16px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); display: flex; align-items: center;
    justify-content: center; flex-direction: column; font-size: 24px; color: #333; overflow: hidden; height: 100%; max-width: 410px;}
.TowardsNaturePositive-slider-row   .swiper-wrapper {display: flex;align-items: stretch;}
.TowardsNaturePositive-slider-row .swiper-slide .img-box img{ width:100%; border-radius:10px; overflow: hidden;}
 .TowardsNaturePositive-slider-row .swiper-slide figcaption{ padding:20px 40px; font-size: 16px; line-height: 1.5; color: #222222; font-weight: 600; font-family: 'gilroylight';}

.TowardsNaturePositive-slider-content{ max-width: 550px; flex: 0 0 550px; padding-left:10%; color: #fff;}
.TowardsNaturePositive-slider-outer{ max-width:calc(100% - 550px); flex: 0 0 calc(100% - 550px); padding: 0 0 0 50px;}
.TowardsNaturePositive-slider-row .swiper-button-next,
.TowardsNaturePositive-slider-row .swiper-button-prev{ width: 40px; height: 40px; background-color: rgba(255,255,255,0.5); border-radius: 5px; opacity: 1;}
.TowardsNaturePositive-slider-row .swiper-button-next:after,
.TowardsNaturePositive-slider-row .swiper-button-prev:after{ color: #fff !important; font-size: 20px !important;}
.TowardsNaturePositive-slider-row .controle-outer{     max-width: 160px; height: 40px; margin: 20px 0 0;}
.TowardsNaturePositive-slider-row .custom-pagination{ max-width: max-content; width: auto; position: absolute; left: 50%; transform: translate(-50%, -50%); top:50%}





/**==========================
ANIMATION
=========================**/
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

.slide-in {
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  will-change: transform, opacity;
}

.slide-in.left {
  transform: translateX(-50px);
}

.slide-in.right {
  transform: translateX(50px);
}

.slide-in.show {
  opacity: 1;
  transform: translateX(0);
}

  /* Styles for zoom ~125% */
@media (max-width: 1536px) and (min-width: 1400px) {
.banner{height: 100vh !important; max-height: 100vh !important;}
.banner video{height: 100%; width: 100%; object-fit: cover;}
}

  /* Styles for zoom ~150% */
@media (max-width: 1280px) and (min-width: 1200px) {
.banner-caption {
    max-width: 580px;
}
h1{ font-size:55px; }
.cloud{ top:-28vh}
.banner-intro{ max-width: 60vw;}
.banner-intro p{ font-size: 22px; line-height: 1.5;}
.intro-with-shape{margin-top: 30px;}
.tag{ font-size: 18px;}

h2 {font-size: 36px;}
.left-right-col ul li, .left-right-col p { font-size: 16px;}
.left-content-right-img .left-content { padding: 0 3vw 0 6vw;}
.left-content-left-img .left-content { padding: 0 6vw 0 3vw;}

.inforaphic-list .large-info .big-text {font-size: 40px;}
.inforaphic-list .large-info .measures-text {font-size: 24px;}

.can-you-guess-outer .card-back img{ max-width: 60%; object-fit: contain;}
.can-you-guess-outer .card-back h3{ font-size: 22px;}

.TowardsNaturePositive-slider-row .swiper-slide figcaption{ padding: 20px;}
.TowardsNaturePositive-logo-outer ul li .inner-contain {padding: 50px 60px;}
.TowardsNaturePositive-logo-outer ul::after,
.TowardsNaturePositive-logo-outer ul::before{width: 100%; height: 100%; background-size: 55vw auto;}
.TowardsNaturePositive-logo-outer ul::after{ top:-40px}
.common-padding{ padding: 40px 0 !important;}
.inforaphic-list li:nth-of-type(1) figure .info-img{ width: 90%;}
.TowardsNaturePositive-logo-outer ul li .inner-contain p{ font-size: 14px;}
}

@media all and  (max-width:1366px) {
.TowardsNaturePositive-logo-outer ul::before,
.TowardsNaturePositive-logo-outer ul::after{ background-size: cover;}

.TowardsNaturePositive-logo-outer ul li{ min-height: 390px !important;}

.TowardsNaturePositive-logo-outer ul li:nth-of-type(1),
.TowardsNaturePositive-logo-outer ul li:nth-of-type(2),
.TowardsNaturePositive-logo-outer ul li:nth-of-type(3){ background-size: contain !important;}

.TowardsNaturePositive-logo-outer{ margin-top: 80px !important;}
}


@media all and  (max-width:1024px) {
h1{ font-size:55px; }
h2{ font-size:28px;}
.banner{height: 80vh !important; max-height: 80vh !important;}
.banner video{height: 100%; width: 100%; object-fit: cover; object-position: left;}
.banner video::before{ content: ''; position: absolute; top:0; right: 0; left: 0; bottom:0; background-color: rgba(0, 0, 0, 0.15);}

.vector-box{ top:70%; max-width:120px; z-index: 9;}
.banner::before{        background-color: #000; top: 0; bottom: 0; left: 0;right: 0;width: 100%;height: 100%;  animation: none !important;   border-radius: 0;   opacity: 0.3;  transform: inherit !important;}
.banner-caption{ left: 20px; right: 20px; width: calc(100% - 40px); z-index: 9;}

.banner-intro-outer{ z-index: 10;}
.banner-intro p, .TowardsNaturePositive-video p{ font-size: 22px;}
.tag{ font-size: 18px;}
.intro-with-shape {margin-top: 30px;}


.left-content-left-img .left-content,
.left-content-right-img .left-content { padding: 0 0px; margin-top: 30px;}
 .left-right-col { max-width: 100%; flex: 0 0 100%;}
 .left-right-row{ max-width: 70vw; margin:0 auto 10vw;}

.left-right-col ul li span {font-size: 20px;}
.left-right-col ul li, .left-right-col p{ margin-bottom: 10px;}
.banner-intro {max-width: 70vw;}
.left-right-col h2 { margin-bottom: 20px;}

.inforaphic-list .large-info .big-text {font-size: 40px;}
.inforaphic-list .large-info .measures-text {font-size: 24px;}
.inforaphic-list li{ flex: 0 0 100%; max-width:33.33%; margin-bottom: 80px;}
.inforaphic-list li figure .info-img{ max-width: 90%;}
.inforaphic-box{ padding:50px 0 0 !important;}
.inforaphic-list li{ margin: 0 auto 80px;}

.TowardsNaturePositive-slider-outer {max-width: calc(100% - 40%); flex: 0 0 calc(100% - 40%);}
.TowardsNaturePositive-slider-content {max-width: 40%; flex: 0 0 40%; padding-left: 30px;}
.TowardsNaturePositive-logo-outer ul li .inner-contain{padding: 0 20px; text-align: center;}

.can-you-guess-outer .card-back img {max-width: 200px; object-fit: contain;}


.TowardsNaturePositive-logo-outer ul::before,
.TowardsNaturePositive-logo-outer ul::after{ display: none;}
.TowardsNaturePositive-logo-outer ul{ margin: 0 -20px;}
.TowardsNaturePositive-logo-outer ul li{ margin: 0px 0; padding:0 20px;}
.TowardsNaturePositive-logo-outer ul li .inner-contain{ padding: 20px;}
.TowardsNaturePositive-logo-outer ul li .inner-contain p{ margin-bottom: 5px;}

.TowardsNaturePositive-logo-outer ul li {min-height: 325px !important;}

/* .TowardsNaturePositive-logo-outer ul li .inner-contain::before{ content:''; position: absolute; top:0; left: 0; right:0; bottom: 0; border: 5px solid  #059669; border-radius: 50%;} */

.common-padding {padding: 40px 0 !important;}
.TowardsNaturePositive-logo-outer ul{ margin: 0 -20px;}
.TowardsNaturePositive-logo-outer ul li{ padding: 0 20px;}

.TowardsNaturePositive-slider-row .swiper-slide figcaption{ padding: 20px 20px;}
.TowardsNaturePositive-slider-row .swiper-slide{ max-width: inherit !important; flex-direction: inherit !important;}

}


@media all and (max-width: 882px) {
h1{ font-size:40px; }
h2{ font-size:26px;}

.banner-intro {
    max-width: inherit;}
    .banner-caption{ max-width: 440px;}

.left-right-col ul li, .left-right-col p {font-size: 16px;}
.left-right-col h2 {margin-bottom: 20px;}
.can-you-guess-outer .card{max-width:100%}
.can-you-guess-outer .card-back{flex-direction:column}
.can-you-guess-outer .card-back img{width:auto;height:50%;border-radius:1rem 1rem 0 0; top: -10%;}
.can-you-guess-outer .card-back div{padding:8px 12px}

.container-fluid, .container{ padding:0 15px !important;}
.left-content-right-img .left-content,
.left-content-left-img .left-content{padding: 0;  margin-top: 30px;}

.left-right-row{ margin-bottom: 40px;}

.can-you-guess-outer .cards-container{ margin:10vw auto 0 !important;}
.can-you-guess-outer .card-back img{ width: auto;}
.can-you-guess-outer .card { max-width: 50%; }
.TowardsNaturePositive-logo-outer{ max-width:50vw; margin: 0 auto;}


.inforaphic-list li{ flex: 0 0 100%; max-width:412px; margin-bottom: 80px;}

.TowardsNaturePositive-slider-content ,   
.TowardsNaturePositive-slider-outer{ max-width: 100%; flex: 0 0 100%; padding: 0 !important;}
.TowardsNaturePositive-slider-outer{margin: 15vw -15px 0 0px !important; max-width: calc(100% + 15px) !important;}
.TowardsNaturePositive-slider-content{ padding:0 0vw !important;}

.TowardsNaturePositive-outer .common-padding{ padding:40px 0 !important;}
.TowardsNaturePositive-logo-outer ul li{ width: 100%;  flex: 0 0 100%; min-height: 365px !important;}
.TowardsNaturePositive-video video{ margin-top: 0;}
.TowardsNaturePositive-logo-outer ul li {min-height: 420px !important; margin-bottom: 60px;}
.can-you-guess-outer .card-front::before{width: 124px;height: 131px;    }


.TowardsNaturePositive-slider-row .swiper-slide{ align-items: inherit;}
}

@media all and (max-width: 767px) {
    .TowardsNaturePositive-logo-outer ul li {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 20px;
        min-height: 365px !important;
    }
        .TowardsNaturePositive-logo-outer {
        max-width: 320px;}

        .can-you-guess-outer .card{ max-width: 100%;}

    .left-right-row {
        max-width: 100vw;}
}