.framework-sec {
    background-color: #E3EFFE;

    & .bgimg {
        opacity: 0.70;
    }
}

.framework-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;

    .framework-right {
        width: 684px;
    }

    .framework-left {
        width: calc(100% - 684px);
        padding-right: 20px;
        max-width: 470px;
    }

    ul.frame-ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        & li {
            margin: 0;
            padding: 0;
        }

        & li:not(:last-child) {
            margin-bottom: 15px;
        }

        .frame-li {
            display: flex;
            flex-wrap: wrap;
            border: 5px solid #ffffff;
            border-radius: 20px;
            box-shadow: 0px 5px 10px 4px #C0D7F4;
            background: #ffffff;
            background: linear-gradient(126deg, rgba(255, 255, 255, 1) 0%, rgba(227, 239, 254, 1) 100%);
            padding: 18px 28px;
            align-items:center;
        }

        .frame-icon {
            width: 40px;
& img{
    filter: brightness(0) saturate(100%) invert(59%) sepia(91%) saturate(1763%) hue-rotate(152deg) brightness(89%) contrast(104%);
}
        }

        .frame-info {
            width: calc(100% - 40px);
            padding-left: 14px;
            color: var(--primary);
            font-size: 22px;
            font-weight: var(--font-weight-semibold);
        }
    }
}


ul.fiveblock-ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -22px;
    padding: 0;
    list-style-type: none;

    & li {
        margin: 0;
        padding: 0 22px;
        width: 20%;
    }

    .fiveblock-li {
        background-color: var(--primary-blue);
        color: var(--white);
        border-radius: 20px;
        padding:36px 15px;
        text-align:center;
        height:100%;
                display: flex;
        flex-wrap: wrap;
        justify-content: center;
        & img {
           margin:0 auto 20px; 
           text-align:center;
           display:block;
           filter:invert(1) brightness(100);
        }
    }
    .f-block-title{
      font-size:24px;
      color:var(--white);
      font-weight:var(--font-weight-semibold);
      line-height:1.6;
      width:100%;
    }
}


/*------- media ------*/

@media(max-width:1599.98px) {

}

@media(max-width:1439.98px) {
    .framework-wrap {
        .framework-right {
            width:580px;
        }
        .framework-left{
            width: calc(100% - 580px);  
        }
    }

    ul.fiveblock-ul{
        margin: 0 -14px;
        & li{
          padding: 0 14px; 
        }
    }
}

@media(max-width:1199.98px) {
    .framework-wrap {
        .framework-right {
            width:480px;
        }
        .framework-left{
            width: calc(100% - 480px);  
        }
        ul.frame-ul{
            .frame-info{
               font-size: 20px; 
            }
            .frame-li{
               padding: 14px 20px;
            }
                  
        }
    }

    ul.fiveblock-ul{
        margin: 0 -8px;
        & li{
          padding: 0 8px; 
        }
        .fiveblock-li{
            & img{
              width:60px;  
            }
        }
        .f-block-title{
            font-size:22px;
        }
    }

}

@media(max-width:991.98px) {
    .framework-wrap {
        .framework-right {
            width:100%;
        }
        .framework-left{
            width:100%;  
            max-width:100%;
            padding-right:0;
            margin-bottom:30px;
        }
        ul.frame-ul{
            gap:10px;
            display:flex;
            flex-wrap:wrap;
            & li{
                width:calc(50% - 10px);
            } 
            .frame-li{
                height:100%;
            }
            & li:not(:last-child) {
                margin-bottom: 0;
            }
            .frame-info{
                line-height:1.2;
            }
        }
    }

    ul.fiveblock-ul {
        row-gap:16px;
        justify-content:center;
        & li {
            width:33.33%;
        }
    }
}

@media(max-width:767.98px) {
    .framework-wrap {
        ul.frame-ul {
            .frame-info {
                font-size:16px;
                width:calc(100% - 30px);
            }
            .frame-icon {
                width:30px;
            }
            .frame-li {
                padding: 12px 16px;
            }
        }
    } 


    ul.fiveblock-ul {
        row-gap:16px;
        justify-content:center;
        & li {
            width:33.33%;
            padding: 0 4px;
        }
    }

}

@media(max-width:575.98px) {
 
			.framework-wrap {
						ul.frame-ul {
								.frame-li {
									 border:3px solid #ffffff;
									 border-radius:10px;
							 }
							& li {
								                width: calc(50% - 5px);
							}
						}
				}
	
		  ul.fiveblock-ul {
						.fiveblock-li {
							border-radius:10px;
						}
			}
	
}

@media(max-width:479.98px){
    
						.framework-wrap {
										 ul.frame-ul {
														.frame-info {
																		font-size: 14px;

														}
										}
						}
		
    ul.fiveblock-ul {
        row-gap:8px;
        & li {
            width:50%;
            padding: 0 4px;
        }
        .fiveblock-li{
           padding:25px 15px;
            & img{
                width:50px;
                height:50px;
                object-fit:contain;
                margin: 0 auto 10px;  
            }
        }
                .f-block-title {
            font-size: 18px;
        }
    }

}

@media(max-width:374.98px){
	
	.framework-wrap {
        ul.frame-ul {
            gap:0;
            row-gap:10px;
            & li {
                width:100%;
            }
											
        }
    }
}