
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;700;900&family=Smooch&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Rajdhani&family=Roboto:wght@100;300;700;900&family=Smooch&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;600;700&family=Rajdhani&family=Roboto:wght@100;300;700;900&family=Smooch&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Exo:wght@200;300;400&family=Oswald:wght@200;300;600;700&family=Rajdhani&family=Roboto:wght@100;300;700;900&family=Smooch&display=swap');
  @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700&display=swap");
  @import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
  @import url("https://fonts.googleapis.com/css2?family=Jura:wght@500;600;900&display=swap");
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");


  *, *::after, *::before{

    box-sizing: border-box;
    padding: 0;
    margin: 0;
}







* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}
:root h1,h2,h3,h4,h5,h6{
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}
:root p{
  font-family: 'Poppins', sans-serif;
}
.ben2{

  width: 80vw;
  margin: auto;
  
}

.ben2 li{

  margin: 15px;
}
.ben2 p{

  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.wrapper{
	display: flex;
  justify-content: center;
	/* background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%); */
  background: radial-gradient(circle, rgba(14,119,166,1) 0%, rgba(3,36,55,1) 100%);
}
.wrap-sec{
  
  margin: auto;
  width: 90%;
}
.wrapper2{
  display:flex;
  margin-top: 1%;
  margin-bottom: 1%;

}
.wrapper-text{
  flex-basis: 80%;
  flex-wrap: wrap;

  margin-left: 1%;
  margin-top: 0.7%;
}
.wrapper-text h4{
  color: #000428;
  
}
.chk-bg{
  /* */
  color:#ffffff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 2.5em;
  margin-left: 3%;
  background: linear-gradient(315deg, #000428 0%, #0ec2a4 74%);
}


.btn-lnk {
	float: left;
  align-self: center;
  margin: 0.5em;
	width: 60px;
	height: 60px;
	cursor: pointer;
	background: #fff;
	overflow: hidden;
	border-radius: 50px;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.btn-lnk span {
	font-size: 20px;
	font-weight: 500;
	line-height: 60px;
	margin-left: 10px;
}

.btn-lnk:hover {
	width: 200px;
}

.btn-lnk:nth-child(1):hover .icon {
	background: #e1306c;
}

.btn-lnk:nth-child(2):hover .icon {
	background: #4267b2;
}

.btn-lnk:nth-child(3):hover .icon {
	background: #1da1f2;
}

.btn-lnk:nth-child(4):hover .icon {
	background: #0e76a8;
}

.btn-lnk:nth-child(5):hover .icon {
	background: #ff0000;
}

.btn-lnk:nth-child(6):hover .icon {
	background: #333;
}

.btn-lnk:nth-child(1) span {
	color: #e1306c;
}

.btn-lnk:nth-child(2) span {
	color: #4267b2;
}

.btn-lnk:nth-child(3) span {
	color: #1da1f2;
}

.btn-lnk:nth-child(4) span {
	color: #0e76a8;
}

.btn-lnk:nth-child(5) span {
	color: #ff0000;
}

.btn-lnk:nth-child(6) span {
	color: #333;
}



.btn-lnk:hover i {
	color: rgb(0, 0, 0);
}








      .blu-bla{
        /* background: radial-gradient(circle, rgba(3,36,55,1) 0%, rgba(0,76,111,1) 100%); */
        /* background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%); */
        /* background: linear-gradient(270deg, var(--gradient1) 0%, var(--gradient2) 50%, var(--gradient3) 100%); */
        /* background: linear-gradient(90deg, rgba(25,25,27,1) 0%, rgba(34,132,152,1) 53%, rgba(25,25,27,1) 100%); */
        background: radial-gradient(circle, rgba(14,119,166,1) 0%, rgba(3,36,55,1) 100%);
      
        color: white;
      }
      html body .blu-bla a{
        color: white;
      }
      
  
      .dark-theme {
        --gradient1: rgba(59, 59, 59, 1);
        --gradient2: rgba(45, 45, 45, 1);
        --gradient3: rgba(116, 116, 116, 1);
        --col1: #ffffff;
        --col2: wheat;
        --col3: #d6d6d6;
        --col4: rgb(52, 51, 51);
        --col5: rgb(233, 233, 233);
        --shadow1: #0accb9e7;
        --shadow: #0ec2a4;
      }
  
      :root {

        font-size: small;
        --gradient1: #0ec2a4;
        --gradient2: #ffffff;
        /* --gradient3: #0d9588; */
        --gradient3: #0E77A6;
        --col1: #000428;
        --col2: #2b2b2c;
        --col3: #5c5c5d;
        --col4: rgb(245, 245, 245);
        --col5: rgb(39, 39, 39);
        --shadow1: rgba(10, 10, 10, 0.435);
        --shadow: rgba(20, 20, 20, 0.932);
      }

/* ---------- CONTACT STARTS ---------------- */




  .fas, .box h6{
    color: var(--gradient3);
  }
  
      .container-fluid-mine {
        height: 30vh;
        width: 100%;
        font-size: 3em;
        margin-top: 0%;
        padding-top: 0.5em;
      }
  
      
  
/* trouble */



/* Variables */
/* Colors */


/* Style */
/* box-shadow */
.main-l {
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
}

.main-l {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  padding: 1rem;
}
.main-l h4{
text-align:center;
color: var(--black);
font-weight: 700;
}

ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}

ol.gradient-list > li {
  background: var(--white);
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
  counter-increment: gradient-counter;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}

ol.gradient-list > li::before,
ol.gradient-list > li::after {
  background: linear-gradient(90deg, rgba(0,76,111,1) 0%, rgba(90,199,255,1) 35%, rgba(0,162,235,1) 100%);
  border-radius: 1rem 1rem 0 1rem;
  content: '';
  height: 3rem;
  left: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}

ol.gradient-list > li::before {
  align-items: flex-end;
  background: #63caff;
  content: counter(gradient-counter);
  color: var(--black);
  display: flex;
  font: 900 1.5em/1 'Montserrat';
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  ol.gradient-list > li::before {
      font-size: 1em;
  }
}

@media screen and (max-width: 600px) {
  ol.gradient-list > li::before {
      font-size: 0.8em;
  }
}

@media screen and (max-width: 400px) {
  ol.gradient-list > li::before {
      font-size: 0.7em;
  }
}

ol.gradient-list > li:nth-child(10n + 1)::before {
   background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 2)::before {
background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 3)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 4)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 5)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 6)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 7)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 8)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 9)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li:nth-child(10n + 10)::before {
  background: linear-gradient(90deg, rgba(14,119,166,1) 0%, rgba(80,167,212,1) 50%, rgba(14,119,166,1) 100%);
}

ol.gradient-list > li + li {
  margin-top: 2rem;
}





/* trouble */



      
      
  /* testimonial  */




  
  .body-test {
    font-family: "Poppins", sans-serif;
    padding: 45px 0;
    background-color: #e5ebf2;
    color: #48556a;
    font-size: 14px;
    line-height: 1.4;
  }
  
  .testimonial-grid {
    width: 1170px;
    padding: 15px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .testimonial {
    background-color: #fff;
    padding: 1.25rem;
    border-radius: 5px;
    box-shadow: 0 0 1px rgb(190, 186, 186);
  }
  .testimonial > div {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }
  .testimonial img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .testimonial h2 {
    font-size: 1rem;
  }
  .testimonial h5 {
    font-size: 0.8rem;
    color: rgba(72, 85, 106, 0.7);
  }
  .testimonial h3 {
    margin: 1rem 0;
    font-size: 1rem;
  }
  
  .testimonial:first-of-type {
    background-color: #753acb;
    background-image: url("https://raw.githubusercontent.com/thenahidul/css-grid-testimonial/main/images/bg-pattern-quotation.svg");
    background-position: top 1.25rem right 15%;
    background-repeat: no-repeat;
  }
  .testimonial:nth-of-type(2) {
    background-color: #47546b;
  }
  .testimonial:nth-of-type(4) {
    background-color: #19212e;
  }
  
  .testimonial h2,
  .testimonial h3,
  .testimonial h5 {
    font-weight: 500;
  }
  
  
  .testimonial:first-of-type,
  .testimonial:nth-of-type(2),
  .testimonial:nth-of-type(4) {
    color: #fff;
  }
  .testimonial:first-of-type h5,
  .testimonial:first-of-type p,
  .testimonial:nth-of-type(2) h5,
  .testimonial:nth-of-type(2) p,
  .testimonial:nth-of-type(4) h5,
  .testimonial:nth-of-type(4) p {
    color: rgb(255, 255, 255, 0.7);
  }
  
  @media (min-width: 913px) {
    .testimonial-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .testimonial:first-of-type {
      grid-column: span 2;
    }
  
    .testimonial:nth-of-type(4) {
      grid-column: span 2;
    }
    .testimonial:nth-of-type(5) {
      grid-row: 1 / 3;
      grid-column: 4 / -1;
    }
  }
  

  
  /* testimonial  */


      /* quote  */




      .blockquote-wrapper {
        display: flex;
        height: auto;
        padding: 0 2px;
     }
     
     /* Blockquote main style */
     .blockquote {
         position: relative;
         font-family: 'Barlow Condensed', sans-serif;
         max-width: 620px;
         margin: 80px auto;
         align-self: center;
     }
     
     /* Blockquote header */
     .blockquote h2 {
         font-family: 'Abril Fatface', cursive;
         position: relative; /* for pseudos */
         color: #50A7D4;
         font-size: 2.8rem;
         font-weight: normal;
         line-height: 1;
         margin: 0;
         border: 2px solid #0e77a6;
         border: solid 2px;
         border-radius:20px;
         padding: 25px;
     }
     
     /* Blockquote right double quotes */
     .blockquote h2:after {
         content:"";
         position: absolute;
         border: 2px solid #0e77a6;
         border-radius: 0 50px 0 0;
         width: 60px;
         height: 60px;
         bottom: -62px;
         left: 50px;
         border-bottom: none;
         border-left: none;
         z-index: 3; 
     }
     
     .blockquote h2:before {
         content:"";
         position: absolute;
         width: 80px;
         border: 6px solid white;
         bottom: -3px;
         left: 50px;
         z-index: 2;
     }
     
     /* increase header size after 600px */
     @media all and (min-width: 600px) {
         .blockquote h2 {
             font-size: 3rem;
             line-height: 1.2;
        }
     
     }
     
     /* Blockquote subheader */
     .blockquote h4 {
         position: relative;
         color: #0e77a6;
         font-size: 1.3rem;
         font-weight: 400;
         line-height: 1.2;
         margin: 0;
         padding-top: 15px;
         z-index: 1;
         margin-left:150px;
         padding-left:12px;
     }
     
      
     .blockquote h4:first-letter {
       margin-left:-12px;
     }


      /* quote  */
      


/* faq */



.custom-container {
  margin: 0 auto;
  padding: 4rem;
  width: 80%;
}

@media all and (max-width: 992px) {
  .custom-container {
    margin: 0 auto;
    padding: 0.5%;
    width: 100%;
    word-wrap: break-word;
  }
}

.custom-accordion {
  .custom-accordion-item {
    border-bottom: 1px solid #e5e5e5;
    .custom-accordion-button[aria-expanded='true'] {
      border-bottom: 1px solid #03b5d2;
    }
  }

  .custom-accordion-button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7288a2;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;

    &:hover,
    &:focus {
      cursor: pointer;
      color: #03b5d2;
      &::after {
        cursor: pointer;
        color: #03b5d2;
        border: 1px solid #03b5d2;
      }
    }

    .custom-accordion-title {
      padding: 1em 1.5em 1em 0;
    }

    .custom-icon {
      display: inline-block;
      position: absolute;
      top: 18px;
      right: 0;
      width: 22px;
      height: 22px;
      border: 1px solid;
      border-radius: 22px;

      &::before {
        display: block;
        position: absolute;
        content: '';
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: currentColor;
      }

      &::after {
        display: block;
        position: absolute;
        content: '';
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor;
      }
    }
  }

  .custom-accordion-button[aria-expanded='true'] {
    color: #03b5d2;
    .custom-icon {
      &::after {
        width: 0;
      }
    }

    + .custom-accordion-content {
      opacity: 1;
      max-height: 100em;
      transition: all 200ms linear;
      will-change: opacity, max-height;
    }
  }

  .custom-accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;

  
  }
}

/* faq */

/* video */


.quo-flex{

  display: flex;
  flex-direction:row;
  width: 100%;
  
  justify-content: space-between;
}
.quo-img img{

  filter: drop-shadow(2px 2px 20px rgba(14, 119, 166, 0.5));
  border-radius:50%;
/* border:1px solid black; */
width: 100%;

}
.quo-img{
  width: 30%;
  /* border:1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.quo-txt{
  width: 65%;
  /* border:1px solid red; */
  
}


@media all and (max-width: 992px) {
    
   .quo-flex{
display: flex;
flex-direction:column;
width: 100%;
justify-content: space-around;
}
.quo-img{
  width: 30%;
  /* border:1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.quo-txt{
  width: 100%;
  /* border:1px solid red; */
  
}
.quo-img img{

filter: drop-shadow(2px 2px 20px rgba(14, 119, 166, 0.5));
border-radius:50%;
/* border:1px solid black; */
width: 60%;

}
}


/* video */

  
      
      .container-fluid-l-r label{
        color: var(--gradient2);
        font-weight: 400;
      }
     .l-box h2, .l-box h3, .l-box h4{
        color: var(--gradient3);
        
      }
  .l-box{
    /*  */
    width: 55%;
    height: 100%;
  }
  .l-box p{
    font-size: 1.2em;
  }
  .l-box h2{
    margin-bottom: 10%;
  }
  .l-box h3{
    margin-bottom: 5%;
    font-size: 1.3em;
  }
  .l-box h4{
    margin-bottom: 5%;
    font-size: 1.2em;
    position: relative;
    margin-top: 30%;
  }
  .hr{
  width: 50%;
  border-radius: 50px;
  height: 0.1em;
  background-color: var(--gradient3);
  margin-top: 2em;
  margin-bottom: 2em;
  }
  
  .r-box{
    display: block;
    /* border: 1px solid rgb(255, 0, 0); */
    width: 40%;
    height: 100%;
    padding-left: 5%;
    background-color: var(--gradient3);
    box-shadow: 0px 0px 20px 2px var(--shadow1);
    border-radius: 10px;
  }
  .r-box input{
    width: 90%;
    padding: 0.5em;
    border: none;
    border-radius: 10px;
    
  }
  .r-box label{
   
    font-size:1.3em;
    margin-top: 2em;
    margin-bottom: 0.2em;
    
  }
  
  
  
  
  .btn-grad-cont {background-image: linear-gradient(to right, #000428 0%, #004e92  51%, #000428  100%)}
           .btn-grad-cont {
              margin: 10px;
              padding: 15px 45px;
              text-align: center;
              text-transform: uppercase;
              transition: 0.5s;
              background-size: 200% auto;
              color: white;            
              box-shadow: 0 0 20px #eee;
              border-radius: 10px;
              display: block;
              width: 80%;
              margin-top: 15%;
            }
  
            .btn-grad-cont:hover {
              background-position: right center; /* change the direction of the change here */
              color: #fff;
              text-decoration: none;
            }
  
            body{
                background-color: var(--col4);
              }


/* ---------- CONTACT ENDS ---------------- */




              /* ----------- HOME STARTS ----------------- */

 nav img{
   border-radius: 5px;
   width: 100px;
   height: 30px;
 }             






 .ui {
  --duration: 2.8s;
}
.old-page {
  position: absolute;
  inset: 0;
  background: url("https://assets.codepen.io/907471/science-fiction-room-2_1.png?v42")
    center center no-repeat;
  background-size: cover;
  transform: scale(1.5);
  
  @media (orientation: portrait) {
    mask: url("https://assets.codepen.io/907471/tail.svg?v1") center top
        no-repeat,
      url("https://assets.codepen.io/907471/space.svg?v42") center center
        no-repeat,
      url("https://assets.codepen.io/907471/ncc1701.svg") center center
        no-repeat;
    mask-repeat: no-repeat;
    mask-size: 10rem 20rem, 300% 300%, 100% 30%;
    animation: hide-view-portrait var(--duration)
      cubic-bezier(0.975, -0.005, 0, 1.02) infinite forwards;
  }

  @media (orientation: landscape) {
    mask: url("https://assets.codepen.io/907471/tail.svg?v1") center top
        no-repeat,
      url("https://assets.codepen.io/907471/space-landscape.svg?v4") center
        center no-repeat,
      url("https://assets.codepen.io/907471/ncc1701.svg") center center
        no-repeat;
    mask-repeat: no-repeat;
    mask-size: 10rem 30rem, 500% 500%, 100% 30%;
    animation: hide-view-landscape var(--duration)
      cubic-bezier(0.975, -0.005, 0, 1.02) infinite forwards;
    @media (max-height: 300px) {
      mask-size: 10rem 10rem, 500% 500%, 100% 30%;
    }
  }
}

@keyframes hide-view-portrait {
  from {
    mask-position: 50% 120%, 50% 0%, 50% 150%;
    transform: scale(1.5);
  }

  45% {
    transform: scale(1);
  }
  50% {
    mask-position: 50% 120%, 50% 80%, 50% 60%;
  }

  80% {
    mask-position: 50% -60%, 50% 140%, 50% -70%;
  }

  to {
    mask-position: 50% -60%, 50% 140%, 50% -70%;
    transform: scale(1);
  }
}

@keyframes hide-view-landscape {
  from {
    mask-position: 50% 120%, 50% 0%, 50% 150%;
    transform: scale(1.5);
  }

  45% {
    transform: scale(1);
  }
  50% {
    mask-position: 50% 120%, 50% 72%, 50% 60%;
  }

  80% {
    mask-position: 50% -80%, 50% 140%, 50% -70%;
  }

  to {
    mask-position: 50% -80%, 50% 140%, 50% -70%;
    transform: scale(1);
  }
}

.new-page {
  position: absolute;
  inset: 0;
  background: url("https://assets.codepen.io/907471/science-fiction-room_1.png?v42")
      center center no-repeat,
    #111;
  background-size: cover;
  animation: show var(--duration) cubic-bezier(0.975, -0.005, 0, 1.02) infinite
    forwards;
}

@keyframes show {
  from {
    filter: saturate(0%);
    opacity: 0.4;
  }
  40% {
    filter: saturate(0%);
    opacity: 0.4;
  }
  80% {
    filter: saturate(100%);
    opacity: 1;
  }

  to {
    filter: saturate(100%);
  }
}

.ui {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #ca5600;
  background: black;
  overflow: hidden;
}

.labs-follow-me {
  transform: scale(0.8) !important;
}

.ui {
  @media screen and (max-height: 800px) {
    font-size: 8px;
  }
}

.home-sec .sxth-btn{
  z-index: 9;
  position: relative;
  /* margin-top: 20em; */
}
.home-sec{
  z-index: 0;
  height: auto;
}




.large-header {
	top: -25%;
  /* bottom: 50%; */
	/* left: 50%; */
position: absolute;
 border: 10px solid red;
	width: 100%;
  height: auto;
	background: transparent;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 5;
}
#demo-canvas{
  background: transparent;
}
#large-header {
	/* background-image: linear-gradient(rgba(0, 0, 0, 0.739), rgba(0, 0, 0, 0.726)), 
  url("./images/quantity takeoff.webp"); */
  background: transparent;
  /* background-color: #00000000; */
}

