.banner-section {
    width: auto;
    height: auto;
}
.banner-section img, .feature-section img, .service-section img {
    width: 100%;
}
.banner-section-content {
    margin: 10% 0 !important;
}
.banner-section-content p{
    font-weight: 300;
    color: #5c646c !important;
}
.banner-section-btn a.wp-block-button__link{
    text-decoration: none;
}
.banner-section-btn a.wp-block-button__link:hover {
    background-color: #fff !important;
    color:var(--primary-color) !important;
} 
.feature-section.wp-block-columns {
    position: relative;
    z-index: 1;
    margin-top: -6%;
    gap: 1.5em !important;
}
.feature-box {
    padding: 20px 15px;
    box-shadow: 0 0 15px 2px #ddd;
}
.feature-box:hover {
    background-color: var(--primary-color) !important;
}
.feature-box:hover h3,
.feature-box:hover p {
    color: #fff !important;
}

.service-section h3::after {
    background-color: var(--primary-color);
    content: "";
    display: block;
    margin: 10px auto;
    width: 100px;
    height: 3.7px;
    position: absolute;
    left:50%;
    transform: translate(-50%);
}
.project-box  {
    overflow: hidden;
    text-align: left;
    border-radius: 5px;
}
.project-box-content {
    left:0;
    bottom:0;
    position: absolute;
    width: 100%;
    opacity: 0;
    z-index: 2;
    transition: all 0.3s ease 0s;
}
.project-box:hover .project-box-content {
    opacity: 1;
}
@media  screen and (max-width:992px) and (min-width:767px) {
    .banner-section .banner-section-content h1{
        font-size: 35px !important;
    }
   .feature-section.wp-block-columns, .service-section .wp-block-columns{
        flex-wrap: nowrap !important;
   }
}
@media screen and (max-width: 720px) {
    .banner-section .banner-section-content h1{
        font-size: 25px !important;
    }
    .banner-section .banner-section-content p{
        font-size: 16px !important;
    }
}
@media  screen and (max-width:1439px) and (min-width:1023px) {
    
}