.oo-1-box{
  background-color: #e9f7fe;
  padding: 25px;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
}
.oo-2-box{
  background-color: #e9f7fe;
  padding: 25px;
}
.oo-3-box {
    background-color: #e9f7fe;
    padding: 25px;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 99% 100%, 0 100%);
}
.bg-gradient{
  background: rgb(0,151,204);
background: linear-gradient(90deg, rgba(0,151,204,0.7511379551820728) 0%, rgba(7,78,161,1) 100%);

}
.cl-gradient{
  color: rgb(0,151,204);
color: linear-gradient(90deg, rgba(0,151,204,0.7511379551820728) 0%, rgba(7,78,161,1) 100%);
}
.right-hr{
  border-right: 2px solid #fff;
}
.left-ar{
       background-image: url(../images/blue-arw.png);
       background-repeat: no-repeat;
       background-size: auto;
       background-position: left top;
}

.jsw-light-blue{
  color: #2a6db9;
}
.white-r{
     background-image: url(../images/white-arw.png);
       background-repeat: no-repeat;
       background-size: auto;
       background-position: right bottom;
}
.light-b{
  border-bottom: 1px solid #c7eafb;
}


.everyday-box-1 {
height: auto;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background: #EDEDEE;
background-size: cover;
clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
position: relative;
margin-bottom: 40px;
}

.top-gr{
    width: auto;
    height: 10px;
    box-sizing: border-box;
    background: rgb(0,151,204);
    background: linear-gradient(90deg, rgba(0,151,204,0.7511379551820728) 0%, rgba(7,78,161,1) 100%);
}

.grey-patch-table .dev-tbl tr th {
    border-right: 10px solid #fff;
}

.grey-patch-table .dev-tbl tr td {
    border-right: 10px solid #fff;
}

.dev-tbl tr th, .dev-tbl tr td {
    width: 17%;
}
.bl-b{
    border-bottom: 4px solid #0064a9;
}
.dev-tbl tr td {
    border-bottom: 1px solid #000;
  
    padding: 8px;
}

.dev-tbl tr th {
    border-bottom: 2px solid #000;
    padding: 8px;
}

.light-patch{
    background-color: #abe1fa;
}
.gradient-patch{
     background: rgb(0,151,204);
background: linear-gradient(90deg, rgba(0,151,204,0.7511379551820728) 0%, rgba(7,78,161,1) 100%);
}
.light-blue-hr{
  border-bottom: 4px solid #00aeef;
}
.fi-patch{
  background-color: #e9f7fe;
  font-weight: 700;
}

.gradient-box{
 background: rgb(0,98,149);
background: linear-gradient(90deg, rgba(0,98,149,0.8491771708683473) 0%, rgba(7,78,161,1) 100%);
 clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 100%, 0 100%);
}
.t-r{
  text-align: right;
}

.ttle-circle {
    background-color: #00adef;
    padding: 2px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #FFFFFF;
    display: block;
    line-height: 1;
}

.ttle-circle-1 {
    background-color: #D31618;
    padding: 2px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #FFFFFF;
    display: block;
    line-height: 1;
}

.navy-gradient{
background: rgb(0,14,63);
background: linear-gradient(0deg, rgba(0,14,63,1) 0%, rgba(7,78,161,0.8099614845938375) 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 100%, 0 100%);
}

.title-1{
  color: #436faf ;
  font-weight: 500;
  font-size: 24px;
}
.title-2{
  color: #000;
  font-weight: 500;
  font-size: 30px;
}
.title-3{
  color: #17479f ;
  font-weight: 400;
  font-size: 32px;
}
.title-4{
  color: #fff;
  font-weight: 500;
}
.title-5{
  color: #fff;
  font-weight: 500;
  font-size: 24px;
}

.bg-navy{
  background: #002879;
}
.bg-black{
  background-color: #000000;
}
.dark-black-gradient{
  background: rgb(0,1,1);
background: linear-gradient(0deg, rgba(0,1,1,1) 0%, rgba(5,40,95,0.8883928571428571) 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 100%, 0 100%);

}


.title-6{
  font-weight: 600;
  color: #17479e;
  font-size: 24px;
}
.title-7{
  font-weight: 400;
  color: #17479e;
  font-size: 24px;
}

