/*=================================== banner ====================================*/
.banner .owl-prev, .owl-next {position: absolute;top:45%;}
.banner .owl-prev i,.banner .owl-next i {padding: 5px;color: aliceblue;}
.banner .owl-prev{left: 20px;}
.banner .owl-next {right: 20px;}
.banner-section{height: 500px;}
.banner-section .slide{height: 500px; background-size: cover;background-position: center;background-repeat:repeat;text-align: center;}
.banner-section .banner .slide1{background-image:  linear-gradient( to bottom right,  rgba(0, 0, 0, 1),  rgba(42, 42, 43, 0.5) ),url('/assets/uploads/banner/1.gif'); }
.banner-section .banner .slide2{background-image:  linear-gradient( to bottom right,  rgba(0, 0, 0, 1),  rgba(42, 42, 43, 0.5) ),url('/assets/uploads/banner/2.gif'); }
.banner-section .banner .slide img{padding-top: 8%;  width: 150px ; margin: 0 auto;}
.banner-section .banner .slide h1{padding-top: 2%; color: var(--bg-clr1); font-family: var(--font-title); font-size: var(--fontSize-2); font-weight: var(--weight-semibold); text-shadow: 1px 1px 5px var(--secondary-clr); }
.banner-section .banner .slide h1 span{ display: inline; color: var(--secondary-clr); text-shadow: 1px 1px 5px var(--primary-clr); font-weight: var(--weight-bold); }
.banner-section .banner .slide p{ font-size: var(--fontSize-4); color: var(--bg-clr1); font-family: var(--font-subtitle); letter-spacing: 1px; margin-top: 20px; font-weight: var(--weight-medium); margin-bottom: 30px; }
.banner-section .banner .slide a{ background: var(--secondary-clr); color: var(--primary-clr); padding: 10px 20px; border-radius: 20px; font-weight: var(--weight-medium); }
.banner-section .banner .slide a:hover{ box-shadow: 5px 1px 5px var(--primary-clr); transform: scale(1.1); }
@media (max-width: 992px){
  .banner-section{ height: 400px; }
  .banner-section .slide{ height: 400px; }
  .banner-section .banner .slide img{ padding-top: 12%; width: 100px ; margin: 0 auto; }
  .banner-section .banner .slide h1{ font-size: var(--fontSize-3); padding-top: 2%; width: 90%; margin: 0 auto; line-height: 60px; }
}
@media (max-width: 767px){
  .banner-section{ height: 370px; } 
  .banner-section .slide{ height: 370px; } 
  .banner-section .banner .slide img{ padding-top: 13%; } 
  .banner-section .banner .slide h1{ padding-top: 2%; font-size: var(--fontSize-4); } 
  .banner-section .banner .slide p{ font-size: var(--fontSize-7); margin-top: 5px; margin-bottom: 30px; } 
  .banner-section .banner .slide a{ padding: 7px 15px; font-size: var(--fontSize-9); }
}
@media (max-width: 450px){
  .banner .owl-prev{ left: 5px; } 
  .banner .owl-next { right: 5px; } 
  .banner-section{ height: 300px; } 
  .banner-section .slide{ height: 300px; } 
  .banner-section .banner .slide h1{ font-size: var(--fontSize-5); line-height: 40px; } 
  .banner-section .banner .slide p{ font-size: var(--fontSize-8); margin-top: 5px; margin-bottom: 30px; } 
  .banner-section .banner .slide a{ padding: 5px 10px; font-size: var(--fontSize-10); }
}
@media (max-width: 390px){
.banner-section .banner .slide img{ width: 80px ; padding-top: 17%; }
}
/* ==================================  Progress bar  ======================================== */
.progress-container { background: var(--primary-clr); border-radius: 20px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; width: 80%; margin: 2% auto; box-shadow: rgba(4, 143, 202, 0.89) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; }
.progress-item { display: flex; flex-direction: column; align-items: center;margin: 3% 0 1%;}
.circular { --val: 0; /* start at 0 */ --target: 0; /* JS will set target */ --size: 70px; --thickness: 8px; --track: #1f2a3a; --fill: #4aa3ff; width: var(--size); aspect-ratio: 1/1; border-radius: 50%; background: conic-gradient( var(--fill) calc(var(--val) * 1%), var(--track) calc(var(--val) * 1%) ); display: grid; place-items: center; position: relative; transition: background 0.2s linear;box-shadow:  #465569 0px 0px 10px 2px; }
.circular::before { content: ""; position: absolute; inset: var(--thickness); background: var(--primary-clr);border-radius: 50%; }
.circular span { position: relative;color: var(--secondary-clr); font-size: var(--fontSize-9);font-weight: bold;}
.progress-container .label {font-family: var(--font-subtitle); margin-top: 20px; text-align: center;font-size: var(--fontSize-8); color: #d3d3d3;font-weight: var(--weight-semibold);}
@media (max-width:767px){
  .progress-container {width: 90%; margin: 10% auto 2%; border-radius: 20px; }
  .progress-item { margin: 5% 0;}
  .circular span {  font-size: var(--fontSize-10)}
  .progress-container .label {font-size: var(--fontSize-9);}
}
@media (max-width:450px){
  .progress-container {border-radius: 5px;padding-top: 40px; }
  .circular {--size: 60px; --thickness: 6px;}
  .circular span {font-size: var(--fontSize-11);}
  .label {font-size: var(--fontSize-11);margin-top: 10px;}
}
/*=================================== about =========================================*/
.about{ text-align: center; width: 80%; margin: 4% auto 5%; }
.about p{ color: var(--primary-clr); width: 75%; margin: 30px auto ; }
.about img{ width: 200px; height: 200px; margin: 3% auto 6%; border-radius: 50%; box-shadow: var(--primary-clr) 0px 10px 36px 0px, var(--primary-clr) 0px 0px 0px 1px; }


@media (max-width: 992px){
  .about{ margin: 6% auto 5%; } 
  .about img{ width: 200px; height: 200px; margin: 2% auto 5%; } 
  .about p{ width: 100%; margin: 30px auto 30px; }
}
@media (max-width: 767px){
  .about{ width: 90%; } 
  .about img{ width: 180px; height: 180px; margin: 5% auto; } 
  .about p{ width: 100%; margin: 20px auto 10px; } 
  .about p:nth-child(3){ margin: 20px auto 30px; } 
}
@media (max-width: 450px){
  .about{ width: 90%; margin: 10% auto; } 
  .about img{ width: 150px; height: 150px; margin: 10% auto; } 
  .about p{ width: 100%; margin: 20px auto 30px; text-align: justify; } 
}
/*=================================== Admix =========================================*/
.service-section{ background-color: var(--bg-clr3) ; background-attachment: fixed; padding: 3% 0; }
.service-section h2{ text-align: center; }
.service-section p{ width: 60%; margin: 2% auto; text-align: center; color: var(--primary-clr); }
.service-section .owl-prev, .owl-next { position: absolute; top:45%; }
.service-section .owl-prev i, .owl-next i { padding: 5px; color: rgb(0, 0, 0); }
.service-section .owl-prev{ left: 2px; } 
.service-section .owl-next { right: 2px; } 
.service-section .admix { width: 80%; margin: 4% auto; } 
.service-section .admix .one{ background: #fff; width: 200px; margin: 4% auto 2%; padding: 10px 0px; border-radius: 5px; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; animation: swing ease-in-out 1.5s infinite alternate; overflow: hidden; } 
@keyframes swing { 0% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } }
.service-section .admix .one img{ width: 100%; transition: transform 1.5s ease; } 
.service-section .admix .one img:hover{ transform: rotateY(360deg); } 
.service-section .admix .one h4{ font-size: var(--fontSize-8); font-weight: var(--weight-bold); color: var(--primary-clr); text-align: center; } 
.service-section .admix .one h4:hover{ text-shadow: 1px 1px 2px rgb(0, 26, 255); }
@media (max-width: 992px){
  .service-section p{ width: 80%; } 
  .service-section .admix { width: 90%; }
}
@media (max-width: 767px){
  .service-section .admix .one h4{ font-size: var(--fontSize-9); font-weight: var(--weight-bold); } 
  .service-section p{ width: 90%; margin: 5% auto; } .service-section .admix { width: 90%; } 
  .service-section .admix .one{ width: 170px; margin: 6% auto; padding: 10px; } 
}
@media (max-width: 520px){
  .service-section .admix .one{ width: 170px; } 
  .service-section .admix .one h4{ font-size: var(--fontSize-9); }
}
@media (max-width: 450px){
  .service-section .admix { width: 96%; margin: 10% auto; } 
  .service-section h2{ margin: 6% auto; } 
  .service-section p{ margin: 6% auto; text-align: justify; }
}
@media (max-width: 390px){
  .service-section .admix .one{ width: 150px; } 
}
/*=================================== Waterproofing ====================================*/
.waterproofing-section{ width: 80%; margin: 5% auto; }
.waterproofing-section h2{ width: 60%; margin: 0 auto; text-align: center; } 
.waterproofing-section p{ width: 70%; margin: 3% auto; text-align: center; } 
.waterproofing-container{ margin: 5% 0; } 
.waterproofing-container .tab-buttons { display: flex; border-bottom: 2px solid #eee; } 
.waterproofing-container .tab-buttons button  { margin-right: 5px; transition: all 0.9s ease; } 
.waterproofing-container .tab-buttons button h5 { padding: 10px 20px 5px; cursor: pointer; transition: all 1s ease; font-size: var(--fontSize-8); font-weight: var(--weight-semibold); font-family: var(--font-title); } 
.tab-buttons button:hover { cursor: pointer; background:rgb(153, 186, 199); border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; } 
.tab-buttons button.active { background:rgb(153, 186, 199); border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; } .tab-content { padding: 20px; display: none; animation: fadeIn 0.4s ease; background: #8fe603 ; border-radius: 5px; margin-top: 20px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } 
.tab-content .cont-img img{ max-width: 100%; margin: 0 auto; } .tab-content .cont-cont p{ width: 80%; margin:3% 0; text-align: left; } .tab-content .cont-cont h6{ font-weight: var(--weight-bold); } .tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:992px){
  .waterproofing-section{ width: 90%; margin: 5% auto; } 
  .waterproofing-section h2{ width: 70%; } 
  .waterproofing-section p{ width: 80%; } 
  .waterproofing-container .tab-buttons button h5 { padding: 8px 15px 3px; font-size: var(--fontSize-9); } 
  .tab-content .cont-cont p{ width: 90%; margin:3% 0; text-align: left; }
}
@media (max-width:767px){  
  .waterproofing-section{ margin: 8% auto; } 
  .waterproofing-section h2{ width: 90%; } 
  .waterproofing-section p{ width: 100%; } 
  .tab-content .cont-img img{ max-width: 100%; margin: 5% auto; } 
  .waterproofing-container .tab-buttons button h5 { padding: 10px 10px 1px; font-size: var(--fontSize-9); } 
  .tab-content .cont-cont p{ width: 100%; text-align: center; } 
  .tab-content .cont-cont h6{ text-align: center; font-size: var(--fontSize-); }
}
@media (max-width:450px){
  .waterproofing-section{ margin: 10% auto; } 
  .waterproofing-section p{ text-align: justify; margin: 8% auto; } 
  .waterproofing-container .tab-buttons button h5 { padding: 8px 5px 1px; font-size: var(--fontSize-10); } .tab-content .cont-cont p{ text-align: justify; } 
  .tab-content .cont-cont h6{ font-size: var(--fontSize-10); }
}

/*=================================== Invitation ====================================*/
.rfq-hero{ position: relative; background-image: url('/assets/uploads/invite.png'); background-size: cover; background-position: left; display: flex; align-items: center; justify-content: center; min-height:250px; overflow: hidden; } 
.rfq-hero::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45)); mix-blend-mode: multiply; pointer-events: none; } 
.rfq-inner{ position: relative; z-index: 1; width: 80%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } 
.rfq-inner h4{ color: var(--secondary-clr); } 
.rfq-inner h2{ color: #8fe603; } 
.rfq-inner a{ border:1px solid white; } 
@media (max-width: 767px){ 
  .rfq-hero{ padding: 3rem 1rem; background-attachment: scroll; } 
  .rfq-inner{ flex-direction: column; text-align: center; gap: 0.9rem; } 
  .rfq-inner h4{ font-size: var(--fontSize-8); } .rfq-inner h2{ font-size: var(--fontSize-7); } 
} 
@media (max-width: 450px){ 
  .rfq-inner h4{ font-size: var(--fontSize-9); } 
  .rfq-inner h2{ font-size: var(--fontSize-8); } 
}