.main-title {
	position: absolute;
	margin: 0;
	padding: 0;
	color: #f9f1e9;
	text-align: center;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

.demo-1 .main-title {
	text-transform: uppercase;
	font-size: 4.2em;
	letter-spacing: 0.1em;
}

.main-title .thin {
	font-weight: 200;
}

@media only screen and (max-width : 768px) {
	.demo-1 .main-title {
		font-size: 3em;
	}
}
 




.home-sec {
  background-color: #000428;
  background-image: linear-gradient(rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.93)), 
    url("./webp/ex1.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
  animation: cinematicTransform 1s 1 alternate; /* Add this line */
}

@keyframes cinematicTransform {
  from {
    mask-position: 50% 120%, 50% 0%, 50% 150%;
    transform: scale(2.5);
  }

  45% {
    transform: scale(1.5);
  }
  50% {
    mask-position: 50% 120%, 50% 80%, 50% 60%;
   
  }

  80% {
    mask-position: 50% -60%, 50% 140%, 50% -70%;
  }

  to {
    mask-position: 50% -60%, 50% 140%, 50% -70%;
    transform: scale(1);
  }
}



              .business-h1{
                color: var(--col5);
              }
                  .contact-blu-bla{
                    background-color: var(--contact-blu-bla);
                  }
                  .blu-bla li a{
                  color: var(--col2);
                  font-weight: 600;
                  letter-spacing: 0.1em;
                  }
                  .foot-container li{
                    font-weight: 600;
                  }
                  .blu-bla li a:hover{
                  color: var(--col3);
                  }
                  .text-blu-bla{
                  color: var(--col2);
                  list-style: none;
                  text-decoration: none;
                  /* font-weight: bolder; */
                  }   
                 
                  
              
                  #icon {
                    width: 20px;
                    padding-left: 0.2em;
                    cursor: pointer;
                    filter: sepia(200);
                    /* background-color: blue;   */
                  }
              
                  /* :root footer :link{
                    color: var(--col2);
                  }
                  :root footer a:visited{
                    color: var(--col2);
                  }
                  :root footer a:hover{
                    color: var(--col2);
                  } */
                  .foot-container {
              
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    /* */
                    /* background-color: rgba(208, 208, 208, 0.693); */
                    width: 100%;
                    height: auto;
                    position: relative;
                  }
              
                  .foot {
                    display: flex;
                    /* border: 1px solid rgb(0, 26, 255); */
                    flex-direction: column;
                  }
              
                  .foot-container li {
                    list-style: none;
                  }
              
                  .foot textarea,
                  .foot input {
                    width: 100%;
                    height: 50%;
                    margin-bottom: 0px;
                    /* border: 2px solid rgb(13, 255, 0); */
              
                  }
              
                  .foot p {
                    line-height: 2em;
                    margin-top: 0.5em;
                  }
              
                  .foot h6 {
                    margin-top: 5em;
                  }
              
              
                 
              
                  .foot svg {
                    margin-right: 0.5em;
                  }
              
                  .foot {
                    padding-top: 1em;
                    width: 33.33%;
                    height: 100%;
                    padding-left: 1em;
                    padding-right: 1em;
                    padding-bottom: 1em;
                    /* border: 2px solid blue; */
                  }
              
                  .d-block {
                    max-height: 85vh;
                    max-width: 100vw;
                  }
              
                  .card:hover {
                    box-shadow: 0px 0px 15px 0px var(--shadow1);
                  }
              
                  .card img:hover {
                    transform: scale(1.1);
                  }
              
                  .category {
                    overflow: hidden;
                  }
              
                  .category img {
                    width: 33%;
                    height: 88%;
                    align-self: center;
                    transition: 0.3s;
                  }
              :root .c4_fix{
                padding-top: 5%;
                width: 28%;
                height: 80%;
              }
              
                       
                  .btn-grad {background-image: linear-gradient(to right, #000428 0%, #004e92  51%, #000428  100%)}
                       .btn-grad {
                          margin: 10px;
                          padding: 15px 45px;
                          text-align: center;
                          text-transform: uppercase;
                          transition: 0.5s;
                          background-size: 200% auto;
                          color: white;            
                          box-shadow: 0 0 20px #eee;
                          border-radius: 10px;
                          display: block;
                        }
              
                        .btn-grad:hover {
                          background-position: right center; /* change the direction of the change here */
                          color: #fff;
                          text-decoration: none;
                        }
                   
                    
                        
              
              :root .primary-button a{
                color: white;
              }
              :root a{
                text-decoration: none;
              }
              :root .index-p{
                font-size: 1em;
              }
              :root .sxth-btn a:link{
                text-decoration: none;
                color: white;
                font-weight: bold;
              }
              :root .sxth-btn a:visited{
                text-decoration: none;
                color: white;
              }
              
              :root .sxth-btn a:hover{
                text-decoration: none;
                color: white;
              }
              
              
                 
  
             :root .btn-outline-dark a{
              color: #fff;
              text-decoration: none;
             }   
  

            
  
/* -------------- HOME ENDS ------------ */



/*---------------- NAVBAR START -------------- */


.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}


nav {
  display: flex;
  
}
 :root body .navbar .numb a{
  color: white;
  font-weight: 900;
  /* background-color: rgb(51, 51, 51); */
  background-image: linear-gradient(to right, #000428 0%, #004e92  51%, #000428  100%);
  border: 1px dashed #50A7D4;
}
:root nav a{
  flex-grow: 9;
  color: white;
  font-weight: 300;
  letter-spacing: 2px;
  font-family: 'Poppins', sans-serif;
}
 :root .navbar a:hover{
  color: rgb(221, 221, 221);
  
  
}
 :root nav a:active{
  color: white;
  
}
 :root nav a:visited{
 
  color: white;
  
}
:root body .navbar{

  /* background-color: #00000025;
   */
    /* background-color: #212529;
     */
     background-color: black;
  top: 0%;
  position: sticky;
  z-index: 9999999;
}
:root body nav{

  /* background-color: #000000; */
  background: radial-gradient(circle, rgba(14,119,166,1) 0%, rgba(3,36,55,1) 100%);

}

:root .navbar-toggler-icon {
  background-image: url("./images/toggle3.webp");
  border: 1px solid rgb(166, 166, 166);
  border-radius: 2px;
  background-size: 130%;
}
:root .navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(166, 166, 166);
}

.dropdown-menu label{
  color: #50A7D4;
  font-size: 1.2em;
  margin-top: 2%;
  margin-bottom: 2%;
  margin-left: 2%;
  display: block;
  border-bottom: 1px solid #50A7D4;
  width: 80%;
}




body .dropdown-menu li {
  list-style: circle;
  color: #50A7D4;
  
}


.d-adjust{
  display: flex;
  flex-direction: column;
  padding: 3%;

}

.d-adjust-c2{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: auto;
  height: 10em;
  /* border: 1px solid yellow; */
}





.dropdown-menu{
  font-weight: 900;
  font-size: 1.2em;
  background: rgba(0, 0, 0, 0.959);
  
}
:root nav .dropdown-menu a{
  font-weight: 700;
  font-size: 1em;
  /* color: rgb(22, 22, 22); */
  color: rgb(255, 255, 255);
  
}
:root nav .dropdown-menu a:hover{
 background-color: rgb(255, 255, 255);
 color: rgb(0, 0, 0);
 
}


/* Testing start */






/* Testing end */








/*-------------------- NAVBAR ENDS -------------------- */





.choose {
  --color: rgba(30, 30, 30);
  --bgColor: rgba(245, 245, 245);
  min-height: 80vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 1rem;
  font-family: "Jura", sans-serif;
  color: var(--color);
  /* background: var(--bgColor); */
  /* border:1px solid red; */
}

.choose h2 {
  text-align: center;
}

.choose ul {
  width: min(80rem, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  justify-content: center;
  gap: 1rem;
  list-style: none;
}

.choose ul li {
  max-width: 18em;
  /* border:1px solid red; */
  justify-self: center;
  display: grid;
  grid-template:
    "icon"
    "line"
    "dot"
    "title"
    "descr" 1fr;
  justify-items: center;
  align-items: flex-start;
  text-align: center;
}

.choose ul li .icon {
  grid-area: icon;
  width: 6rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: white;
  font-size: 2.5rem;
  border: 0.4rem solid var(--bgColor);
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: -0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.45),
    inset -0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.45);
}

.choose ul li::before {
  content: "";
  grid-area: line;
  height: 2rem;
  border-right: 2px dotted currentColor;
}

.choose ul li::after {
  content: "";
  grid-area: dot;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-color);
  justify-self: center;
  margin-bottom: 0.5rem;
}

.choose ul li .title {
  grid-area: title;
  margin-block: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}









 


      /* ------------- PUBLIC PROJECT ESTIMATES -------------- */
    

  .ppe-hr{
    margin-top: 80px;
    margin-bottom: 50px;
    color: var(--col5);
  }
  .ppe-hr-21{
    margin-top: 80px;
    margin-bottom: 0px;
    color: var(--col5);
  }
  .ppe-hr-22{
    margin-top: 0px;
    margin-bottom: 80px;
    color: var(--col5);
  }





.excel-sheet{
  width: 50%;
  margin: auto;
  
}

.excel-sheet iframe{
  margin: auto;
  width: 100%;
  height: 100vh;
  
  
}

.jgd-cls{
  text-align: center;
  color: white;
  margin-top: 2%;
}
.feature-add-reb1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/take off estimating.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.feature-add-cnt1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.739), rgba(0, 0, 0, 0.726)), 
  url("./images/building estimating.webp");
  padding-top: 1%;
  padding-bottom: 2%;
  background-size: 100%;
}
.feature-add-cnt2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/estimating companies near me.webp");
  
  background-size: 100%;
}
.feature-add-st1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/estimating consultant.webp");
  
  background-size: 100%;
}
.feature-add-reb2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.839), rgba(0, 0, 0, 0.826)), 
  url("./images/rebar estimates.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.feature-add-stl1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/budgetary estimate.webp");
 background-repeat: repeat;
  background-size: 100%;
}
.feature-add-flr1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/tile installation labor cost calculator.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
.feature-add-flr2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/floor estimate.webp");
}
.feature-add-res1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/construction take off.webp");
}
.feature-add-res2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/take off plans.webp");
}
.feature-add-public1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/cost estimation.webp");
  height: auto;
  padding-bottom: 2%;
}
.feature-add-public2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/construction estimations.webp");
}
.feature-add-msn1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/take off estimating.webp");
  background-repeat:repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.feature-add-msn2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/construction calculations.webp");
  background-repeat:repeat;
  background-size: 100%;
}
.feature-add-mtl1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/steel building cost estimator.webp");
  background-repeat:repeat;
  background-size: 100%;
}
.feature-add-mtl2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.539), rgba(0, 0, 0, 0.526)), 
  url("./images/home building cost estimator.webp");
  background-repeat:repeat;
  background-size: 100%;
}
.feature-add-drl1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/calculating drywall costs.webp");
  background-repeat:repeat;
  background-size: 100%;
}
.feature-add-drl2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/drywall installation cost calculator.webp");
  background-repeat:repeat;
  background-size: 100%;
}
.feature-add_cmrcl{
  background-image: linear-gradient(rgba(0, 0, 0, 0.521), rgba(0, 0, 0, 0.526)), 
  url("./images/commercial construction estimator.webp");
  background-position: center;
  background-size: 100%;
  background-attachment:local;
  
}
.feature-add-fmly{
  background-image: linear-gradient(rgba(0, 0, 0, 0.639), rgba(0, 0, 0, 0.626)), 
  url("./images/multi family apartment estimation.webp");
  background-position: center;
  background-size: 100%;
  background-attachment:local;
}

.feature-add h1{
  color: white;
  font-size: 3em;
  text-align: center;

}





.key-features i{
  font-size: 30px;
  margin-bottom: 15px;
  color: #0ec2a4;
}



.share-plan-box .hr{  background-color: rgb(0, 0, 255); 
  width: 100%; 
  height: 0.2em;
  margin-top:0em ;
}

.next h2{
  font-weight: 900;
}
.next h4{
  font-weight: 600;
}

.share-plan a:hover{
  color: black;
}
.share-plan a:visited{
  color: black;
}


.recent-project-h1{
  font-weight: 900;
  font-size: 4em;
  text-align: center;
  color: var(--col1);
}

.r-p-b-text{
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 text-align: left;
 text-transform: uppercase;
 /*  */
}
.r-p-b-text h1{
 font-weight: 700;
 color: var(--col1);
}
.r-p-b-text h3{
  color: var(--col2);
}
.r-p-b-text p{

  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  width: 69%;
  text-align: center;
  border-radius: 32px;
  padding: 1em;
  font-weight: 700;
  color: red;
}



.full-share-btn{
  text-align: center;
  
}
.full-share-btn + h1{
  text-align: center;
  margin-top: 1em;
}

.full-share-btn a:link{
  color: black;
  font-weight: 900;
  font-size: 1.4em;
  text-decoration: none;
}
.full-share-btn a:visited{
  color: black;
 
}
.full-share-btn a:hover{
  color: rgb(56, 56, 56);
  
}

.next{
  display: flex;
  flex-direction: column;
  /*  */
 align-items: center;
 padding: 1em;
 background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
}
.next h1{
font-weight: 700;
margin-bottom: 20px;
}
.next .button-borders{
text-align: center;
margin: 20px 0px 20px 0px;
}

.last-flex-text h1{
font-weight: 900;
text-align: center;
margin-bottom: 30px;
box-shadow: 0px 0px 10px 0px var(--shadow1);

}
.last-flex-text h4{
font-style: italic;
margin-top: 15px;
font-weight: 400;

}
.last-flex-text p{
font-size: 1.3em;
margin-top: 15px;
font-weight: 900;

}






      @keyframes movement{

        0%{
          transform: translate(-150%,0%);
        }
        100%{
          transform: translate(0%,0%);
        }
      }
      @keyframes img-movement{

        0%{
          transform: translate(150%,0%);
        }
        100%{
          transform: translate(0%,0%);
        }
      }
      @keyframes form-movement{

        0%{
          transform: translate(0%,150%);
         opacity: -50%;
        }
        100%{
          transform: translate(0%,0%);
          opacity: 100%;
        }
      }

      .ppe_section a:link{
        color: white;
        font-weight: 900;
        text-decoration: none;
      }
      .ppe_section a:visited{
        color: white;
       
      }
      .ppe_section a:hover{
        color: white;
        
      }









/* -------SUB CONTRACTOR STARTS---------- */
.container-fluid-mine3 h1{
  font-weight: 100;
}
.container-fluid-mine3 {
  height: 60vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.539), rgba(0, 0, 0, 0.526)), 
  url("./images/sub contractor estimates.webp");
  /* background-repeat: no-repeat; */
  width: 100%;
  font-size: 3em;
  color: white;
  padding-top: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.container-fluid-mine3+h2{
  font-weight: 900;
  font-size: 4em;
  color: var(--col1);
  text-align: center;
  margin-top: 30px;
}

/* -------SUB CONTRACTOR ENDS---------- */



/* ------- GENERAL CONTRACTOR STARTS -------------------- */

.container-fluid-mine2 {
  height: 60vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.739), rgba(0, 0, 0, 0.726)), 
  url("./images/supplier estimates.webp");
  /* background-repeat: no-repeat; */
  width: 100%;
  font-size: 3em;
  color: white;
  padding-top: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.container-fluid-mine2 h1{
  font-weight: 100;
}
.container-fluid-mine1 h1{
  font-weight: 100;
}
.container-fluid-mine1 {
  height: 60vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.839), rgba(0, 0, 0, 0.826)), 
  url("./images/general contractor.webp");
  /* background-repeat: no-repeat; */
  width: 100%;
  font-size: 3em;
  color: white;
  padding-top: 0.5em;
  display: flex;
  
  flex-direction: column;
  justify-content: space;
}


:root .gc-box a{
  color: black;
}


.gc-box .bi, .gc-box .fa{
  font-size: 100px;
  transition: all 0.5s ease-in-out;
  color: var(--gradient3);
}
.gc-box .fa{
  margin-top: 30px;
  margin-bottom: 20px;
}
.gc-box i:hover{
  transform: scale(1.2);
  color: red;
}
.gc-box:hover{
  transform: scale(1.02);
  box-shadow: 0px 0px 10px 5px var(--shadow1);
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
}
.text-add-2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.880), rgba(0, 0, 0, 0.880)), 
  url("./images/general contractors near me.webp");
  text-align: center;
  margin-top: 80px;
  color: white;
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text-add-2 button{
  width: 20%;
  align-self: center;
  margin-top: 30px;
  color: white;
  padding: 1em;
}
.text-add-2 h4{
  margin-top: 30px;
}
.container-fluid-mine2+h2{
  font-weight: 900;
  font-size: 4em;
  color: var(--col1);
  text-align: center;
  margin-top: 30px;
}
.container-fluid-mine1+h2{
  font-weight: 900;
  font-size: 4em;
  color: var(--col1);
  text-align: center;
  margin-top: 30px;
}







/* ------- GENERAL CONTRACTOR ENDS -------------------- */






/* ---------- COMMERCIAL PROJECT ESTIMATE STARTS ----------------- */


:root .yellow-bg{
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  width: 50%;
  color: #000428;
  font-family:fantasy;
  margin: auto;
  margin-bottom: 2%;
}
.web-h1{
  color: #000428;
  font-size: 2em;
  font-weight: 900;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  margin-bottom: 1em;
}
:root .blue-bg-text{
  background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
  width: 100%;
  color: black;
  font-family:cursive;
}


.card2 img{
  width: 80%;
  height: 80%;
  margin: auto;
}

.recent-proj-2{
  
  height: auto;
  width: 70%;
  margin: auto;
  margin-top: 2em;
}
.recent-proj-box-2{
 
  height: 30%;
  display: flex;
  align-items: center;
  
}

.r-p-b-2-img-box{
 
  float: right;
  height: 100%;
  width: 40%;
  padding: 10px;
  background-color: white;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
  margin: auto;
}
.r-p-b-2-img-box img{
 height: 100%;
 width: 100%;

}

.visible-hidden{
  visibility: visible;
  font-size: 16px;
  font-family:cursive;
}
:root .hidden-visible{
  
  visibility: hidden;
  width: 0px;
  height: 0px;
  font-size: 0px;
}
:root .hidden-visible h1, .hidden-visible p{

  font-size: 0px;
}
.r-p-b-2-text-box{
  
  width: 45%;
  height: 100%; 
  display: flex;
   flex-direction: column;
   justify-content: center;
}


.float-left{
  float: left;
}
.float-right{
  float: right;
}

.next-2{

height: auto;
display: flex;
justify-content: space-between;
padding-top:2em ;
width: 90%;
margin: auto;
}
.next-2-b{

 border-radius: 100px;
 padding: 3em;
 text-align: center;
 height: 100%;
 box-shadow: 0px 0px 15px 0px var(--shadow1);
}
.next-2 i{
font-size: 3em;
align-self: center;
visibility: visible;
}

.next-2 h4{
  color: white;
  font-family:'Poppins',sans-serif;
}


.client-say-2{
  width: 80vw;
  margin: auto;
}
.client-quote-2{
  border: 1px solid var(--shadow1);
  text-align: center;
  padding: 4em;
  box-shadow: 0px 0px 15px 0px var(--shadow);
  
}
.client-quote-2 h6{
  margin-top: 1em;
  font-weight: 900;
  font-size: 2em;
  color: var(--col4);
  
}
.client-quote-2 p{
  font-weight: 100;
  font-size: 1.5em;
  color: var(--col3);
}
.client-quote-2 h5{
  font-weight: 300;
  font-size: 1.5em;
  font-style: italic;
  color: var(--col4);
}
.client-2-bg{
  background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
  margin-top:4em ;
 padding: 4em;
}
.ppe-hr-2{
  margin-top: 50px;
  margin-bottom: 50px;
}


.bg-cssgrd-1{
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.bg-cssgrd-2{
  background: linear-gradient(270deg, rgba(116,117,117,1) 0%, rgba(0,201,201,1) 57%, rgba(0,0,0,1) 100%);
}
.bg-cssgrd-3{
  background: linear-gradient(0deg, rgba(34,195,142,1) 0%, rgba(5,103,9,1) 100%);
}





/* ---------- COMMERCIAL PROJECT ESTIMATE ENDS ----------------- */

.section-electric{
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/electrical estimate.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}
.feature-add-el1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.657), rgba(0, 0, 0, 0.657)), 
  url("./images/electrical estimating services near me.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;

}
.feature-add-el2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/construction take off.webp");
  background-repeat: repeat;
  background-size: 100%;
}

/* ---------------PLUMBING STARTS ------------------ */

.section-plumbing{
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/plumbing estimating services.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}


.feature-add-plm1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/plumbing estimates near me.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;

}
.feature-add-plm2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/plumbing quote.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;
}





/* ---------------PLUMBING ENDS ------------------ */














/* -------------INSULATION STARTS------------------- */

.section-insulation{
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/insulation cost estimator.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.feature-add-ins1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/insulation quantity takeoffs.webp");
  background-size: 100%;

}
.feature-add-ins2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.607), rgba(0, 0, 0, 0.607)), 
  url("./images/insulation estimates.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.feature-add-ins1 h1{
  color: white;
  font-size: 3em;
  text-align: center;

}

/* -------------INSULATION ENDS------------------- */

.section-exterior{
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/exterior paint estimator.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}
.feature-add-ext1{
  background-image: linear-gradient(rgba(0, 0, 0, 0.607), rgba(0, 0, 0, 0.607)), 
  url("./images/house paint estimate.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.feature-add-ext2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.207), rgba(0, 0, 0, 0.207)), 
  url("./images/exterior house painting estimate.webp");
  background-repeat: repeat;
  
  background-size: 100%;
}



/* ---------------PAINTING STARTS---------------- */

.section-painting{
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/painting cost estimator service.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}



.feature-add-3{
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/painting takeoff.webp");
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.feature-add-pnt2{
  background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
  url("./images/industrial painting estimate.webp");

  background-size: 100%;
}
.feature-add-3 h1{
  color: white;
  font-size: 3em;
  text-align: center;

}

/* ---------------PAINTING ENDS---------------- */



/* ---------- Rebar Statrts-------- */

:root .section-cncrt{
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/concrete estimate.webp");
}

.indx-container{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 1500px;
 
}
.indx-dabba{
width: 100%;
height: 40%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 3%;
  margin-bottom: 3%;
  
}



.rebar-flex-item-2 img{
  width: 100%;
  height: 25%;
  /* border-radius: 30px; */
  margin-bottom: 3%;
}
.rebar-flex-item-2 h2{
  font-weight: 700;
}
.rebar-flex-item-2{
  padding: 0.3em;
  text-align: left;
  width: 30%;
  height: auto;
  /* */
  /* border: 1px solid black; */
  border-radius: 16px;
}




.section-rebar-l button{
  align-self: center;
}






.rebar-map{
  width: 80vw;
  margin: auto;
  height: 50vh;
  display: flex;
}
.rebar-map-l{
  
  width: 50%;
  
}
.rebar-map-l h2{
 font-weight: 900;
}
.rebar-map-l h3{
 font-weight: 700;
}
.rebar-map-l li{
 list-style:disc;
 margin-top: 1em;
 font-weight: 600;
 
}
.rebar-map-r{
  
  width: 50%;
  
}
.rebar-map-r img{
  width: 100%;
  height: 100%;
  border-radius: 50px;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
}


@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


.body-ben {
  padding: 2rem;
  font-family: 'Roboto', sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;

}
.body-ben ul{
  width: min(100%, 60rem);
  overflow: hidden;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
  list-style: none;
  perspective: 1000px;
  display: grid;
  row-gap: 0.5rem;
}
.body-ben ul li.card{
  position: relative;
  padding-block: 1.5rem;
  padding-inline: 2rem;
  background-color: var(--bg-color);
  background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent);
  transform-style: preserve-3d;
  color: var(--color);
  
  display: grid;
  grid-template: 'icon' 'title' 'content';
  row-gap: 0.5rem;
  column-gap: 2rem;
}
.body-ben ul li.card::before, ul li.card::after {
  --side-rotate: 60deg;
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform-origin: calc(50% - (50% * var(--ry))) 50%  ;
  transform: rotateY(calc(var(--side-rotate) * var(--ry)));
  background-color: inherit;
  background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5));  
}
.body-ben ul li.card::before {--ry: -1; right: 100% }
.body-ben ul li.card::after {--ry: 1; left: 100% }

.body-ben ul li.card .icon {
  grid-area: icon;
  display: grid;
  place-items: center;
}
.body-ben ul li.card .icon i {
  font-size: 2rem;
}
.body-ben ul li.card .title{
  grid-area: title;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}
.body-ben ul li.card .content{
  grid-area: content;
}



@media (min-width: 30rem){
  .body-ben ul li.card {
    grid-template: 'icon title' 'icon content';
    text-align: left;
  }
  .body-ben ul li.card .title { text-align: left }
}


.blog-flex
{
  /* border:1px solid red; */
  width: 80vw;
  height: auto;
  margin: auto;
  display: flex;
  /* justify-content: space-between; */
}
.blog-flex img
{
  width: 80%;
}

