body {
            overflow-x: hidden;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif!important;
            color: #616971;
        }
        /*-----Top Bar Header----*/
        
        .top-bar {
            background-color: #0d7baa;
            height: 3.8rem;
            padding: .5rem 0;;
        }
        
        .top-bar a {
            color: white;
            text-decoration: none;
            font-size: 1rem;
        }
        /*-----Navigation----*/
      
        .navbar-brand img {
            height: 60px !important;
            width: 80px !important;
        }
        
        .navbar {
            font-size: 1.15rem;
            font-weight: 500;
            letter-spacing: .1rem;
            box-shadow: 0 .5rem .5rem rgba(0, 0, 0, .2);
            z-index: 1;
            background-color: #7aaec4!important;
       
        }
        
        .nav-item {
            padding: .4rem;
            font-size: medium;
            font-weight: bold;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        
        .nav-link {
            color: #5b5555 !important;
        }
        
        .nav-link:hover {
            /* color: #7CB9E8 !important; */
            color: purple !important;
            transform: scale(1.1);
            background-color: white;
            font-family: 'Times New Roman', Times, serif;
            text-transform: uppercase;
        }
        /*-----Carousel----*/
        
        #carouselExampleCaptions {
            box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
        }
        
        .carousel-inner {
            max-height: 38rem!important;
        }
        /*-----Change carousel transition speed----*/
        
        .carousel-item-next,
        .carousel-item-previous,
        .carousel-item-active {
            transition: transform 1.2s ease;
        }
        /*-----Carousel content----*/
        
        .carousel-caption {
            position: absolute;
            top: 54%;
            transform: translateY(-50%);
            text-transform: capitalize;
        }
        /*-----Gutter----*/
        
        .containerGutter {
            background: rgb(243, 223, 223);
        }
        .p-3 a{
            margin: 1%;
            padding: 2%;
        }
        .new{
            font-weight: bold;
        }
        
        .col {
            /* background: lightcyan; */
            flex-wrap: wrap;
        }
        /*----Main page heading---*/
        
        .quote {
            background-color: black;
            color: white;
            opacity: 75%;
        }
        
        .quote:hover {
            background-color: rgb(25, 167, 223);
        }
        /*-----Main page section of three and two column sections----*/
        
        p:hover {
            cursor: pointer;
            background-color: rgb(25, 167, 223);
            color: white;
        }
        
        .btn:hover {
            background-color: darkcyan;
            color: black;
            transform: scale(1.2);
            opacity: 75%;
        }
        
        h4{
            text-transform: capitalize;
            text-decoration-line: underline;
        }
        h5:hover {
            cursor: pointer;
            color: black;
        }
        
        img:hover {
            transform: scale(1.1);
            cursor: pointer;
            transition: 0.1s ease-in-out;
        }
        
        .section1 {
            background-color: rgb(245, 239, 228);
        }

        
        .section2 {
            background-color: rgb(211, 236, 221);
        }
        
        .section3 {
            background-color: rgb(12, 114, 12);
            float: right;
            color: white;
        }
        
        .section4 {
            background-color: rgb(247, 223, 246)!important;
        }

        .news {
            text-align: center;
            font-size: large;
            font-weight: bold;
        }
        
        .col-md-4 img {
            height: 340px;
            width: 200px;
            border-radius: 5%;
            box-shadow: 0 1rem 1rem rgba(32, 32, 32, 0.2);
        }
        
        .my-4 h4 {
            font-size: medium;
            font-weight: bold;
        }
        
        .clearfix img {
            height: 290px;
            width: 350px;
            border-radius: 5%;
            box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
        }
        
        .col-sm-6 img {
            float: left;
            height: 290px;
            width: 350px;
            border-radius: 5%;
            box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
        }
        
        .col img {
            float: left;
            height: 290px;
            width: 260px;
            border-radius: 5%;
            box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
        }
        
        .livelihood {
            text-align: left;
            font-size: medium;
            font-weight: bold;
        }
        .bot {
            text-align: left;
            font-size: medium;
            font-weight: bold;
            background-color: #eef8fd;
        }
        /*-----Main page section of three and two column sections end here----*/
        
        .jumbotron {
            background-color: rgb(177, 173, 173);
            color: white;
            font-weight: bolder;
        }
        /*-----Carousel before footer on SDG----*/
        
        .carousel-inner {
            height: 370px;
            width: 200px;
        }
        
        .btnfooter {
            color: white;
            background-color: green;
            border: green;
            border-radius: 5%;
        }
        
        #foot a:hover {
            background-color: aqua;
        }

        /*---Read more button css starts here..*/

        #bu{
            background-color: black;
            color: white;
            font-size: medium;
            font-weight: bold;
            padding: 1px 7px 1px 7px;
            
        }

        #btp{
            background-color:#012f42;
            color: white;
            padding: 0px 1px 0px 1px;
            margin: 0px 1px 0px 1px;
            font-size: small;
            font-weight: bold;
            border: #012f42;
        }
        
        #btp:hover{
            background-color:#01070e;
            color:cyan;
            font-weight: bolder;
        }

        #ro{
            text-transform: capitalize;
            background-color: rgb(18, 96, 128);
        }
        
        #ro:hover{
            text-transform: capitalize;
            color: white!important;
        }