.title-8{
  font-weight: 600;
  color: #17479e;
  font-size: 20px;
}
.right-r{
  border-left: 2px solid #0057a4;
}

.jsw-red-1 {
    color: #D31618 !important;
}
.left-r{
  border-left: 1px solid #00aeef;
}

ul.plus-list-1 li {
    padding-left: 20px;
    color: #1747ab;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 10px;
    background-image: url(../images/plus.png);
    background-repeat: no-repeat;
    background-position: left top 7px;
    background-size: 12px;
}

/*accordian */
#accordion{

  width:100%;

}

.card-header {

    background: #1e3ba0;

	font-weight: 700; 

	font-size:20px; line-height:24px;

}

.card-header a{

  color: #fff; display:block;

}



#accordion .card-link:after {

	background-image:url(../images/down_up.png);

	background-position:98% center;

	background-repeat:no-repeat;

    content:'';

    padding-right: 5px;

	padding:10px;

	position:absolute;

	right:20px;

	top:15px;

	width:15px; height:15px;

}



#accordion button.collapsed:after {

    background-image:url(../images/arrow_up.png);

	background-position:98% center;

	background-repeat:no-repeat;

    content:'';

    padding-right: 5px;

	padding:10px;

	position:absolute;

	right:20px;

	top:15px;

	width:15px; height:15px;



}



.title-46 h2 {
    font-size: 38px;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: -1px;
    margin-bottom: 24px;
    color: #263D8C;
}
.title-5 {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
}

.interlink { font-size: 16px; color: #263D8C; line-height: 20px; font-weight: 500 !important;}
.interlink a{color: #263D8C;}
.footnote { font-size: 13px !important;  }
.bl-blue {border-left: 5px solid #0060aa; margin-right: 5px;}
.bl-blue2 {border-left: 5px solid #00aeef; margin-right: 5px;}
.bl-grey {border-left: 5px solid #939598; margin-right: 5px;}




/* start graph */
.scale-up-ver-bottom {
    -webkit-animation: scale-up-ver-bottom 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: scale-up-ver-bottom 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes scale-up-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
}
@keyframes scale-up-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
}
.graf-board-sec h4 {
    font-size: 22px;
    margin-bottom: 0px;
}
.graf-board-sec .graf-row {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 700px;
    height: 240px;
    margin: 0 auto;
    border-bottom: solid 2px #073e84;
    padding-left: 0;
    margin-top: 0px;
    margin-bottom: 30px;
}
.graf-board-sec .graf-row li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 240px;
}
.graf-board-sec .graf-row li::after {
    content: "";
    position: absolute;
    bottom: -23px;
    right: 0;
    left: auto;
    width: 2px;
    height: 9px;
    background-color: #81d2ed;
}
.graf-board-sec .graf-row li:last-child::after {
    content: none;
}
.graf-board-sec .graf-row span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    background-size: 1.8px;
    background-color: #81d2ed;
    border-top: 10px solid;
    border-image-slice: 1;
    border-width: 4px;
    border-image-source: linear-gradient(90deg, rgba(0, 155, 207, 1) 0%, rgba(0, 87, 165, 1) 100%);
    width: 42px;
    margin: 0 auto;
}
.graf-board-sec .graf-row span::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 9px 0em 0px;
    display: block;
    text-align: center;
    color: #263D8C;
    content: attr(title);
    word-wrap: break-word;
    width: auto;
    font-weight: 600;
    font-size: 14px;
}
.graf-board-sec .graf-row span::after {
    font-weight: 300;
    content: attr(rel);
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    font-size: 14px;
    transform: translateY(0px) translateX(0px);
    width: auto;
    text-align: center;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(0, 96, 148, 1) 0%, rgba(8, 57, 129, 1) 100%);
    height: 40%;
    color: #fff;
    line-height: 5rem;
    border-bottom: 10px solid;
    border-image-slice: 1;
    border-width: 4px;
    border-image-source: linear-gradient(90deg, rgba(128, 211, 237, 1) 0%, rgba(0, 174, 239, 1) 100%);
}
.key-value-graf .graf-board-sec .graf-row {
    margin-top: 66px;
    border-bottom: solid 2px #03aced;
}
.key-value-graf .graf-board-sec .graf-row li .circle-shape {
    position: absolute;
    top: -40px;
    width: 55px;
    height: 55px;
    line-height: 52px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    border-radius: 100%;
    background-color: #17469e;
    text-align: center;
    color: #fff;
    font-weight: 600;
}
.key-value-graf .graf-board-sec .graf-row li {
    padding-top: 0px;
}
.key-value-graf .graf-board-sec .graf-row span::after {
    font-size: 20px;
    background: transparent;
    border:  none;
    transform: translateY(-30px) translateX(0px);
    color: #ffffff;
    line-height: normal;
    font-weight: 400;
}
.key-value-graf .graf-board-sec .graf-row li:nth-child(1) span::after,
.key-value-graf .graf-board-sec .graf-row li:nth-child(2) span::after,
.key-value-graf .graf-board-sec .graf-row li:nth-child(3) span::after,
.key-value-graf .graf-board-sec .graf-row li:nth-child(4) span::after,
.key-value-graf .graf-board-sec .graf-row li:nth-child(5) span::after,
.key-value-graf .graf-board-sec .graf-row li:nth-child(6) span::after {
    height: auto;
    line-height: normal;
}
.key-value-graf .graf-board-sec .graf-row li:last-child span::after {
    font-weight: 600;
}
.key-value-graf .graf-board-sec .graf-row li:last-child span {
    background: linear-gradient(180deg, rgb(0 147 201) 0%, rgb(0 102 174) 100%);
}
.key-value-graf .sec1 .graf-row {
    margin-top: 0px;
}
.key-value-graf .graf-board-sec .graf-row span {
    width: 70%;
}
.key-value-graf .graf-board-sec .graf-row span::before {
    font-size: 16px;
}