.blog-flex-item-img
{
  /* border:1px solid red; */
  width: 40%;
  height: auto;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.blog-flex-item-txt
{
  /* border:1px solid red; */
  width: 58%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.blog-flex-item-txt li{

  margin-top: 1.5em;
  font-size: 1.4em;
}
.blog-flex-item-txt .sxth-btn
{
  /* border:1px solid red; */
  width: auto;
  padding: 4%;
  
}
.rebar-flex
{
  /* */
  width: 80vw;
  height: auto;
  margin: auto;
  display: flex;
}
.rebar-flex,.rebar-flex-2 p{
  margin-top: 10px;
  margin-bottom: 10px;
}
.rebar-flex h4{
  color: var(--col2);
}
.rebar-flex-item img{
  border:1px solid #63caff; 
  width: 100%;
  height: 100%;
  border-radius: 20px;
  margin-bottom: 50px;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
}
.rebar-flex-item {

  width: 40%;
  height: 100%;
  border-radius: 20px;
  
}
.rebar-flex-item-3 {

  padding-left: 1%;
  text-align: center;
  width: 60%;
  height: 100%;
  border-radius: 20px;
  justify-content: center;
  
}
.rebar-flex-item-3 p{

  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-style: oblique;
  font-size: 1.3rem;

 
}

.rebar-flex-2
{
  /* */
  width: 80vw;
  height: auto;
  margin: auto;
  display: flex;
  flex-basis: 5;
}




/* ---------- Rebar ends-------- */




.flip-container .bi{
  font-size: 3em;
  transition: all 0.5s ease-in-out;
  color: var(--gradient3);
}


/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
  border-radius: 15px;
  padding:15%;
}
.flip-card-front{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
  border-radius: 30%;
  padding:0%;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: rgb(237, 237, 237);
  color: black;
}
:root .ben{
  color: white;
}
/* Style the back side */
.flip-card-back {
  background-color: #0e77a6;
  color: white;
  transform: rotateY(180deg);
}






/*------------- Site Work starts --------------------- */
.r-p-b-2-text-box-3{
  
  width: 28%;
  height: 100%; 
  display: flex;
   flex-direction: column;
   justify-content: center;
}
.r-p-b-2-text-box-6{
  margin-left: 10px;
  margin-right: 10px;
  /* */
  width: 50%;
  height: 100%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.r-p-b-2-text-box-6 p{
  font-size: 1.4rem;
}
.recent-proj-3{
  
  height: 120vh;
  width: 70%;
  margin: auto;
}
.recent-proj-box-3{
 
  height: 40%;
  display: flex;
  align-items: center;
  
}
.recent-proj-box-6{
 margin-top: 1em;
  height: 40%;
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  
}
.r-p-b-2-img-box-3{
  
  float: right;
  height: 100%;
  width: 70%;
  background-color: transparent;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
  margin: auto;
}
.r-p-b-2-img-box-3 img{
  height: 100%;
  width: 100%;
 
 }
.r-p-b-2-img-box-6{
  
  float: right;
  height: 50%;
  width: 50%;
  background-color: transparent;
  box-shadow: 0px 0px 15px 0px var(--shadow1);
  margin: auto;
}
.r-p-b-2-img-box-6 img{
  height: 100%;

  width: 100%;
 }


/* ----------- Site Work ends ------------------------ */





/* ------ SOME UTILITY CLASSES --------- */


.category a{
  color: black;
  text-align: center;
}

.category a:hover{
  color: black;
  text-align: center;
}
.category a:visited{
  color: black;
  text-align: center;
}
.category a:active{
  color: black;
  text-align: center;
}









      /*1st  From uiverse.io starts */

      .bg-button button{
        background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5);
        background-size: 800% 400%;
        padding: 1em 2em;
        display: inline-block;
        border: none;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 700;
        color: white;
        transition: all .5s ease-in-out;
        animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;

        border-radius: 1em;
       }
       
       .bg-button button:hover {
        animation: gradient 3s infinite;
        transform: scale(1.05);
       }
       
       .bg-button button:active {
        animation: gradient 3s infinite;
        transform: scale(0.8);
       }
       
       @keyframes gradient {
        0% {
         background-position: 0% 50%;
        }
       
        50% {
         background-position: 100% 50%;
        }
       
        100% {
         background-position: 0% 50%;
        }
       }

       /*1st  From uiverse.io ends*/

       /* 2nd From uiverse.io start*/
       .share-btn{
        background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
        background-size: 800% 400%;
        padding: 2%;
        display: inline-block;
        border: none;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 700;
        color: rgb(0, 0, 0);
        transition: all .5s ease-in-out;
        animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;

        border-radius: 1em;
       }
       
       .share-btn:hover {
        animation: gradient 3s infinite;
        transform: scale(1.05);
       }
       
       .share-btn:active {
        animation: gradient 3s infinite;
        transform: scale(0.8);
       }
       
       @keyframes gradient {
        0% {
         background-position: 0% 50%;
        }
       
        50% {
         background-position: 100% 50%;
        }
       
        100% {
         background-position: 0% 50%;
        }
       }
       
  /* 2nd From uiverse.io end*/





  /*3rd From uiverse.io start */
 .primary-button {
  font-family: 'Ropa Sans', sans-serif;
     /* font-family: 'Valorant', sans-serif; */
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05rem;
  border: 1px solid #0E1822;
  padding: 0.8rem 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-color: #0E1822;
  background-size: 200%;
  background-position: 200%;
  background-repeat: no-repeat;
  transition: 0.3s ease-in-out;
  transition-property: background-position, border, color;
  position: relative;
  z-index: 1;
 }
 
 .primary-button:hover {
 
  color: white;
  background-position: 40%;
 }
 
 .primary-button:before {
  content: "";
  position: absolute;
  background-color: #0E1822;
  width: 0.2rem;
  height: 0.2rem;
  top: -1px;
  left: -1px;
  transition: background-color 0.15s ease-in-out;
 }
 
 .primary-button:hover:before {
  background-color: white;
 }
 
 .primary-button:hover:after {
  background-color: white;
 }
 
 .primary-button:after {
  content: "";
  position: absolute;
  background-color: red;
  width: 0.3rem;
  height: 0.3rem;
  bottom: -1px;
  right: -1px;
  transition: background-color 0.15s ease-in-out;
 }
 
 .button-borders {
  position: relative;
  width: fit-content;
  height: fit-content;
 }
 
 .button-borders:before {
  content: "";
  position: absolute;
  width: calc(100% + 0.5em);
  height: 50%;
  left: -0.3em;
  top: -0.3em;
  border: 1px solid #0E1822;
  border-bottom: 0px;
     /* opacity: 0.3; */
 }
 
 .button-borders:after {
  content: "";
  position: absolute;
  width: calc(100% + 0.5em);
  height: 50%;
  left: -0.3em;
  bottom: -0.3em;
  border: 1px solid #0E1822;
  border-top: 0px;
     /* opacity: 0.3; */
  z-index: 0;
 }
 
 .shape {
  fill: #0E1822;
 }
 
 /*3rd From uiverse.io end*/

 /* 4th from universe.io start */
 
.frth-custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
         7px 7px 20px 0px rgba(0, 0, 0, .1),
         4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
 }
 
 .frth-btn {
  background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
  line-height: 42px;
  padding: 0;
  border: none;
 }
 
 .frth-btn span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
 }
 
 .frth-btn:before,
 .frth-btn:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
         -4px -4px 5px 0px rgba(255, 255, 255, .9),
         7px 7px 20px 0px rgba(0, 0, 0, .2),
         4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
 }
 
 .frth-btn:before {
  height: 0%;
  width: 2px;
 }
 
 .frth-btn:after {
  width: 0%;
  height: 2px;
 }
 
 .frth-btn:hover {
  color: rgba(251, 75, 2, 1);
  background: transparent;
 }
 
 .frth-btn:hover:before {
  height: 100%;
 }
 
 .frth-btn:hover:after {
  width: 100%;
 }
 
 .frth-btn span:before,
 .frth-btn span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251, 75, 2, 1);
  box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9),
         -4px -4px 5px 0px rgba(255, 255, 255, .9),
         7px 7px 20px 0px rgba(0, 0, 0, .2),
         4px 4px 5px 0px rgba(0, 0, 0, .3);
  transition: all 0.3s ease;
 }
 
 .frth-btn span:before {
  width: 2px;
  height: 0%;
 }
 
 .frth-btn span:after {
  height: 2px;
  width: 0%;
 }
 
 .frth-btn span:hover:before {
  height: 100%;
 }
 
 .frth-btn span:hover:after {
  width: 100%;
 }

.frth-btn{
  width: 30%;
  height: auto;
  text-align: center;
  font-weight: 900;
  font-size: 1.3em;
  margin-bottom: 3%;
}


 /* 4th from universe.io end */

  /* 5th from universe.io start */
  


.ffth-btn::after {
 --slice-0: inset(50% 50% 50% 50%);
 --slice-1: inset(80% -6px 0 0);
 --slice-2: inset(50% -6px 30% 0);
 --slice-3: inset(10% -6px 85% 0);
 --slice-4: inset(40% -6px 43% 0);
 --slice-5: inset(80% -6px 5% 0);
 content: "HOVER ME";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
 text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
 clip-path: var(--slice-0);
}

.ffth-btn:hover::after {
 animation: 1s glitch;
 animation-timing-function: steps(2, end);
}

@keyframes glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }

 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }

 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }

 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }

 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }

 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }

 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }

 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }

 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }

 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }

 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}

/* 5th from universe.io end */

/* 6th from universe.io starts */



 
 
 
 
 
 .sxth-btn:hover::before {
  width: 11em;
 }


/* 6th from universe.io ends */



































/* ------------------------- media --------------------------------- */












@media(max-width: 550px)
{

  /* body p{
    font-size: 15px;
     }
     body h6{
       font-size: 22px;
        } */
        body .flip-container button{
         width: 80%;
         font-weight: lighter;
          }

  .gc-box .bi, .gc-box .fa{
    font-size: 50px;
  }
  .text-add-2 button{
    font-size: 12px;
    width: 80%;
    padding: 1em;
  }
  
  .flex-text-boxes{
    width: 100%;
    height: 47%;
    text-align: center;
    padding: auto;
    margin-top: 100px;
  }

  .flex-text h1{
    font-size: 25px;
  }
  .flex-text h6{
    font-size: 16px;
  }
  .feature-add h3{
    font-size: 1em;
  }
  .r-p-b-text p{
    width: 80%;
    font-size: 1.2em;
    padding: 0.5em;
  }

}







@media( min-width:900px) {
 html{
  font-size: 14px;
 }
  body p{
    font-size: 18px;
  }

.rebar-flex-3 p
{
 padding-top:5%;
}
.rebar-flex-3 h4
{
 padding-top:5%;
}



  
}






@media(max-width:915px) {
  :root {
    font-size: 10px;
  }

  .foot {
    height: 100%;
    width: 33.33%;
    justify-content: space-around;
  }

  .rebar-flex-item-3 {
    /* margin: auto; */
    text-align: left;
    margin-left: 0;
    width: 100%;
    margin-bottom: 2%;
    
  }
 /* .rebar-flex-item-3 p{
   font-size: large;
    
  } */
  /* .wrapper-text{
   font-size: medium;
  } */
 .ben2{

   font-size: larger;
 }
 .rebar-flex-item-2 img{
   width: 100%;
   height: 40%;
   /* border-radius: 30px; */
   margin-bottom: 3%;
 }
 .indx-dabba{
   
   flex-direction: column;
   height: 50%;
 }
 
 .rebar-map-r{
   margin-top: 1em;
 
   width: 100%;
   
 }
 .rebar-map-l{
  
   width: 100%;
   
 }
 .rebar-map{
  flex-direction: column;
 }
 

 .blog-flex
 {
   /* border:1px solid red; */
   width: 80vw;
   height: auto;
   margin: auto;
   display: flex;
   flex-direction: column;
   /* justify-content: space-between; */
 }
 .blog-flex img
 {
   width: 100%;
 }
 
 .blog-flex-item-img
 {
   /* border:1px solid red; */
   width: 80%;
   height: auto;
   margin: auto;
   
 }
 .blog-flex-item-txt
 {
   /* border:1px solid red; */
   width: 108%;
   height: 100%;
   margin: auto;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
 .blog-flex-item-txt
 {
  .sxth-btn{
width: auto;
padding: 3%;

font-size: smaller;
  }
   
 }
 

 .rebar-flex
 {
   
   width: 80vw;
   height: auto;
  flex-direction: column;
   
 }
 
 .rebar-flex-item img{
 
   height: 90%;
   width: 100%;
 
 }
 .rebar-flex-item {
 
   width: 100%;
   height: 50%;
   
 }
 .rebar-flex-2
 {
   width: 80vw;
   height: auto;
  flex-direction: column;
   flex-direction: column;
 }
 
  
 

.l-box{
width: 100%;
height: 40%;
}
.r-box{
width: 100%;
height: 50%;
}

}







@media(max-width:920px){

  /* body p{
 font-size: 13px;
  }
  body h6{
    font-size: 35px;
     }
     body button{
      font-size: 20px;
       } */
  /* .chk-bg{
    
    width: 40px;
    height: 40px;
    text-align: center;
  
    
  } */

  
  .recent-proj-box-3{
    flex-direction: column;
    height: 100%;
    border: 1px solid rgb(195, 255, 0); 
    margin-top: 2.2em;
    margin-bottom: 2.2em;
  }
  .r-p-b-2-img-box-3{
 
    float: right;
    height: 70%;
    width: 100%;
    border: 1px solid rgb(0, 213, 255); 
  }
  .r-p-b-2-text-box-3{
  
    width: 100%;
    height: 30%; 
    display: flex;
    text-align: center;
    border: 1px solid rgb(255, 0, 212); 
  }
  .r-p-b-2-text-box-3 h1{
  
    font-size: 3em;
  }

  
  
  .recent-proj-2{
  
    height: auto;
    width: 95%;
    margin: auto;
    margin-top: 2em;
  }
  .recent-proj-box-2{
    flex-direction: column;
    height: 100%;
    margin-top: 2.2em;
    margin-bottom: 2.2em;
    border: 1px solid rgb(82, 82, 82); 
  }
  .r-p-b-2-img-box{
 
    float: right;
    height: 40%;
    width: 70%;
    
  }
  .r-p-b-2-text-box{
  
    width: 100%;
    height: 40%; 
    display: flex;
    text-align: center;
    border: 1px solid rgb(0, 0, 0); 
  }
  

  .next-2{
    /* border: 1px solid rgb(0, 255, 38); */
    height: auto;
    flex-direction: column;
    padding-top:2em ;
    width: 90%;
    margin: auto;
    }
    .next-2 i{
      
      visibility: hidden;
      }

      :root .visible-hidden h1, .visible-hidden p{

        font-size: 0px;
      }
      .visible-hidden{
        visibility: hidden;
        width: 0px;
        height: 0px;
       
      }
     :root .hidden-visible{
      
        visibility: visible;
        height: 10vh;
        width: 100%;
        height: 40%; 
        border: 1px solid rgb(11, 90, 23); 
      }
     :root .hidden-visible h1{
      font-size: 3rem;
      font-family:cursive;
     
      }
     
      
  :root nav{
    padding: 1.5em 0.5em 1.5em 0.5em;
    font-size: 1.5em;
  }
  :root .navbar-toggler-icon {
    
    width: 3em;
    height: 3em;
   
  }

 


.feature-add-reb1{
  background-repeat: repeat;
  background-attachment:unset;
}
.feature-add-reb2{
  background-repeat: repeat;
}

  .home-sec{
    background-image: linear-gradient(rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.83)), 
  url("./webp/vendor.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
    /* margin-top: -9em; */
  
  }
  .home-text{
    border: 1px solid transparent;
    width: 95%;
    position: relative;
    text-align: center;
    top: 50%;
    height: auto;
    word-wrap: break-word;
  }
  
  .home-text p{
    
    font-size: 4em;
    
    
  }
  .home-text h6{
   
    font-size: 2.2em;
    
  }
  


}


/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: 0.5rem;
      
  }
  
  
}	
/* ============ small devices .end// ============ */



/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
  
	}
  
 
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */




