body {
     font-family: "Poppins", sans-serif;
     background-color: #fff;
     /* background-image: linear-gradient(#f9f9f9 1px, transparent 1px),
                linear-gradient(90deg, #f9f9f9 1px, transparent 1px); */
     background-size: 20px 20px;
 }

 /* Navbar */
 .navbar {
     border-radius: 100px;
     background: #28537D;
     padding: 6.5px 20px;
 }

 .navbar-nav .nav-link {
     color: #fff !important;
     font-weight: 500;
     margin-right: 15px;
 }

 .dropdown-menu.modules {
     border-radius: 4px;
     border: 1px solid rgba(255, 255, 255, 0.10);
     background: #FFF;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
     margin-top: 13px;
     color: #0A2640;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .vl {
     border-left: 1px solid #ffffff8c;
     height: 43px;
     margin: 0px 5px;
 }

 .navbar-brand p small {
     font-size: 10px;
     font-weight: 500;
     font-family: 'Poppins';
 }

 .navbar-brand p {
     line-height: 18px;
 }

 .mt-40px {
     margin-top: 40px;
 }

 .btn-explore {
     background-color: #ff7b2c;
     color: #fff;
     border-radius: 25px;
     font-weight: 600;
     padding: 6px 16px;
     border: none;
 }

 .btn-login {
     background-color: #fff;
     color: #0e3f7c;
     border-radius: 25px;
     font-weight: 600;
     padding: 6px 16px;
     margin-right: 10px;
 }

 /* Hero Section */
 .hero-section {
     padding: 100px 20px;
     text-align: center;
 }

 .heroBox .badge-title {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     text-transform: uppercase;
     border-radius: 12px;
     border: 1px solid #DAEDFF;
     background: #FFF;
     padding: 10px;
     box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10);
 }

 .heroBox h1 {
     color: #28537D;
     font-family: Poppins;
     font-size: 48px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     letter-spacing: -1.08px;
     text-transform: uppercase;
 }


 .heroBox p {
     margin: 20px auto;
     color: #00000080;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .btn-dashboard {
     padding: 8px 20px;
     margin-right: 10px;
     border-radius: 100px;
     border: 1px solid var(--Dark-blue, #2E65A3);
     background: #FFF;
     color: var(--Dark-blue, #2E65A3);
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     text-transform: uppercase;
 }

 .btn-dashboard:hover {
     padding: 8px 20px;
     margin-right: 10px;
     border-radius: 100px;
     border: 1px solid var(--Dark-blue, #2E65A3);
     background: #FFF;
     color: var(--Dark-blue, #2E65A3);
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     text-transform: uppercase;
 }

 .hero-section {
     font-family: "Poppins", sans-serif;
     background-color: #fff;
     /* background-image:
         linear-gradient(#f9f9f9 1px, transparent 1px),
         linear-gradient(90deg, #f9f9f9 1px, transparent 1px); */
     background-size: 20px 20px;
     padding: 100px 20px;
     text-align: center;
 }

 .navbar-dark .navbar-nav .nav-link {
     color: #FFF !important;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }


 .btn.btn-explore {
     border-radius: 100px;
     background: linear-gradient(90deg, #DD9103 0%, #E86933 100%);
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
     color: #FFF !important;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: 34px;
     text-transform: uppercase;
 }

 .btn.focus,
 .btn:focus {
     outline: 0;
     box-shadow: none !important;
 }

 .btn-login.btn-secondary {
     width: 89px;
     height: 44px;
     background: transparent !important;
     border-radius: 24px !important;
     margin-top: 4px;
     box-shadow: none !important;
     border: 1px solid #fff;
     color: #0000008a !important;
 }

 .btn-login.btn-secondary:hover {
     width: 89px;
     height: 44px;
     background: transparent !important;
     border-radius: 24px !important;
     margin-top: 4px;
     box-shadow: none !important;
     border: 1px solid #fff;
     color: #0000008a !important;
 }

 .section-keyFeature {
     background: var(--Dark-blue, #2E65A3);
     padding: 100px;
 }


 .card.lightBox1 h2 {
     color: #000;
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     margin-bottom: 30px;
 }

 .lightBox1 p {
     color: #000;
     font-family: Poppins;
     font-size: 15px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .card.lightBox1 {
     border-radius: 20px;
     background: var(--Grey, #E8E7E7);
     min-height: 600px;
 }

 .countryBox {
     background: var(--Dark-blue, #fff);
     padding: 50px 60px;
 }

 .informationCount h2 {
     color: #FFF;
     font-family: Poppins;
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .largText h1 {
     color: #FFF;
     font-family: Poppins;
     font-size: 40px !important;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .largText a {
     color: #FFF;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-skip-ink: auto;
     text-decoration-thickness: auto;
     text-underline-offset: auto;
     text-underline-position: from-font;
 }

 .border-right.two {
     padding: 0px 0px;
     min-height: 175px;
 }

 .btn.btnPos {
     position: absolute;
     bottom: 30px;
     padding: 11px 29.234px 12px 33.234px;
 }

 .profileText h6 {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     margin-bottom: 0px;
     margin-top: 10px;
 }

 .countryBox .profileText p {
     color: #000000b3;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
     margin-bottom: 0px;
     min-height: 50px;
 }

 .profileBox {
     border-radius: 6px;
     background: #e6e5eb;
     width: 200px;
     height: 210px;
     margin-right: 34px;
 }

 .p-60px {
     padding: 50px 60px !important;
 }

 .profileBox img {
     position: relative;
     bottom: 20px;
     padding: 23px;
     object-fit: cover;
     height: 252px;
 }

 .countryBox h3 {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .countryBox p {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }


 .btn.btn-login {
     border-radius: 100px;
     border: 1px solid #FFF;
     color: #E5F9EE;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: 30px;
     text-transform: uppercase;
     background: transparent;
 }

 .btn-explore-orange {
     padding: 8px 20px;
     border: none;
     border-radius: 100px;
     background: linear-gradient(90deg, #DD9103 0%, #E86933 100%);
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
     color: #FFF;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     text-transform: uppercase;
 }


 .btn-explore-orange:hover {
     padding: 8px 20px;
     border: none;
     border-radius: 100px;
     background: linear-gradient(90deg, #DD9103 0%, #E86933 100%);
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
     color: #FFF;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     text-transform: uppercase;
 }

 .btn-explore-orange:hover {
     background-color: #e36d22;
 }

 .btn.btn-keyfeature {
     color: #FFF;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     background: rgba(255, 255, 255, 0.10);
     font-style: normal;
     font-weight: 600;
     cursor: auto!important;
     line-height: 34px;
     border-radius: 12px;
     border: 0px solid #FFF;
 }

 .section-keyFeature h4 {
     color: #FFF;
     font-family: Poppins;
     font-size: 45px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
 }

 .section-keyFeature p {
     color: #FFF;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
 }

 .section-keyFeature:after {
     position: absolute;
     content: "";
     right: 0;
     background: url('../images/grid-line.png') bottom left no-repeat;
     width: 25%;
     height: 43%;
     z-index: 14;
     opacity: 0.3;
     margin-top: -159px;
 }

 .countrySelect .form-control {
     border-radius: 100px;
     border: 1px solid rgba(118, 118, 118, 0.10);
     background-color: #EAEAEA;
     height: 50px;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding: 7px 33px;
 }

 .btn.focus,
 .btn:focus {
     outline: 0;
     box-shadow: none;
 }

 .countrySelect span {
     position: relative;
     bottom: 38px;
     left: 12px;
 }

 .btn.btn-search {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     border-radius: 100px;
     border: 1px solid var(--Dark-blue, #28537D);
     height: 48px;
 }
 

 .nav-pills.tblCountry .nav-link {
     border-radius: 100px;
     background: rgba(9, 9, 9, 0.05);
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     padding: 10px 16px;
     line-height: normal;
     margin: 0px 0px 10px 10px;
     border: 0px;
 }

 .nav-pills.tblCountry .nav-link.active {
     border-radius: 9999px;
     background: var(--Dark-blue, #28537D);
     color: #fff;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     padding: 10px 16px;
     line-height: normal;
     margin: 0px 0px 10px 10px;
     border: 0px;
 }

 .nav-pills.countrySelection .nav-link.active,
 .nav-pills.countrySelection .show>.nav-link {
     border-radius: 9999px;
     background: var(--Dark-blue, #2E65A3);
     border: 0px;
     text-align: left;
     color: #FFF;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding: 6px;
     margin-bottom: 8px;
 }

 .nav-pills.countrySelection .nav-link {
     border-radius: .25rem;
     text-align: left;
     border: 0px;
     background: transparent;
     color: #808080;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding-left: 5px;
     margin-bottom: 8px;
 }

 .nav-pills.countrySelection .nav-link.active span {
     background: #fff;
     padding: 3px 11px;
     border-radius: 50%;
     color: var(--Dark-blue, #2E65A3);
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .nav-pills.countrySelection .nav-link span {
     padding: 3px 11px;
     color: #fff;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     border-radius: 9999px;
     background: var(--Dark-blue, #2E65A3);
 }



 button:focus {
     outline: 1px dotted;
     outline: 0px auto -webkit-focus-ring-color;
 }

 .climate-card {
     position: relative;
     background: linear-gradient(135deg, #4a89c6 50%, #2f69a3 50%);
     color: white;
     padding: 24px;
     border-radius: 16px;
     width: 100%;
     height: 440px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     z-index: 99;
 }

 /* .climate-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 } */

 .section-keyFeature .card-description {
     color: #FFF;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding-top: 50px;
 }

 .card-title {
     color: #FFF;
     font-family: Poppins;
     font-size: 35px;
     font-style: normal;
     font-weight: 600;
 }

 .boxCountry .title {
     color: var(--Dark-blue, #2E65A3);
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-transform: uppercase;
 }

 .boxCountry h2 {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 35px;
     font-style: normal;
     font-weight: 600;
     line-height: 52.5px;
 }

 .btn.btn-explore-new {
     border-radius: 100px;
     background: var(--blue-gradient, linear-gradient(90deg, #2A547A 0%, #1797A5 100%));
     color: #FFF !important;
     text-align: center;
     font-family: Poppins;
     font-size: 15px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding: 11px 29.234px 12px 27.234px;
     width: fit-content;
 }

 .boxCountry p {
     color: #7C7C7C;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
 }

 .lightBox {
     border-radius: 20px !important;
     background: rgba(40, 83, 125, 0.10);
     padding: 10px;
 }

 .lightBox h3 {
     color: #000;
     font-family: Poppins;
     font-size: 22px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: left;
 }

 .lightBox p {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 16px;
     /* 133.333% */
     text-align: left;
 }

 .box {
     width: 40px;
     height: 40px;
     background-color: rgba(40, 83, 125, 0.10);
     ;
 }

 .section-keyFeatureNew {
     padding: 50px 60px;
     background: var(--green-gradient, linear-gradient(90deg, #1797A4 0%, #2BAC7A 100%));
 }

 .section-keyFeatureNew h4 {
     color: #FFF;
     font-family: Poppins;
     font-size: 45px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
 }

 .section-keyFeatureNew p {
     color: #FFF;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
 }

 .climate-card.one {
     position: relative;
     /* background: linear-gradient(135deg, #4a89c6 50%, #2f69a3 50%); */
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.10);
     color: white;
     padding: 24px;
     border-radius: 16px;
     width: 100%;
     height: 410px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     z-index: 99;
 }

 .section-keyFeatureNew .card-description {
     color: #FFF;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding-top: 20px;
 }

 .countryBox.others {
     background: var(--Dark-blue, #fff);
     padding: 50px 60px;
     background: var(--Grey, #E8E7E7);
 }

 .btn.btn-resources {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     cursor: auto!important;
     width: 134px;
     border-radius: 12px;
     background: rgba(0, 0, 0, 0.10);
 }

 .card.card-gap {
     border-radius: 20px;
     background: var(--blue-gradient, linear-gradient(90deg, #2A547A 0%, #1797A5 100%));
     min-height: 600px;
     margin-bottom: 10px;
 }

 .mt-16px {
     margin-top: 50px;
 }

 .card.card-gap1 {
     border-radius: 20px;
     background: var(--Organge-gradient, linear-gradient(90deg, #DB8F23 0%, #E6693C 100%));
     min-height: 600px;
     margin-bottom: 10px;
 }

 .countryDiv h6 {
            color: #2B2B2B;
            font-size: 14px;
            font-style: normal;
            white-space: normal;
            font-weight: 500;
            text-transform: capitalize;
            line-height: normal;
            text-align: start;
        }

 .card.card-gap img {
     min-height: 342px;
     object-fit: contain;
     border-radius: 20px;
 }

 .card.card-gap1 img {
     min-height: 363px;
     object-fit: contain;
     border-radius: 20px;
 }


 .mt-60px {
     margin-top: 60px;
 }

 .card-gap h3 {
     color: #FFF;
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     text-align: left;
 }

 .card-gap p {
     color: #FFF;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
 }

 .card-gap1 h3 {
     color: #FFF;
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     text-align: left;
 }

 .card-gap1 p {
     color: #FFF;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
 }


 .card.card-smallCard h4 {
     color: var(--Dark-blue, #28537D);
     font-size: 26px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     text-align: left;
 }

 .card.card-smallCard h4 sub {
     color: #000;
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     text-align: left;
 }

 .card.card-smallCard p {
     color: #000;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
 }

 .btn.btn-open {
     color: #3F7E44;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     border-radius: 100px;
     background: #FFF;
 }

 .card.card-smallCard {
     border-radius: 10px;
     border: 1px solid rgba(40, 83, 125, 0.20);
     background: #FFF;
 }

 .countryBox.others h3 {
     color: #000;
     text-align: left;
     font-family: Poppins;
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .owl-carousel .owl-stage {
     display: flex;
 }

 .owl-carousel .owl-item {
     display: flex;
     flex: 1 0 auto;
 }

 .owl-carousel .thumbnail {
     display: flex;
     flex-direction: column;
     margin: 0 5px;
     background: transparent;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: none;
     transition: all 0.3s ease;
 }

 .btn.btn-border {
     color: var(--Dark-blue, #28537D);
     text-align: center;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 600;
     line-height: 25px;
     /* 242.857% */
     text-transform: uppercase;
     border-radius: 100px;
     border: 1px solid var(--Dark-blue, #28537D);
     width: fit-content;
 }

 /* .owl-carousel .thumbnail:hover {
     transform: translateY(-5px);
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
 } */

 .owl-carousel .thumbnail .caption {
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
     padding: 10px 0;
 }

 .owl-carousel .thumbnail .caption .flex-text {
     flex-grow: 1;
 }

 .owl-carousel .thumbnail img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .thumbnail .caption h4 {
     color: #000;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .thumbnail .caption p {
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     text-align: left;
 }

 .owl-nav {
     text-align: center;
     margin-top: 15px;
 }

 .owl-nav button {
     background: #007bff !important;
     color: #fff !important;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     font-size: 20px !important;
     line-height: 40px;
     margin: 0 5px;
     border: none;
     display: none !important;
 }

 .footer {
     background: #28537d !important;
     width: 100%;
     border: 0px !important;
     border-radius: 0px;
 }

 .card.footer .card-footer {
     border-radius: 0px !important;
 }

 .p20px {
     padding: 30px 0px;
 }

 .subfooter {
     background: #174a7c !important;
     border-radius: 0px !important;
 }

 .card-footer {
     padding: 0px 16px !important;
     background-color: rgba(0, 0, 0, .03);
     border-top: 1px solid rgba(0, 0, 0, .125);
 }

 .card.footer {
     border-radius: 0px !important;
 }

 .form-control:focus {
     color: #495057;
     outline: 0;
     box-shadow: none;
 }

 .subfooter p {
     font-size: 12px;
     color: #fff;
 }


 .subfooter p a {
     font-size: 12px;
     color: #fff !important;
 }

 .footer_ul li {
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 40px;
     color: #ffffff;
 }

 .footer_ul li a {
     padding-left: 0px;
     font-family: "Open Sans";
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 40px;
     color: #ffffff !important;
     background: #2f5981;
     padding: 8px 8px 8px 8px;
     border-radius: 4px;
 }

 .subfooter ul li a {
     font-size: 12px;
     color: #fff !important;
     margin: 0px 10px;
 }

 .mt-57px {
     margin-top: 57px;
 }

 .btn.btn-apply {
     border-radius: 100px;
     background: #2E65A3;
     color: var(--white, #FFF);
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     padding: 10px;
     width: 113px;
 }

.btn.btn-edit {
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #EAF0F6;
    padding: 14px 70px;
    white-space: nowrap;
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

 a.btn.btn-edit1 {
     border-radius: 100px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: #EAF0F6;
     padding: 13.5px 10px;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }


 .sdgIndexBox {
     border-radius: 10px;
     background: #4C9F74;
     padding: 12px;
     color: #FFF;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 .sdgIndexBox p span {
     color: #FFF;
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }



 .informationCount {
     padding: 50px 60px;
     background: #22AD7A;
 }



 .informationCount h1 {
     color: #FFF;
     font-family: Poppins;
     font-size: 50px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .informationCount p {
     color: #FFF;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .border-right.one {
     padding: 0px 20px;
     min-height: 175px;
 }

 .informationBox {
     position: relative;
     min-height: 600px;
     overflow: hidden;
 }

 .informationBox {
     padding: 50px 60px;
 }

 .informationBox::before {
     content: "";
     position: absolute;
     inset: 0;
     /* top, right, bottom, left = 0 */
     background-image: url("../images/green-kenya-map.svg");
     background-position: right;
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0.1;
     /* only background transparent */
     z-index: 0;
 }

 .informationBox .container {
     position: relative;
     z-index: 1;
     /* keep cards above background */
 }




 .informationBox.senegal {
     position: relative;
     min-height: 600px;
     overflow: hidden;
 }

 .informationBox.senegal {
     padding: 50px 60px;
 }

 .informationBox.senegal::before {
     content: "";
     position: absolute;
     inset: 0;
     /* top, right, bottom, left = 0 */
     background-image: url("../images/green-senegal-map.svg");
     background-position: right;
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0.1;
     /* only background transparent */
     z-index: 0;
 }

 .informationBox.senegal .container {
     position: relative;
     z-index: 1;
     /* keep cards above background */
 }



 .informationBox.zambia {
     position: relative;
     min-height: 600px;
     overflow: hidden;
 }

 .informationBox.zambia {
     padding: 50px 60px;
 }

 .informationBox.zambia::before {
     content: "";
     position: absolute;
     inset: 0;
     /* top, right, bottom, left = 0 */
     background-image: url("../images/zambia-country.svg");
     background-position: right;
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0.1;
     /* only background transparent */
     z-index: 0;
 }

 .informationBox.zambia .container {
     position: relative;
     z-index: 1;
     /* keep cards above background */
 }




 .informationBox.srilanka {
     position: relative;
     min-height: 600px;
     overflow: hidden;
 }

 .informationBox.srilanka {
     padding: 50px 60px;
 }

 .informationBox.srilanka::before {
     content: "";
     position: absolute;
     inset: 0;
     /* top, right, bottom, left = 0 */
     background-image: url("../images/srilanka-country.svg");
     background-position: right;
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0.1;
     /* only background transparent */
     z-index: 0;
 }

 .informationBox.srilanka .container {
     position: relative;
     z-index: 1;
     /* keep cards above background */
 }

 .btn.btn-newsletter {
     border-radius: 100px;
     border: 1px solid #F8FAFB;
     color: #F8FAFB;
     text-align: center;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .bootstrap-select>.dropdown-toggle {
     border-radius: 100px !important;
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     position: relative;
     width: 100%;
     text-align: right;
     white-space: nowrap;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     padding: 13px 16px;
 }


 .informationBox {
     position: relative;
     min-height: 600px;
     overflow: hidden;
 }

 .informationBox {
     padding: 50px 60px;
 }

 .informationBox::before {
     content: "";
     position: absolute;
     inset: 0;
     /* top, right, bottom, left = 0 */
     background-image: url("../images/green-kenya-map.svg");
     background-position: right;
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0.1;
     /* only background transparent */
     z-index: 0;
 }

 .informationBox .container {
     position: relative;
     z-index: 1;
     /* keep cards above background */
 }


 .detailBox h5 span {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .section-title {
     color: #000;
     font-family: 'Poppins';
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }


 .table.na-table tbody tr td {
     font-size: 14px;
 }

 .card.detailBox {
     border-radius: 6px;
     background: #EFF6FA;
     margin-bottom: 10px;
     min-height: 185px;
     max-width: 295px;
 }

 .detailBox .card-body {
     padding: 10px !important;
 }

 .detailBox h5 {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .detailBox h6 {
     color: var(--Dark-blue, #28537d80);
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-transform: uppercase;
 }

 .detailBox p {
     color: #00000099;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .mh-215px {
     min-height: 215px;
 }

 .btn.btn-statical {
     border: brown;
     border-radius: 12px;
     background: rgba(40, 83, 125, 0.10);
     color: var(--Dark-blue, #28537D);
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     padding: 0 16px;
 }

 .btn.btn-key {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     cursor: auto!important;
     font-weight: 600;
     line-height: 34px;
     border-radius: 12px;
     background: rgba(40, 83, 125, 0.10);
 }

 .btn.btn-overview {
    color: #fff;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
     cursor: auto!important;
    font-weight: 600;
    line-height: 34px;
    width: 134px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
}

 .title {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 50px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
     /* 120% */
 }

 /* .owl-nav button:hover {
     background: #0056b3 !important;
 } */

 /* .section-keyFeatureNew:after {
     position: absolute;
     content: "";
     right: 0;
     background: url('../images/grid-line.png') bottom left no-repeat;
     width: 25%;
     height: 43%;
     z-index: 14;
     opacity: 0.3;
     margin-top: -159px;
 } */

 /* Container */
 /* .process-flow {
     position: relative;
     padding: 60px 15px;
 } */

 /* Connecting line */
 .process-line {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 2px;
     background: #d9dee8;
     z-index: 1;
 }

 /* Card wrapper */
 .process-step {
     position: relative;
     flex: 1 1 200px;
     max-width: 230px;
     margin: 0 10px;
     text-align: center;
 }


 /* Card */
 .process-card {
     padding: 16px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
     position: relative;
     z-index: 2;
     min-height: 120px;
     text-align: left;
     border-radius: 12px;
     border: 1px solid rgba(46, 101, 163, 0.10);
     border-radius: 12px;
     background: #2E5F44;
 }

 .process-card.primary {
     background-color: #2f4e7a;
     color: #fff;
 }

 .process-card h5 {
     font-weight: 600;
     font-size: 1rem;
     margin-bottom: 10px;
 }

 .process-card p {
     color: #fff;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-top: 10px;
     text-align: left;
     margin-bottom: 0px;
     /* min-height: 35px; */
 }

 .process-card h2 {
     color: #fff;
     font-family: Poppins;
     font-size: 34px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }


 .btn.btn-overview {
     color: #fff;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     width: 134px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.10);
 }

 .goog-te-gadget .goog-te-combo {
     margin: 0px 0 !important;
     border-radius: 100px;
     border: 1px solid #FFF;
     /* background-color: transparent; */
     padding: 10px;
 }

 .main-title {
     color: #fff;
     font-family: Poppins;
     font-size: 56px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     /* 60.714% */
 }

 .timeline-section {
     background: #fff;
     position: relative;
 }

 /* dotted center line */
 .timeline-line {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 2px;
     border-top: 2px dotted #b0bec5;
     z-index: 1;
 }

 /* wrapper */
 .timeline-wrapper {
     position: relative;
     z-index: 2;
 }

 /* card container */
 .timeline-card {
     width: 18%;
     position: relative;
 }

 /* connector lines */
 .timeline-card::before {
     content: "";
     position: absolute;
     left: 50%;
     width: 2px;
     height: 60px;
     background: #cfd8dc;
     transform: translateX(-50%);
     z-index: 0;
 }

 .timeline-card.top::before {
     top: 36%;
 }

 .timeline-card.bottom::before {
     bottom: 37%;
 }

 /* icon circle */
 .icon-circle {
     width: 60px;
     height: 60px;
     background: #e7eff4;
     border-radius: 50%;
     border: 2px solid #b0bec5;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     top: 45%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 3;
 }

 .icon-circle img {
     width: 28px;
     height: 28px;
     object-fit: contain;
 }

 /* cards */
 .timeline-card .card {
     border: none;
     padding: 12px;
     min-height: 200px;
     border-radius: 3px;
     background: rgba(40, 83, 125, 0.10);
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10) !important;
 }

 .timeline-card .card h6 {
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 600;
     line-height: 28px;
     text-align: left;
 }

 .timeline-card .card p {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 16px;
     margin-top: 8px;
     margin-bottom: 0px;
     text-align: left;
 }

 /* highlighted first card */
 .timeline-card .card.active {
     background: #174c8f;
     color: #fff;
 }

 .timeline-card .card.active h6,
 .timeline-card .card.active p {
     color: #fff;
 }

 /* positioning cards */
 .timeline-card.top .card {
     margin-bottom: 120px;
 }

 .timeline-card.bottom .card {
     margin-top: 411px;
 }


 .sdg-card {
     position: relative;
     width: 100%;
     height: 100%;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
     background: url("../images/banner-sdg.png") center/cover no-repeat;
     color: #fff;
     text-align: left;
     display: flex;
     align-items: flex-end;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .sdg-card1 {
     position: relative;
     width: 100%;
     min-height: 267px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
     background: url("../images/banner-sdg1.png") center/cover no-repeat;
     color: #fff;
     text-align: left;
     display: flex;
     align-items: flex-start;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .sdg-card2 {
     position: relative;
     width: 100%;
     height: 122px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
     background: url("../images/banner-sdg2.png") center/cover no-repeat;
     color: #fff;
     text-align: left;
     display: flex;
     align-items: flex-start;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .sdg-card3 {
     position: relative;
     width: 100%;
     min-height: 272px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
     background: url("../images/banner-sdg3.png") center/cover no-repeat;
     color: #fff;
     text-align: left;
     display: flex;
     align-items: flex-start;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .csgConceptBox {
     background: var(--blue-gradient, linear-gradient(90deg, #2A547A 0%, #1797A5 100%));
     padding: 50px 60px;
 }

 .process-card.three {
     padding: 16px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
     position: relative;
     z-index: 2;
     min-height: 120px;
     text-align: left;
     border-radius: 12px;
     border: 1px solid rgba(46, 101, 163, 0.10);
     border-radius: 12px;
     background: #22AD7A;
 }

 /* .sdg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
} */

 .overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.65));
 }

 .card-content {
     position: relative;
     z-index: 2;
     padding: 20px;
 }

 .card-content h1 {
     margin: 0;
     color: #FFF;
     font-family: Poppins;
     font-size: 30px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .card-content h1 span {
     color: #FFF;
     font-family: Poppins;
     font-size: 20px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .card-content h3 {
     color: #FFF;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .card-content p {
     color: #FFF;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }


 .conceptBox {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 10px;
     min-height: 485px;
     cursor: pointer;
 }

 .concept-card {
     flex: 1 1 calc(20% - 20px);
     padding: 20px;
     text-align: center;
     transition: all 0.3s ease;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.10);
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
     border-radius: 10px;
 }

 .concept-card:hover {
     border-radius: 10px;
     background: var(--Yellow, #DD9103);
     box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
     flex: 1 1 calc(20% - 20px);
     padding: 20px;
     text-align: center;
     transition: all 0.3s ease;
 }

 .concept-card .iconBox {
     border-radius: 8px;
     background: rgb(255 255 255 / 10%);
     width: 100px;
     height: 100px;
 }

 .concept-card h3 {
     color: #FFF;
     font-family: Poppins;
     font-size: 19px;
     font-style: normal;
     font-weight: 600;
     line-height: 28px;
     text-align: left;
 }

 .concept-card p {
     color: #FFF;
     font-family: Poppins;
     font-size: 11px;
     font-style: normal;
     font-weight: 400;
     line-height: 16px;
     text-align: left;
     /* 133.333% */
 }

 .pt-80px {
     padding-top: 80px;
 }

 .video-wrapper {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     background: #000;
 }

 .video-thumbnail,
 .video-player {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .video-player {
     display: none;
 }

 .custom-play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.25);
     box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15),
         0 4px 20px rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(5px);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     z-index: 10;
 }

 /* .custom-play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
  } */

 .play-icon {
     width: 0;
     height: 0;
     border-left: 22px solid white;
     border-top: 14px solid transparent;
     border-bottom: 14px solid transparent;
     margin-left: 6px;
 }

 .min-h118px {
    min-height: 110px;
 }

 

 .pause-icon {
     width: 18px;
     height: 26px;
     border-left: 6px solid white;
     border-right: 6px solid white;
 }

 .custom-play-button::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     /* animation: pulse 1.8s infinite ease-out; */
     z-index: -1;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 0.7;
     }

     100% {
         transform: scale(1.6);
         opacity: 0;
     }
 }

 .informationBoxKey {
     background-color: #fff;
     padding: 50px 60px;
 }

 .modal-title {
     margin-bottom: 0;
     line-height: 1.5;
     font-size: 16px;
 }

 .modal-content {
     border-radius: 20px;
     background: #FFF;
     font-size: 14px;
 }

 .btn-close {
     width: 36px;
     height: 32px;
     background-color: #808080;
     /* red background */
     border-radius: 50%;
     color: white;
     font-size: 20px;
     line-height: 32px;
     text-align: center;
     border: none;
 }

 .footer-top {
     background-color: #f8fafb!important;
     background-image: url('../images/Vector 1.svg');
     background-size: cover;
     width: 100%;
     padding: 45px!important;
 }

 .breadcrumb-item+.breadcrumb-item {
     padding-left: .5rem;
     color: #000;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .ccs-title {
     color: #000;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;

 }

 .tbl_ccs tr th {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 14px !important;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     border-radius: 10px;
     background: #F8FAFB;
     border-bottom: 0px !important;
     border-top: 0px;
 }

 .project-title {
     color: #000;
     font-family: Poppins;
     font-size: 32px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .btn-close::before {
     content: "×";
     font-weight: bold;
 }

 .btn-close:hover {
     background-color: #808080;
     transform: scale(1.1);
     transition: 0.2s;
 }


 .title-black {
     color: #000;
     font-family: Poppins;
     font-size: 50px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
     /* 120% */
 }


 .detailBoxFeature {
     border-radius: 20px;
     background: #F0F0F0;
     min-height: 525px;
 }

 .textImg span img {
     position: absolute;
     top: 29px;
     left: 55px;
 }

 #label_sum_beneficiaries {
     color: #fff;
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .flex-item span img {
     position: relative;
     right: 80px;
     top: -5px;
     height: 50px;
 }

 .text-summary {
     color: #000;
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: 35px;
 }

 .text-end span {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 10px;
     min-height: 100px;
 }

 .chart-title {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     margin-bottom: 10px;
     min-height: 50px;
 }

 #tbody-project td {
     font-size: 14px;
     vertical-align: middle;
 }

 #table-project thead tr th {
     font-size: 14px;
     white-space: nowrap;
 }

 .dataTables_wrapper .dataTables_info {
     clear: both;
     float: left;
     padding-top: .755em;
     font-size: 14px;
 }

 .dataTables_wrapper .dataTables_paginate {
     float: right;
     text-align: right;
     padding-top: .25em;
     font-size: 14px;
 }

 .allProjects h5 {
     color: #000;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .filter-tab-box .nav-tabs .nav-link.active {
     color: white;
     background: #28537d !important;
     border-radius: 8px;
 }

 .main-card h6 {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .main-card p {
     color: var(--Orange, #E86933);
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 /* .allProjects h6 {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
 } */

 /* .allProjects p {
    color: #000;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
 } */

 .font-12px {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .allProjectsHeight {
     min-height: 670px;
 }

 .allProjectsHeight h6 {
     color: #000;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .card-number h5 {
     color: var(--Yellow, #DD9103);
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .search-box span img {
     position: relative;
     left: 189px;
     bottom: 32px;
 }

 .search-box {
     margin-top: 26px;
 }

 .btn.btn-adaptation {
     border-radius: 100px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: #FFF;
     color: var(--Dark-blue, #28537D) !important;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 12px;
     padding: 7px 21px;

 }

 .btn.btn-mitigation {
     border-radius: 100px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: #FFF;
     color: var(--Dark-blue, #28537D) !important;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 12px;
     padding: 7px 21px;

 }

 .btn.btn-crosscutting {
     border-radius: 100px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: #FFF;
     color: var(--Dark-blue, #28537D) !important;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 12px;
     padding: 7px 21px;
 }

 .filter-cards h5 {
     color: #000;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .form-control.input-add-project {
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: var(--white, #FFF);
     height: 48px;
     padding: 8px 10px;
     color: #000;
     text-align: left;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .bootstrap-select>.dropdown-toggle.bs-placeholder,
 .bootstrap-select>.dropdown-toggle.bs-placeholder:active,
 .bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
 .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
     border-radius: 8px !important;
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     background: var(--white, #FFF);
     height: 48px;
     padding: 14px 21px;
     color: #8a9198;
     text-align: left;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
     width: 100%;
 }

 .btn.btn-active {
     background: #52a97d1a;
     border-radius: 4px;
     font-size: 14px;
 }

 .bootstrap-select.show-tick .dropdown-menu li a span.text {
     margin-right: 34px;
     font-size: 12px;
 }

 .bootstrap-select .dropdown-menu li a span.text {
     display: inline-block;
     font-size: 12px;
 }

 .line-after {
     display: flex;
     align-items: center;
     font-size: 1.2rem;
     font-weight: 600;
     color: #333;
 }

 .line-after span {
     white-space: nowrap;
     /* prevents text from breaking */
 }

 .line-after::after {
     content: "";
     flex-grow: 1;
     height: 1px;
     background-color: #E86933;
     margin-left: 10px;
     opacity: 0.5;
 }

 .bs-actionsbox .btn-group button {
     width: 50%;
     font-size: 12px;
 }

 .datepicker .datepicker-switch {
     width: 145px;
     font-size: 12px;
 }

 .datepicker table tr td span {
     display: block;
     width: 23%;
     height: 54px;
     line-height: 54px;
     float: left;
     font-size: 12px !important;
     margin: 1%;
     cursor: pointer;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
 }

 .bootstrap-select>.dropdown-toggle {
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     position: relative;
     width: 100%;
     white-space: nowrap;
     border-radius: 8px !important;
     background: var(--white, #FFF);
     height: 48px;
     padding: 12px 14px;
     color: #000;
     text-align: left;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .btn.btn-viewmore {
     border-radius: 100px;
     background: var(--blue-gradient, linear-gradient(90deg, #2A547A 0%, #1797A5 100%));
     font-size: 14px;
     text-transform: capitalize;
     margin-top: 13px;
     color: #fff;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
     margin-top: 40px;
 }

 .tab_card_bg {
     filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.15));
     border-radius: 6px;
     border: 0px !important;
     margin-bottom: 15px !important;
     min-height: 580px;
 }

 .search-box .form-control {
     border-radius: 100px;
 }

 .card-number p {
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 .textImg1 span img {
     position: absolute;
     top: 29px;
     left: 84px;
     height: 40px;
 }

 .detailBoxFeature h6 {
     color: #EA4335;
     font-family: Poppins;
     font-size: 30px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }



 .detailBoxFeature h5 {
     color: #000;
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .detailBoxFeature p {
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     width: 80%;
 }

 .detailBoxFeature h4 {
     color: #000;
     font-family: Poppins;
     font-size: 34px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
     text-transform: uppercase;
     position: absolute;
     bottom: 15px;
 }

 .mh170px {
     min-height: 170px;
 }

 .mh200px {
     min-height: 230px;
 }

 .nav-pills.tblOutlook .nav-link {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     padding: 10px 16px;
     border-radius: 100px;
     border: 1px solid rgba(0, 0, 0, 0.10) !important;
     background: #FFF;
     line-height: normal;
     margin: 0px 0px 10px 10px;
 }


 .nav-pills.tblOutlook .nav-link.active {
     border-radius: 9999px;
     background: var(--Dark-blue, #28537D);
     color: #fff;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     padding: 10px 16px;
     line-height: normal;
     margin: 0px 0px 10px 10px;
     border: 0px;
 }

 .font-14px {
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .bg-lightBlue {
     background: #F8FAFB !important;
 }

 .border-radius-10 {
     border-radius: 10px;
 }

 label {
     display: inline-block;
     margin-bottom: .5rem;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .form-control.circle {
     border-radius: 100px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     height: 50px;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .impactBox h1 {
     color: #000;
     font-family: Poppins;
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
     /* 187.5% */
 }

 .impactBox p {
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .stressBox {
     border-radius: 10px;
     background: #F8FAFB;
 }

 .stressBox h6 {
     color: #000;
     text-align: left;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 .stressBox p {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-top: 10px;
     margin-bottom: 0px;
 }

 .flex-item {
     flex: 1 1 20%;
     /* 5 items per row on large screens */
     /* max-width: 20%; */
     box-sizing: border-box;
 }

 /* .flex-item img {
     width: 80px;
     height: 80px;
     object-fit: contain;
 } */

 .flex-item p {
     color: #000;
     text-align: center;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-top: 10px;
     margin-bottom: 0px;
 }



 .progress-active-1 {
     background: #28a83d !important;
     border-radius: 12px !important;
 }

 .progress-active-2 {
     background: #80c32b !important;
     border-radius: 12px !important;
 }

 .progress-active-3 {
     background: #ffdb0f !important;
     border-radius: 12px !important;
 }

 .progress-active-4 {
     background: #ef7e08 !important;
     border-radius: 12px !important;
 }

 .progress-active-5 {
     background: #e22d03 !important;
     border-radius: 12px !important;
 }

 .progress-line-1 {
     height: 15px;
     width: 115px;
     background: rgba(0, 0, 0, 0.1);
     border-radius: 12px !important;
 }



 .font-weight-500 {
     font-weight: 500px !important;
 }

 .follow-link .pe-3 {
     margin-bottom: 10px;
 }

 .progress-circle {
     position: relative;
     display: inline-block;
     margin: 1rem;
     width: 110px;
     height: 110px;
     border-radius: 50%;
     background-color: #ebebeb;
 }

 .progress-circle:after {
     content: "";
     display: inline-block;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     -webkit-animation: colorload 2s;
     animation: colorload 2s;
 }

 .progress-circle span {
     font-size: 1rem;
     color: #8b8b8b;
     position: absolute;
     left: 41%;
     top: 38%;
     display: block;
     width: 85px;
     height: 85px;
     font-weight: bold;
     line-height: 78px;
     margin-left: -32px;
     margin-top: -30px;
     text-align: center;
     border-radius: 50%;
     background: #fff;
     z-index: 1;
 }

 .progress-circle span:after {
     content: "%";
     font-weight: 600;
     color: #8b8b8b;
 }

 .progress-circle.progress-0:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(90deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-1:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(93.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-2:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(97.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-3:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(100.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-4:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(104.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-5:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(108deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-6:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(111.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-7:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(115.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-8:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(118.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-9:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(122.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-10:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(126deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-11:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(129.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-12:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(133.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-13:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(136.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-14:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(140.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-15:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(129.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-16:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(133.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-17:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(136.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-18:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(140.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-19:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(144deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-20:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(151.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-21:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(158.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-22:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(161.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-23:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(165.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-24:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(169.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-25:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(180deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-26:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(183.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-27:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(187.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-28:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(190.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-29:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(194.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-30:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(198deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-31:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(201.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-32:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(205.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-33:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(208.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-34:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(212.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-35:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(216deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-40:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(234deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-36:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(219.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-37:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(223.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-38:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(226.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-39:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(230.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-41:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(237.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-42:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(241.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-43:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(244.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-44:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(248.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-45:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(252deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-46:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(255.6deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-47:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(259.2deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-48:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(262.8deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-49:after {
     background-image: linear-gradient(90deg,
             #ebebeb 50%,
             transparent 50%,
             transparent),
         linear-gradient(266.4deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-50:after {
     background-image: linear-gradient(-90deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-51:after {
     background-image: linear-gradient(-86.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-52:after {
     background-image: linear-gradient(-82.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-53:after {
     background-image: linear-gradient(-79.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-54:after {
     background-image: linear-gradient(-75.6deg,
             #0073b0ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #0073b0ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-55:after {
     background-image: linear-gradient(-72deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-56:after {
     background-image: linear-gradient(-68.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-57:after {
     background-image: linear-gradient(-64.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-58:after {
     background-image: linear-gradient(-61.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-59:after {
     background-image: linear-gradient(-57.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-60:after {
     background-image: linear-gradient(-54deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-61:after {
     background-image: linear-gradient(-50.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-62:after {
     background-image: linear-gradient(-46.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-63:after {
     background-image: linear-gradient(-43.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-64:after {
     background-image: linear-gradient(-39.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-65:after {
     background-image: linear-gradient(-36deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-66:after {
     background-image: linear-gradient(-32.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-67:after {
     background-image: linear-gradient(-28.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-68:after {
     background-image: linear-gradient(-25.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-69:after {
     background-image: linear-gradient(-21.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-70:after {
     background-image: linear-gradient(-18deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-71:after {
     background-image: linear-gradient(-14.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-72:after {
     background-image: linear-gradient(-10.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-73:after {
     background-image: linear-gradient(-7.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-74:after {
     background-image: linear-gradient(-3.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-75:after {
     background-image: linear-gradient(0deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-76:after {
     background-image: linear-gradient(3.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-77:after {
     background-image: linear-gradient(7.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-78:after {
     background-image: linear-gradient(10.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-79:after {
     background-image: linear-gradient(14.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-80:after {
     background-image: linear-gradient(18deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-81:after {
     background-image: linear-gradient(21.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-82:after {
     background-image: linear-gradient(25.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-83:after {
     background-image: linear-gradient(28.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-84:after {
     background-image: linear-gradient(32.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-85:after {
     background-image: linear-gradient(36deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-86:after {
     background-image: linear-gradient(39.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-87:after {
     background-image: linear-gradient(43.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-88:after {
     background-image: linear-gradient(46.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-89:after {
     background-image: linear-gradient(50.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-90:after {
     background-image: linear-gradient(54deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-91:after {
     background-image: linear-gradient(57.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-92:after {
     background-image: linear-gradient(61.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-93:after {
     background-image: linear-gradient(64.8deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-94:after {
     background-image: linear-gradient(68.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-95:after {
     background-image: linear-gradient(72deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-96:after {
     background-image: linear-gradient(75.6deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-97:after {
     background-image: linear-gradient(79.2deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-98:after {
     background-image: linear-gradient(82.8deg,
             #0073b0ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #0073b0ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-99:after {
     background-image: linear-gradient(86.4deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .progress-circle.progress-100:after {
     background-image: linear-gradient(90deg,
             #66b8ff 50%,
             transparent 50%,
             transparent),
         linear-gradient(270deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);
 }

 .guage-title {
     color: #000;
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-align: center;
     margin-top: 14px !important;
 }

 .table.tbl_border_none tbody tr td {
     font-size: 14px;
     vertical-align: middle;
     padding: 10px;

 }

 .table.tbl_border_none {
     overflow-x: hidden;
 }


 .small-bold {
     font-weight: 600;
 }

 .sub-title {
     font-size: 14px;
     font-weight: 600;
 }

 .Legend-colorBox {
     width: 20px;
     height: 20px;
     display: inline-block;
 }

 .prt-box {
     position: relative;
     top: -3px;
     font-size: 14px;
 }

 .progress {
     display: -ms-flexbox;
     display: flex;
     height: 10px;
     overflow: hidden;
     line-height: 0;
     font-size: .75rem;
     background-color: #e9ecef;
     border-radius: .25rem;
 }

 .modal-content {
     border-radius: 20px!important;
     background: #FFF!important;
 }



 .p31px {
     padding: 25px 45px;
 }


 .login-image-fit .card {
     border-radius: 20px;
     background: #FFF;
 }

 .login-image-fit h6 {
     color: var(--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 18px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }



 .loginList .list-group-item {
     position: relative;
     display: block;
     padding: .75rem 1.25rem;
     background-color: #fff;
     border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 28px;
     border: 0px;
 }

 .nav-tabs.login_tabs .nav-link {
     border: 1px solid transparent;
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
     color: #0000004d;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 .login_tabs {
     border-radius: 8px;
     background: rgba(40, 83, 125, 0.10);
     padding: 5px;
 }

 .form-control.logInInput {
     border-radius: 8px!important;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: #F6F6F6;
     padding: 10px 20px;
     height: 48px;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .btn.btn-login1 {
     border: 1px solid #FFF;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     color: #fff;
     font-style: normal;
     font-weight: 500;
     padding: 15px 48px;
     line-height: normal;
     text-transform: capitalize;
     border-radius: 8px;
     background: var(--Dark-blue, #28537D);
     box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.12);
 }

 .accountPos {
     position: absolute;
     bottom: 4px;
 }

 .register-steps {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 300px;
     margin: 20px auto 40px;
 }

 .step-line {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 3px;
     background: #d0d0d0;
     width: 100%;
     transform: translateY(-50%);
     z-index: 1;
 }

 .step-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #e0e0e0;
     color: #555;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     z-index: 2;
     position: relative;
 }

 .step-active {
     background: #28537d;
     color: #fff;
 }

 /* Step sections */
 .register-step {
     display: none;
 }

 .register-step.active {
     display: block;
 }

 .btn-secondary:hover {
     border: 1px solid #FFF !important;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     color: #fff;
     background-color: transparent;
     border-color: #6c757d;
 }

 .btn-cancel-report {
     font-style: normal;
     font-weight: 600;
     font-size: 14px !important;
     line-height: 27px;
     width: 153px;
     height: 46px;
     padding: 0 12px;
     color: #000 !important;
     border-radius: 100px;
     border: 1px solid var(--Orange, #E86933);
 }

 .btn-save-report {
     font-style: normal;
     font-weight: 600;
     font-size: 14px !important;
     line-height: 27px;
     width: 153px;
     height: 46px;
     border-radius: 100px;
     padding: 0 12px;
     color: #FFFFFF !important;
     background: var(--blue-gradient, linear-gradient(90deg, #2A547A 0%, #1797A5 100%)) !important;
 }

 .btn-secondary {
     border-color: #545b62;
     border: 1px solid #FFF;
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     color: #fff;
     background-color: #6c757d;
     border-color: #6c757d;
     padding: 13px 48px;
 }

 .form-control.logInInput1 {
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.10);
     background: #F6F6F6;
     padding: 10px 20px;
     height: 48px;
     color: #495057;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .breadcrumb-item a {
     padding-left: .5rem;
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .breadcrumb-item.active {
     color: #000;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
 }

 .table-bordered thead td,
 .table-bordered thead th {
     border-bottom-width: 2px;
     font-size: 14px;
     font-weight: 600;
 }

 .table.tbl_role tr td {
     font-size: 14px;
 }


 .table.tbl_role th {
     border: 1px solid #dee2e6;
     font-size: 14px;
     font-weight: 600;
 }

 .table td,
 .table th {
     padding: .75rem;
     vertical-align: middle;
     border-top: 1px solid #dee2e6;
     font-size: 14px;
 }

 .title1 {
     color: var #28537D (--Dark-blue, #28537D);
     font-family: Poppins;
     font-size: 24px;
     font-style: normal;
     font-weight: 600;
     line-height: 60px;
 }

 .login-user .dropdown-item {
     font-size: 14px;
 }

 /* .hero-section1:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: url('../images/network-background.png') bottom right no-repeat;
    width: 100%;
    height: 100%;
    z-index: 1;
} */

 #filter-country {
     appearance: none;
     /* Hide default arrow */
     background: url('../images/arrow-down.png') no-repeat right 15px center;
     background-color: #f2f2f2;
     padding-right: 40px;
 }

 #pageSelect {
     appearance: none;
     /* Hide default arrow */
     background: url('../images/arrow-down.png') no-repeat right 15px center;
     background-color: #f2f2f2;
     padding-right: 40px;
 }

 .table thead th {
     vertical-align: bottom;
     border-bottom: 2px solid #dee2e6;
     font-size: 14px;
 }

 .card-title-text {
     color: #000;
     font-size: 16px;
     font-weight: 600;
 }

 .accordion-button.bg-btn {
     background: transparent;
     border: 0px;
     padding-left: 20px;
 }

 #options-hazard-compare {
     padding-left: 20px;
 }

 .line-after span {
     color: var(--Orange, #E86933);
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
     text-transform: uppercase;
 }

 .add-report-form h4 {
     color: #000;
     font-family: Poppins;
     font-size: 32px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 .nav-tabs.login_tabs .nav-item.show .nav-link,
 .nav-tabs.login_tabs .nav-link.active {
     color: #495057;
     background-color: #fff;
     border-color: #dee2e6 #dee2e6 #fff;
     border-radius: 8px;
     background: var(--Dark-blue, #28537D);
     color: #fff;
 }

 .footer p span {
     font-size: 14px;
     font-weight: 600;
     color: #fff;
 }

 .countryBox1 {
     padding: 40px 30px;
     background: var(--Grey, #E8E7E7);
 }

 .plr-100px {
     padding: 50px 50px;
 }

 .card.card_new {
     border-radius: 20px;
     background: #FFF;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
     /* min-height: 652px; */
 }

 .lightImageBox {
     border-radius: 10px;
     background: #D9D9D9;
     width: 100%;
     height: 150px;
 }

 .btn.btn-modify {
     border-radius: 100px;
     background: var(--blue-gradient, linear-gradient(90deg, #2A547A 0%, #1797A5 100%));
     padding: 6px 15px;
     color: var(--white, #FFF);
     text-align: center;
     font-family: Poppins;
     font-size: 14px;
     font-style: normal;
     font-weight: 600;
     line-height: 34px;
     text-transform: uppercase;
 }

 .font-name {
     color: #000000b3;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     margin-bottom: 25px;
 }

 .btn.btn-delete {
     border-radius: 100px;
     background: rgba(255, 59, 48, 0.10);
     padding: 10px;
 }

 .btn.btn-delete {
     border-radius: 100px;
     background: rgba(255, 59, 48, 0.10);
     padding: 10px;
 }

 .btn.btn-mande {
     color: var(--Dark-blue, #28537D);
     text-align: center;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 600;
     line-height: normal;
     text-transform: uppercase;
     border-radius: 100px;
     border: 1px solid var(--Dark-blue, #28537D);
     padding: 4px 12px;
     margin-bottom: 10px;
 }

 .card_new p {
     color: #000000b3;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .card_new h5 {
     color: #000;
     font-family: Poppins;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 .card_new h6 {
     color: var(--Green, #22AD7A);
     font-family: Poppins;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
 }

 /*Responsive */
 @media (max-width: 1200px) {
     .concept-card {
         flex: 1 1 calc(20% - 20px);
         /* 4 per row */
     }

     .informationBoxKey {
         padding: 40px 30px;
     }
 }

 /* Responsive */
 @media (max-width: 992px) {

     .concept-card {
         flex: 1 1 calc(20% - 20px);
         /* 4 per row */
     }

     .flex-item {
         flex: 1 1 50%;
         /* 2 per row on small screens */
         max-width: 50%;
     }

     .timeline-wrapper {
         flex-direction: column;
         align-items: flex-start;
     }

     .informationBoxKey {
         padding: 40px 30px;
     }

     .detailBoxFeature {
         border-radius: 20px;
         background: #F0F0F0;
         min-height: 525px;
         margin-bottom: 15px;
     }

     .timeline-line {
         left: 30px;
         top: 0;
         bottom: 0;
         width: 2px;
         height: 100%;
         border-left: 2px dotted #b0bec5;
         border-top: none;
     }

     .timeline-card {
         width: 100%;
         margin-bottom: 80px;
     }

     .timeline-card::before {
         left: 30px;
         height: 40px;
         transform: none;
     }

     .icon-circle {
         left: 30px;
         transform: none;
     }

     .timeline-card .card {
         margin-left: 80px;
         margin-top: 0 !important;
         margin-bottom: 0 !important;
     }

     .process-flow {
         flex-wrap: wrap;
         justify-content: center;
     }

     .process-line {
         display: none;
     }

     .process-step {
         margin-bottom: 30px;
     }
 }


 @media (max-width: 768px) {
     .concept-card {
         flex: 1 1 calc(20% - 20px);
         /* 4 per row */
     }

     .flex-item {
         flex: 1 1 50%;
         /* 2 per row on small screens */
         max-width: 50%;
     }

     .detailBoxFeature {
         border-radius: 20px;
         background: #F0F0F0;
         min-height: 525px;
         margin-bottom: 15px;
     }

     .p20px {
         padding: 30px 30px;
     }

     .csgConceptBox {
         padding: 40px 30px;
     }

     .countryBox {
         background: var(--Dark-blue, #fff);
         padding: 40px 30px;
     }

     .btn.btn-explore-new {
         margin-bottom: 10px;
     }

     .section-keyFeatureNew {
         padding: 40px 30px;
         background: var(--green-gradient, linear-gradient(90deg, #1797A4 0%, #2BAC7A 100%));
     }

     .section-keyFeatureNew h4 {
         color: #FFF;
         font-family: Poppins;
         font-size: 36px;
         font-style: normal;
         font-weight: 600;
         line-height: 45px;
     }

     .countryBox.others {
         padding: 40px 30px;
         background: var(--Grey, #E8E7E7);
     }

     .heroBox .badge-title {
         color: #000;
         text-align: center;
         font-family: Poppins;
         font-size: 13px;
         font-style: normal;
         font-weight: 600;
         line-height: 45px;
         text-transform: uppercase;
         border-radius: 12px;
         border: 1px solid #DAEDFF;
         background: #FFF;
         padding: 10px;
         box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10);
     }
 }

 @media (max-width: 576px) {
     .concept-card {
         flex: 1 1 100%;
         /* 1 per row */
     }

     .card.lightBox1 {
         border-radius: 20px;
         background: var(--Grey, #E8E7E7);
         min-height: 670px;
         margin-bottom: 10px;
     }

     .p-60px {
         padding: 50px 17px !important;
     }

     .profileBox {
         border-radius: 6px;
         background: #e6e5eb;
         width: 200px;
         height: 210px;
         margin-right: 10px;
     }

     .heroBox .badge-title {
         color: #000;
         text-align: center;
         font-family: Poppins;
         font-size: 13px;
         font-style: normal;
         font-weight: 600;
         line-height: 45px;
         text-transform: uppercase;
         border-radius: 12px;
         border: 1px solid #DAEDFF;
         background: #FFF;
         padding: 10px;
         box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10);
     }

     .section-keyFeatureNew {
         padding: 40px 30px;
         background: var(--green-gradient, linear-gradient(90deg, #1797A4 0%, #2BAC7A 100%));
     }

     .countryBox.others {
         padding: 40px 30px;
         background: var(--Grey, #E8E7E7);
     }

     .countryBox1 {
         padding: 40px 30px;
         background: var(--Grey, #E8E7E7);
     }

     .section-keyFeatureNew h4 {
         color: #FFF;
         font-family: Poppins;
         font-size: 36px;
         font-style: normal;
         font-weight: 600;
         line-height: 45px;
     }

     .informationBoxKey {
         padding: 40px 30px;
     }

     .countryBox {
         background: var(--Dark-blue, #fff);
         padding: 40px 30px;
     }

     .detailBoxFeature {
         border-radius: 20px;
         background: #F0F0F0;
         min-height: 525px;
         margin-bottom: 15px;
     }

     .detailBoxFeature h4 {
         color: #000;
         font-family: Poppins;
         font-size: 26px;
         font-style: normal;
         font-weight: 600;
         line-height: 60px;
         text-transform: uppercase;
         position: absolute;
         bottom: 15px;
     }

     .p20px {
         padding: 30px 30px;
     }

     .flex-item {
         flex: 1 1 100%;
         /* 1 per row on mobile */
         max-width: 100%;
     }

     .section-keyFeature {
         background: var(--Dark-blue, #2E65A3);
         padding: 30px;
     }

     .hero-section h1 {
         color: #28537D;
         text-align: center;
         font-family: Poppins;
         font-size: 50px;
         font-style: normal;
         font-weight: 600;
         line-height: 60px;
         letter-spacing: -1.36px;
         text-transform: uppercase;
     }

     .btn.btn-explore-new {
         margin-bottom: 10px;
     }
 }
 

.ndc-title {
  color: #000;
  font-family: "Open Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 100% */
  text-transform: capitalize;
}

.ndc-input {
  border-radius: 8px !important;
  background: #F9F9F9 !important;
  height: 45px !important;
  text-align: left !important;
  font-weight: 400 !important;
  border: 1px solid #ced4da !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  font-size: 16px !important;
}

.form-control.ndc-search {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #F9F9F9 !important;
  height: 45px;
  text-align: left !important;
  font-weight: 400;
  border: 1px solid #ced4da !important;
  line-height: 1.5;
  color: #495057 !important;
  font-size: 12px !important;
  width: 95%;
}

.scroll_horizontal {
  overflow-y: scroll;
  height: 370px;
}

.low-range {
  color: #E20000;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}

.high-range {
  color: #00BA54;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}

.list-group.ndc-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: 8px;
}

.ndc-list .list-group-item {
  position: relative;
  display: block;
  padding: 5px 18px;
  background: #f9f9f9;
  text-align: left !important;
  font-weight: 400;
  border: 1px solid #ced4da !important;
  border-radius: 8px;
  line-height: 1.5;
  color: #495057 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.icon-list {
  display: flex;
  list-style-type: none;
  padding: 0px;
  flex-wrap: wrap;
  width: auto;
}

.nowrap {
  white-space: nowrap;
}

.icon-list li.p0 {
  width: 16px;
  height: 16px;
  background-color: #E6E6E6;
  border-radius: 20px;
}

.icon-list li.p1 {
  width: 16px;
  height: 16px;
  background-color: #eb1729;
  border-radius: 20px;
}

.icon-list li.p2 {
  width: 16px;
  height: 16px;
  background-color: #DDA63A;
  border-radius: 20px;
}

.icon-list li.p3 {
  width: 16px;
  height: 16px;
  background-color: #299b45;
  border-radius: 20px;
}

.icon-list li.p4 {
  width: 16px;
  height: 16px;
  background-color: #c31a30;
  border-radius: 20px;
}

.icon-list li.p5 {
  width: 16px;
  height: 16px;
  background-color: #ef412a;
  border-radius: 20px;
}

.icon-list li.p6 {
  width: 16px;
  height: 16px;
  background-color: #00afd9;
  border-radius: 20px;
}

.icon-list li.p7 {
  width: 16px;
  height: 16px;
  background-color: #fdb80c;
  border-radius: 20px;
}

.icon-list li.p8 {
  width: 16px;
  height: 16px;
  background-color: #901135;
  border-radius: 20px;
}

.icon-list li.p9 {
  width: 16px;
  height: 16px;
  background-color: #f36e1f;
  border-radius: 20px;
}

.icon-list li.p10 {
  width: 16px;
  height: 16px;
  background-color: #e11384;
  border-radius: 20px;
}

.icon-list li.p11 {
  width: 16px;
  height: 16px;
  background-color: #f99e20;
  border-radius: 20px;
}

.icon-list li.p12 {
  width: 16px;
  height: 16px;
  background-color: #ce8c25;
  border-radius: 20px;
}

.icon-list li.p13 {
  width: 16px;
  height: 16px;
  background-color: #3F7E44;
  border-radius: 20px;
}

.icon-list li.p14 {
  width: 16px;
  height: 16px;
  background-color: #007ebc;
  border-radius: 20px;
}

.icon-list li.p15 {
  width: 16px;
  height: 16px;
  background-color: #3eb047;
  border-radius: 20px;
}

.icon-list li.p16 {
  width: 16px;
  height: 16px;
  background-color: #00548b;
  border-radius: 20px;
}

.icon-list li.p17 {
  width: 16px;
  height: 16px;
  background-color: #133368;
  border-radius: 20px;
}

.progress-slider {
  width: 100%;
}

.tbl_sdg tbody td {
  color: #000;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: normal;
  padding: 30px;
  letter-spacing: -0.154px;
}

.table.tbl_sdg thead tr th,
tbody td {
  border-top: 1px solid lightblue !important;
  border-bottom: 1px solid lightblue !important;
  border-left: 0px !important;
  border-right: 0px !important;
}

.icon-list li {
  margin: 9px 9px;
}