.key-led { position: absolute;
    bottom: 10px;
    right: -100px;
    font-size:  30px;
    font-weight: bold;
    color:  #263D8C;
  }

/* end graph */





/* start graph */
.scale-up-ver-bottom {
    -webkit-animation: scale-up-ver-bottom 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: scale-up-ver-bottom 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes scale-up-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
}
@keyframes scale-up-ver-bottom {
    0% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
}
.graf-board-sec2 h4 {
    font-size: 22px;
    margin-bottom: 0px;
}
.graf-board-sec2 .graf-row {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 700px;
    height: 440px;
    margin: 0 auto;
    border-bottom: solid 2px #073e84;
    padding-left: 0;
    margin-top: 0px;
    margin-bottom: 30px;
}
.graf-board-sec2 .graf-row li {
    position: relative;
    display: table-cell;
    vertical-align: bottom;
    height: 240px;
}
.graf-board-sec2 .graf-row li::after {
    content: "";
    position: absolute;
    bottom: -23px;
    right: 0;
    left: auto;
    width: 2px;
    height: 9px;
    background-color: #81d2ed;
}
.graf-board-sec2 .graf-row li:last-child::after {
    content: none;
}
.graf-board-sec2 .graf-row span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    background-size: 1.8px;
/*    background-color: #81d2ed;*/
    background: linear-gradient(90deg, rgb(0 147 201) 0%, rgb(0 71 135) 100%);
    border-top: 10px solid;
    border-image-slice: 1;
    border-width: 4px;
    border-image-source: linear-gradient(90deg, rgba(0, 155, 207, 1) 0%, rgba(0, 87, 165, 1) 100%);
    width: 42px;
    margin: 0 auto;
}
.graf-board-sec2 .graf-row span.blue-gr {
background: #81d2ed; 
border-image-source: linear-gradient(90deg, rgba(129 210 237) 0%, rgba(0, 155, 207, 1) 100%);
}
.graf-board-sec2 .graf-row span.white-gr {
background: #ffffff; 
border-top: none;
}

.graf-board-sec2 .graf-row span::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 9px 0em 0px;
    display: block;
    text-align: center;
    color: #263D8C;
    content: attr(title);
    word-wrap: break-word;
    width: auto;
    font-weight: 600;
    font-size: 14px;
}
.graf-board-sec2 .graf-row span::after {
    font-weight: 300;
    content: attr(rel);
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    font-size: 14px;
    transform: translateY(0px) translateX(0px);
    width: auto;
    text-align: center;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(0, 96, 148, 1) 0%, rgba(8, 57, 129, 1) 100%);

    height: 40%;
    color: #fff;
    line-height: 5rem;
    border-bottom: 10px solid;
    border-image-slice: 1;
    border-width: 4px;
    border-image-source: linear-gradient(90deg, rgba(128, 211, 237, 1) 0%, rgba(0, 174, 239, 1) 100%);
}
.graf-board-sec2 .graf-row span.blue-gr::after { top: 40px;}
.graf-board-sec2 .graf-row span.white-gr::after { top: 40px;}

