/*
Theme Name: concrete strucure
Description: Child theme of concrete strucure
Author: concrete strucure
Version: 1.0.0
Text Domain: concrete strucure
Template: twentytwentyone
*/

/*  ====================================================== services page ====================================================== */    
/*  =========================== detail service banner section =========================== */
.single-services .service-about-banner-section .row{flex-direction: row-reverse;}
.single-services .banner-content-wrap{padding-block:75px;text-align: unset;}
.single-services .banner-content-inner p{font-weight: 500;}
.single-services .banner-content-inner{max-width: 482px;}
.single-services .banner-image::after{background: none;}
/* .single-services .section-project-main .row{margin-bottom: 0;} */
/*  =========================== services section =========================== */
.page-template-services .section-services{background-color: var(--white);}
.page-template-services .section-services p span{font-weight: 700;}
.page-template-services .section-services .row{margin-bottom: 0;}

/*  ====================================================== services details page ====================================================== */
/*  =========================== services details about section =========================== */
.img-with-back-border-1{position: relative;width: 355px; height: 488px;}
.img-with-back-border-1::before{content: ''; border: 7px solid var(--orange); width: 100%; height: 100%; position: absolute; top: -42px; left: -42px; display: block;z-index: -1;}
.about-service-image img{width: 100%;height: 100%;object-fit: cover;}
/* content */
.about-service-content{text-align: justify;}
.about-service-content p:first-child{font-weight: 500;}
.about-service-content p{margin-bottom: 30px;}
.service-about-button{gap: 12px;}
/*  =========================== services info section =========================== */
/* content */
.section-service-info .col-lg-6{padding-inline: 0;}
.service-info-wrap{padding-block: 95px;}
.service-info-inner{max-width: 485px;margin:0 auto;}
.service-info-inner p:first-child{margin-bottom: 42px;letter-spacing: 0;}
.service-info-inner .heading-style-5{margin-bottom: 37px;font-family: 'Raleway', sans-serif;font-weight: 700;letter-spacing: 5.4px;}
.service-info-inner ul{margin-bottom: 51px;padding: 0;}
.service-info-inner ul li{position:relative;padding-left:28px;display:flex;align-items: center;}
.service-info-inner ul .heading-style-5{font-weight: 400;margin-bottom:2px;font-family: 'DM Sans', sans-serif;letter-spacing: unset;}

/* image */
.service-info-image{height: 763px;}
.service-info-image img{height: 100%;}

/* ===================================== media quiery  ===================================== */
@media screen and (max-width:1199px) {
    .container{max-width: 960px;}
    /*  ====================================================== services page ====================================================== */   
    /*  =========================== detail service banner section =========================== */
    .single-services .banner-content-wrap{padding-block:65px;}
    .single-services .banner-content-inner{max-width: 400px;}
    
    /*  ====================================================== services details page ====================================================== */    
    /*  =========================== services details about section =========================== */
    .img-with-back-border-1{width: 340px; height: 480px;margin: 0 auto;}
    .img-with-back-border-1::before{top: -36px; left: -36px; }
    /* content */
    .about-service-content p{margin-bottom: 26px;}
    .service-about-button{gap: 10px;}    
    /*  =========================== services info section =========================== */
    /* content */
    .service-info-wrap{padding-block: 80px;}
    .service-info-inner{max-width: 395px;}
    .service-info-inner p:first-child{margin-bottom: 32px;}
    .service-info-inner .heading-style-5{margin-bottom: 28px;}
    .service-info-inner ul{margin-bottom: 42px;}
    /* image */
    .service-info-image{height: 100%;}
    
}
@media screen and (max-width:991px) {
    .container{max-width: 720px;}
    /*  ====================================================== services page ====================================================== */    
    /*  =========================== detail service banner section =========================== */
    .single-services .banner-image{height: 300px;}
    .single-services .banner-content-wrap{padding-block:55px;}
    .single-services .banner-content-inner{max-width: 600px;}
    
    /*  ====================================================== services details page ====================================================== */    
    /*  =========================== services details about section =========================== */
    .img-with-back-border-1{width: 310px; height: 440px;}
    .img-with-back-border-1::before{top: -32px; left: -32px; }
    /* content */
    .about-service-content p{margin-bottom: 20px;}
    .service-about-button{gap: 10px;}    
    /*  =========================== services info section =========================== */
    /* content */
    .section-service-info .row{flex-direction: column-reverse;}
    .service-info-wrap{padding-block: 70px;}
    .service-info-inner{max-width: 600px;}
    .service-info-inner p:first-child{margin-bottom: 30px;}
    .service-info-inner .heading-style-5{margin-bottom: 20px;}
    .service-info-inner ul{margin-bottom: 32px;}
    .service-info-inner ul li { padding-left: 25px;}
    
    /* image */
    .service-info-image{height: 700px;}
}
@media screen and (max-width:767px) {
    .container{max-width: 540px;}
    /*  ====================================================== services page ====================================================== */   
    /*  =========================== detail service banner section =========================== */
    .single-services .banner-image{height: 240px;}
    .single-services .banner-content-wrap{padding-block:50px;}
    .single-services .banner-content-inner{max-width:520px;}
    
    /*  ====================================================== services details page ====================================================== */    
    /*  =========================== services details about section =========================== */
    /* content */
    .img-with-back-border-1{margin-block: 30px;}
    .about-service-content p{margin-bottom: 18px;}
    .service-about-button{gap: 12px;}    
    /*  =========================== services info section =========================== */
    /* content */
    .service-info-wrap{padding-block: 62px;}
    .service-info-inner{max-width: 520px;}
    .service-info-inner p:first-child{margin-bottom: 26px;}
    .service-info-inner .heading-style-5{margin-bottom: 16px;}
    .service-info-inner ul{margin-bottom: 26px;}
    .service-info-inner ul li { padding-left: 25px;}    
    /* image */
    .service-info-image{height: 630px;}
}
@media screen and (max-width:575px) {
    .container{max-width: 100%;}
    /*  ====================================================== services page ====================================================== */  
    /*  =========================== detail service banner section =========================== */
    .single-services .banner-image{height: 230px;}
    .single-services .banner-content-wrap{padding-block:42px;}
    .single-services .banner-content-inner{max-width:100%;}
    .single-services .section-about-service .row{row-gap: 30px;}
    /*  ====================================================== services details page ====================================================== */    
    /*  =========================== services details about section =========================== */
    .img-with-back-border-1{width: 240px; height: 320px;margin-block: 30px;}
    .img-with-back-border-1::before{top: -28px; left: -28px; }
    /* content */
    .img-with-back-border-1{margin-block: 20px;}    
    .about-service-content p{margin-bottom: 16px;}
    .service-about-button{gap: 10px;}    
    /*  =========================== services info section =========================== */
    /* content */
    .service-info-wrap{padding-block: 60px;}
    .service-info-inner{max-width: 100%;padding-inline: 30px;}
    .service-info-inner p:first-child{margin-bottom: 22px;}
    .service-info-inner .heading-style-5{margin-bottom: 15px;}
    .service-info-inner ul{margin-bottom: 22px;}
    .service-info-inner ul li { padding-left: 22px;}    
    /* image */
    .service-info-image{height: 390px;}
}