@media(min-width:1024px){
  body p{
    font-size: 11px;
  }
  body h6{
    font-size: 15px;
  }
  
  
  .text-add-2 button{
    font-size: 20px;
    width: 30%;
    padding: 1em;
  }
  
  


  .recent-proj-box-3{
    
    margin-top: 2.2em;
    margin-bottom: 2.2em;
  }
 
  
  
  
  .flex-text{
    flex-direction: column;
    justify-content: space-around;
    height: 100vh;
    text-align: center;
    margin-top: 300px;
  }
  .flex-text-boxes{
    width: 100%;
    height: 45%;
  }
  .flex-text h1{
    font-size: 30px;
  }
  .flex-text h6{
    font-size: 27px;
  }
  
  
  .share-plan{
    flex-direction: column;
   align-items: center;
  }
  .share-plan-box{
    width: 80%;
    text-align: center;
  }
  .share-plan-box button{
    font-size: 1.3em;
  }
  
  
  .r-p-b-text{
    align-items: center;
  }
  .r-p-b-text h1, .r-p-b-text h3,.r-p-b-text p {
    text-align: center;
    margin-top: 1em;
    
  }
  

}






  /* @media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
      font-size: 10px;
    }
  } */
  
    @media(min-width:1300px) {
      body p{
        font-size: 15px;
      }
      body h6{
        font-size: 18px;
      }
      /* .chk-bg{
        padding-top: 0.2%;
        width: 50px;
        height: 50px;
        text-align: center;
        
      } */
      :root {
        font-size: 13px;
      }

    }
    @media(min-width:2000px) {
      body p{
        font-size: 20px;
      }
      body h4{
        font-size: 30px;
      }
      body h6{
        font-size: 25px;
      }
    

    }

    
 
   
   





    /* -----------------Chatgpt-------------------- */

    @media (min-width: 180px) and (max-width: 310px) {
     
      body p{
        font-size: 1.6rem;
      }
      body h4{
        font-size: 1.78rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
      }
      body h3{
        font-size: 1.8rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
      }
      body h6{
        font-size: 1.6rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
      }

      html body .dropdown-menu{
        font-weight: 700;
        background: black;
        padding-left: 5%;
      }
      .dropdown-menu label{
        font-size: 1.4em;
      }
      :root nav .dropdown-menu a{
        font-weight: 400;
        font-size: 1.3em;
        /* color: rgb(22, 22, 22); */
        color: rgb(255, 255, 255);
        
      }
      
      html body .d-adjust-c2{
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          width: 98%;
          height: auto;
          /* border: 1px solid yellow; */
          
        }

      .choose ul li .title {
        
        font-size: 1.46rem;
        word-wrap: break-word;
      }
      .choose ul li .descr {
       
        font-size: 1.5rem;

      }

      .body-ben .content{
        font-size:1em;
      }
      .body-ben {
        padding: 2rem;
        font-family: 'Roboto', sans-serif;
        min-height: 100vh;
        display: grid;
        place-items: center;
      /* border: 1px solid red; */
      }
    .body-ben ul{
    
      width: min(100%, 30rem);
    }
      .s-title{
        font-size: 26px;
      }
      .blog img{
       
        width: 100%;
        height: auto;
      }

      .custom-container .custom-accordion .custom-accordion-button{
       font-size: 0.95rem;
    }
      .custom-container .custom-accordion .custom-accordion-content p{
       font-size: 1rem;
    }

      .states-box p{
        font-weight: 900;
        color: black;
        text-align: center;
      }
                      .states-box{
      width: 85%;
      height: 100%;
      border-radius: 10px;
      background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
      text-align: center;
      padding: 5%;
      margin: auto;
      margin-bottom: 5%;
                      }
                      .states-box ul{
      display: flex;
      flex-direction: column;
      width: 70%;
      justify-content: space-around;
      flex-wrap: wrap;
      list-style: none;
      color: white;
     text-align: center;
     padding-left: 0%;
    margin: auto;
                      }
      .states-box li{
      padding: 1%;
      margin-top: 1%;
      margin-bottom: 3%;
      font-weight: 900;
      background: linear-gradient(58deg, rgba(210,25,25,1) 0%, rgba(255,26,26,1) 46%, rgba(195,23,23,1) 100%);
      }


      .blog-in{
        margin-top: 9%;
        text-align: center;
      }
      .blog-in h5{
        font-weight: 900;
        font-size: 1.8em;
      }
      .blog-in button{
        padding: 1%;
        width: 80%;
        font-size: medium;
      }
      

      .block{
        /* border: 1px solid red; */
        margin: 0 1%;
    }
    .blog{
      /* border: 1px solid rgb(0, 21, 255); */
      margin: 2% 1%;
      padding: 0.5%;
      border-radius: 20px;
    
    }
    .blog li{
      font-size: medium;
    }
    .blog h1{
      font-size: 1.6em;
    font-weight: 900;
    margin-top: 2%;
    }
    .blog h6{
    font-size: 1.7em;
    font-weight: 900;
    }
    .blog h2{
    font-size: 2em;
    font-weight: 900;
    margin-top: 2%;
    }
    .blog h3{
    font-size: 1.9em;
    font-weight: 900;
    margin-top: 2%;
    }
    .blog p{
    margin-top: 1%;
    }


    .blog a{
      color:blue;
      font-size: 1rem;
    }

    .blog iframe{
      width: 100%;
    
    }
      
      .cont-head {
        /* display: block; */
        
        font-size: 0.6em;
        /* margin: auto; */
        width: 100%;
        position: relative;
        text-align: center;
        float: left;
        top: 8%;
        left: 25%;
       text-align: center;
        transform: translate(-50%, -50%);
        color: var(--shadow2);
  
      }
      .cont-head2{
        /*  solid red; */
      font-size: 0.4em;
      font-weight: 700;
       text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-left: 1%;
        margin-right: 1%;
      }
      .recent-project-h1{
        font-size: 1.2rem;
        font-family: 'Roboto', sans-serif;
      } 
      .foot li{
        margin-top: 2.5rem;
      }
      .foot h4{
        margin-bottom: 0.4rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
      }
      .foot-container label{
        font-size: 1rem;
      }
      .foot-container li{
        font-size: 0.9rem;
      }
     
      .foot-container {
        flex-direction: column;
        align-items: center;
        /* font-size: 0.5rem; */
      }
      .foot {
        height: 33.33%;
        width: 100%;
      }
      .rebar-flex-3 p
    {
     padding-top:6%;
    }
    .rebar-flex-3 h4
    {
     padding-top:6%;
    }
    
      
     
      
      
      
    
      
    
      
      .chk-bg{
        padding-top: 1%;
        width: 18px;
        height: 18px;
        text-align: center;
        font-size: 1rem;
        
      }
      .recent-proj-3{
  
        height: auto;
        width: 75%;
        margin: auto;
        margin-top: 2em;
      }
      .recent-proj-box-6{
        flex-direction: column;
         /*  solid rgb(36, 0, 128); */
       }
       .r-p-b-2-text-box-6{
        
        width: 100%;
        height: 100%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 2rem;
      }
      .r-p-b-2-text-box-6 h3{
font-weight: 700;
      }
      .r-p-b-2-img-box-6{
        width: 100%;
        height: 100%; 
        
      }
      .r-p-b-2-text-box-6 p{
        font-size: 0.7rem;
        }
        .category{
          display: flex;
          flex-direction: column;
          width: 90vw;
          margin: auto;
          /* */
        }
    
        .col2{
       
          height: 30%;
          width: 100%;
          margin: auto;
          flex-direction: column;
        }
        .rebar-flex-3
        {
          border: 1px solid rgb(0, 0, 0); 
          width: 90vw;
          height: auto;
          margin: auto;
        }
        .rebar-flex-item-2{
          margin: auto;
          width: 100%;
          height: 33%;
        }
        .flip-container{
          
           width: 25em;
           height: 52em;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           margin: auto;
           padding: 0;
         }
         .flip-card {
           
           /* margin: ; */
           overflow: hidden;
           background-color: transparent;
           min-width:20em;
           height: 50em;
           border: 1px solid #f1f1f1;
           perspective: 1000px; /* Remove this if you don't want the 3D effect */
         }
         .flip-card h6 {
            
          font-size: 2em;
          margin-bottom: 2%;
         }
         .flip-card p {
            
          font-size: 1.46em;
          margin-bottom: 10%;
         }
         .card-btn{
          background-color: #dc3545;
          border: 1px solid #dc3545;
          padding: 5%;
          color: white;
          font-weight: 700;
          font-size: 1.6em;
          
            }
           
            .flip-card-back {
            
              padding:2%;
            }
        
        
        .btn {
          width: 60%;
          height: 25%;
          font-size: 8px;
        }
        .btn-danger{
          margin: auto;
          font-size: small;
          padding: 1%;
          font-weight: bolder;
        }
        .foot button {
          width: 20%;
          margin: auto;
          padding: 0.3em;
          font-size: smaller;
          font-weight: medium;
          border: none;
        }
        .btn-lnk .icon {
  
          width: 60px;
          height: 60px;
          text-align: center;
          border-radius: 50px;
          display: inline-block;
          transition: all 0.3s ease-in-out;
        }
        
        .btn-lnk .icon i {
          font-size: 25px;
          z-index: 99999;
          padding-left: 5%;
          color: #000000;
          line-height: 60px;
          transition: all 0.3s ease-in-out;
        }
        a .share-btn{

          font-weight: 900;
          font-size: 0.6em;
        }
        .full-share-btn button{
          margin-top: 50px;
          width: 80vw;
          border-radius: 60px;
        }
        .sxth-btn::before {
          content: '';
          width: 0;
          height: 3em;
          border-radius: 30em;
          position: absolute;
          top: 0;
          left: 0;
          
          background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
          transition: .5s ease;
          display: block;
          z-index: -1;
         }
         .sxth-btn:hover {
          /* color: #e8e8e8; */
          background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
         }
         .sxth-btn{
          font-weight: 900;
          color: rgb(252, 252, 252);
          background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
        }
        .sxth-btn {
          width: 80%;
          padding: 0.8%;
          border-radius: 50px;
          font-size: 1.5em;
          font-family: inherit;
          border: none;
          margin: auto;
          position: relative;
          overflow: hidden;
          z-index: 1;
          /* box-shadow: 6px 6px 12px #c5c5c5,
                      -6px -6px 12px #ffffff; */
         }
        .home-text{
          border: 1px solid transparent;
          width: 100%;
          margin: auto;
          position: relative;
          top: 10%;
          text-align: center;
          height: 100%;
          padding: 1.8%;
          animation-name: img-movement;
          animation-iteration-count: 1;
          animation-duration: 1.5s;
          animation-delay: 0s;
          z-index: 50;
          display: flex;
          flex-direction: column;
          /* justify-content: space-around; */
          word-wrap: break-word;
        }
        
        
         .home-sec{
          height: 70vh;
         }
        
        .typewriter h1 {
          word-wrap: break-word;
          margin: 0 auto; 
         
        }

        .home-text h1{
          color: white;
          font-size: 2.5em;
          margin-bottom: 1%;
          font-weight: 900;
          font-family: 'Roboto', sans-serif;
          font-style: italic;
        }
        .home-text p{
          color: white;
          font-size: 1.3em;
          /* letter-spacing: 2px; */
          font-weight: 500;
          font-family: 'Poppins', sans-serif;
          margin-top: 10%;
          margin-bottom: 0;
          margin-bottom: 1%;
          /* font-style: italic; */
          
        }
        .home-text h6{
          color: white;
          font-size: 1.3em;
          letter-spacing: 3px;
          font-weight: 500;
          font-family: 'Poppins', sans-serif;
          text-transform:uppercase;
          margin-bottom: 2%;
          
        }
        .share-plan{
          display: flex;
          flex-direction: column;
          padding: auto;
          text-align: center;
         
        }
        .share-plan-box{
          width: 80%;
          height: auto;
          margin: auto;
              margin-top: 3%;
              margin-bottom: 2%;
          /* */
        }
        .share-plan-box h2{
         font-size: 1.2em;
        }
        .share-plan a{
          color: black;
          font-family: 'Poppins', sans-serif;
          text-decoration: none;
          font-weight: 900;
          font-size: 0.6em;
        }
        .key-features{
          flex-direction: column;
          align-items: center;
          height: auto;
          padding-bottom: 2%;
          padding-top: 2%;
        }
        
        .feature-box{
          /* */
          width: 80%;
          margin: 20px 30px 20px 30px;
          display: flex;
         text-align: center;
          flex-direction: column;
          padding:0.5em 0.2em 0.5em 0.2em;
          /* padding: 2em; */
          box-shadow: 0px 0px 5px 2px #0ec2a4;
          border-radius: 15px;
          color: wheat;
          background-color: #00000068;
        
        }
        .feature-box .bi{
font-size: 1.5em;
        }
        .recent-proj-box{
          /*  */
          border-radius: 50px;
          box-shadow: 0px 0px 10px 0px var(--shadow1);
          display: flex; 
          height: 30%;
          width: 60%;
          margin: auto;
          margin-top: 2em;
          flex-direction: column;
          justify-content: space-around;
          
          height: auto;
        }
        .recent-project{
          /*   */
          display: block;
          padding-bottom: 5%;
          padding-top: 3%;
          text-align: center;
          background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
        }
        .r-p-b-text  h2{
          font-weight: 900;
          font-size: 1.1em;
        }
        .r-p-b-text  h3{
          font-weight: 600;
          font-size: 1em;
        }
        .r-p-b-text p{
          align-self: center;
          font-size: 0.6em;
          padding: 1em;
        }
        .r-p-b-text {
          text-align: center;
          width:100%;
          padding: 1em;
          
        }
        .r-p-b-img img{
          /*  */
          width: 100%;
          height: 100%;
          margin-bottom: 3%;
          display: block;
          /* border-radius: 50px; */
          box-shadow: 0px 0px 10px 0px var(--shadow1);
        
        }
        .ppe_section{
          display: flex;
          flex-direction: row;
          /*  */
          width: 95%;
          margin: auto;
          margin-top: 2em;
         
          height: auto;
          }
          .ppe_section img{
    
            width: 100%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0px 0px 5px 2px var(--shadow1);
            animation-name: img-movement;
            animation-iteration-count: 1;
            animation-duration: 1.5s;
            animation-delay: 0s;
          }
         
        
        .ppe_section h1{
        font-weight: 900;
          font-size: 1.2em;
          color: var(--col5);
        }
        .ppe_section h3{
    
          font-weight: 700;
          font-size: 1em;
          color: var(--col3);
          margin-top: 5%;
          margin-bottom: 15%;
        }
        .ppe_section_text{
          position: absolute;
          background-color: #fff;
          border: 1px solid rgb(11, 0, 84); 
          top: 20%;
          left: 15%;
          width: 70%;
          height: auto;
          margin:auto;
          padding: 1em;
          border-radius: 0.5em;
          text-align: center;
          z-index: 3;
          animation-name: movement;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-delay: 0s;
            transition: transform 1s ease-in-out;
        }
        .bg-button button{
          font-size: 1em;
        }
        .flex-text h2{
          font-family: 'Roboto', sans-serif;
          font-weight: 900;
          color: var(--col5);
        }
        .flex-text h6{
        
          font-weight: 600;
          font-size: 1em;
          font-family:  'Poppins', sans-serif;
          color: var(--col3);
          margin-top: 5%;
          font-style: oblique;
          margin-bottom: 15%;
        }
        .flex-text-boxes{
          /* */
          width: 100%;
          height: auto;

          margin: auto;
          margin-top: 5%;
          margin-bottom: 5%;
          box-shadow: 0px 0px 5px 2px var(--shadow1);
          border-radius: 15px;
          z-index: 1000;
          padding:2%;
          margin-bottom: 1%;
        }
        .flex-text{
         
          display: flex;
          flex-direction: column;
          width: 90%;
          height: auto;
          margin: auto;
          justify-content: space-around;
          text-align: center;
          margin-top: 0.2em;
        }
        .share-plan{
          display: flex;
          justify-content: center;
          flex-direction: column;
          /*   */
          background: linear-gradient(58deg, rgba(0,92,116,1) 0%, rgba(0,159,114,1) 46%, rgba(6,0,76,1) 100%);
          
        }
        .share-plan-box{
          width: 80%;
          margin: auto;
                      margin-top: 3%;
                      margin-bottom: 2%;
          color: white;
          /*   */
        }
        .last-flex-text h2{
          text-align: center;
          font-weight: 900;
          font-family: 'Roboto', sans-serif;
          font-size: 1.5em;
          margin-bottom: 1em;
        }
       
        .g-map img{
          
          width: 100%;
          height: 100%;
          border-radius: 15px;
          /* margin-left: 1em; */
          box-shadow: 0px 0px 5px 2px var(--shadow1);
          animation-name: img-movement;
          animation-iteration-count: 1;
          animation-duration: 1.5s;
          animation-delay: 0s;
          z-index: 50;
        }.g-map h6{
          text-align: center;
          margin-top: 10px;
          margin-bottom: 2em;
          color: #000428;
           animation-name: img-movement;
           animation-iteration-count: 1;
           animation-duration: 1.5s;
           animation-delay: 0s;
           z-index: 50;
         }
         .map-form{
                
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content:space-around;
          padding: 2%;
          height: auto;
          width: 80vw;
         ;
          border: 1px solid red;
          margin: auto;
        }

        .g-map{
          width: 90%;
          height: 100%;
        }
        .mid-form{
          display: block;
          /* background-color: #000000; */
          width: 90%;
          
          height: 100%;
          padding-left: 0%;
          /* margin-bottom: 2%; */
          margin-top: 1em;
        /* border: 1px solid red; */
          /* box-shadow: 0px 0px 20px 5px var(--gradient3); */
          border-radius: 10px;
          animation-name: form-movement;
        animation-iteration-count: 1;
        animation-duration: 2s;
        animation-delay: 0s;
        z-index: 50;
        }
        .mid-form img{
          border-radius: 15px;
          width: 100%;
          height: 100%;
          /* margin-left: 1em; */

        }

         

         
        .banner-call{
          text-align: center;
           padding: 1em;
           background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
            color: white;
            font-family: sans-serif;
            width: 100%;
            height: auto;
          }
          .banner-call h2{font-size: 1.5em;
            font-weight: 900;
          }
          .r-p-b-2-text-box h2{
            font-weight: 900;
            font-family: 'Roboto',sans-serif;
              }
              .r-p-b-2-text-box p{
            font-family: 'Poppins',sans-serif;
            font-size: 1em;
              }
              .container-cont-showcase {
                
                display: flex;
                flex-direction: column;
                width: 95%;
                height: auto;
                margin: auto;
                justify-content: space-between;
                margin-top: 5em;
          
              }
              
              .box {
                
                width: 80%;
                height: auto;
                margin: auto;
                margin-bottom: 5%;
                padding: 2%;
                text-align: center;
                box-shadow: 0px 0px 10px 0px var(--shadow1);
                background-color: var(--col4);
              }
              .box .fas{
                font-size: 3em;
              }
              .box h6{
                font-size: 1em;
              }
              .container-fluid-l-r{
                
               align-items: center;
                width: 95%;
                height: auto;
                margin: auto;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
              }
              .l-box{
                text-align: center;
              }
              .l-box h4{
                margin-top: 5%;
              }
              .l-box .hr{
                margin:auto;
                margin-bottom: 1em;
              }
              .r-box{
                width: 80%;
              }
              .r-box .btn-grad-cont{
                font-size: 1.2em;
                width: 40%;
                padding: 2%;
                margin: auto;
                margin-top: 10%;
                margin-bottom: 10%;
                border-radius: 0px;
              }
              .showcase-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
                padding: 1%;
                font-size: 1.3rem;
                color: rgb(255, 255, 255);
                background-color: rgba(0, 0, 0, 0.707);
                text-transform: uppercase;
                position: absolute;
                z-index: 100;
                padding-bottom: 5%;
              }
              .showcase-container h1{
                font-size: 2em;
                text-align: center;
              }
              .showcase-container h3{
                font-size: 1em;
                font-weight: 300;
                text-align: center;
              }
              .showcase-container p{
                font-size: 0.7em;
                text-align: center;
                font-family:'Poppins', sans-serif;
              }
              .s-h{
                font-size: 2em;
                font-weight: 900;
                text-align: center;
              }
              
              .s-h2{
                font-weight: 900;
                font-size: 1em;
                text-align: center;
                
              }
              .ffth-btn,
.ffth-btn::after {
 padding: 5px 14px;
 font-size: 0.8em;
 font-weight: 900;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 0;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}
.carousel-inner {
  height: 60vh;
}
.carousel-inner img{
  height: 60vh;
}