.key-value-graf .graf-board-sec2 .graf-row {
    margin-top: 66px;
    border-bottom: solid 2px #03aced;
}
.key-value-graf .graf-board-sec2 .graf-row li .circle-shape {
    position: absolute;
    top: -40px;
    width: 55px;
    height: 55px;
    line-height: 52px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    border-radius: 100%;
    background-color: #17469e;
    text-align: center;
    color: #fff;
    font-weight: 600;
}
.key-value-graf .graf-board-sec2 .graf-row li {
    padding-top: 0px;
}
.key-value-graf .graf-board-sec2 .graf-row span::after {
    font-size: 20px;
    background: transparent;
    border:  none;
    transform: translateY(-30px) translateX(0px);
    color: #ffffff;
    line-height: normal;
    font-weight: 400;
}
.key-value-graf .graf-board-sec2 .graf-row span.blue-gr::after { color: #263D8C} 
.key-value-graf .graf-board-sec2 .graf-row span.white-gr::after { color: #263D8C} 
.key-value-graf .graf-board-sec2 .graf-row li:nth-child(1) span::after,
.key-value-graf .graf-board-sec2 .graf-row li:nth-child(2) span::after,
.key-value-graf .graf-board-sec2 .graf-row li:nth-child(3) span::after,
.key-value-graf .graf-board-sec2 .graf-row li:nth-child(4) span::after,
.key-value-graf .graf-board-sec2 .graf-row li:nth-child(5) span::after,
.key-value-graf .graf-board-sec2 .graf-row li:nth-child(6) span::after {
    height: auto;
    line-height: normal;
}
/*.key-value-graf .graf-board-sec2 .graf-row li:last-child span::after {
    font-weight: 600;
}
.key-value-graf .graf-board-sec2 .graf-row li:last-child span {
    background: linear-gradient(180deg, rgb(0 147 201) 0%, rgb(0 102 174) 100%);
}*/
.key-value-graf .sec1 .graf-row {
    margin-top: 0px;
}
.key-value-graf .graf-board-sec2 .graf-row span {
    width: 70%;
}
.key-value-graf .graf-board-sec2 .graf-row span::before {
    font-size: 16px;
}

.key-led { position: absolute;
    bottom: 10px;
    right: -100px;
    font-size:  30px;
    font-weight: bold;
    color:  #263D8C;
  }



.btm-sec {
    margin-top: 20px;
    border-top: 1px solid #cbecfb;
    padding-top: 20px;
}
.btm-sec .define-arrow-sec {
    display: flex;
}
.btm-sec .define-arrow-sec img {
    width: 100%;
    max-width: 16%;
}
.btm-sec .define-arrow-sec p {
    float: right;
    color: #263d8c;
    font-size: 14px;
}
.btm-sec .define-arrow-sec .sec {
    margin-right: 30px;
}

/* end graph */






/* start vertical graph */
.prog-bar-sec .f2 .cunter-sec,
.prog-bar-sec .f3 .cunter-sec {
    display: flex;
}

.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(1), 
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(2),
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(3),
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(4),
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(5),
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(6),
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(1), 
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(2),
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(3),
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(4),
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(5),
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(6) {
    text-align: center;
    padding: 9px 2px;
    position: relative;
}

.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(1) span,
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(2) span,
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(3) span,
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(4) span,
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(5) span,
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(6) span,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(1) span,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(2) span,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(3) span,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(4) span,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(5) span,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(6) span {
    font-size: 20px;
    color: #ffffff;
}

.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(1) {
    background: linear-gradient(180deg, rgba(0, 96, 148, 1) 0%, rgba(8, 57, 129, 1) 100%);
    flex: 0 0 41%;
}

.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(2) {
    background: #58595b;
    flex: 0 0 24%;
}
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(3) {
    background: #00adef;
    flex: 0 0 16%;
}
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(4) {
    background: #18479f;
    flex: 0 0 10%;
}
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(5) {
    background: #a8a9ad;
    flex: 0 0 5%;
}
.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(6) {
    background: #d71a21;
    flex: 0 0 4%;
}

.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(1) {
    background: linear-gradient(180deg, rgba(0, 96, 148, 1) 0%, rgba(8, 57, 129, 1) 100%);
    flex: 0 0 40%;
}

.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(2) {
    background: #58595b;
    flex: 0 0 21%;
}
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(3) {
    background: #00adef;
    flex: 0 0 15%;
}
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(4) {
    background: #18479f;
    flex: 0 0 13%;
}
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(5) {
    background: #a8a9ad;
    flex: 0 0 6%;
}
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(6) {
    background: #d71a21;
    flex: 0 0 5%;
}

.prog-bar-sec .f2,
.prog-bar-sec .f3 {
    margin-top: 20px;
}


/*.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(2)::before,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(2)::before {
    background: linear-gradient(180deg, rgba(128, 211, 237, 1) 0%, rgba(0, 174, 239, 1) 100%);
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: auto;
    width: 5px;
    height: 100%;
}*/
/*.prog-bar-sec .f2 .cunter-sec .f2-cunter:nth-child(2)::after,
.prog-bar-sec .f3 .cunter-sec .f3-cunter:nth-child(2)::after {
    background: linear-gradient(180deg, rgba(0, 155, 207, 1) 0%, rgba(0, 87, 165, 1) 100%);
    content: "";
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    width: 5px;
    height: 100%;
}*/


.prog-bar-sec .f4 .cunter-sec .f4-cunter {
    background: #abe1fb;
    padding: 9px 15px;
    text-align: center;
    position: relative;
    font-size: 25px;
    color:  #263D8C;
}
.prog-bar-sec .f4 .cunter-sec .f4-cunter::after {
    content: "";
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, rgba(128, 211, 237, 1) 0%, rgba(0, 174, 239, 1) 100%);
}

.prog-bar-sec .f4 .cunter-sec {
    width: 100%;
    max-width: 500px;
}

.prog-bar-sec .f5 .cunter-sec .f5-cunter {
    background: linear-gradient(180deg, rgba(0, 96, 148, 1) 0%, rgba(8, 57, 129, 1) 100%);
    padding: 9px 15px;
    text-align: center;
    position: relative;
    font-size: 25px;
    color:  #ffffff;
}
.prog-bar-sec .f5 .cunter-sec .f5-cunter::after {
    content: "";
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 155, 207, 1) 0%, rgba(0, 87, 165, 1) 100%);
}

