.about-section{padding:90px 0;}
.about-section .container{display:flex;justify-content:space-between;align-items:center;}

.about-thumb {width:47%;position:relative;}
.about-thumb img {width:100%;}
.about-text {position:absolute;top:15px;left:-54px;padding:14px 0;background:var(--color-primary);}
.about-text h5 {padding:0 50px;font-size:26px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.about-text::after {content:'';display:inline-block;position:absolute;top:100%;border:27px solid var(--color-primary);border-left-color:transparent;border-bottom-color:transparent;}


.about-right{width:47%;}

.about-section-title{margin-bottom:50px;}

.about-section-title h4{font-size:22px;line-height:24px;color:var(--color-primary);font-weight:500;position:relative;display:inline-block;}
.about-section-title h4::before {position:absolute;content:"";height:2px;width:35px;background:var(--color-primary);top:6px;right:-48px;}
.about-section-title h4::after {position:absolute;content:"";height:2px;width:35px;background:var(--color-primary);top:15px;right:-57px;}

.about-section-title h2 {font-size:42px;line-height:1.2;margin:15px 0;color:#0b2c3d;font-weight:700;}

.about-section-title .t{font-size:16px;color:#4D4E4F;line-height:24px;}

.about-list ul {list-style:none;}
.about-list ul li {position:relative;padding-left:25px;font-size:17px;color:#1C1632;font-weight:500;}
.about-list ul li + li {margin-top:15px;}
.about-list ul li i {position:absolute;left:0;font-size:18px;color:var(--color-primary);}

.about-numbar {text-align:center;background:#1C1632;display:inline-block;padding:9px 25px 0;}
.about-numbar h4 {display:inline-block;font-size:32px;color:#ffffff;font-weight:600;margin-bottom:5px;}
.about-numbar .counter-per {color:#fff;font-size:20px;}
.about-numbar p {font-size:15px;color:#ffffff;font-weight:400;margin-bottom:15px;}


.about-info {display:flex;align-items:center;margin-top:50px;}

.roofing-btn{display:inline-block;}
.roofing-btn a{display:inline-block;font-size:17px;font-weight:500;letter-spacing:1px;background:var(--color-primary);color:#fff;padding:13px 25px;border-radius:var(--button-radius);position:relative;z-index:1;}
.roofing-btn a::before {position:absolute;content:"";background-color:var(--btn-hover,--color-second);width:101%;height:0%;left:50%;top:50%;border-radius:var(--button-radius);transform:translate(-50%,-50%) rotate(0deg);z-index:-1;transition:all 500ms ease;}
.roofing-btn a:hover::before {height:103%;}

.about-us-icon {margin-left:32px;}
.about-us-icon i{width:60px;height:60px;border-radius:32px;line-height:60px;text-align:center;font-size:24px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 20%,#ffffff 80%);display:inline-block;}

.about-us-phone{margin-left:20px;}
.about-us-phone h5 {font-size:18px;line-height:24px;color:#212121;font-weight:600;}
.about-us-phone h5 a,.about-us-phone h5 span{display:block;line-height:42px;font-weight:400;}
        
                    
                    
@media screen and (max-width:1550px) {
.about-section{padding:80px 0;}
.about-section-title h2{font-size:40px;}                    
}                    
                    
@media screen and (max-width:1441px) {
.about-section{padding:75px 0;}
.about-section-title h2{font-size:38px;}                    
}
 
@media screen and (max-width:1367px) {
.about-section{padding:70px 0;}
.about-section-title h2{font-size:36px;}
}

@media screen and (max-width:1280px) {
.about-section{padding:60px 0;}
.about-section-title h2{font-size:34px;}
.about-text h5{font-size:22px;}
.about-numbar h4{font-size:28px;}
  
}
 
@media screen and (max-width:1171px) {
.about-section-title h2{font-size:32px;}
} 
 
@media screen and (max-width:992px) {
.about-section-title h2{font-size:30px;}
.about-section .container{display:block;}
.about-thumb{width:60%;margin:0 auto;}
.about-right{width:100%;margin:25px 0 0;}
.about-section-title{margin-bottom:30px;text-align:center;}
.about-info{margin-top:40px;justify-content:center;}
.about-list ul li{font-size:16px;}
  
}


@media screen and (max-width:768px) {
.about-section{padding:30px 0 40px;}
.about-section-title h2{font-size:28px;}
.about-section-title h4{font-size:20px;}
.about-info{margin-top:30px;}
.about-numbar h4{font-size:26px;}  
}

@media screen and (max-width:576px) {
.about-section-title h2 {font-size:26px;line-height:1.1;}
.roofing-btn.about a {padding:13px 30px;font-size:16px;}
.about-list ul li + li {margin-top:5px;}
.about-thumb{width:100%;}
.about-text::after{display:none;}
.about-text{left:0;padding:12px 0;}  
.about-text h5{font-size:18px;padding:0 20px;}  
.about-counter{text-align:center;margin:20px 0 0;}
.about-us-phone h5{font-size:17px;}
.about-us-phone h5 a, .about-us-phone h5 span{line-height:30px;}
.about-numbar h4{font-size:24px;}
.about-numbar p{font-size:14px;}
  
}

@media screen and (max-width:480px) {
.about-section-title h2 {font-size:24px;}
.about-section-title h4{font-size:18px;}
.about-list ul li + li {margin-top:5px;}
.about-us-icon,.about-us-phone{display:none;}
.about-info{margin-top:20px;}
.roofing-btn.about a{padding:10px 30px;font-size:14px;}
}

@media screen and (max-width:420px) {
.about-section-title h2 {font-size:22px;}
}