.section-rebar{
  display: flex;
  flex-direction: column;
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/rebar takeoffs.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.section-rebar-r{
  display: flex;
  flex-direction: column;
  /* padding: 1%; */
  width: 90%;
  margin: auto;
  height: 30%;
  

}



.section-rebar-r li{
  font-size: 1em;
  margin-top: 0.5em;
  color: white;
 margin-bottom: 2%;
}


.section-rebar-r h6{
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  border-radius: 80px;
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  margin-bottom: 3%;
  margin-top: 5%;
  margin-left: 1%;
  width: 60%;
  text-align: center;
  
}

.section-rebar-l{
  width: 100%;
  height: 70%;
}
.section-rebar .section-rebar-l h6{
  margin-bottom: 5%;
  font-size: 0.6em;
}
.section-rebar-l .text-b-plumb{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0.5%;
 
}
.text-b-plumb h1{
  color: #E8E2E2;
  font-size: 2em;
  font-weight: bold;
  margin-top: 10%;
  /* font-family: 'Roboto',sans-serif; */
  margin-bottom: 0.5em;
}


.text-b-plumb span{
  background-color: white;
  color: #00c4d6;
  text-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: 'Roboto',sans-serif;
  font-weight: 700;
  margin-bottom: 5em;
  padding-bottom: 1%;
 
  }

  .frth-custom-btn {
    width: 45%;
    height: auto;
    padding: 0.5%;
    color: #fff;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
           7px 7px 20px 0px rgba(0, 0, 0, .1),
           4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    font-size: 1em;
   }
   
   .frth-btn {
    background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
   }



   .section-drywall{
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
    url("./images/drywall estimtimations.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /* background-image: url("../images/plumber1.webp"); */
    background-size: 100vw 150vh;
    /* */
    position: relative;
  }
  /* .section-plumb-l{
    height: ;
    
  } */
  .text-b-plumb{
   
    margin: auto;
    width: 95%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  
  .text-b-plumb h2{
    margin-top: 1em;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    font-family: 'Roboto',sans-serif;
  }


  .gc-boxes{
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    margin-top: 35px;
    align-items: center;
    }
    .gc-box{
     
      text-align: center;
      width: 80%;
      margin: 1.5em;
      color: var(--col1);
      box-shadow: 0px 0px 10px 0px var(--shadow1);
      background-color: var(--col4);
      transition: all 0.5s ease-in-out;
      }

      .cont-head3{
        text-align: center;
        font-size: 1.2em;
  margin-top: 20%;
      }

    }



@media (min-width: 310px) and (max-width: 575.98px){
  html {
    font-size: 14px;
  }
  
  body p{
    font-size: 2.5rem;
  }
  body h4{
    font-size: 2.8rem;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
  }
  body h6{
    font-size: 2.6rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }



  html body .dropdown-menu{
    font-weight: 700;
    background: black;
    padding-left: 5%;
    max-height: 80em;
    overflow: auto;
  }
  .dropdown-menu label{
    font-size: 1.8em;
  }
  :root nav .dropdown-menu a{
    font-weight: 400;
    font-size: 1.7em;
    /* color: rgb(22, 22, 22); */
    color: rgb(255, 255, 255);
    
  }
  
  html body .d-adjust-c2{
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      width: 90%;
      height: auto;
      /* border: 1px solid yellow; */
      
    }



  .container-fluid-mine {
    height: 25vh;
    width: 100%;
    font-size: 3em;
    margin-top: 0%;
    padding-top: 0.1%;
  }
  .choose ul li .title {
        
    font-size: 1.37rem;
    
  }
  .choose ul li .descr {
   
    font-size: 1.3rem;

  }
  .body-ben .content{
    font-size:1.7em;
  }
  .body-ben {
    padding: 2rem;
    font-family: 'Roboto', sans-serif;
    min-height: 120vh;
    display: grid;
    place-items: center;
  /* border: 1px solid red; */
  }
.body-ben ul{

  width: min(100%, 50rem);
}


  .s-title{
    font-size: 28px;
  }
  .blog img{
       
    width: 100%;
    height: auto;
  }
  .states-box p{
    font-weight: 900;
    color: black;
    text-align: center;
  }
                  .states-box{
  width: 85%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
  text-align: center;
  padding: 5%;
  margin: auto;
  margin-bottom: 5%;
                  }
                  .states-box ul{
  display: flex;
  flex-direction: column;
  width: 70%;
  justify-content: space-around;
  flex-wrap: wrap;
  list-style: none;
  color: white;
 text-align: center;
 padding-left: 0%;
margin: auto;
                  }
  .states-box li{
  padding: 1%;
  margin-top: 1%;
  margin-bottom: 3%;
  font-weight: 900;
  background: linear-gradient(58deg, rgba(210,25,25,1) 0%, rgba(255,26,26,1) 46%, rgba(195,23,23,1) 100%);
  }
  
  .blog-in{
    margin-top: 8%;
    text-align: center;
  }
  .blog-in h5{
    font-weight: 900;
    font-size: 2.4rem;
  }
  .blog-in button{
    padding: 1%;
    width: 70%;
    font-size: small;
  }
  
  .block{
    /* border: 1px solid red; */
    margin: 0 1%;
}
  .block li{
    /* border: 1px solid red; */
    font-size: 2.3rem;
}
.blog{
  /* border: 1px solid rgb(0, 21, 255); */
  margin: 2% 1%;
  padding: 0.5%;
  border-radius: 20px;

}
.blog h1{
  font-size: 1.8em;
font-weight: 900;
margin-top: 2%;
}
.blog h2{
font-size: 3.2rem;
font-weight: 900;
margin-top: 2%;
}
.blog h6{
  font-size: 2.6em;
  font-weight: 900;
  }
.blog h3{
font-size: 3rem;
font-weight: 900;
margin-top: 2%;
}
.blog p{
margin-top: 1%;
}

.custom-container .custom-accordion .custom-accordion-button{
  font-size: 2.1rem;
}
 .custom-container .custom-accordion .custom-accordion-content p{
  font-size: 2.7rem;
}

.blog a{
  color:blue;
  font-size: 2.4rem;
}

.blog iframe{
  width: 80%;

}

.rebar-flex-item-3 p{

  font-size: 2.4rem;
}

  .recent-project-h1{
    font-size: 1.7rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  } 
  .foot li{
    margin-top: 2.5rem;
  }
  .foot h4{
    margin-bottom: 1rem;
  }
  .foot-container label{
    font-size: 1.3rem;
  }
  .foot-container li{
    font-size: 1rem;
  }
  .foot-container {
    flex-direction: column;
    align-items: center;
    font-size: 1rem;
  }
  .foot {
    height: 33.33%;
    width: 100%;
  }
  .chk-bg{
    padding-top: 1%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 1rem;
    
  }
  .recent-proj-box-6{
    flex-direction: column;
     /* border: 1px solid rgb(36, 0, 128); */
   }
   .r-p-b-2-text-box-6{
    
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
  }
  .r-p-b-2-img-box-6{
    width: 100%;
    height: 90%; 
    
  }
  .r-p-b-2-text-box-6 p{
    font-size: 1rem;
    }
    .category{
      display: flex;
      flex-direction: column;
      width: 90vw;
    margin: auto;
      /* */
    }

    .col2{
   
      height: 30%;
      width: 100%;
      margin: auto;
      flex-direction: column;
    }
    .rebar-flex-3
    {
      border: 1px solid rgb(0, 0, 0); 
      width: 90vw;
      height: auto;
      margin: auto;
    }
    .rebar-flex-item-2{
      margin: auto;
      width: 100%;
      height: 33%;
    }
    .flip-container{
     
       width: 35em;
       height: 60em;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       margin: auto;
       padding: 0;
     }
     .flip-card {
       
       /* margin: ; */
       overflow: hidden;
       background-color: transparent;
       min-width:30em;
       height: 50em;
       border: 1px solid #f1f1f1;
       perspective: 1000px; /* Remove this if you don't want the 3D effect */
     }
     .flip-card h6 {
        
      font-size: 2.5rem;
      margin-bottom: 2%;
     }
     .flip-card p {
        
      font-size: 1.8rem;
      margin-bottom: 10%;
     }
     .card-btn{
      background-color: #dc3545;
      border: 1px solid #dc3545;
      padding: 5%;
      color: white;
      font-weight: 700;
      font-size: 1.6em;
      
        }
       
        .flip-card-back {
        
          padding:2%;
        }
    
    
    .btn {
      width: 60%;
      height: 30%;
      font-size: 5px;
    }
    .btn-danger{
      margin: auto;
      font-size: small;
      padding: 1%;
      font-weight: lighter;
    }
    .foot button {
      width: 20%;
      margin: auto;
      padding: 0.3em;
      font-size: small;
      font-weight: medium;
      border: none;
    }
    .btn-lnk .icon {
  
      width: 60px;
      height: 60px;
      text-align: center;
      border-radius: 50px;
      display: inline-block;
      transition: all 0.3s ease-in-out;
    }
    
    .btn-lnk .icon i {
      font-size: 25px;
      z-index: 99999;
      color: #000000;
      line-height: 60px;
      transition: all 0.3s ease-in-out;
    }
    a .share-btn{

      font-weight: 900;
      font-size: 0.8em;
    }
    .full-share-btn button{
      margin-top: 50px;
      width: 80vw;
      border-radius: 60px;
    }
    .sxth-btn::before {
      content: '';
      width: 0;
      height: 3em;
      border-radius: 30em;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
      transition: .5s ease;
      display: block;
      z-index: -1;
     }
     .sxth-btn:hover {
      /* color: #e8e8e8; */
      background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
     }
     .sxth-btn{
      font-weight: 900;
      color: rgb(252, 252, 252);
      background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
    }
    
    .sxth-btn {
      width: auto;
      height: auto;
      padding: 2%;
      border-radius: 50px;
      font-size: 1.6em;
      font-family: inherit;
      border: none;
      margin: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      /* box-shadow: 6px 6px 12px #c5c5c5,
                  -6px -6px 12px #ffffff; */
     }
    
     .home-sec{
      height: 50em;
     }
    .home-text{
      border: 1px solid transparent;
      width: 100%;
      margin: auto;
      position: relative;
      top: 2%;
      text-align: center;
      height: auto;
      padding: 1.5%;
      animation-name: img-movement;
      animation-iteration-count: 1;
      animation-duration: 1.5s;
      animation-delay: 0s;
      z-index: 50;
      word-wrap: break-word;
    }
    .typewriter h1 {
      word-wrap: break-word;
      margin: 0 auto; 
     
    }
  
    .home-text h1{
      color: white;
      font-size: 3em;
      margin-bottom: 1.2%;
      font-weight: 900;
      font-family: 'Roboto', sans-serif;
      font-style: italic;
    }
    .home-text p{
      color: white;
      font-size: 2em;
      /* letter-spacing: 2px; */
      font-weight: 500;
      font-family: 'Poppins', sans-serif;
      margin-top: 10%;
      margin-bottom: 0;
      margin-bottom: 1.2%;
      /* font-style: italic; */
      
    }
    .home-text h6{
      color: white;
      font-size: 2em;
      letter-spacing: 3px;
      font-weight: 500;
      font-family: 'Poppins', sans-serif;
      text-transform:uppercase;
      margin-bottom: 5%;
      
    }
    .r-p-b-2-text-box-6 h3{
      font-weight: 700;
            }
            .share-plan{
              display: flex;
              flex-direction: column;
              padding: auto;
              text-align: center;
             
            }
            .share-plan-box{
              width: 80%;
              height: auto;
              margin: auto;
              margin-top: 3%;
              margin-bottom: 2%;
              /* */
            }
            .share-plan-box h2{
             font-size: 1.2em;
            }
            .share-plan a{
              color: black;
              font-family: 'Poppins', sans-serif;
              text-decoration: none;
              font-weight: 900;
              font-size: 0.6em;
            }
            .key-features{
              flex-direction: column;
              align-items: center;
              height: auto;
              padding-bottom: 2%;
              padding-top: 2%;
            }
            .feature-box .bi{
              font-size: 1.7em;
                      }
            .feature-box{
              /* */
             
              width: 80%;
              margin: auto;
              margin-top: 7%;
              margin-bottom: 7%;
              display: flex;
             text-align: center;
              flex-direction: column;
              padding:0.5em 0.2em 0.5em 0.2em;
              /* padding: 2em; */
              box-shadow: 0px 0px 5px 2px #0ec2a4;
              border-radius: 15px;
              color: wheat;
              background-color: #00000068;
            
            }
            .recent-proj-box{
              /*  */
              border-radius: 50px;
              box-shadow: 0px 0px 10px 0px var(--shadow1);
              display: flex; 
              height: 30%;
              width: 60%;
              margin: auto;
              margin-top: 2em;
              flex-direction: column;
              justify-content: space-around;
              
              height: auto;
            }
            .recent-project{
              /*   */
              display: block;
              padding-bottom: 5%;
              padding-top: 3%;
              text-align: center;
              background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
            }
            .r-p-b-text  h2{
              font-weight: 900;
              font-size: 1.1em;
            }
            .r-p-b-text  h3{
              font-weight: 400;
              font-size: 1em;
            }
            .r-p-b-text p{
              align-self: center;
              font-size: 0.6em;
              padding: 1em;
            }
            .r-p-b-text {
              text-align: center;
              width:100%;
              padding: 1em;
              
            }
            .r-p-b-img img{
              /*  */
              width: 100%;
              height: 100%;
              margin-bottom: 3%;
              display: block;
              /* border-radius: 50px; */
              box-shadow: 0px 0px 10px 0px var(--shadow1);
            
            }
            .ppe_section{
              display: flex;
              flex-direction: row;
              /*  */
              width: 95%;
              margin: auto;
              margin-top: 2em;
             
              height: auto;
              }
              .ppe_section img{
        
                width: 100%;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 0px 5px 2px var(--shadow1);
                animation-name: img-movement;
                animation-iteration-count: 1;
                animation-duration: 1.5s;
                animation-delay: 0s;
              }
             
            
            .ppe_section h1{
            font-weight: 900;
              font-size: 1.2em;
              color: var(--col5);
            }
            .ppe_section h3{
        
              font-weight: 700;
              font-size: 1em;
              color: var(--col3);
              margin-top: 5%;
              margin-bottom: 15%;
            }
            .ppe_section_text{
              position: absolute;
              background-color: #fff;
              border: 1px solid rgb(11, 0, 84); 
              top: 20%;
              left: 15%;
              width: 70%;
              height: auto;
              margin:auto;
              padding: 1em;
              border-radius: 0.5em;
              text-align: center;
              z-index: 3;
              animation-name: movement;
                animation-iteration-count: 1;
                animation-duration: 1s;
                animation-delay: 0s;
                transition: transform 1s ease-in-out;
            }
            .bg-button button{
              font-size: 1em;
            }
            .flex-text h2{
              font-family: 'Roboto', sans-serif;
              font-weight: 900;
              color: var(--col5);
            }
            .flex-text h6{
            
              font-weight: 600;
              font-size: 1.2em;
              font-family:  'Poppins', sans-serif;
              color: var(--col3);
              margin-top: 5%;
              font-style: oblique;
              margin-bottom: 15%;
            }
            .flex-text-boxes{
              /* */
              width: 100%;
              height: auto;
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              border-radius: 15px;
              z-index: 1000;
              padding:2%;
              margin-bottom: 1%;
            }
            .flex-text{
             
              display: flex;
              flex-direction: column;
              width: 90%;
              height: auto;
              margin: auto;
              justify-content: space-around;
              text-align: center;
              margin-top: 0.1em;
            }
            .share-plan{
              display: flex;
              justify-content: center;
              /*   */
              background: linear-gradient(58deg, rgba(0,92,116,1) 0%, rgba(0,159,114,1) 46%, rgba(6,0,76,1) 100%);
              
            }
            .share-plan-box{
             
              margin: auto;
                          margin-top: 3%;
                          margin-bottom: 2%;
              color: white;
              /*   */
            }
            .last-flex-text h2{
              text-align: center;
              font-weight: 900;
              font-family: 'Roboto', sans-serif;
              font-size: 2em;
              margin-bottom: 2em;
            }
            .map-form{
              
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content:space-between;
              padding: 5%;
            }
            .g-map img{
              
              width: 100%;
              height: 100%;
              border-radius: 15px;
              /* margin-left: 1em; */
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              animation-name: img-movement;
              animation-iteration-count: 1;
              animation-duration: 1.5s;
              animation-delay: 0s;
              z-index: 50;
            }.g-map h6{
              text-align: center;
              margin-top: 10px;
              margin-bottom: 2em;
              color: #000428;
               animation-name: img-movement;
               animation-iteration-count: 1;
               animation-duration: 1.5s;
               animation-delay: 0s;
               z-index: 50;
             }
            
             .map-form{
                
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content:space-around;
              padding: 2%;
              height: auto;
              width: 80vw;
             ;
              border: 1px solid red;
              margin: auto;
            }
  
            .g-map{
              width: 90%;
              height: 100%;
            }
            .mid-form{
              display: block;
              /* background-color: #000000; */
              width: 90%;
              
              height: 100%;
              padding-left: 0%;
              /* margin-bottom: 2%; */
              margin-top: 1em;
            /* border: 1px solid red; */
              /* box-shadow: 0px 0px 20px 5px var(--gradient3); */
              border-radius: 10px;
              animation-name: form-movement;
            animation-iteration-count: 1;
            animation-duration: 2s;
            animation-delay: 0s;
            z-index: 50;
            }
            .mid-form img{
              border-radius: 15px;
              width: 100%;
              height: 100%;
              margin-left: 1em;
  
            }
            .box {
                
              width: 50%;
              height: 30em;
              margin: auto;
              margin-bottom: 5%;
              padding: 2%;
              text-align: center;
              box-shadow: 0px 0px 10px 0px var(--shadow1);
              background-color: var(--col4);
              word-wrap: break-word;
            }
            .box .fas{
              font-size: 9em;
              margin-bottom: 5%;
            }
            .box h6{
              font-size: 1.8em;
            }
            .box h3{
              font-size: 2.7em;
            }
            .l-box{
              text-align: center;
            }
            .l-box h4{
              margin-top: 5%;
            }
            .l-box .hr{
              margin:auto;
              margin-bottom: 1em;
            }
            
            
            .container-fluid-l-r{
  border: 1px solid red;
  height: auto;
  width: 80vw;
            }
  
            .r-box{
              width: 80%;
              height: auto;
              /* border: 1px solid red; */
              margin-top: 5%;
            }
            .r-box label{
              font-size: 2.1em;
            }
            .r-box input{
              padding: 0.3em;
              font-size: 2.1em;
            }
            .r-box form{
              width: 100%;
              height: auto;
              /* border: 1px solid blue; */
              
            }
            .l-box{
              width: 80%;
              height: 50%;
              border: 1px solid red;
            }
            .l-box h2{
  
              font-size: 3em;
            }
            .l-box p{
  
              font-size: 1.7em;
            }
            .l-box h4{
  
              font-size: 2.1em;
            }
            .l-box h3{
  
              font-size: 2.5em;
            }
            .banner-call{
              text-align: center;
               padding: 1em;
               background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
                color: white;
                font-family: sans-serif;
                width: 100%;
                height: auto;
              }
              .banner-call h2{ font-weight: 900;    font-size: 2em;
              }
              .r-p-b-2-text-box h2{
                font-weight: 900;
                font-family: 'Roboto',sans-serif;
                  }
                  .r-p-b-2-text-box p{
                font-family: 'Poppins',sans-serif;
                font-size: 1.4em;
                  }
                  .container-cont-showcase {
                    
                    display: flex;
                    flex-direction: column;
                    width: 95%;
                    height: auto;
                    margin: auto;
                    justify-content: space-between;
                    margin-top: 5em;
              
                  }
                  
                  .box {
                    
                    width: 80%;
                    height: auto;
                    margin: auto;
                    margin-bottom: 5%;
                    padding: 2%;
                    text-align: center;
                    box-shadow: 0px 0px 10px 0px var(--shadow1);
                    background-color: var(--col4);
                  }
                 
                  .container-fluid-l-r{
                    
                   align-items: center;
                    width: 95%;
                    height: auto;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                  }
                  .l-box{
                    text-align: center;
                  }
                  .l-box h4{
                    margin-top: 5%;
                  }
                  .l-box .hr{
                    margin:auto;
                    margin-bottom: 1em;
                  }
                  .r-box{
                    width: 80%;
                  }
                  .r-box .btn-grad-cont{
                    font-size: 2.2em;
                    width: 40%;
                    padding: 2%;
                    margin: auto;
                    margin-top: 10%;
                    margin-bottom: 10%;
                    border-radius: 0px;
                  }
                  .showcase-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    width: 100%;
                    font-size: 1.3rem;
                    color: rgb(255, 255, 255);
                    background-color: rgba(0, 0, 0, 0.707);
                    text-transform: uppercase;
                    position: absolute;
                    z-index: 100;
                    padding: 1%;
                    /* padding-bottom: 10em; */
                  }
                  .showcase-container h1{
                    font-size: 2em;
                    text-align: center;
                  }
                  .showcase-container h3{
                    font-size: 1.2em;
                    font-weight: 300;
                    text-align: center;
                  }
                  .showcase-container p{
                    font-size: 0.8em;
                    text-align: center;
                    font-family:'Poppins', sans-serif;
                  }
                  .s-h{
                    font-size: 2em;
                    font-weight: 900;
                    text-align: center;
                  }
                  
                  .s-h2{
                    font-weight: 900;
                    font-size: 1em;
                    text-align: center;
                    
                  }
                  .ffth-btn,
.ffth-btn::after {
 padding: 5px 14px;
 font-size: 1em;
 font-weight: 900;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 0;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
 
}
.carousel-inner {
  height: 60vh;
}
.carousel-inner img{
  height: 60vh;
}




.section-rebar{
  display: flex;
  flex-direction: column;
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/rebar takeoffs.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.section-rebar-r{
  display: flex;
  flex-direction: column;
  /* padding: 1%; */
  width: 90%;
  margin: auto;
  height: 30%;
  

}



.section-rebar-r li{
  font-size: 1em;
  margin-top: 0.5em;
  color: white;
 margin-bottom: 2%;
}


.section-rebar-r h6{
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  border-radius: 80px;
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  margin-bottom: 3%;
  margin-top: 5%;
  margin-left: 1%;
  width: 60%;
  text-align: center;
  
}

.section-rebar-l{
  width: 100%;
  height: 70%;
}
.section-rebar .section-rebar-l h6{
  margin-bottom: 5%;
  font-size: 0.6em;
}
.section-rebar-l .text-b-plumb{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0.5%;
 
}
.text-b-plumb h1{
  color: #E8E2E2;
  font-size: 2em;
  font-weight: bold;
  margin-top: 10%;
  /* font-family: 'Roboto',sans-serif; */
  margin-bottom: 0.5em;
}


.text-b-plumb span{
  background-color: white;
  color: #00c4d6;
  text-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
  font-size: 2em;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: 'Roboto',sans-serif;
  font-weight: 700;
  margin-bottom: 5em;
  padding-bottom: 1%;
 
  }

  .frth-custom-btn {
    width: 45%;
    height: auto;
    padding: 0.5%;
    color: #fff;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
           7px 7px 20px 0px rgba(0, 0, 0, .1),
           4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    
   }
   
   .frth-btn {
    background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
   }

   .section-drywall{
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
    url("./images/drywall estimtimations.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /* background-image: url("../images/plumber1.webp"); */
    background-size: 100vw 150vh;
    /* */
    position: relative;
  }
  /* .section-plumb-l{
    height: ;
    
  } */
  .text-b-plumb{
   
    margin: auto;
    width: 90%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  
  .text-b-plumb h2{
    margin-top: 1em;
    color: white;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Roboto',sans-serif;
  }

  .gc-boxes{
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    margin-top: 35px;
    align-items: center;
    }
    .gc-box{
     
      text-align: center;
      width: 60%;
      margin: 1.5em;
      color: var(--col1);
      box-shadow: 0px 0px 10px 0px var(--shadow1);
      background-color: var(--col4);
      transition: all 0.5s ease-in-out;
      padding: 1%;
      }

      .gc-boxes h3{
        font-weight: 900;
        font-size: 1em;
      }
      .cont-head {
        /* display: block; */
        
        font-size: 0.9em;
        /* margin: auto; */
        width: 100%;
        position: relative;
        text-align: center;
        float: left;
        top: 8%;
        left: 25%;
       text-align: center;
        transform: translate(-50%, -50%);
        color: var(--shadow2);
  
      }
      .cont-head2{
        /* */
      font-size: 0.5em;
      font-weight: 700;
       text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-left: 1%;
        margin-right: 1%;
      }
      .cont-head3{
        text-align: center;
        margin-top: 20%;
        font-size: 1.2em;
  
      }
}

/* For screens between 576px and 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
  body p{
    font-size: 2.4rem;
  }
  body h4{
    font-size: 2.8rem;
    font-weight: 900;
  }
  body h5{
    font-size: 2.7rem;
  }
  body h6{
    font-size: 2.6rem;
  }

  html body .navbar .nav-link{
    font-size: 1.1em;
  }
  
  nav img {
    border-radius: 5px;
    width: 150px;
    height: auto;
  }
  html body .dropdown-menu{
    font-weight: 900;
    background: black;
    padding-left: 3%;
    max-height: 50em;
    overflow: auto;
  }
  .dropdown-menu label{
    font-size: 2.5em;
  }
  :root nav .dropdown-menu a{
    font-weight: 400;
    font-size: 2em;
    margin-top: 4%;
    /* color: rgb(22, 22, 22); */
    color: rgb(255, 255, 255);
    
  }
  
  html body .d-adjust-c2{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      width: auto;
      height: 45em;
      /* border: 1px solid yellow; */
      
    }


  .container-fluid-mine {
    height: 30vh;
    width: 100%;
    font-size: 2.5em;
    margin-top: 0%;
    padding-top: 0.5%;
  }

  .s-title{
    font-size: 39px;
  }

  .choose ul li .title {
        
    font-size: 1.5rem;
    
  }
  .choose ul li .descr {
   
    font-size: 1.4rem;

  }
  .body-ben .content{
    font-size:1.7em;
  }
  .body-ben {
    padding: 2rem;
    font-family: 'Roboto', sans-serif;
    min-height: 120vh;
    display: grid;
    place-items: center;
  /* border: 1px solid red; */
  }
.body-ben ul{

  width: min(100%, 50rem);
}

  .blog img{
       
    width: 100%;
    height: auto;
  }
  .states-box p{
    font-weight: 900;
    color: black;
  }


  .custom-container .custom-accordion .custom-accordion-button{
    font-size: 3rem;
  }
   .custom-container .custom-accordion .custom-accordion-content p{
    font-size: 3.2rem;
  }

                  .states-box{
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
  text-align: center;
  padding: 2%;
  margin-bottom: 5%;
                  }
                  .states-box ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  color: white;
  
                  }
  .states-box li{
  padding: 1%;
  margin: 3%;
  font-weight: 900;
  border-radius: 10px;
  background: linear-gradient(58deg, rgba(210,25,25,1) 0%, rgba(255,26,26,1) 46%, rgba(195,23,23,1) 100%);
  }
  .blog-in{
    margin-top: 5%;
    text-align: center;
  }
  .blog-in h5{
    font-weight: 900;
    font-size: 2.7rem;
  }
  .blog-in button{
    padding: 1%;
    width: 50%;
    font-size: medium;
  }
  .block{
    /* border: 1px solid red; */
    margin: 0 1%;
}
  .block li{
   
   font-size: 2.4rem;
}
.blog{
  /* border: 1px solid rgb(0, 21, 255); */
  margin: 2% 1%;
  padding: 0.5%;
  border-radius: 20px;

}
.blog h1{
  font-size: 2em;
font-weight: 900;
margin-top: 2%;
}
.blog h2{
font-size: 3.1em;
font-weight: 900;
margin-top: 2%;
}
.blog h6{
  font-size: 2.6em;
  font-weight: 900;
  }
.blog h3{
font-size: 2.9em;
font-weight: 900;
margin-top: 2%;
}
.blog p{
margin-top: 1%;
font-size: 2.4rem;
}
.blog a{
  color:blue;
  font-size: 2.3rem;
}
.blog iframe{
  width: 70%;

}

  .foot-container li{
    font-size: 1.3rem;
  }
  .foot-container label{
    font-size: 1.5rem;
  }
  .foot-container {
    flex-direction: column;
    align-items: center;
    /* font-size: 15px; */
  }
  .foot {
    height: 33.33%;
    width: 100%;
  }
  .recent-project-h1{
    font-size: 1.7rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  } 
  .chk-bg{
    padding-top: 1%;
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 1.2rem;
    
  }
  .recent-proj-3{
  
    height: auto;
    width: 80%;
    height: auto;
    margin: auto;
    margin-top: 2em;
  }
  .recent-proj-box-6{
    flex-direction: column;
     border: 1px solid rgb(36, 0, 128);
   }
   .r-p-b-2-text-box-6{
    
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
  }
  .r-p-b-2-img-box-6{
    width: 100%;
    height: 50%; 
    
  }
  .category{
    display: flex;
    flex-direction: column;
    width: 90vw;
  margin: auto;
    /* */
  }

  .col2{
 
    height: 30%;
    width: 100%;
    margin: auto;
    
  }
  .rebar-flex-3
  {
    border: 1px solid rgb(0, 0, 0); 
    width: 90vw;
    height: auto;
    margin: auto;
  }
  .rebar-flex-item-2{
    margin: auto;
    width: 100%;
    height: 33%;
  }
  .flip-container{
    
     width: 60em;
     height: auto;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin: auto;
     padding: 0;
   }
   .flip-card {
     
     /* margin: ; */
     overflow: hidden;
     background-color: transparent;
     min-width:50em;
     height: 40em;
     border: 1px solid #f1f1f1;
     perspective: 1000px; /* Remove this if you don't want the 3D effect */
   }
   .flip-card h6 {
      
    font-size: 3rem;
    margin-bottom: 2%;
    font-weight: 900;
   }
   .flip-card p {
      
    font-size: 2rem;
    margin-bottom: 10%;
   }
   .card-btn{
    background-color: #dc3545;
    border: 1px solid #dc3545;
    padding: 3%;
    color: white;
    font-weight: 700;
    font-size: larger;
    
      }
     
      .flip-card-back {
      
        padding:1%;
      }
  
  
  .btn {
    width: 90%;
    height: 25%;
    font-size: 8px;
  }
  .btn-danger{
    margin: auto;
    font-size: small;
    padding: 1%;
    font-weight: bolder;
  }
  .foot button {
    width: 20%;
    margin: auto;
    padding: 0.3em;
    font-size: medium;
    font-weight: medium;
    border: none;
  }
  .btn-lnk .icon {
  
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
  }
  
  .btn-lnk .icon i {
    font-size: 20px;
    padding-left:50%;
    z-index: 99999;
    color: #000000;
    line-height: 60px;
    transition: all 0.3s ease-in-out;
  }
  a .share-btn{

    font-weight: 900;
    font-size: 0.8em;
  }
  .full-share-btn button{
    margin-top: 50px;
    width: 80vw;
    border-radius: 60px;
  }
  .sxth-btn::before {
    content: '';
    width: 0;
    height: 3em;
    border-radius: 30em;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
    transition: .5s ease;
    display: block;
    z-index: -1;
   }
   .sxth-btn:hover {
    /* color: #e8e8e8; */
    background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
   }
   .sxth-btn{
    font-weight: 900;
    color: rgb(252, 252, 252);
    background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
  }


   .sxth-btn {
    width: auto;
    height: auto;
    padding: 2%;
    border-radius: 50px;
    font-size: 2.2em;
    font-family: inherit;
    border: none;
    margin: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* box-shadow: 6px 6px 12px #c5c5c5,
                -6px -6px 12px #ffffff; */
   }
  
   .home-sec{
    height: 60em;
   }
  .home-text{
    border: 1px solid transparent;
    width: 100%;
    margin: auto;
    position: relative;
    top: 15%;
    text-align: center;
    height: auto;
    padding-left: 0.5em;
    animation-name: img-movement;
    animation-iteration-count: 1;
    animation-duration: 1.5s;
    animation-delay: 0s;
    z-index: 50;
    word-wrap: break-word;
  }
  .typewriter h1 {
    word-wrap: break-word;
    margin: 0 auto; 
   
  }

 
  

  .home-text h1{
    color: white;
    font-size: 3em;
    margin-bottom: 1.2%;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
  }
  .home-text p{
    color: white;
    font-size: 2.4em;
    /* letter-spacing: 2px; */
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    margin-top: 10%;
    margin-bottom: 1.2%;
    font-style: italic;
    
  }
  .home-text h6{
    color: white;
    font-size: 2.4em;
    letter-spacing: 3px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    text-transform:uppercase;
    margin-bottom: 5%;
    
  }
  .r-p-b-2-text-box-6 h3{
    font-weight: 700;
          }
          .key-features{
            flex-direction: row;
            align-items: center;
            height: auto;
          }
          .recent-proj-box{
            
            border-radius: 50px;
            box-shadow: 0px 0px 10px 0px var(--shadow1);
            display: flex; 
            height: 30%;
            width: 60%;
            margin: auto;
            margin-top: 2em;
            flex-direction: column;
            justify-content: space-around;
            
            height: auto;
          }
          .recent-project{
            /*   */
            display: block;
            padding-bottom: 5%;
            padding-top: 3%;
            text-align: center;
            background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
          }
          .r-p-b-text  h2{
            font-weight: 900;
          }
          .r-p-b-text p{
            align-self: center;
            font-size: 1em;
            padding: 1em;
          }
          .r-p-b-text {
            text-align: center;
            width:100%;
            padding: 1em;
            
          }
          .r-p-b-img img{
            /*  */
            width: 100%;
            height: 100%;
            margin-bottom: 3%;
            display: block;
            border-radius: 50px;
            box-shadow: 0px 0px 10px 0px var(--shadow1);
          
          }
          .ppe_section{
            display: flex;
            flex-direction: row;
            /*  */
            width: 95%;
            margin: auto;
            margin-top: 2em;
            }
            .ppe_section img{
      
              width: 100%;
              height: auto;
              border-radius: 15px;
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              animation-name: img-movement;
              animation-iteration-count: 1;
              animation-duration: 1.5s;
              animation-delay: 0s;
            }
            .ppe_section {
             
              height: auto;
            }
          
          .ppe_section h1{
          font-weight: 900;
            
            color: var(--col5);
          }
          .ppe_section h3{
      
            font-weight: 700;
            color: var(--col3);
            margin-top: 5%;
            margin-bottom: 15%;
          }
          .ppe_section_text{
            position: absolute;
            background-color: #fff;
            top: 30%;
            left: 25%;
            width: 50%;
            margin:auto;
            padding: 1.5em;
            border-radius: 2em;
            text-align: center;
            z-index: 3;
            animation-name: movement;
              animation-iteration-count: 1;
              animation-duration: 1s;
              animation-delay: 0s;
              transition: transform 1s ease-in-out;
          }
          .flex-text h2{
            font-family: 'Roboto', sans-serif;
            font-weight: 900;
            color: var(--col5);
          }
          .flex-text h6{
          
            font-weight: 600;
            font-size: 1.4em;
            font-family:  'Poppins', sans-serif;
            color: var(--col3);
            margin-top: 5%;
            font-style: oblique;
            margin-bottom: 15%;
          }
          .flex-text-boxes{
            /* */
            width: 100%;
            height: auto;
            box-shadow: 0px 0px 5px 2px var(--shadow1);
            border-radius: 15px;
            z-index: 1000;
            padding:2%;
            margin-bottom: 7%;
          }
          .flex-text{
           
            display: flex;
            flex-direction: column;
            width: 60%;
            height: auto;
            margin: auto;
            justify-content: space-around;
            text-align: center;
            margin-top: 0.2em;
          }
          .share-plan{
            display: flex;
            flex-direction: column;
            padding: auto;
            text-align: center;
           
          }
          .share-plan-box{
            width: 80%;
            height: auto;
            margin: auto;
              margin-top: 3%;
              margin-bottom: 2%;
           
          }
          .share-plan-box h2{
           font-size: 1.2em;
          }
          .share-plan a{
            color: black;
            font-family: 'Poppins', sans-serif;
            text-decoration: none;
            font-weight: 900;
            font-size: 0.6em;
          }
          .key-features{
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: auto;
            
          }
          .feature-box .bi{
            font-size: 3em;
                    }
          .feature-box{
            /* */
            width: 50%;
            margin: auto;
            margin-top: 5%;
            margin-bottom: 5%;
            display: flex;
           text-align: center;
            flex-direction: column;
            padding:0.5em 0.2em 0.5em 0.2em;
            /* padding: 2em; */
            box-shadow: 0px 0px 5px 2px #0ec2a4;
            border-radius: 15px;
            color: wheat;
            background-color: #00000068;
          
          }
          .share-plan{
            display: flex;
            flex-direction: column;
            justify-content: center;
            /*   */
            background: linear-gradient(58deg, rgba(0,92,116,1) 0%, rgba(0,159,114,1) 46%, rgba(6,0,76,1) 100%);
            
          }
          .share-plan-box{
           
            margin: auto;
            font-size: 1.1em;
                        margin-top: 3%;
                        margin-bottom: 2%;
            color: white;
            /*   */
          }
          .last-flex-text h2{
            text-align: center;
            font-weight: 900;
            font-family: 'Roboto', sans-serif;
            font-size: 2.2em;
            margin-bottom: 2em;
          }
          .map-form{
            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content:space-between;
            padding: 5%;
          }
          .g-map img{
            
            width: 100%;
            height: 100%;
            border-radius: 15px;
            /* margin-left: 1em; */
            box-shadow: 0px 0px 5px 2px var(--shadow1);
            animation-name: img-movement;
            animation-iteration-count: 1;
            animation-duration: 1.5s;
            animation-delay: 0s;
            z-index: 50;
          }.g-map h6{
            text-align: center;
            font-weight: 900;
            margin-top: 10px;
            margin-bottom: 2em;
            color: #000428;
             animation-name: img-movement;
             animation-iteration-count: 1;
             animation-duration: 1.5s;
             animation-delay: 0s;
             z-index: 50;
           }
          
          
          .banner-call{
            text-align: center;
             padding: 1em;
             background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
              color: white;
              font-family: sans-serif;
              width: 100%;
              height: auto;
            }
            .banner-call h2{ font-weight: 900;  font-size: 3em;
            }
            .r-p-b-2-text-box h2{
              font-weight: 900;
              font-family: 'Roboto',sans-serif;
                }
                .r-p-b-2-text-box p{
              font-family: 'Poppins',sans-serif;
              font-size: 1.4em;
                }

                .container-cont-showcase {
                  
                  display: flex;
                  flex-direction: column;
                  width: 95%;
                  height: auto;
                  margin: auto;
                  justify-content: space-between;
                  margin-top: 5em;
            
                }
                
                .map-form{
                
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content:space-around;
                  padding: 2%;
                  height: auto;
                  width: 95vw;
                 
                  border: 1px solid red;
                  margin: auto;
                }
      
                .g-map{
                  width: 90%;
                  height: 100%;
                }
                .mid-form{
                  display: block;
                  /* background-color: #000000; */
                  width: 90%;
                  
                  height: 100%;
                  padding-left: 0%;
                  /* margin-bottom: 2%; */
                  margin-top: 1em;
                /* border: 1px solid red; */
                  /* box-shadow: 0px 0px 20px 5px var(--gradient3); */
                  border-radius: 10px;
                  animation-name: form-movement;
                animation-iteration-count: 1;
                animation-duration: 2s;
                animation-delay: 0s;
                z-index: 50;
                }
                .mid-form img{
                  border-radius: 15px;
                  width: 100%;
                  height: 100%;
                  margin-left: 1em;
      
                }
                .box {
                    
                  width: 50%;
                  height: 30em;
                  margin: auto;
                  margin-bottom: 5%;
                  padding: 2%;
                  text-align: center;
                  box-shadow: 0px 0px 10px 0px var(--shadow1);
                  background-color: var(--col4);
                  word-wrap: break-word;
                }
                .box .fas{
                  font-size: 12em;
                  margin-bottom: 5%;
                }
                .box h6{
                  font-size: 3em;
                }
                .box h3{
                  font-size: 5em;
                }
                .l-box{
                  text-align: center;
                }
                .l-box h4{
                  margin-top: 5%;
                }
                .l-box .hr{
                  margin:auto;
                  margin-bottom: 1em;
                }
                
                .r-box .btn-grad-cont{
                  font-size: 3em;
                  width: 30%;
                  padding: 2%;
                  margin: auto;
                  margin-top: 10%;
                  margin-bottom: 10%;
                  border-radius: 0px;
                }
                .container-fluid-l-r{
      border: 1px solid red;
      height: auto;
      margin: auto;
      justify-content: space-around;
      width: 95vw;
                }
      
                .r-box{
                  width: 80%;
                  height: auto;
                  /* border: 1px solid red; */
                  margin-top: 5%;
                }
                .r-box label{
                  font-size: 2.8em;
                }
                .r-box input{
                  padding: 0.3em;
                  font-size: 2.7em;
                }
                .r-box form{
                  width: 100%;
                  height: auto;
                  /* border: 1px solid blue; */
                  
                }
                .l-box{
                  width: 80%;
                  height: 50%;
                  border: 1px solid red;
                }
                .l-box h2{
      
                  font-size: 3em;
                }
                .l-box p{
      
                  font-size: 2.5em;
                }
                .l-box h4{
      
                  font-size: 2.7em;
                }
                .l-box h3{
      
                  font-size: 2.8em;
                }
               
                .showcase-container {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
                  width: 100%;
                  font-size: 1.3rem;
                  color: rgb(255, 255, 255);
                  background-color: rgba(0, 0, 0, 0.707);
                  text-transform: uppercase;
                  position: absolute;
                  z-index: 100;
                  padding: 1%;
                  padding-bottom: 2%;
                }
                .showcase-container h1{
                  font-size: 3em;
                  text-align: center;
                }
                .showcase-container h3{
                  font-size: 1.4em;
                  font-weight: 300;
                  text-align: center;
                }
                .showcase-container p{
                  font-size: 0.8em;
                  text-align: center;
                  font-family:'Poppins', sans-serif;
                }
                .s-h{
                  font-size: 2em;
                  font-weight: 900;
                  text-align: center;
                }
                
                .s-h2{
                  font-weight: 900;
                  font-size: 1.5em;
                  text-align: center;
                  
                }
                .ffth-btn,
.ffth-btn::after {
 padding: 5px 14px;
 font-size: 1em;
 font-weight: 900;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 0;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}
.carousel-inner {
  height: 80vh;
}
.carousel-inner img{
  height: 80vh;
}

.section-rebar{
  display: flex;
  flex-direction: column;
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/rebar takeoffs.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.section-rebar-r{
  display: flex;
  flex-direction: column;
  /* padding: 1%; */
  width: 50%;
  margin: auto;
  height: 30%;
  

}



.section-rebar-r li{
  font-size: 1.7em;
  margin-top: 0.5em;
  color: white;
 margin-bottom: 2%;
}


.section-rebar-r h6{
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  border-radius: 80px;
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  margin-bottom: 3%;
  margin-top: 5%;
  margin-left: 1%;
  width: 60%;
  text-align: center;
  
}

.section-rebar-l{
  width: 100%;
  height: 70%;
}
.section-rebar .section-rebar-l h6{
  margin-bottom: 5%;
  font-size: 0.6em;
}
.section-rebar-l .text-b-plumb{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0.5%;
 
}
.text-b-plumb h1{
  color: #E8E2E2;
  font-size: 3.7em;
  font-weight: bold;
  margin-top: 10%;
  /* font-family: 'Roboto',sans-serif; */
  margin-bottom: 0.5em;
}


.text-b-plumb span{
  background-color: white;
  color: #00c4d6;
  text-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
  font-size: 3em;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: 'Roboto',sans-serif;
  font-weight: 700;
  margin-bottom: 5em;
  padding-bottom: 1%;
 
  }

  .frth-custom-btn {
    width: 40%;
    height: auto;
    padding: 1%;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
           7px 7px 20px 0px rgba(0, 0, 0, .1),
           4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    font-weight: 900;
   }
   
   .frth-btn {
    background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
   }


   .section-drywall{
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
    url("./images/drywall estimtimations.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /* background-image: url("../images/plumber1.webp"); */
    background-size: 100vw 150vh;
    /* */
    position: relative;
  }
  /* .section-plumb-l{
    height: ;
    
  } */
  .text-b-plumb{
   
    margin: auto;
    width: 90%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  
  .text-b-plumb h2{
    margin-top: 1em;
    color: white;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Roboto',sans-serif;
  }

  .gc-boxes{
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    margin-top: 35px;
    align-items: center;
    }
    .gc-box{
     
      text-align: center;
      width: 60%;
      margin: 1.5em;
      color: var(--col1);
      box-shadow: 0px 0px 10px 0px var(--shadow1);
      background-color: var(--col4);
      transition: all 0.5s ease-in-out;
      padding: 1%;
      }
      .gc-boxes h3{
        font-weight: 900;
        font-size: 1.5em;
      }
       
      .cont-head {
        /* display: block; */
        
        font-size: 1.5em;
        /* margin: auto; */
        width: 100%;
        position: relative;
        text-align: center;
        float: left;
        top: 8%;
        left: 22%;
       text-align: center;
        transform: translate(-50%, -50%);
        color: var(--shadow2);
  
      }
      .cont-head2{
        /* */
      font-size: 0.6em;
      font-weight: 700;
       text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-left: 1%;
        margin-right: 1%;
      }
      .cont-head3{
        text-align: center;
        font-size: 2em;
  margin-top: 10%;
      }
}

/* For screens between 768px and 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
  
  body p{
    font-size: 3rem;
  }
  body h4{
    font-size: 3.7rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }
  body h3{
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }
  body h6{
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }
  
html body .navbar .nav-link{
  font-size: 1.7em;
}

nav img {
  border-radius: 5px;
  width: 300px;
  height: auto;
}
html body .dropdown-menu{
  font-weight: 900;
  background: black;
  padding-left: 3%;
  max-height: 60em;
  padding-bottom: 5%;
  overflow: auto;
}
.dropdown-menu label{
  font-size: 3em;
}
:root nav .dropdown-menu a{
  font-weight: 400;
  font-size: 2.7em;
  margin-top: 4%;
  /* color: rgb(22, 22, 22); */
  color: rgb(255, 255, 255);
  
}

html body .d-adjust-c2{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
    height: 45em;
    /* border: 1px solid yellow; */
    
  }
  .container-fluid-mine {
    height: 20vh;
    width: 100%;
    font-size: 3em;
    margin-top: 0%;
    padding-top: 5%;
  }
  .choose {
    --color: rgba(30, 30, 30);
    --bgColor: rgba(245, 245, 245);
    min-height: 60vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 1rem;
    font-family: "Jura", sans-serif;
    color: var(--color);
    /* background: var(--bgColor); */
    border:1px solid red;
  }

  .choose ul {
    width: min(40rem, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    justify-content: space-between;
    gap: 5rem;
    list-style: none;
  }
  
  .choose ul li {
    max-width: 25em;
    border:1px solid red;
    justify-self: center;
    display: grid;
    grid-template:
      "icon"
      "line"
      "dot"
      "title"
      "descr" 1fr;
    justify-items: center;
    align-items: flex-start;
    text-align: center;
  }
  .choose ul li .title {
        
    font-size: 2.2rem;
    
  }
  .choose ul li .descr {
   
    font-size: 1.8rem;

  }

  .body-ben .content{
    font-size:2.5em;
  }
  .body-ben {
    padding: 2rem;
    font-family: 'Roboto', sans-serif;
    min-height: 120vh;
    display: grid;
    place-items: center;
  /* border: 1px solid red; */
  }
.body-ben ul{

  width: min(100%, 100rem);
}
  .s-title{
    font-size: 41.6px;
  }
  .blog img{
       
    width: 100%;
    height: auto;
  }


  .custom-container .custom-accordion .custom-accordion-button{
    font-size: 2.5rem;
 }
   .custom-container .custom-accordion .custom-accordion-content p{
    font-size: 3rem;
 }


  .states-box p{
    font-weight: 900;
    color: black;
  }
                  .states-box{
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
  text-align: center;
  padding: 2%;
  margin-bottom: 5%;
                  }
                  .states-box ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  color: white;
  
                  }
  .states-box li{
  padding: 1%;
  margin: 3%;
  font-weight: 900;
  border-radius: 10px;
  background: linear-gradient(58deg, rgba(210,25,25,1) 0%, rgba(255,26,26,1) 46%, rgba(195,23,23,1) 100%);
  }
  .blog-in{
    margin-top: 5%;
    text-align: center;
  }
  .blog-in h5{
    font-weight: 900;
    font-size: 3.4rem;
  }
  
  .blog-in button{
    padding: 1%;
    width: 55%;
    font-size: medium;
  }
  .block{
    /* border: 1px solid red; */
    margin: 0 1%;
}
  .block li{
    /* border: 1px solid red; */
    font-size: 2.9rem;
}

.blog{
  /* border: 1px solid rgb(0, 21, 255); */
  margin: 2% 1%;
  padding: 0.5%;
  border-radius: 20px;

}
.blog h1{
  font-size: 2.1em;
font-weight: 900;
margin-top: 2%;
}
.blog h6{
  font-size: 1.3em;
  font-weight: 900;
  }
.blog h2{
font-size: 4em;
font-weight: 900;
margin-top: 2%;
}
.blog h3{
font-size: 3.8em;
font-weight: 900;
margin-top: 2%;
}
.blog p{
margin-top: 1%;
}

:root .blog a{
  color:blue;
  font-size: 3rem;
}

  .r-p-b-2-text-box h2{
    font-weight: 900;
    font-family: 'Roboto',sans-serif;
      }
      .r-p-b-2-text-box p{
    font-family: 'Poppins',sans-serif;
    font-size: 1.5em;
      }
  .recent-project-h1{
    font-size: 2.3rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  } 
  .foot-container label{
    font-size: 1.3rem;
  }
  .foot-container li{
    font-size: 0.75rem;
  }
  .foot li{
    margin-top: 2.5rem;
  }
  .foot h4{
    margin-bottom: 1rem;
  }
  .foot-container {
    flex-direction: row;
    justify-content: space-around;
    /* font-size: 1rem; */
  }
  .chk-bg{
    padding-top: 1%;
    width: 28px;
    height: 28px;
    text-align: center;
    font-size: 1rem;
    
  }
  .r-p-b-2-text-box-6 p{
    font-size: 1.4rem;
    }
    .rebar-flex-item-3 p{
      font-size: 3rem;
    }
    .category{
      display: flex;
      flex-direction: column;
      width: 90vw;
    margin: auto;
      /* */
    }

    .col2{
   
      height: 30%;
      width: 100%;
      margin: auto;
      
    }
    .rebar-flex-3
{
  border: 1px solid rgb(0, 0, 0); 
  width: 90vw;
  height: auto;
  margin: auto;
}
.rebar-flex-item-2{
  margin: auto;
  width: 100%;
  height: 33%;
}
.flip-container{
 
   width: 100%;
   height: 60em;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin: auto;
   padding: 0;
 }
 .flip-card {
   
   /* margin: ; */
   overflow: hidden;
   background-color: transparent;
   min-width:11em;
   height: 50em;
   border: 1px solid #f1f1f1;
   perspective: 1000px; /* Remove this if you don't want the 3D effect */
 }
 .flip-card h6 {
    
  font-size: 2.5rem;
  margin-bottom: 2%;
 }
 .flip-card p {
    
  font-size: 1.5rem;
  margin-bottom: 10%;
 }
 .card-btn{
  background-color: #dc3545;
  border: 1px solid #dc3545;
  padding: 5%;
  color: white;
  font-weight: 700;
  
    }
   
    .flip-card-back {
    
      padding:1%;
    }


.btn {
  width: 60%;
  height: 25%;
  font-size: 8px;
}
.btn-danger{
  margin: auto;
  font-size: small;
  padding: 1%;
  font-weight: bolder;
}
.foot button {
  width: 80%;
  margin: auto;
  padding: 0.3em;
  font-size: medium;
  font-weight: medium;
  border: none;
}
.btn-lnk .icon {
  
  width: 60px;
  height: 60px;
  text-align: center;
  border-radius: 50px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.btn-lnk .icon i {
  font-size: 25px;
  z-index: 99999;
  color: #000000;
  line-height: 60px;
  transition: all 0.3s ease-in-out;
}
a .share-btn{

  font-weight: 900;
  font-size: 1em;
}
.full-share-btn button{
  margin-top: 50px;
  width: 50vw;
  border-radius: 60px;
}
.sxth-btn::before {
  content: '';
  width: 0;
  height: 3em;
  border-radius: 30em;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
  transition: .5s ease;
  display: block;
  z-index: -1;
 }
 .sxth-btn:hover {
  /* color: #e8e8e8; */
  background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
 }
 .sxth-btn{
  font-weight: 900;
  color: rgb(252, 252, 252);
  background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
}
.sxth-btn {
  width: auto;
  height: auto;
  padding: 2%;
  border-radius: 50px;
  font-size: 3em;
  font-family: inherit;
  border: none;
  margin: auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* box-shadow: 6px 6px 12px #c5c5c5,
              -6px -6px 12px #ffffff; */
 }

 .home-sec{
  height: 70em;
 }
.home-text{
  border: 1px solid transparent;
  width: 100%;
  margin: auto;
  position: relative;
  top: 5%;
  text-align: center;
  height: auto;
  padding: 1.6%;
  animation-name: img-movement;
  animation-iteration-count: 1;
  animation-duration: 1.5s;
  animation-delay: 0s;
  z-index: 50;
  word-wrap: break-word;
}
.typewriter h1 {
  word-wrap: break-word;
  margin: 0 auto; 
 
}



/* Add the rest of your typewriter animation styles here */



/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: transparent; }
}
.home-text h1{
  color: white;
  font-size: 5em;
  margin-bottom: 1%;
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}
.home-text p{
  color: white;
  font-size: 2.5em;
  /* letter-spacing: 2px; */
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  margin-top: 10%;
  margin-bottom: 0;
  margin-bottom: 1%;
  /* font-style: italic; */
  
}
.home-text h6{
  word-wrap: break-word;
  color: white;
  font-size: 2.5em;
  letter-spacing: 3px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  text-transform:uppercase;
  margin-bottom: 5%;
  
}
.r-p-b-2-text-box-6 h3{
  font-weight: 700;
        }
        .key-features{
          flex-direction: row;
          align-items: center;
          height: auto;
        }
        .recent-proj-box{
          
          border-radius: 50px;
          box-shadow: 0px 0px 10px 0px var(--shadow1);
          display: flex; 
          height: 30%;
          width: 60%;
          margin: auto;
          margin-top: 2em;
          flex-direction: column;
          justify-content: space-around;
          
          height: auto;
        }
        .recent-project{
          /*   */
          display: block;
          padding-bottom: 5%;
          padding-top: 3%;
          text-align: center;
          background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
        }
        .r-p-b-text  h2{
          font-weight: 900;
        }
        .r-p-b-text p{
          align-self: center;
          font-size: 1em;
          padding: 1em;
        }
        .r-p-b-text {
          text-align: center;
          width:100%;
          padding: 1em;
          
        }
        .r-p-b-img img{
          /*  */
          width: 100%;
          height: 100%;
          margin-bottom: 3%;
          display: block;
          border-radius: 50px;
          box-shadow: 0px 0px 10px 0px var(--shadow1);
        
        }
        .ppe_section{
          display: flex;
          flex-direction: row;
          /*  */
          width: 90%;
          margin: auto;
          margin-top: 2em;
          }
          .ppe_section img{
    
            width: 60%;
            height: auto;
            border-radius: 15px;
            box-shadow: 0px 0px 5px 2px var(--shadow1);
            animation-name: img-movement;
            animation-iteration-count: 1;
            animation-duration: 1.5s;
            animation-delay: 0s;
          }
          .ppe_section {
           
            height: auto;
          }
        
        .ppe_section h1{
        font-weight: 900;
          
          color: var(--col5);
        }
        .ppe_section h3{
    
          font-weight: 700;
          color: var(--col3);
          margin-top: 5%;
          margin-bottom: 15%;
        }
          .ppe_section_text{
            display: flex;
            flex-wrap: wrap;
            justify-content: center ;
            flex-direction: column;
           
            width: 40%;
            padding: 1em;
            animation-name: movement;
            animation-iteration-count: 1;
            animation-duration: 1s;
            animation-delay: 0s;
            transition: transform 1s ease-in-out;
           
          }
          .flex-text h2{
            font-family: 'Roboto', sans-serif;
            font-weight: 900;
            color: var(--col5);
          }
          .flex-text h6{
          
            font-weight: 600;
            font-size: 1.4em;
            font-family:  'Poppins', sans-serif;
            color: var(--col3);
            margin-top: 5%;
            font-style: oblique;
            margin-bottom: 15%;
          }
          .flex-text-boxes{
            /* */
            width: 48%;
            height: auto;
            box-shadow: 0px 0px 5px 2px var(--shadow1);
            border-radius: 15px;
            z-index: 1000;
            padding:3%;
          }
          .flex-text{
           
            display: flex;
            flex-direction: row;
            width: 60%;
            height: auto;
            margin: auto;
            justify-content: space-between;
            text-align: center;
            margin-top: 200px;
          }
          .key-features{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: auto;
           
          }
          .feature-box .bi{
            font-size: 3em;
                    }
          .feature-box{
            /* */
            width: 50%;
            margin: auto;
            margin-top: 5%;
            margin-bottom: 5%;
            display: flex;
           text-align: center;
            flex-direction: column;
            padding:0.5em 0.2em 0.5em 0.2em;
            /* padding: 2em; */
            box-shadow: 0px 0px 5px 2px #0ec2a4;
            border-radius: 15px;
            color: wheat;
            background-color: #00000068;
          
          }
          .share-plan-box{
           
            font-size: 1.2em;
            width: 40%;
          }
          .share-plan{
            display: flex;
            justify-content: center;
            flex-direction: column;
            /*   */
            background: linear-gradient(58deg, rgba(0,92,116,1) 0%, rgba(0,159,114,1) 46%, rgba(6,0,76,1) 100%);
            
          }
          .share-plan-box{
            text-align: center;
            width: 80%;
            margin: auto;
                        margin-top: 3%;
                        margin-bottom: 2%;
            color: white;
            /*   */
          }
          .last-flex-text h2{
            text-align: center;
            font-weight: 900;
            font-family: 'Roboto', sans-serif;
            font-size: 2.5em;
          }

          .map-form{
                
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content:space-around;
            padding: 2%;
            height: auto;
            width: 80vw;
           ;
            border: 1px solid red;
            margin: auto;
          }

          .g-map{
            width: 90%;
            height: 100%;
          }
          .mid-form{
            display: block;
            /* background-color: #000000; */
            width: 90%;
            
            height: 100%;
            padding-left: 0%;
            /* margin-bottom: 2%; */
            margin-top: 1em;
          /* border: 1px solid red; */
            /* box-shadow: 0px 0px 20px 5px var(--gradient3); */
            border-radius: 10px;
            animation-name: form-movement;
          animation-iteration-count: 1;
          animation-duration: 2s;
          animation-delay: 0s;
          z-index: 50;
          }
          .mid-form img{
            border-radius: 15px;
            width: 100%;
            height: 100%;
            margin-left: 1em;

          }
          .box {
              
            width: 50%;
            height: 30em;
            margin: auto;
            margin-bottom: 5%;
            padding: 2%;
            text-align: center;
            box-shadow: 0px 0px 10px 0px var(--shadow1);
            background-color: var(--col4);
            word-wrap: break-word;
          }
          .box .fas{
            font-size: 12em;
            margin-bottom: 5%;
          }
          .box h6{
            font-size: 3em;
          }
          .box h3{
            font-size: 5em;
          }
          .l-box{
            text-align: center;
          }
          .l-box h4{
            margin-top: 5%;
          }
          .l-box .hr{
            margin:auto;
            margin-bottom: 1em;
          }
          
          .r-box .btn-grad-cont{
            font-size: 3em;
            width: 30%;
            padding: 2%;
            margin: auto;
            margin-top: 10%;
            margin-bottom: 10%;
            border-radius: 0px;
          }
          .container-fluid-l-r{
border: 1px solid red;
height: auto;
width: 80vw;
          }

          .r-box{
            width: 80%;
            height: auto;
            /* border: 1px solid red; */
            margin-top: 5%;
          }
          .r-box label{
            font-size: 2.8em;
          }
          .r-box input{
            padding: 0.3em;
            font-size: 2.7em;
          }
          .r-box form{
            width: 100%;
            height: auto;
            /* border: 1px solid blue; */
            
          }
          .l-box{
            width: 80%;
            height: 50%;
            border: 1px solid red;
          }
          .l-box h2{

            font-size: 5em;
          }
          .l-box p{

            font-size: 3em;
          }
          .l-box h4{

            font-size: 4.3em;
          }
          .l-box h3{

            font-size: 4.5em;
          }

          .map-form{
            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content:space-between;
            padding: 5%;
          }
          .g-map img{
            
            width: 100%;
            height: 100%;
            border-radius: 15px;
            /* margin-left: 1em; */
            box-shadow: 0px 0px 5px 2px var(--shadow1);
            animation-name: img-movement;
            animation-iteration-count: 1;
            animation-duration: 1.5s;
            animation-delay: 0s;
            z-index: 50;
          }.g-map h6{
            font-size: 3em;
            text-align: center;
            margin-top: 10px;
            margin-bottom: 2em;
            color: #000428;
             animation-name: img-movement;
             animation-iteration-count: 1;
             animation-duration: 1.5s;
             animation-delay: 0s;
             z-index: 50;
           }
          
          
          .banner-call{
            text-align: center;
             padding: 1em;
             background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
              color: white;
              font-family: sans-serif;
              width: 100%;
              height: auto;
            }
            .banner-call h2{ font-weight: 900;  font-size: 3em;
            }
            .container-cont-showcase {
              
              display: flex;
              flex-direction: column;
              width: 95%;
              height: auto;
              margin: auto;
              justify-content: space-between;
              margin-top: 5em;
              margin-bottom: 5em;
        
            }
           
            .container-fluid-l-r{
              
             align-items: center;
              width: 95%;
              height: auto;
              margin: auto;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            }
           
            .showcase-container {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              width: 100%;
              font-size: 1.3rem;
              color: rgb(255, 255, 255);
              background-color: rgba(0, 0, 0, 0.707);
              text-transform: uppercase;
              position: absolute;
              z-index: 100;
              padding-bottom: 2%;
            }
            .showcase-container h1{
              font-size: 3.2em;
              text-align: center;
            }
            .showcase-container h3{
              font-size: 1.8em;
              font-weight: 300;
              text-align: center;
            }
            .showcase-container p{
              font-size: 1.2em;
              text-align: center;
              font-family:'Poppins', sans-serif;
            }
            .s-h{
              font-size: 2em;
              font-weight: 900;
              text-align: center;
            }
            
            .s-h2{
              font-weight: 900;
              font-size: 1.7em;
              text-align: center;
              
            }
            .ffth-btn,
.ffth-btn::after {
 padding: 5px 14px;
 font-size: 1em;
 font-weight: 900;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 0;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}



.section-rebar{
  display: flex;
  flex-direction: column;
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/rebar takeoffs.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.section-rebar-r{
  display: flex;
  flex-direction: column;
  /* padding: 1%; */
  width: 50%;
  margin: auto;
  height: 30%;
  

}



.section-rebar-r li{
  font-size: 1.7em;
  margin-top: 0.5em;
  color: white;
 margin-bottom: 2%;
}


.section-rebar-r h6{
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  border-radius: 80px;
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  margin-bottom: 3%;
  margin-top: 5%;
  margin-left: 1%;
  width: 60%;
  text-align: center;
  
}

.section-rebar-l{
  width: 100%;
  height: 70%;
}
.section-rebar .section-rebar-l h6{
  margin-bottom: 5%;
  font-size: 0.6em;
}
.section-rebar-l .text-b-plumb{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0.5%;
 
}
.text-b-plumb h1{
  color: #E8E2E2;
  font-size: 3.7em;
  font-weight: bold;
  margin-top: 10%;
  /* font-family: 'Roboto',sans-serif; */
  margin-bottom: 0.5em;
}


.text-b-plumb span{
  background-color: white;
  color: #00c4d6;
  text-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
  font-size: 3em;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: 'Roboto',sans-serif;
  font-weight: 700;
  margin-bottom: 5em;
  padding-bottom: 1%;
 
  }
  .section-drywall{
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
    url("./images/drywall estimtimations.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /* background-image: url("../images/plumber1.webp"); */
    background-size: 100vw 150vh;
    /* */
    position: relative;
  }
  /* .section-plumb-l{
    height: ;
    
  } */
  .text-b-plumb{
   
    margin: auto;
    width: 80%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  
  .text-b-plumb h2{
    margin-top: 1em;
    color: white;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Roboto',sans-serif;
  }

  .gc-boxes{
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    margin-top: 35px;
    align-items: center;
    }
    .gc-box{
     
      text-align: center;
      width: 40%;
      margin: 1.5em;
      color: var(--col1);
      box-shadow: 0px 0px 10px 0px var(--shadow1);
      background-color: var(--col4);
      transition: all 0.5s ease-in-out;
      padding: 1%;
      }

      .gc-boxes h3{
        font-weight: 900;
        font-size: 1.5em;
      }


      .cont-head {
        /* display: block; */
        
        font-size: 1.7em;
        /* margin: auto; */
        width: 100%;
        position: relative;
        text-align: center;
        float: left;
        top: 8%;
        left: 25%;
       text-align: center;
        transform: translate(-50%, -50%);
        color: var(--shadow2);
  
      }
      .cont-head2{
        /* */
      font-size: 0.6em;
      font-weight: 700;
       text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-left: 1%;
        margin-right: 1%;
      }
      .cont-head3{
        text-align: center;
        font-size: 2.5em;
  
      }
       .blog-vctr img{
    width: 100%;
    height: auto;
    margin:auto;
    
            }
            .blog-vctr {
            font-family: 'Fjalla One', sans-serif;
            background: var(--background-vctr);
            width: 80%;
            height: auto;
            margin: auto;
            display: flex; /* Add this to use flexbox */
            flex-direction: column; /* Align items vertically */
            align-items: center; /* Center align items horizontally */
            justify-content: center; /* Center align items vertically */
        }
            .title-vctr{
              font-weight:400;
                    }

}

/* For screens between 992px and 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
 
  body p{
    font-size: 1.2rem;
  }
  body h4{
    font-size: 1.7rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }
  body h6{
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
  }

  body .dropdown-menu[data-bs-popper] {
    top: 120%;
    left: -200%;
    margin-top: 0.125rem;
  }
  
  html body .dropdown-menu{
    font-weight: 700;
    background: black;
    padding-left: 3%;
    width: 40em;
    padding-bottom: 5%;
    max-height: 70vh;

    overflow: auto;
  }
  .dropdown-menu label{
    font-size: 1.5em;
  }
  :root nav .dropdown-menu a{
    font-weight: 400;
    font-size: 1.3em;
    /* color: rgb(22, 22, 22); */
    color: rgb(255, 255, 255);
    
  }
  
  html body .d-adjust-c2{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      width: auto;
      height: 20em;
      /* border: 1px solid yellow; */
      
    }

  .choose ul li .title {
        
    font-size: 1.4rem;
    
  }
  .choose ul li .descr {
   
    font-size: 1.38rem;

  }

  .blog-vctr img{
    width: 40%;
    height: auto;
    margin:auto;
    
            }
            .blog-vctr {
            font-family: 'Fjalla One', sans-serif;
            background: var(--background-vctr);
            width: 60%;
            height: auto;
            margin: auto;
            display: flex; /* Add this to use flexbox */
            flex-direction: column; /* Align items vertically */
            align-items: center; /* Center align items horizontally */
            justify-content: center; /* Center align items vertically */
        }
            .title-vctr{
              font-weight:400;
                    }
  .s-title{
    font-size: 67.6px;
  }
  .blog img{
       
    width: 100%;
    height: auto;
  }

  .states-box p{
    font-weight: 900;
    color: black;
  }
                  .states-box{
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
  text-align: center;
  padding: 2%;
  margin-bottom: 5%;
                  }
                  .states-box ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  color: white;
  
                  }
  .states-box li{
  padding: 1%;
  margin: 3%;
  font-weight: 900;
  border-radius: 10px;
  background: linear-gradient(58deg, rgba(210,25,25,1) 0%, rgba(255,26,26,1) 46%, rgba(195,23,23,1) 100%);
  }

  .blog-in{
    margin-top: 7%;
    text-align: center;
  }
  .blog-in h5{
    font-weight: 900;
  }
  .blog-in button{
    padding: 1%;
    font-size: medium;
    width: 25%;
  }
  .block{
    /* border: 1px solid red; */
    margin: 0 2%;
}
.blog{
  /* border: 1px solid rgb(0, 21, 255); */
  margin: 2% 2%;
  padding: 0.5%;
  border-radius: 20px;

}
.blog h1{
  font-size: 2.4em;
font-weight: 900;
margin-top: 2%;
}
.blog h2{
font-size: 1.9em;
font-weight: 900;
margin-top: 2%;
}
.blog h3{
font-size: 1.8em;
font-weight: 900;
margin-top: 2%;
}
.blog p{
margin-top: 1%;
}
.blog a{
  color:blue;
}



  .recent-project-h1{
    font-size: 1.9rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  } 
 
  .r-p-b-2-text-box h2{
    font-weight: 900;
    font-family: 'Roboto',sans-serif;
      }
      .r-p-b-2-text-box p{
    font-family: 'Poppins',sans-serif;
    
      }
  .foot-container label{
    font-size: 1.3rem;
  }
  .foot-container li{
    font-size: 1.1rem;
  }
  .foot li{
    margin-top: 2.7rem;
  }
  .foot h4{
    margin-bottom: 1rem;
  }
  .foot-container {
    flex-direction: row;
    justify-content: space-between;
    /* font-size: 16px; */
  }
  .chk-bg{
    padding-top: 1%;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 1.2rem;
    
  }
  .category{
    display: flex;
    flex-direction: row;
    width: 90vw;
    margin: auto;
  }
  .col2{
    height: 100%;
    width: 30%;
    
  }
  .rebar-flex-3
  {
    border: 1px solid rgb(255, 0, 0); 
    width: 90vw;
    height: auto;
    margin: auto;
  }
  .rebar-flex-item-2{
    margin: auto;
  }
  .flip-container{
   
     width: 100%;
     height: 35em;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin: auto;
     padding: 0;
   }
   .flip-card {
     
     /* margin: ; */
     overflow: hidden;
     background-color: transparent;
     min-width:12em;
     height: 30em;
     border: 1px solid #f1f1f1;
     perspective: 1000px; /* Remove this if you don't want the 3D effect */
   }
   .card-btn{
    background-color: #dc3545;
    border: 1px solid #dc3545;
    padding: 5%;
    color: white;
    font-weight: 700;
    
      }
      .flip-card h6{
        margin-bottom: 1.5em;
      }
      .flip-card p{
        margin-bottom: 2.5em;
      }
      
  
      .flip-card-back {
      
        padding:6%;
      }
  
  .btn {
    width: 90%;
    height: 15%;
    font-size: 8px;
  }
  .btn-danger{
    margin: auto;
    font-size: small;
    padding: 1%;
    font-weight: bolder;
  }
  .foot button {
    width: 80%;
    margin: auto;
    padding: 0.3em;
    font-size: large;
    font-weight: medium;
    border: none;
  }
  .btn-lnk .icon {
  
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
  }
  
  .btn-lnk .icon i {
    font-size: 25px;
    z-index: 99999;
    color: #000000;
    line-height: 60px;
    transition: all 0.3s ease-in-out;
  }
  a .share-btn{

    font-weight: 900;
    font-size: 1em;
  }
  .full-share-btn button{
    margin-top: 50px;
    width: 50vw;
    border-radius: 60px;
  }
  .sxth-btn::before {
    content: '';
    width: 0;
    height: 3em;
    border-radius: 30em;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
    transition: .5s ease;
    display: block;
    z-index: -1;
   }
   .sxth-btn:hover {
    /* color: #e8e8e8; */
    background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
   }
   .sxth-btn{
    font-weight: 900;
    color: rgb(252, 252, 252);
    background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
  }
  .sxth-btn {
    width: auto;
    padding: 0.5%;
    border-radius: 50px;
    font-size: 1.5em;
    font-family: inherit;
    border: none;
    margin: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* box-shadow: 6px 6px 12px #c5c5c5,
                -6px -6px 12px #ffffff; */
   }
  .home-text{
    border: 1px solid transparent;
    width: 100%;
    margin: auto;
    position: relative;
    top: 25%;
    text-align: center;
    height: 100%;
    padding: 1.4%;
    animation-name: img-movement;
    animation-iteration-count: 1;
    animation-duration: 1.5s;
    animation-delay: 0s;
    z-index: 50;
    word-wrap: break-word;
  }


   .home-sec{
    height: 50em;
   }
  

  .typewriter h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid transparent; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: transparent; }
  }
  .home-text h1{
    color: white;
    font-size: 1.9em;
    margin-bottom: 1%;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
  }
  .home-text p{
    color: white;
    font-size: 1.6em;
    /* letter-spacing: 2px; */
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    margin-top: 10%;
    margin-bottom: 0;
    margin-bottom: 1%;
    /* font-style: italic; */
    
  }
  .home-text h6{
    color: white;
    font-size: 1.6em;
    letter-spacing: 3px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    text-transform:uppercase;
    margin-bottom: 5%;
    
  }
  .r-p-b-2-text-box-6 h3{
    font-weight: 700;
          }
          .key-features{
            flex-direction: row;
            align-items: center;
            height: auto;
          }
          .recent-proj-box{
            /*  */
            border-radius: 50px;
            box-shadow: 0px 0px 10px 0px var(--shadow1);
            display: flex; 
            height: 30%;
            width: 80%;
            margin: auto;
            margin-top: 2em;
            flex-direction: row;
            height: auto;
          }
          .r-p-b-img img{
            /*  */
            width: 100%;
            height: 100%;
            margin-bottom: 3%;
            display: block;
            border-radius: 50px;
            box-shadow: 0px 0px 10px 0px var(--shadow1);
          
          }
          .recent-project{
            /*   */
            padding-top: 2%;
            display: block;
            padding-bottom: 5%;
            text-align: center;
            background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
          }
          .r-p-b-text  h2{
            font-weight: 900;
          }
          .r-p-b-text p{
            
            font-size: 1em;
            padding: 1em;
          }
          .r-p-b-text {
            text-align: center;
            width:60%;
            padding: 1em;
            
          }
          .ppe_section{
            display: flex;
            flex-direction: row;
            /*  */
            width: 90%;
            margin: auto;
            margin-top: 2em;
            }
            .ppe_section img{
      
              width: 60%;
              height: auto;
              border-radius: 15px;
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              animation-name: img-movement;
              animation-iteration-count: 1;
              animation-duration: 1.5s;
              animation-delay: 0s;
            }
            .ppe_section {
             
              height: auto;
            }
          
          .ppe_section h1{
          font-weight: 900;
            
            color: var(--col5);
          }
          .ppe_section h3{
      
            font-weight: 700;
            color: var(--col3);
            margin-top: 5%;
            margin-bottom: 15%;
          }
            .ppe_section_text{
              display: flex;
              flex-wrap: wrap;
              justify-content: center ;
              flex-direction: column;
             
              width: 40%;
              padding: 1em;
              animation-name: movement;
              animation-iteration-count: 1;
              animation-duration: 1s;
              animation-delay: 0s;
              transition: transform 1s ease-in-out;
             
            }
            .flex-text h2{
              font-family: 'Roboto', sans-serif;
              font-weight: 900;
              color: var(--col5);
            }
            .flex-text h6{
            
              font-weight: 600;
              font-size: 1.4em;
              font-family:  'Poppins', sans-serif;
              color: var(--col3);
              margin-top: 5%;
              font-style: oblique;
              margin-bottom: 15%;
            }
            .flex-text-boxes{
              /* */
              width: 48%;
              height: auto;
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              border-radius: 15px;
              z-index: 1000;
              padding:3%;
            }
            .flex-text{
             
              display: flex;
              flex-direction: row;
              width: 60%;
              height: auto;
              margin: auto;
              justify-content: space-between;
              text-align: center;
              margin-top: 200px;
            }
            .key-features{
              display: flex;
              flex-direction: row;
              align-items: center;
              height: auto;
            }
            
            .feature-box{
              /* */
              width: 80%;
              margin: 20px 30px 20px 30px;
              display: flex;
             text-align: center;
              flex-direction: column;
              padding:0.5em 0.2em 0.5em 0.2em;
              /* padding: 2em; */
              box-shadow: 0px 0px 5px 2px #0ec2a4;
              border-radius: 15px;
              color: wheat;
              background-color: #00000068;
            
            }
            .feature-box .bi{
    font-size: 3em;
            }

            .share-plan{
              display: flex;
              justify-content: center;
              flex-direction: row;
              /*   */
              background: linear-gradient(58deg, rgba(0,92,116,1) 0%, rgba(0,159,114,1) 46%, rgba(6,0,76,1) 100%);
              
            }
            .share-plan-box{
              width: 20%;
              margin: auto;
                          margin-top: 3%;
                          margin-bottom: 2%;
              color: white;
              /*   */
            }
            .last-flex-text h2{
              text-align: center;
              font-weight: 900;
              font-family: 'Roboto', sans-serif;
              font-size: 3em;
            }
            .map-form{
                
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content:space-between;
              padding: 3%;
              height: 70vh;
              width: 80%;
              /* border: 1px solid red; */
              margin: auto;
            }

            .g-map{
              width: 48%;
              height: 100%;
            }
            .mid-form{
              display: block;
              /* background-color: #000000; */
              width: 48%;
              
              height: 100%;
              padding-left: 0%;
              /* margin-bottom: 2%; */
              margin-left: 1em;
            /* border: 1px solid red; */
              /* box-shadow: 0px 0px 20px 5px var(--gradient3); */
              border-radius: 10px;
              animation-name: form-movement;
            animation-iteration-count: 1;
            animation-duration: 2s;
            animation-delay: 0s;
            z-index: 50;
            }
            .mid-form img{
              border-radius: 15px;
              width: 100%;
              height: 100%;
              margin-left: 1em;

            }

            .g-map img{
              
              width: 100%;
              height: 100%;
              border-radius: 15px;
              margin-left: 1em;
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              animation-name: img-movement;
              animation-iteration-count: 1;
              animation-duration: 1.5s;
              animation-delay: 0s;
              z-index: 50;
            }.g-map h6{
              text-align: center;
              margin-top: 10px;
              color: #000428;
               animation-name: img-movement;
               animation-iteration-count: 1;
               animation-duration: 1.5s;
               animation-delay: 0s;
               z-index: 50;
             }
            
            
            .banner-call{
              text-align: center;
               padding: 1em;
               background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
                color: white;
                font-family: sans-serif;
                width: 100%;
                height: auto;
              }
              .banner-call h2{ font-weight: 900;    font-size: 3em;
              }
              .container-cont-showcase {
                
                display: flex;
                flex-direction: row;
                width: 95%;
                height: auto;
                margin: auto;
                margin-bottom: 5em;
                justify-content: space-between;
                margin-top: 5em;
          
              }
              .box {
                
                width: 20%;
                height: auto;
                margin: auto;
                padding: 1%;
                text-align: center;
                box-shadow: 0px 0px 10px 0px var(--shadow1);
                background-color: var(--col4);
              }
              .box .fas{
                font-size: 3em;
              }
              .box h6{
                font-size: 0.8em;
              }
              .container-fluid-l-r{
                
                width: 95%;
                height: auto;
                margin: auto;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
              }
              .showcase-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100%;
                width: 100%;
                font-size: 1.3rem;
                color: rgb(255, 255, 255);
                background-color: rgba(0, 0, 0, 0.707);
                text-transform: uppercase;
                position: absolute;
                z-index: 100;
                padding: 2%;
              }
              .showcase-container h1{
                font-size: 4em;
                text-align: center;
              }
              .showcase-container h3{
                font-size: 2.1em;
                font-weight: 300;
                text-align: center;
              }
              .showcase-container p{
                font-size: 1.2em;
                text-align: center;
                font-family:'Poppins', sans-serif;
              }
              .s-h{
                font-size: 2em;
                font-weight: 900;
                text-align: center;
              }
              
              .s-h2{
                font-weight: 900;
                font-size: 2.5em;
                text-align: center;
                
              }
              .ffth-btn,
