.cnc-skill-bar.layout2{padding:100px 0; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; background-image: url(../../../images/skill-bar/skil-bg-img-layout2.webp); }
.cnc-skill-bar.layout2 .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #005bc5e6; }
.cnc-skill-bar.layout2 .container{max-width:1430px;width:100%;padding-left:15px;padding-right:15px;margin:0 auto; position: relative;}
.cnc-skill-bar.layout2 .row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px;}        
.cnc-skill-bar.layout2 .progress-box{max-width:52%;width:100%;padding-left:15px;padding-right:15px;position: relative; }        
.cnc-skill-bar.layout2 .align-items-center{align-items:center;}
.cnc-skill-bar.layout2 :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size:48px;line-height:normal;margin:0 0 10px;color: #fff; word-break: break-word;font-weight: 700; }         
.cnc-skill-bar.layout2 :is(p) { font-size:20px;line-height:normal;margin:0 0 10px;color:#fff; word-break: break-word;font-weight: 400;}
.cnc-skill-bar.layout2 :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):last-child, .cnc-skill-bar.layout2 :is(p):last-child { margin-bottom: 0; }
.cnc-skill-bar.layout2 small { font-size: 16px; line-height: normal; word-break: break-word; }             
.cnc-skill-bar.layout2 .title-box:not(:last-child) { margin-bottom: 30px; }  
.cnc-skill-bar.layout2 .content-box { max-width: 475px; width: 100%; margin: 0 auto; color: #fff; padding-left: 15px;padding-right: 15px;position: relative;}            
.cnc-skill-bar.layout2 .content-box .btn{display:inline-block; vertical-align: middle; background-color:#fff;color:#005BC5;font-weight:400;padding:14px 35px 14px 35px;border-radius:5px;font-size:20px;border:none;cursor:pointer;transition:all 0.3s ease-in-out;position:relative;line-height:normal;position:relative;text-decoration:none;white-space:nowrap;}

/* Remove vertical-align only for i tag */
.cnc-skill-bar.layout2 .content-box .btn:has(i) {
    vertical-align: unset;
}
.cnc-skill-bar.layout2 .content-box .btn .arrow{margin-left:15px;transition:all 0.3s ease-in-out;position:relative;left:0;width:22px;height:22px;display:inline-block;vertical-align:middle;}        

/* Remove vertical-align only for i tag */
.cnc-skill-bar.layout2 .content-box .btn .arrow:has(i) {
    vertical-align: unset;
}
.cnc-skill-bar.layout2 .content-box .btn .arrow img, .cnc-skill-bar.layout2 .content-box .btn .arrow svg{width:100%;height:100%;object-fit:contain;object-position:center;}
.cnc-skill-bar.layout2 .content-box .btn:hover,.cnc-skill-bar.layout2 .content-box .btn:focus{background-color:#f5f5f5;}
.cnc-skill-bar.layout2 .content-box .btn:hover .arrow{left:5px;}
.cnc-skill-bar.layout2 .content-box .remove-arrow .arrow{display:none;}                
.cnc-skill-bar.layout2 .content-box :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){font-size:32px; word-break: break-word; }   
.cnc-skill-bar.layout2 .content-box a { color: #fff; text-decoration: underline; }                   
.cnc-skill-bar.layout2 .progress-box .skills-wrap { overflow: hidden; }
.cnc-skill-bar.layout2 .progress-box .skill{ display: flex; align-items: center; gap: 23px;margin-bottom: 65px;}
.cnc-skill-bar.layout2 .progress-box .skill-name{font-size:24px;font-weight:700;line-height:normal;color:#fff;display:inline-block;min-width: 126px; word-break: break-word; }
.cnc-skill-bar.layout2 .progress-box .progress{background:rgba(50,50,50,0.5);border-radius:50px;min-height:30px;position:relative;width: calc(100% - 100px);}
.cnc-skill-bar.layout2 .progress-box .progress-bar{min-height:30px;width:0; max-width: 100%; border-radius:50px;background:#fff;position:relative;transition:width 2s ease-in-out;}
.cnc-skill-bar.layout2 .progress-box .progress-bar span{position:absolute;right:0;bottom:-27px;font-size:20px;font-weight:700;z-index: 10;color:#fff; line-height:normal; white-space: nowrap; }     
.cnc-skill-bar.layout2 .content-box.full-content-box, .cnc-skill-bar.layout2 .progress-box.full-progssbox { max-width: 100%; }

@media (max-width: 1024px) {
.cnc-skill-bar.layout2{padding:50px 0;}
.cnc-skill-bar.layout2 .content-box :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size: 28px; }
.cnc-skill-bar.layout2 :is(p) { font-size: 18px; }
.cnc-skill-bar.layout2 .progress-box :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size: 40px; } 
.cnc-skill-bar.layout2 .title-box:not(:last-child) { margin-bottom: 24px; }        
.cnc-skill-bar.layout2 .progress-box .skill { gap: 30px; margin-bottom: 40px; }
.cnc-skill-bar.layout2 .progress-box .skill-name { font-size: 22px; }     
.cnc-skill-bar.layout2 .progress-box .progress-bar span{font-size: 18px;}
.cnc-skill-bar.layout2 .progress-box .progress-bar, .cnc-skill-bar.layout2 .progress-box .progress { height: 25px; }   
.cnc-skill-bar.layout2 .content-box .btn{font-size: 18px;}
} 

@media (max-width: 991px) {
.cnc-skill-bar.layout2 .content-box, .cnc-skill-bar.layout2 .progress-box { max-width: 100%; margin-bottom: 30px; }
.cnc-skill-bar.layout2 .content-box { margin-bottom: 0; }
}

@media (max-width: 767px) {       
.cnc-skill-bar.layout2{padding:30px 0;} 
.cnc-skill-bar.layout2 .content-box :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size: 24px; }
.cnc-skill-bar.layout2 :is(p) { font-size: 16px; }
.cnc-skill-bar.layout2 .progress-box :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { font-size: 30px; }        
.cnc-skill-bar.layout2 .title-box:not(:last-child) { margin-bottom: 20px; }        
.cnc-skill-bar.layout2 .content-box, .cnc-skill-bar.layout2 .progress-box { max-width: 100%; }
.cnc-skill-bar.layout2 .progress-box .skill { margin-bottom: 20px; }
.cnc-skill-bar.layout2 .progress-box .skill-name { font-size: 20px; }
.cnc-skill-bar.layout2 .progress-box .progress-bar span{font-size: 16px;bottom: -22px; }
.cnc-skill-bar.layout2 .content-box, .cnc-skill-bar.layout2 .progress-box { max-width: 100%; }
.cnc-skill-bar.layout2 .progress-box .progress-bar, .cnc-skill-bar.layout2 .progress-box .progress { height: 20px; } 
.cnc-skill-bar.layout2 .progress-box .skill { flex-direction: column; gap: 10px; align-items: flex-start; }
.cnc-skill-bar.layout2 .progress-box .progress { width: 100%; }
.cnc-skill-bar.layout2 .content-box .btn{font-size: 16px;}
}