.prog-bar-sec .f5 .cunter-sec {
    width: 100%;
    max-width: 400px;
}

.prog-bar-sec .f6 .cunter-sec .f6-cunter {
    background: #abe1fb;
    padding: 9px 15px;
    text-align: center;
    position: relative;
    font-size: 25px;
    color:  #263D8C;
}
.prog-bar-sec .f6 .cunter-sec .f6-cunter::after {
    content: "";
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, rgba(128, 211, 237, 1) 0%, rgba(0, 174, 239, 1) 100%);
}

.prog-bar-sec .f6 .cunter-sec {
    width: 100%;
    max-width: 300px;
}

.prog-bar-sec .f7 .cunter-sec .f7-cunter {
    background: linear-gradient(180deg, rgba(0, 96, 148, 1) 0%, rgba(8, 57, 129, 1) 100%);
    padding: 9px 15px;
    text-align: center;
    position: relative;
    font-size: 25px;
    color:  #ffffff;
}
.prog-bar-sec .f7 .cunter-sec .f7-cunter::after {
    content: "";
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 155, 207, 1) 0%, rgba(0, 87, 165, 1) 100%);
}

.prog-bar-sec .f7 .cunter-sec {
    width: 100%;
    max-width: 200px;
}

/* end vertical graph  */


.eco-sec {
    background-image: url('../images/mda/2-img5.jpg');
    background-position: center top;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1644px;
}

.ind-sec {
    background-image: url('../images/mda/3-img11.jpg');
    background-position: center top;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 993px;
}

.ind-sec2 {
    background-image: url('../images/mda/3-img44.jpg');
    background-position: center top;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1430px;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 760px) {
 .eco-sec, .ind-sec,  .ind-sec2 {
    height: 100%;}
}