.ffth-btn::after {
 padding: 5px 14px;
 font-size: 1em;
 font-weight: 900;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 0;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}
.carousel-inner {
  height: 80vh;
}
.carousel-inner img{
  height: 100%;
}



.section-rebar{
  display: flex;
  flex-direction: row;
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/rebar takeoffs.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.section-rebar-r{
  display: flex;
  flex-direction: column;
 padding: 1%;
  width: 30%;
  

}



.section-rebar-r li{
  font-size: 1.2em;
  margin-top: 0.5em;
  color: white;
 
}


.section-rebar-r h6{
  text-align: center;
  font-size: 1.7em;
  font-weight: 700;
  border-radius: 80px;
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  margin-bottom: 5%;
  margin-top: 25%;
  
}

.section-rebar-l{
  width: 70%;
}
.section-rebar .section-rebar-l h6{
  margin-bottom: 5%;
  font-size: 0.6em;
}
.section-rebar-l .text-b-plumb{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0.5%;
 
}


.text-b-plumb h1{
  color: #E8E2E2;
  font-size: 5em;
  font-weight: bold;
  
  margin-top: 10%;
  /* font-family: 'Roboto',sans-serif; */
  margin-bottom: 2%;
}


.text-b-plumb span{
  background-color: white;
  color: #00c4d6;
  text-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
  font-size: 3em;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: 'Roboto',sans-serif;
  font-weight: 700;
  margin-bottom: 5em;
  padding-bottom: 1%;
 
  }



  .section-drywall{
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
    url("./images/drywall estimtimations.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /* background-image: url("../images/plumber1.webp"); */
    background-size: 100vw 150vh;
    /* */
    position: relative;
  }
  /* .section-plumb-l{
    height: ;
    
  } */
  .text-b-plumb{
   
    margin: auto;
    width: 50%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  
  .text-b-plumb h2{
    margin-top: 1em;
    color: white;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Roboto',sans-serif;
  }



  .gc-boxes{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    margin-top: 35px;
    }
    .gc-box{
      /* */
      text-align: center;
      width: 20%;
      margin: 1em;
      color: var(--col1);
      box-shadow: 0px 0px 10px 0px var(--shadow1);
      background-color: var(--col4);
      transition: all 0.5s ease-in-out;
      padding: 1%;
      }
      .gc-boxes h3{
        font-weight: 900;
        font-size: 1em;
      }
      .cont-head {
        /* display: block; */
        
        font-size: 1.4em;
        /* margin: auto; */
        width: 100%;
        position: relative;
        text-align: center;
        float: left;
        top: 8%;
        left: 25%;
       text-align: center;
        transform: translate(-50%, -50%);
        color: var(--shadow2);
  
      }
      .cont-head2{
        /* */
      font-size: 0.6em;
      font-weight: 700;
       text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
       margin-left: 1%;
       margin-right: 1%;
      }

      .cont-head3{
        text-align: center;
        font-size: 3em;
  
      }
          }

/* For screens 1200px and larger */
@media (min-width: 1200px) {
  body p{
    font-size: 1.2rem;
  }
  body h4{
    font-size: 1.9rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }
  body h6{
    font-size: 1.6rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
  }

  body .dropdown-menu[data-bs-popper] {
    top: 120%;
    left: -200%;
    margin-top: 0.125rem;
  }
  
  html body .dropdown-menu{
    font-weight: 700;
    background: black;
    padding-left: 3%;
    width: 40em;
  }
  .dropdown-menu label{
    font-size: 1.5em;
  }
  :root nav .dropdown-menu a{
    font-weight: 400;
    font-size: 1.3em;
    /* color: rgb(22, 22, 22); */
    color: rgb(255, 255, 255);
    
  }
  
  html body .d-adjust-c2{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      width: auto;
      height: 20em;
      /* border: 1px solid yellow; */
      
    }


.blog-vctr img{
  width: 40%;
  height: auto;
  margin:auto;
  
          }
          .blog-vctr {
          font-family: 'Fjalla One', sans-serif;
          background: var(--background-vctr);
          width: 40%;
          height: auto;
          margin: auto;
          display: flex; /* Add this to use flexbox */
          flex-direction: column; /* Align items vertically */
          align-items: center; /* Center align items horizontally */
          justify-content: center; /* Center align items vertically */
      }
          .title-vctr{
            font-weight:400;
                  }



                 

  .s-title{
    font-size: 84.5px;
  }
  .blog-in{
    margin-top: 5%;
    text-align: center;
  }
  .blog-in h5{
    font-weight: 900;
  }
  .blog-in button{
    padding: 1%;
    font-size: medium;
  }
  .block{
    /* border: 1px solid red; */
    margin: 0 2rem;

}
.blog{
    /* border: 1px solid rgb(0, 21, 255); */
    margin: 2% 2%;
    padding: 0.5%;
    border-radius: 20px;

}
.blog h2{
font-size: 2em;
font-weight: 900;
margin-top: 2%;
}
.blog h3{
font-size: 1.9em;
font-weight: 900;
margin-top: 2%;
}
.blog p{
margin-top: 1%;
}
.blog a{
  color:blue;
}
  .recent-project-h1{
    font-size: 2.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    margin-bottom: 20px;
  } 
  .r-p-b-2-text-box h2{
font-weight: 900;
font-family: 'Roboto',sans-serif;
  }
  .r-p-b-2-text-box p{
font-family: 'Poppins',sans-serif;

  }
  .foot-container label{
    font-size: 1.3rem;
  }
  /* .foot-container li{
    font-size: 1.3rem;
  } */
  .foot li{
    margin-top: 1.2em;
  }
  .foot h4{
    margin-bottom: 1rem;
  }
  .foot-container {
    flex-direction: row;
    justify-content: space-evenly;
    /* font-size: 16px; */
  }
  .category{
    display: flex;
    flex-direction: row;
    width: 90vw;
    margin: auto;
  }
  .col2{
    height: 100%;
    width: 30%;
    
  }
  .rebar-flex-3
  {
    
    width: 90vw;
    height: auto;
    margin: auto;
  }
  .rebar-flex-item-2{
    margin: auto;
  }
  .flip-container{
   
    width: 100%;
    height: 40em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
    padding: 0;
  }
  .flip-card {
    
    /* margin: ; */
    overflow: hidden;
    background-color: transparent;
    min-width:14em;
    height: 35em;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  .card-btn{
background-color: #dc3545;
border: 1px solid #dc3545;
padding: 5%;
color: white;
font-weight: 700;

  }
  .flip-card h6{
    margin-bottom: 0.5em;
  }
  .flip-card p{
    margin-bottom: 2em;
  }
  
  
  .btn {
    width: 90%;
    height: 15%;
    font-size: 8px;
  }
  .btn-danger{
    margin: auto;
    font-size: small;
    padding: 1%;
    font-weight: bolder;
  }
  .foot button {
    width: 80%;
    margin: auto;
    padding: 0.3em;
    font-size: large;
    font-weight: medium;
    border: none;
  }
 
    .btn-lnk .icon {
  
      width: 60px;
      height: 60px;
      text-align: center;
      border-radius: 50px;
      display: inline-block;
      transition: all 0.3s ease-in-out;
    }
    
    .btn-lnk .icon i {
      font-size: 25px;
      z-index: 99999;
      color: #000000;
      line-height: 60px;
      transition: all 0.3s ease-in-out;
    }
    a .share-btn{

      font-weight: 900;
      font-size: 1em;
    }
    .full-share-btn button{
      margin-top: 50px;
      width: 50vw;
      border-radius: 60px;
    }
    .sxth-btn::before {
      content: '';
      width: 0;
      height: 3em;
      border-radius: 30em;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
      transition: .5s ease;
      display: block;
      z-index: -1;
     }
     .sxth-btn:hover {
      /* color: #e8e8e8; */
      background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
     }
     .sxth-btn{
      font-weight: 900;
      color: rgb(252, 252, 252);
      background: linear-gradient(90deg, rgba(17,144,204,1) 0%, rgba(80,167,212,1) 35%, rgba(14,119,166,1) 100%);
    }
    .sxth-btn {
      width: auto;
      padding: 0.5%;
      border-radius: 50px;
      font-size: 1.6em;
      font-family: inherit;
      border: none;
      margin: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      /* box-shadow: 6px 6px 12px #c5c5c5,
                  -6px -6px 12px #ffffff; */
     }
    

    
     .home-sec .sxth-btn{
      z-index: 9;
    }
    

     .home-sec {
     margin-top: -12em;
     height: 50em;
    }

    .home-text{
      /* border: 2px solid red; */
      width: 100%;
      margin: auto;
      position: relative;
      top: 40%;
      text-align: center;
      height: 100%;
      padding-left: 0.5em;
      animation-name: img-movement;
      animation-iteration-count: 1;
      animation-duration: 1.5s;
      animation-delay: 0s;
      z-index: 5;
      word-wrap: break-word;
    }
    .typewriter h1 {
      overflow: hidden; /* Ensures the content is not revealed until the animation */
      border-right: .15em solid transparent; /* The typwriter cursor */
      white-space: nowrap; /* Keeps the content on a single line */
      margin: 0 auto; /* Gives that scrolling effect as the typing happens */
      letter-spacing: .15em; /* Adjust as needed */
      animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
    }
    
    
    /* The typing effect */
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
    
    /* The typewriter cursor effect */
    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: transparent; }
    }
    .home-text h1{
      color: white;
      font-size: 2.5em;
      margin-bottom: 1%;
      font-weight: 900;
      font-family: 'Roboto', sans-serif;
      font-style: italic;
    }
    .home-text p{
      color: white;
      font-size: 1.6em;
      /* letter-spacing: 2px; */
      font-weight: 500;
      font-family: 'Poppins', sans-serif;
      margin-top: 10%;
      margin-bottom: 0;
      margin-bottom: 1%;
      /* font-style: italic; */
      
    }
    .home-text h6{
      color: white;
      font-size: 1.6em;
      letter-spacing: 3px;
      font-weight: 500;
      font-family: 'Poppins', sans-serif;
      text-transform:uppercase;
      margin-bottom: 5%;
      
    }
    .r-p-b-2-text-box-6 h3{
      font-weight: 700;
            }

            .flex-text h2{
              font-family: 'Roboto', sans-serif;
              font-weight: 900;
              color: var(--col5);
            }
            .flex-text h6{
            
              font-weight: 600;
              font-size: 1.4em;
              font-family:  'Poppins', sans-serif;
              color: var(--col3);
              margin-top: 5%;
              font-style: oblique;
              margin-bottom: 15%;
            }
            .flex-text-boxes{
              /* */
              width: 48%;
              height: auto;
              box-shadow: 0px 0px 5px 2px var(--shadow1);
              border-radius: 15px;
              z-index: 1000;
              padding:3%;
            }
            .flex-text{
             
              display: flex;
              flex-direction: row;
              width: 60%;
              height: auto;
              margin: auto;
              justify-content: space-between;
              text-align: center;
              margin-top: 200px;
            }
            .key-features{
              display: flex;
              flex-direction: row;
              align-items: center;
              height: auto;
              
            }
            .recent-project{
              /*   */
              padding-top: 2%;
           
              padding-bottom: 5%;
              
            }
            .feature-box{
              /* */
              width: 80%;
              margin: 20px 30px 20px 30px;
              display: flex;
             text-align: center;
              flex-direction: column;
              padding:0.5em 0.2em 0.5em 0.2em;
              /* padding: 2em; */
              box-shadow: 0px 0px 5px 2px #0ec2a4;
              border-radius: 15px;
              color: wheat;
              background-color: #00000068;
            
            }
            .feature-box .bi{
    font-size: 5em;
            }
            .ppe_section{
              display: flex;
              flex-direction: row;
              /*  */
              width: 90%;
              margin: auto;
              margin-top: 2em;
              }
              .ppe_section img{
        
                width: 60%;
                height: auto;
                border-radius: 15px;
                box-shadow: 0px 0px 5px 2px var(--shadow1);
                animation-name: img-movement;
                animation-iteration-count: 1;
                animation-duration: 1.5s;
                animation-delay: 0s;
              }
              .ppe_section {
               
                height: auto;
              }
            
            .ppe_section h1{
            font-weight: 900;
              
              color: var(--col5);
            }
            .ppe_section h3{
        
              font-weight: 700;
              color: var(--col3);
              margin-top: 5%;
              margin-bottom: 15%;
            }
              .ppe_section_text{
                display: flex;
                flex-wrap: wrap;
                justify-content: center ;
                flex-direction: column;
               
                width: 40%;
                padding: 1em;
                animation-name: movement;
                animation-iteration-count: 1;
                animation-duration: 1s;
                animation-delay: 0s;
                transition: transform 1s ease-in-out;
               
              }
             
              .recent-proj-box{
                /*  */
                border-radius: 50px;
                box-shadow: 0px 0px 10px 0px var(--shadow1);
                display: flex; 
                height: 30%;
                width: 60%;
                margin: auto;
                margin-top: 2em;
                flex-direction: row;
                height: auto;
              }
              .recent-project{
                /*   */
                display: block;
                padding-bottom: 5%;
                text-align: center;
                background: linear-gradient(58deg, var(--gradient1) 0%, var(--gradient2) 46%, var(--gradient3) 100%);
              }
              .r-p-b-text  h2{
                font-weight: 900;
              }
              .r-p-b-text p{
                
                font-size: 1em;
                padding: 1em;
              }
              .r-p-b-text {
                text-align: center;
                width:60%;
                padding: 1em;
                
              }
              .share-plan{
                display: flex;
                flex-direction: row;
                justify-content: center;
                /*   */
                background: linear-gradient(58deg, rgba(0,92,116,1) 0%, rgba(0,159,114,1) 46%, rgba(6,0,76,1) 100%);
                
              }
              .share-plan-box{
                width: 40%;
                margin: auto;
                            margin-top: 3%;
                            margin-bottom: 2%;
                color: white;
                /*   */
              }
              .r-p-b-img img{
                /*  */
                width: 100%;
                height: auto;
                margin-bottom: 3%;
                display: block;
                border-radius: 50px;
                box-shadow: 0px 0px 10px 0px var(--shadow1);
              
              }
              .last-flex-text h2{
                text-align: center;
                font-weight: 900;
                font-family: 'Roboto', sans-serif;
                font-size: 3em;
              }
              .map-form{
                
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content:space-between;
                padding: 3%;
                height: 70vh;
                width: 80%;
                /* border: 1px solid red; */
                margin: auto;
              }
              .g-map{
                width: 48%;
                height: 100%;
              }
              .g-map img{
                
                width: 100%;
                height: 100%;
                border-radius: 15px;
                margin-left: 1em;
                box-shadow: 0px 0px 5px 2px var(--shadow1);
                animation-name: img-movement;
                animation-iteration-count: 1;
                animation-duration: 1.5s;
                animation-delay: 0s;
                z-index: 50;
              }.g-map h6{
                text-align: center;
                margin-top: 10px;
                color: #000428;
                 animation-name: img-movement;
                 animation-iteration-count: 1;
                 animation-duration: 1.5s;
                 animation-delay: 0s;
                 z-index: 50;
               }
               .mid-form{
                display: block;
                /* background-color: #000000; */
                width: 48%;
                
                height: 100%;
                padding-left: 0%;
                /* margin-bottom: 2%; */
                margin-left: 1em;
              /* border: 1px solid red; */
                /* box-shadow: 0px 0px 20px 5px var(--gradient3); */
                border-radius: 10px;
                animation-name: form-movement;
              animation-iteration-count: 1;
              animation-duration: 2s;
              animation-delay: 0s;
              z-index: 50;
              }
              .mid-form img{
                border-radius: 15px;
                width: 100%;
                height: 100%;
                margin-left: 1em;

              }
              
              
              
              .banner-call{
                text-align: center;
                 padding: 1em;
                 background: linear-gradient(0deg, rgba(26,33,33,1) 0%, rgba(91,91,91,1) 100%);
                  color: white;
                  
                  width: 100%;
                  height: auto;
                }
                .banner-call h2{ font-weight: 900;      font-size: 5em;
                  font-family: 'Roboto',sans-serif;
                  font-weight: 900;
                }
                .container-cont-showcase {
                  
                  display: flex;
                  flex-direction: row;
                  width: 95%;
                  height: auto;
                  margin: auto;
                  justify-content: space-between;
                  margin-top: 5em;
            margin-bottom: 5em;
                }

                .blog img{
       
                  width: 90%;
                  height: auto;
                }


.states-box p{
  font-weight: 900;
  color: black;
}



                .states-box{
width: 100%;
height: 100%;
border-radius: 30px;
background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
text-align: center;
padding: 2%;
margin-bottom: 5%;
                }
                .states-box ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
color: white;

                }
.states-box li{
padding: 1%;
margin: 3%;
font-weight: 900;
border-radius: 10px;
background: linear-gradient(58deg, rgba(210,25,25,1) 0%, rgba(255,26,26,1) 46%, rgba(195,23,23,1) 100%);
}
                .box {
                  
                  width: 20%;
                  height: auto;
                  margin: auto;
                  padding: 1%;
                  text-align: center;
                  box-shadow: 0px 0px 10px 0px var(--shadow1);
                  background-color: var(--col4);
                } 
                .box .fas{
                  font-size: 4em;
                }
                .box h6{
                  font-size: 0.9em;
                }
               
                  .container-fluid-l-r{
                    
                    width: 95%;
                    height: auto;
                    margin: auto;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                  }
                  .showcase-container {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    width: 100%;
                    font-size: 1.3rem;
                    color: rgb(255, 255, 255);
                    background-color: rgba(0, 0, 0, 0.707);
                    text-transform: uppercase;
                    position: absolute;
                    z-index: 100;
                  }
                  .showcase-container h1{
                    font-size: 5em;
                    text-align: center;
                  }
                  .showcase-container h3{
                    font-size: 2.2em;
                    font-weight: 300;
                    text-align: center;
                  }
                  .showcase-container p{
                    font-size: 1.2em;
                    text-align: center;
                    font-family:'Poppins', sans-serif;
                  }
                  .s-h{
                    font-size: 2em;
                    font-weight: 900;
                    text-align: center;
                  }
                  
                  .s-h2{
                    font-weight: 900;
                    font-size: 2.5em;
                    text-align: center;
                    
                  }
                  .ffth-btn,
.ffth-btn::after {
 padding: 5px 14px;
 font-size: 1em;
 font-weight: 900;
 background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
 border: 0;
 color: #fff;
 letter-spacing: 3px;
 line-height: 0;
 box-shadow: 6px 0px 0px #00e6f6;
 outline: transparent;
 position: relative;
}
.carousel-inner {
  height: 80vh;
}
.carousel-inner img{
  height: 100%;
}



.section-rebar{
  display: flex;
  flex-direction: row;
  height: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.575), rgba(0, 0, 0, 0.588)), 
  url("./images/rebar takeoffs.webp");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  /* background-image: url("../images/plumber1.webp"); */
  background-size: 100vw 150vh;
  /* */
  position: relative;
}

