@charset "UTF-8";
/* CSS Document */
.expert {margin: 10px 0; padding: 0 0}
.expert select {

  /* styling */background-color: white;border: 1px solid #000;border-radius: 10px;display: inline-block;font: inherit;line-height: 1.5em;padding: 10px 20px;

  /* reset */margin: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none; width: 28%}


/* arrows */
.expert select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, black 50%),
    linear-gradient(135deg, black 50%, transparent 50%),
    linear-gradient(to right, white, white);
  background-position: calc(100% - 20px) calc(1.2em + 2px),
    calc(100% - 15px) calc(1.2em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  font-size: 12px;
  font-weight: 300;
  font-style: normal;
}



.expert  option {
  overflow: hidden;
  white-sapce: no-wrap;
  text-overflow: ellipsis;
  width: 80%;
}

.expert .btnC{width: 10%;background: #000;border-radius: 100px;border: 0;font-weight: 400;font-style: normal;font-size: 16px;/* text-transform: uppercase; */color: #fff;margin: 0px 0;padding: 10px 15px;}

.expert input{ background-color: white; border: 1px solid #000; border-radius: 10px; color: #000;padding: 10px 20px; font-size: 12px; font-weight: 300; font-style: normal; width: 28% }

.expert-Corner-holder {position: relative;aspect-ratio: 1 / 0.35; overflow: hidden  }
.expert-CornerMob {height: auto; overflow: hidden; aspect-ratio: 1 / 0.7;}
.expert-CornerPM{ padding: 0 !important; margin: 0 !important}
.expertBfirst{ padding: 2px 1px 0 0!important; margin: 0 !important}
.expert-CornerPMInn{ padding: 2px !important; margin: 0 !important}
.expert-Corner-holder::before{position: absolute; content:""; width: 100%; height: 100%; background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.7189469537815126) 0%, rgba(255,255,255,0) 66%); top:0; left: 0 }
.expert-Corner-holder img{width: 100%;height: 100%;/* position: relative; *//* transform: translate(-50%, -50%); *//* left: 50%; *//* top: 50%; *//* position: relative; *//*filter: brightness(0.60);*/object-fit: cover;object-position: center;}
.expert-Corner-holder a{ text-decoration: none;}
.expert-Corner-text { position: absolute; bottom:10px; left: 10px; color: #fff; text-align: left; width: 95%; z-index: 2 }

.expert-Corner-text h3{ font-weight: 700; font-style: normal; width: 100%; font-size: 28px; color: #fff  }
.expert-Corner-text h4{ font-weight: 700; font-style: normal; width: 100%; font-size: 16px; color: #fff  }
.expert-Corner-text p{ font-weight: 400; font-style: normal; width: 100%; font-size: 14px; color: #fff  }
.expert-Corner-text .read-more{font-weight: 400;font-style: normal;width: 100%;font-size: 14px;text-decoration: underline;color: #fff;}


.expert-corner-blog {display: flex;flex-wrap: wrap; align-items:flex-start; justify-content: flex-start;text-align: left; margin: 20px auto;}
.expert-corner-blogMar h2{ margin: 40px 0 10px 0;}
.expert-corner-blog div {width: 50%;margin: 5px 0;}
.expert-corner-blog div:nth-child(1) {width: 46%;margin-right: 2%; overflow: hidden;  aspect-ratio: 16/9;}
.expert-corner-blog img{width: 100%;height: 100%;/* position: relative; *//* transform: translate(-50%, -50%); */left: 50%;/* top: 50%; *//* position: relative; */object-fit: cover;object-position: center;}
.expert-corner-blog h1 { font-weight: 700; font-style: normal; font-size: 16px; text-transform: uppercase;  margin: 0; }
.expert-corner-blog h2 { font-weight: 700; font-style: normal; font-size: 16px; text-transform: uppercase;  margin: 0; }
.expert-corner-blog p {font-weight: 400;font-style: normal;font-size: 14px;margin: 5px 0;}
.expert-corner-blog a {font-weight: 400; font-style: normal; font-size: 12px; display:inline-block; border-radius: 50px; border: 0; padding: 10px 0px; outline:0;  color: #000}
.expert-btn{ background: #000 !important; color: #fff !important; text-decoration: none !important; margin-left: 0; margin-top: 10px}

.blog-page-holder{display: flex;flex-wrap: wrap; align-items:flex-start; justify-content:space-between;text-align: left;}
.blog-page-holder .blog-post-left {width: 68%; position: relative; padding-right: 2%; border-right: 1px solid #D1D1D1; padding-bottom: 40px}
.blog-page-holder .blog-post-left img { width: 100%; height: auto}
.blog-page-holder .blog-post-left ul { margin-left: 10px; padding: 0 }
.blog-page-holder .blog-post-left ul li{ margin-left: 10px; padding: 0; font-size: 14px; }
.blog-page-holder .blog-post-left p{ font-size: 14px; font-weight: 400}
.blog-page-holder .blog-post-left span{font-size: 14px;font-weight: 700;margin: 20px 0;display: block;}
.blog-page-holder .blog-post-left a{ font-size: 14px; font-weight: 700; text-decoration: underline; color: #000}
.blog-page-holder .blog-post-right{ width: 30%; display:flex; justify-content:flex-start; flex-wrap: wrap;}
.blog-page-holder .blog-post-left h1 {font-weight: 700;font-style: normal ;font-size: 36px; text-transform: uppercase; margin: 10px 0 }
.blog-page-holder .blog-post-left h2 {font-weight: 700;font-style: normal ;font-size: 18px; text-transform: uppercase; margin: 20px 0 }
.blog-page-holder .blog-post-left ul {margin: 10px 0 10px 10px;padding: 0;}
.blog-page-holder .blog-post-left h3 {font-size: 16px;}
.blog-page-holder .blog-post-left h4 {font-size: 14px;}

.blog-page-holder .blog-post-card{ display: flex; font-size: 10px; font-weight: 400; align-items: center; margin: 0 }
.blog-page-holder .blog-post-card li { margin: 0 5px 15px 0px !important; padding: 0 5px 0 0px; list-style-type: none}
.blog-page-holder .blog-post-card li::after { margin: 0 0 0 5px; padding: 0 0 0 5px; content: var(--bs-breadcrumb-divider, "/") }
.blog-page-holder .blog-post-card li:last-child::after {display: none}
.blog-page-holder .blog-post-card li img{ margin-right: 3px; width: 14px; height: auto}
.blog-page-holder .blog-image {width: 100%;height: auto;aspect-ratio: 1/0.45;overflow: hidden;} 
.blog-page-holder .blog-image img {width: 100%;height: 100%;/* position: relative; *//* transform: translate(-50%, -50%); *//* left: 50%; *//* top: 50%; */object-fit: cover;object-position: center;} 

.blog-page-holder .blog-post-left .blog-page-table { width: 100%}

.blog-page-holder .blog-post-left table { margin: 40px 0; width: 100%}
.blog-page-holder .blog-post-left table thead th{padding: 10px;border-bottom: 1px solid #fff;font-size: 14px;background: var(--waterproofing-mid);color:#fff;font-weight: 600;width: 25%;border-right: 1px solid #fff;} 
.blog-page-holder .blog-post-left table { width: 100%}
.blog-page-holder .blog-post-left tr td { padding: 10px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; font-size: 14px;}
.blog-page-holder .blog-post-left tr td{background-color:var(--normal-grey); font-weight: 400; color: #000; width: 25%; } 
.blog-page-holder .blog-post-left tr td:first-child{background-color:var(--mid-grey) !important ; font-weight: 600; color: #000; } 
.blog-page-holder .blog-post-left .share-holder { display: flex; font-size: 14px; font-weight: 400; align-items: center;}
.blog-page-holder .blog-post-left .share-holder span{ display: flex; font-size: 14px; font-weight: 600; align-items: center; margin-right: 10px}
.blog-page-holder .blog-post-left .share-holder .share-bg{ height: 30px; width: 30px; padding: 7px 0 0 0;  background: #000; margin: 0 2px;  color: #fff !important; border-radius: 50%; text-align: center; display: flex; vertical-align: middle; justify-content: center; font-size: 16px !important}
.blog-page-holder .blog-post-left .subscribe-holder { width: 100%; margin-top: 40px }
.blog-page-holder .blog-post-left .subscribe-holder p {  display: block; font-size: 14px; font-weight: 600; }
.blog-page-holder .blog-post-left .subscribe-holder .subscribe-inn { width: 100%; display: flex; }
.blog-page-holder .blog-post-left .subscribe-holder .subscribe-inn input { width: 280px; padding: 10px; margin-right: 10px; font-size: 12px; border-radius: 8px; }
.blog-page-holder .blog-post-left .subscribe-holder .subscribe-inn .subscribebtn{width: 120px; background: #000;border-radius: 100px;border: 0;font-weight: 400;font-style: normal;font-size: 14px;/* text-transform: uppercase; */color: #fff;padding: 10px 15px;}

.blog-related-page-holder {position: relative;  }
.blog-related-page-holder div:nth-child(1) {aspect-ratio: 3 / 2; overflow: hidden}
.blog-related-page-holder img{ width: 100%; height: 100%; object-fit: cover; object-position: center;}
.blog-related-page-holder a{ text-decoration: none;}

.blog-related-page-holder .text-holder {position: absolute; bottom:10px; text-align: left; left: 10px}
.blog-related-page-holder h4{ font-weight: 700; font-style: normal; width: 100%; font-size: 16px; color: #fff;   }
.blog-related-page-holder .read-more{font-weight: 400;font-style: normal;width: 100%;font-size: 12px;text-decoration: underline;color: #fff;}



.blog-page-holder .blog-post-right .search {width: 100%;display: flex;/* align-items: baseline; */}
.blog-page-holder .blog-post-right .search input { width: 85%; padding: 10px; margin-right: 10px; font-size: 12px; border-radius: 8px; }
.blog-page-holder .blog-post-right .search .gobtn{width: 15%; background: #000;border-radius: 100px;border: 0;font-weight: 400;font-style: normal;font-size: 14px;/* text-transform: uppercase; */color: #fff;padding: 10px 15px;}

.blog-page-holder .blog-post-right p { margin: 20px auto 5px auto; text-transform: uppercase; width: 100%; font-weight: 700; font-size: 16px}
.blog-page-holder .blog-post-right ul {margin: 10px auto;border-top: 1px solid #D1D1D1;width: 100%;position: relative;padding: 0;}
.blog-page-holder .blog-post-right ul li {margin: 0 0;border-bottom: 1px solid #D1D1D1;font-size: 14px;list-style-type: none;padding: 10px 0 10px 20px;width: 100%; position: relative;}
.blog-page-holder .blog-post-right ul li:before {
    font-family: 'boxicons' !important;
    content: "\ea50";
    color: #000;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    margin-top: px;
    top: 7px;
    position: absolute;
    left: 0px;
    font-size: 18px;
    }

.blog-post-right ul li a{ color: #000; text-decoration: none}

@media (max-width: 767px) {
	.expert-CornerMob { aspect-ratio: 1 / 0.5; } 
	.expert-Corner-holder { aspect-ratio: 1 / 0.5; } 
	.expert-CornerPMInn{ padding: 2px 0px !important; margin: 0 !important}  }


@media (max-width: 768px) {
	.expert .find { display: flex; flex-wrap: wrap}

	.expert select { margin: 10px auto}
  
	.expert-corner-blog { margin: 5px 0}
	.expert-corner-blog h1 { font-size: 14px}
	.expert-corner-blog h2 { font-size: 14px}
	.expert-corner-blog p { margin: 5px 0; font-size: 12px; overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;}
		.expert-corner-blog div { width: 100%;}
	.expert-corner-blog div:nth-child(1) { width: 100%;}
	  .expert select:nth-child(1) {width: 40% }
.expert input {width: 40% }
	.expert .btnC { width: 15%;}
		.blog-page-holder .blog-post-left { width: 100% ; padding-right: 0; border: 0;}
	.blog-page-holder .blog-post-right { width: 100%}

	.blog-page-holder .blog-post-left h1 {font-size: 26px;}
	.blog-page-holder .blog-post-right .search { flex-wrap: wrap}
	.blog-page-holder .blog-post-right .search input { width: 75%}
	.blog-page-holder .blog-post-right .search .gobtn {width: 80px;/* margin-top: 10px; */}
		.blog-page-holder .blog-post-left .blog-page-table {overflow-y: scroll;max-width: 768px;width: 100%;}
	.blog-page-holder .blog-post-right ul li { font-size: 12px}


}

@media (max-width: 500px) {
 
	.expert-Corner-text p {display: none;}
	.expert-corner-blog div { width: 100%;}
	.expert-corner-blog div:nth-child(1) { width: 100%;}
	  .expert select:nth-child(1) {width: 100% }
.expert input {width: 100% }
	.expert .btnC { width: 100px; margin: 10px 0}
	.expert-Corner-text h3 { font-size: 14px}
	.expert-Corner-text h4 { font-size: 14px}
	.expert-btn { font-size: 14px}
	.blog-page-holder .blog-post-left h1 { font-size: 28px}
	.blog-page-holder .blog-post-card { flex-wrap: wrap;}
	.blog-page-holder .blog-post-left ul li { font-size: 12px}
	.blog-page-holder .blog-post-left p { font-size: 12px}
	.blog-page-holder .blog-image { border:5px solid}
	.waterproofing-mid-border { border-color: var(--waterproofing-mid);}
	.blog-page-holder .blog-post-left table thead th {    font-size: 12px;}
	.blog-page-holder .blog-post-left tr td{ font-size: 12px;}
		.blog-page-holder .blog-post-right .search input { width: 60%}


}