/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

::root {
  --white: #fff;
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

.header {
    background-color: #ffffff;
    min-height: 40vh;
}
/***************Hero Section(Banner)**************************/

    .left h1  {
      
          font-size: clamp(2.5rem, 5vw + 1rem , 1rem); !important;
          text-align: center;
          line-height: 1.5;
          color: #008a2a;
          font-family: Arial, Helvetica, sans-serif;
          margin: 20px;

    }



/***************SuperScript**************************/

sup {
  font-size: 10px;
}

h1 > sup {
  font-size: 15px;
}
/***************SuperScript**************************/


/***************Body / Content**************************/

        body {
          overflow-x: hidden;

        }

.bss{
  font-size: 9px;
  text-align: center;
}

      .desc span {
          color: #fff;
        }

      .dnd-section {
       padding-left:10%;
       padding-right:10%
      }

      .content > img {
        border-radius:10px
      } 

        .content-s > img {
            border-radius:10px
          } 


    .content {
              text-align: justify !important;   
            }

    .content > span {
      font-size: 16px; 
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5;
      text-align: justify !important;      
    }

      .content-s {
        text-align: center !important;
      }

    .content-wwa{
      text-align: justify !important;
    }

      .content-s h1 {
        text-align: center !important;
        font-family: Arial, Helvetica, sans-serif !important;
        color: #008a2a !important;
        font-size: clamp(2.5rem, 5vw + 1rem , 1rem); !important;
      }
      
        
      .content-s p {
       font-family: Arial, Helvetica, sans-serif !important;
       color: #008a2a !important;
       font-size: 15px !important;
       text-align: center !important;
      }
    
    
      .story {
       font-family: Arial, Helvetica, sans-serif !important;
       color: #008a2a !important;
       font-size: 15px !important;
       text-align: center !important;
      }

      .story-coo {
       font-family: Arial, Helvetica, sans-serif !important;
       color: white !important;
       font-size: 12px !important;
       text-align: center !important;
      }

      .coo-message h1 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 36px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        color: white !important;
      }

      .highlight{
       font-family: Arial, Helvetica, sans-serif !important;
       color: #008a2a !important;
      }
      
      .card-title > h1{
        font-size: 25px;
        text-align: center;
        line-height: 1.5;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
      }

      .title-head > h1{
      font-size: 35px;
      text-align: center;
      line-height: 1.5;
      color: #008a2a;
      font-family: Arial, Helvetica, sans-serif;
      margin: 20px;
    }

    .title-for-card h2 {
          font-size: 25px;
          text-align: center;
          line-height: 1.5;
          color: #008a2a;
          font-family: Arial, Helvetica, sans-serif;
          margin: 20px;
    }



/* Large screens ----------- */
@media screen and (max-width: 1600px) and (min-width: 1500px) {

  .container-hero{
      margin-bottom: 350px;
  }
  
  .text-sdg {
  font-size: 20px !important;
  }
}


/* Moobile screens ----------- */

@media only screen and (max-width : 400px) {
  .card-title > h1{
      font-size: 15px;

    }
}