.section-rebar-r{
  display: flex;
  flex-direction: column;
 padding: 1%;
  width: 30%;
  

}



.section-rebar-r li{
  font-size: 1.2em;
  margin-top: 0.5em;
  color: white;
 
}


.section-rebar-r h6{
  text-align: center;
  font-size: 1.7em;
  font-weight: 700;
  border-radius: 80px;
  background:  linear-gradient(58deg, rgba(255,132,0,1) 0%, rgba(254,255,0,1) 46%, rgba(255,132,0,1) 100%);
  margin-bottom: 5%;
  margin-top: 25%;
  
}

.section-rebar-l{
  width: 70%;
}
.section-rebar .section-rebar-l h6{
  margin-bottom: 5%;
  font-size: 0.6em;
}
.section-rebar-l .text-b-plumb{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0.5%;
 
}
.text-b-plumb h1{
  color: #E8E2E2;
  font-size: 4em;
  font-weight: bold;
  margin-top: 10%;
  /* font-family: 'Roboto',sans-serif; */
  margin-bottom: 0.5em;
}
.text-b-plumb span{
  background-color: white;
  color: #00c4d6;
  text-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
  font-size: 2em;
  font-weight: 500;
  letter-spacing: 3px;
  font-family: 'Roboto',sans-serif;
  font-weight: 700;
  margin-bottom: 5em;
  padding-bottom: 1%;
 
  }



  .section-drywall{
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.807), rgba(0, 0, 0, 0.807)), 
    url("./images/drywall estimtimations.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    /* background-image: url("../images/plumber1.webp"); */
    background-size: 100vw 150vh;
    /* */
    position: relative;
  }
  /* .section-plumb-l{
    height: ;
    
  } */
  .text-b-plumb{
   
    margin: auto;
    width: 50%;
    height: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 15%;
  }
  
  
  .text-b-plumb h2{
    margin-top: 1em;
    color: white;
    font-size: 2em;
    font-weight: bold;
    font-family: 'Roboto',sans-serif;
  }


  .gc-boxes{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    width: 90%;
    margin: auto;
    justify-content: space-around;
    margin-top: 35px;
    }
    .gc-box{
      /* */
      text-align: center;
      width: 20%;
      margin: 1em;
      padding: 1%;
      color: var(--col1);
      box-shadow: 0px 0px 10px 0px var(--shadow1);
      background-color: var(--col4);
      transition: all 0.5s ease-in-out;
      }

      .gc-boxes h3{
        font-weight: 900;
        font-size: 1.5em;
      }

      .cont-head {
        /* display: block; */
        
        font-size: 1.5em;
        /* margin: auto; */
        width: 100%;
        position: relative;
        text-align: center;
        float: left;
        top: 8%;
        left: 25%;
       text-align: center;
        transform: translate(-50%, -50%);
        color: var(--shadow2);
  
      }
      .cont-head2{
        /* */
      font-size: 0.8em;
      font-weight: 700;
       text-align: center;
        margin-top: 20px;
        margin-bottom: 30px;
      }
      .cont-head3{
        text-align: center;
        font-size: 3em;
  
      }

}














/* pop up animation */



.overlay {
  position: absolute;
  top: -300px;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);  
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
  top:0px;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  
}

.popup .close:hover {
  color: orange;
  transform: rotate(90deg);
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}



