.cnc-skill-bar.layout4{background: rgba(0, 91, 197,0.9); padding:100px 0; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; }
.cnc-skill-bar.layout4 .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #005bc5e6; }
.cnc-skill-bar.layout4 .container{max-width:1430px;width:100%;padding-left:15px;padding-right:15px;margin:0 auto; position: relative;}
.cnc-skill-bar.layout4 .row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px;gap: 128px;justify-content: center;}
.cnc-skill-bar.layout4 :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size:24px;line-height:normal;margin:0 0 10px;color: #fff;font-weight: 700;}         
.cnc-skill-bar.layout4 :is(p) { font-size:20px;line-height:normal;margin:0 0 20px;color:#fff; font-weight: 400;}
.cnc-skill-bar.layout4 :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):last-child, .cnc-skill-bar.layout4 :is(p):last-child { margin-bottom: 0; }
.cnc-skill-bar.layout4 small { font-size: 16px; line-height: normal; }             
.cnc-skill-bar.layout4 .title-box:not(:last-child) { margin-bottom: 30px; }  
.cnc-skill-bar.layout4 .content-box{max-width:315px;width:100%;padding-left:15px;padding-right:15px;}        
.cnc-skill-bar.layout4 .progress-box{max-width:714px;width:100%;padding-left:15px;padding-right:15px;}
.cnc-skill-bar.layout4 .align-items-center{align-items:center;}
.cnc-skill-bar.layout4 .content-box .inner-box {text-align: center; }        
.cnc-skill-bar.layout4 .content-box .profile-pic { width: 285px; height: 290px; border-radius: 50%; border: 5px solid #fff; overflow: hidden; margin: 0 auto 30px; }
.cnc-skill-bar.layout4 .content-box .profile-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cnc-skill-bar.layout4 .content-box .location p, .cnc-skill-bar.layout4 .content-box .location p small { font-size: 16px; }
.cnc-skill-bar.layout4 .content-box .icon { width: 24px; margin: 0 auto 10px; }        
.cnc-skill-bar.layout4 .content-box .icon img, .cnc-skill-bar.layout4 .content-box .icon svg { width: 100%; height: 100%; object-fit: contain; object-position: center; }        
.cnc-skill-bar.layout4 .content-box .icon svg path{fill: #fff;}
.cnc-skill-bar.layout4 .content-box .icon i{font-size: 24px;color: #fff;}
.cnc-skill-bar.layout4 .progress-box .title-box:not(:last-child) { margin-bottom: 50px; }
.cnc-skill-bar.layout4 .progress-box .skill:not(:last-child){margin-bottom:50px;}
.cnc-skill-bar.layout4 .progress-box .skill-name{font-size:20px;font-weight:700;margin-bottom:10px;line-height:normal;color:#fff;display:inline-block; }
.cnc-skill-bar.layout4 .progress-box .progress{background:rgba(255,255,255,0.1);border-radius:50px;min-height:12px;position:relative;}
.cnc-skill-bar.layout4 .progress-box .progress-bar{min-height:12px;width:0;border-radius:50px;background:#fff;position:relative;transition:width 2s ease-in-out;}
.cnc-skill-bar.layout4 .progress-box .progress-bar span{position:absolute;right:0;top:-33px;font-size:20px;font-weight:400;z-index: 10;color:#fff; line-height:normal; white-space: nowrap; opacity: 0; transition: all 0.3s ease-in-out; }
.cnc-skill-bar.layout4 .progress-box.full-progssbox, .cnc-skill-bar.layout4 .content-box.full-content-box { max-width: 100%; }

@media (max-width: 1199px) {
    .cnc-skill-bar.layout4 .row {gap: 50px;}
    .cnc-skill-bar.layout4 .progress-box {max-width: calc(100% - 315px - 50px);}
}
@media (max-width: 1024px) {
.cnc-skill-bar.layout4{padding:50px 0;}
.cnc-skill-bar.layout4 .row {gap: 30px;}
.cnc-skill-bar.layout4 .progress-box {max-width: calc(100% - 315px - 30px);}
.cnc-skill-bar.layout4 .content-box .profile-pic { width: 235px; height: 235px; }
.cnc-skill-bar.layout4 :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size: 22px; }
.cnc-skill-bar.layout4 :is(p) {font-size: 18px;}
.cnc-skill-bar.layout4 .content-box .location p, .cnc-skill-bar.layout4 .content-box .location p small { font-size: 15px; }
.cnc-skill-bar.layout4 .progress-box .title-box:not(:last-child) , .cnc-skill-bar.layout4 .progress-box .skill:not(:last-child) { margin-bottom: 30px; }
.cnc-skill-bar.layout4 .progress-box .skill-name, .cnc-skill-bar.layout4 .progress-box .progress-bar span { font-size: 18px; }
}

@media (max-width: 767px) {
    .cnc-skill-bar.layout4{padding:30px 0;}
    .cnc-skill-bar.layout4 :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size: 20px;}
    .cnc-skill-bar.layout4 :is(p) {font-size: 16px;}
    .cnc-skill-bar.layout4 .content-box .location p, .cnc-skill-bar.layout4 .content-box .location p small { font-size: 14px; }
    .cnc-skill-bar.layout4 .content-box, .cnc-skill-bar.layout4 .progress-box { max-width: 100%; }
.cnc-skill-bar.layout4 .content-box .profile-pic { width: 200px; height: 200px; margin-bottom: 20px; }
.cnc-skill-bar.layout4 .progress-box .skill-name, .cnc-skill-bar.layout4 .progress-box .progress-bar span { font-size: 16px; }      
}