/* blue block */

ul.blueblock-ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
  padding: 0;
  list-style-type: none;

  & li {
    width: 20%;
    padding: 0 10px;
				margin:0;
  }

  & .blueblock-li {
    border-radius: 30px;
    background-color: var(--theme);
    padding: 40px 30px;
    height:100%;
  }

  & .blc-icon {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 auto 50px;
    & img {
      margin: 15px auto 0;

    }
  }

  & .blc-icon:before {
    position: absolute;
    content: "";
    width: 76px;
    height: 76px;
    border-radius: 100%;
    background-color: var(--white);
    opacity: 0.10;
  }
  & .blc-title{
    font-size:18px;
    font-weight:var(--font-weight-bold);
    color:var(--white);
    line-height:1.334;
    margin-bottom:20px;
  }
  & .blc-content p{
    color:var(--white);
  }
}

/* ------- media query --------*/

@media (max-width: 1599.98px) {
		ul.blueblock-ul {
			 margin: 0 -6px;
    & li {
      padding: 0 6px;
    }
			 & .blueblock-li{
					 padding:30px 24px;
			 }
			 & .blc-icon{
					 margin:0 auto 25px;
			 }
				& .blc-title{
					 margin-bottom:10px;
				}
			 & .blc-content p{
					 font-size:16px;
					 line-height:26px;
			 }
		}	
	
	
	
}

@media (max-width: 1439.98px) {
		ul.blueblock-ul {
			   margin: 0 -4px;
			 	 row-gap:8px;
    & li {
      width:33.33%;
					 padding:0 4px;
    }
			 & .blueblock-li {
      padding:20px;
    }
		}	
}

@media (max-width: 1199.98px) {
	
}

@media (max-width: 991.98px) {
	 ul.blueblock-ul {
     & .blc-icon{
							& img{
									width:54px;
									height:54px;
									object-fit:contain;
					  }
				 }
			& .blc-icon:before {
						width:56px;
						height:56px;
				 }
   }
}

@media (max-width: 767.98px) {
			ul.blueblock-ul {
					& li {
							width:50%;
					}
				 & .blc-icon {
       margin: 0 auto 15px;
     }
   }
}

@media (max-width: 575.98px) {
	ul.blueblock-ul {
					& li {
							width:100%;
					}
				 & .blc-icon {
       margin: 0 auto 15px;
     }
   }
}