html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
}
.container-fluid{
    padding: 0px;
}

.fa-long-arrow-alt-right:before {
    content: "\f30b";
    color: rgba(60, 114, 120, 0.6);
}
.nav {

    text-align: right;
    height: auto;
    min-height: 50px;
    line-height: 70px;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
/* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%;
     z-index: 2;



}
.menu {
    margin: -5px 10px 0 10px;
    height: 50px;
    margin-left: auto;
    padding-right: 20px;

}

.menu a{
    font-size: 14px;
    font-weight: 300px;
    text-decoration: none;
    color: white;
    line-height: 70px;
    padding-right: 20px;
    padding-left: 20px;

}
.menu a:hover{
padding-top: 5px;
padding-bottom: 5px;
color: white;
font-size: 16px;
 font-weight: 300px;
}



.logo {
    color: white;
    margin: -10px 0 0 10px;
    line-height: 70px;
    padding-left: 30px;
    font-weight: 500;
 font-size: 20px;
}
a:hover.logo {
     text-decoration: none; 
     color: gray;
}

.menu .now{
    color: white;
    font-weight: 500;
    font-size: 16px;
}

label {
    margin: -10px 40px 0 0;
    font-size: 26px;
    line-height: 70px;
   display: none;
    width: 26px;
    float: right;
}

#toggle {
 
  display: none;
}

#demo-2{
    float: left;
}


#demo-2 input[type=search] {
    width: 15px;
    padding-left: 10px;
    color: transparent;
    cursor: pointer;
    height: 15px;
}
#demo-2 input[type=search]:hover {
    background-color: #fff;
}
#demo-2 input[type=search]:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}
#demo-2 input:-moz-placeholder {
    color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
    color: transparent;
}


input {
    outline: none;
}
input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none; 
}


input[type=search] {
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
    border: solid 1px #ccc;
    padding: 9px 10px 9px 32px;
    width: 55px;
    
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
input[type=search]:focus {
    width: 130px;
    background-color: #fff;
    border-color: #66CC75;
    
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}


input:-moz-placeholder {
    color: #999;
}
input::-webkit-input-placeholder {
    color: #999;
}







#home {
    background: url('images/header.jpg') no-repeat center center fixed;
    display: table;
    top: 60px;
    position: relative;
    width: 100%;
    height: 90%;
    background-size: cover;
    background-color: white;

}

.landing-text {
    text-align: center;
    vertical-align: middle;
    padding: 5% 1% 1% 5%;
    max-width: 1000px;
}
.landing-text h1 {
    text-align: center;
    vertical-align: middle;
    padding: 18% 8% 1% 12%;;
    color: white;
    font-size: 35px;
    font-weight: 400;
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    display: inline-block;
    float: left;
    /* margin-right: 10px; */
    max-width: 600px;
}


@keyframes text{
    0%{
        color: #864c44;  
    }

    30%{
        letter-spacing: 6px;
    }
    85%{
        letter-spacing: 4px;
    }
}

.landing-text h3 {
    text-align: left;
    vertical-align: middle;
    color: white;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    animation: text 3s 1;
    letter-spacing: 4px;
    float: left;
    padding: 0 15%;
    width: 80%
}
.buttons {
    padding: 10px 0%;
    /* float: left; */
    max-width: 600px;
}
#landingbtn{
   background-color: white ;
    border-color: white;
    color: rgba(65, 48, 51, 0.8);
    font-weight: 500;
}

.btn-primary {
    margin-top: 10px;
   background-color: rgba(65, 48, 51, 0.8);
    border-color: white;

}

.btn-primary:hover {
    color: rgba(65, 48, 51, 0.8);
    background-color: white;
    border-color:rgba(65, 48, 51, 0.8);
}

.calbtn :hover{
        color: white;
    background-color: rgba(65, 48, 51, 0.8);
    border-color: white;
}


#landingbtn:hover {
    color: #fff;
    background-color: rgba(65, 48, 51, 0.8);
    border-color: white;
}

#clear{
    border-color: #293649 ;
    color: #293649 ;

}

#clear:hover{
    background-color: white ;

}

#send{
    color: rgba(65, 48, 51, 1);
    border-color: white;
    padding: 5px 10px;
}

#send:hover{
     background-color: rgba(65, 48, 51, 0.3);
     color: white;
}



#who{
    padding-top: 20px;
    margin:0px;
    color:rgba(60, 114, 120, 1);
    font-weight: 500;
    text-align: center;
}

#profile{
    margin:0px;
    color:rgba(60, 114, 120, 1);
    font-weight: 500;
    text-align: center;
    font-size: 18px;
}


}
#whoinfo{
    padding-top: 20px;
    margin:0px;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 300;
    font-size: 14px;
}

.img {
    max-width: 100%;
    height: auto;
    padding-right: 40px;
}

.divide{
    width: 80%;

}
.paddinga{
    padding: 30px 40px;
    margin-top: 0px;
    background-color: white;
}

.paddingc{
    padding: 30px 40px;
    margin-top: 0px;
    background-color: white;
}

.paddinge{
    
    background-color: white;
    padding: 50px 0px;
    margin-top: 60px;
}


.service{
    
    margin-top: 10px;
    background-color:rgba(60, 114, 120, 0.6);
}

.servicespace{
     background-color: rgba(60, 114, 120, 0.6);
}


#serviceimg{
    background: url('images/coin.jpg') no-repeat center center ;
    background-size: cover;
    display: flex;
    align-items: center;
    height: auto;
}
#serviceimg h1 {
    color: rgba(65, 48, 51, 0.9);
    text-align: center;
    font-size: 35px;
    font-weight: 500;
    line-height: 70px;
    text-transform: uppercase;
    padding: 0 15%;
    width: 100%;
}
#rateform {
    padding: 30px 0 20px 0;
    background-color: white;
    border-radius: 10px;
    width: 80%;
    margin: auto;
}
.lowrate{
    padding: 20px;
}


#rateform2{
    background-color: grey;
}

.ratewrapper{
    padding: 20px;
}
.containerrate {
    border-radius: 5px;
   padding: 0px 20px 20px 20px;
   position: relative;
   margin-top: 60px;
}

.containera{
    height: auto;
}


.paddingb{
    padding: 30px 40px;
    padding-bottom: 60px;
    margin-top: 0px;
     background: white;
 }

.paddingd{
    padding: 30px 40px 0 40px;
    margin-top: 0px;
    background: rgba(60, 114, 120, 0.6);
}

.paddingf{
    padding: 1px 40px 0 40px;
    margin-top: 0px;
    background: rgba(60, 114, 120, 1);
}

.paddingnew{
    padding: 100px 40px;
    padding-bottom: 5px;
    margin-top: 0px;
    background: rgba(164, 194, 204, 0.9);
}

.paddingcal{
    padding: 20px 40px;
    padding-bottom: 60px;
    margin-top: 0px;
    background-color: rgba(164, 194, 204, 0.9);
}
.paddinga h1{
    padding: 10px 40px;
    margin-top: 0px;
    margin-bottom: 20px;
    background-color: white;
    text-align: center;
    color: rgba(65, 48, 51, 1);
    font-weight: 500;
    font-size: 30px;
        text-transform: uppercase;
}

.paddingb h1{
    padding: 10px 40px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
        color: rgba(65, 48, 51, 1);
    font-weight: 500;
    font-size: 30px;
    font-stretch: expanded;
}

.paddingc h1{
    padding: 10px 40px;
    margin-top: 0px;
    margin-bottom: 20px;
    background-color: white;
    text-align: center;
    font-weight: 400;
    font-size: 35px;
    color: #293649;
}
.paddinge h1{
    padding: 0px 40px 0 40px;
    margin-top: 0px;
    background-color: white;
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    color:  rgba(65, 48, 51, 1);
        text-transform: uppercase;
}
.paddingd h1{
    padding: 20px 40px 10px 40px;
    margin-top: 0px;
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    color: white;
        text-transform: uppercase;
}

.paddingf h1{
    padding: 20px 40px 10px 40px;
    margin-top: 0px;
    text-align: center;
    font-weight: 400;
    font-size: 40px;
    color: white;
}

.paddingnew h1{
    padding: 20px 40px 0px 40px;
    margin-top: 0px;
    text-align: center;
    font-weight: 500;
    font-size: 40px;
    color: white;
        text-transform: uppercase;
}

.paddingb p{
    padding: 10px 40px;
    margin-top: 0px;
    margin-bottom: 20px;

    text-align: center;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 400;
    font-size: 16px;

}

.intro{
    padding: 20px 40px 20px 10px;
    margin-top: 0px;
    text-align: left;
    font-weight: 400;
    font-size: 18px;
    color: #864c44;
}
.paddingnew p.intro1{
    padding: 10px 100px 0px 100px;
    margin-top: 0px;
    text-align: center;
    font-size: 16px;
    color: white;
    font-weight: 200;
    line-height: 25px;
    font-size:18px;
}


.padding img{
  width: 100%;
}

#rateqn {
    font-weight: 400;
    font-size: 16px;
    margin-top: 5px;
    text-align: left;
    color: rgba(65, 48, 51, 0.9);
        padding-left: 100px;
}

#rateans {
    margin-top: 5px;
    text-align: left;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 300;
    font-size: 16px;
        padding-right: 100px;
}

#enquireqn{
    margin-top: 0px;
    padding: 15px;
    background: rgba(41, 54, 73, 0);
    height: auto;
    text-align: left;
}

#enquireans{
    padding: 10px;
}

.enquirewidth{
    width: 100%;

}

#calqn{
    color: #3c7278;
    font-weight: 500;
    text-align: center;
    font-size: 22px;
    padding: 10px;
}

#calans{
        color: rgba(65, 48, 51, 0.8);
    text-align: left;
    margin-top: 20px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
}

#calansr{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
}

#calansv{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    font-weight: 500;
    font-size: 16px;
}

#calansr1{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    font-weight: 400;
    font-size: 16px;
}

#calansv1{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    font-weight: 500;
    font-size: 16px;
}

#calansstatus{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    margin-top: 20px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
        padding-left: 0px;
    padding-right: 0px;

} 

#calanssproperty1{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    margin-top: 20px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    padding-right: 0px;
} 

#calanssproperty2{
        color: rgba(65, 48, 51, 0.8);
    text-align: center;
    margin-top: 20px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 0px;
} 
#calans input{
    width: 100%;

}
#calans2 input {
    width: auto;
}

#calans2{
    padding-top: 30px;
}

#calform{
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 5px
}
#cal{
    padding: 0 70px;
}

.calculatorform{
      
}

.rep{
    margin-top: 10px;
}

.reportform{
   border: 3px solid rgba(245, 145, 125, 0.6);
    border-radius: 10px;  
}

#reportheader{
    color: #f5917d;
    font-size: 30px;
    font-weight: 500;
}

#reportform{
    background-color: white;
     border-radius: 5px; 
     padding: 10px 10px 10px 10px;
}

.rateformheader{
      padding: 10px 0 20px 0;
    color: white;
    text-align: center;
    font-size: 25px;
    font-weight: 400;
}
.comparison{
   border-radius: 5px; 
    background-color: white;
    width: 100%;

}

#savebtn{
        margin-top: 0px;
    background-color: rgba(65, 48, 51, 0.8);
    border-color: white;
          width: 100%;
              height: 100%;
                  padding-top: 10px;
}

#savebtn:hover{
    margin-top: 0px;
    background-color: white;
    border-color: rgba(65, 48, 51, 0.8);
}
.qn1{
    font-weight: 500;
}

.qn{
   padding: 15px;
}

.qnafford{
    font-weight: 500;
    text-align: center;
    font-size: 20px;
    padding: 20px 10px 0 10px;

}

.ratelineend {
    width: 100%;
}

.ansafford{
    text-align: left;
    padding: 20px;

}

.affordability td{
    padding: 10px 15px;
}

.purchase{
    text-align: center;
}

.col-sm-3{
    margin:  0px;
    padding: 10px 20px 20px 20px; 
    text-align: center;
    margin: auto;
    width: 100%;
    height: auto;

}


.col-sm-6{
    margin-top:   0px;
    text-align: center;
    width: 100%;
 }

.col-sm-4{

    text-align: center;
    width: 100%;
   
}

.col-sm-4 h3{
   color: white;
   font-size: 15px;
   font-weight: 300;
}

.col-sm-8{
    
    

}

.us{
   color: white;
   font-size: 12px;
   font-weight: 200;
   padding-bottom: 20px;
}




.end{
    background-color: white;
}

.introend{
    background-color: white;
}

.quick{
    color: white;
   font-size: 12px;
   font-weight: 200;
   padding-bottom: 20px;
   line-height: 10px;
}

.quick:hover{
   color: #97a3bb;
   text-decoration: none;
}

#social{
    font-size: 30px;
    color: white;
     padding: 0 20px 20px 20px;

}

.col-sm-2 img{
    display: block;
    margin-left: auto;
    margin-right: auto;
        padding: 10px;
}

.row{
    margin:auto;

}


.far {
    font-size: 10px;
}

.far, .fas, .fab{
    font-family: "Font Awesome 5 Free";
    font-size: 50px;
    color:  #864c44;
        padding-bottom: 10px;
}

#redlogo{
    font-family: "Font Awesome 5 Free";
    font-size: 50px;
    color:   #864c44;
    padding-bottom: 10px;
}

.main{
  background-color: $bg;
  border: 1px solid #e7e7e7;
      padding: 15px;
      border-radius: 5px;

}

#phone{
    text-align: center;
    background: rgba(41, 54, 73, 0);
    height: auto;
    color: white;
    margin-top: 150px;
 font-size: 16px;
    font-weight: 300;
    width: 100%;
}

#phoneinfo{
    color: white;
    text-align: center;
    padding: 0px;

}

#phone i{
     font-family: "Font Awesome 5 Free";
    font-size: 20px;
    color:  white;
}

#us{
    padding: 10px 0;
        height: 150px;
}
#find{
    font-size: 15px;
    color: white;
    padding: 10px;
}


.info{
    color: black;
}

 ul {
    margin-top: 0;
    margin-bottom: 1rem;
    background-color: #f2f2f2;
}



#address{
    text-align: center;
        margin-top: 20px;
}

#enquiry{
    text-align: left;
    padding: 20px;
    color: white;
    position: relative;
     z-index: 1;

}


#address p{
    padding: 10px 0 0 0;
}


#footer{
padding-bottom: 20px;
}


.container{
    padding: 0px;
    margin:0px;
    width: 100%;
}

* {
    box-sizing: border-box;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}


input[type=submit] {
    background-color: ;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

input[type=submit]:hover {

     border-color: white;
}


.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */


.col-sm-4 h4 {
    color: #c71c4c;
    font-size: 25px;
    font-weight: 500;
    padding:  30px 20px 0 20px;
    margin-bottom: 0px;
}

#social{
    color: white;
    padding: 20px;
    text-decoration: none;
}

#social:hover{
    color: #97a3bb;
    text-decoration: none;
}





.range{
    width: 100%;
}




#opt{
color:  #3c4757;
text-align: center;
}

.rateline{
    width: 70%;
}



.row #blogheader {
    margin-top: 60px;
    padding: 10px;
    padding-left: 20px;
    background: white;

}
.row #blogheader a{

    color: rgba(65, 48, 51, 0.9);
     font-weight: 300;
     font-size: 16px;
}


.row #blogheader a:hover{

    font-weight: 500;
    text-decoration: none;
}

.row #blogheader{   
 padding: 20px 80px;

}
.row .col-sm-4 #blogimg{
    background: url('images/blog1.jpg') no-repeat center;
    height: 250px;
    background-size: cover;


}
.row .col-sm-4 #blogimg2{
    background: url('images/blog1.jpg') no-repeat center;
    height: 350px;
    background-size: cover;
}

.row .col-sm-4 #blogimg3{
    margin-top: -100px;
    background: url('images/blog1.jpg') no-repeat center;
    height: 250px;
    background-size: cover;


}

#blogpage{
    background-color: white;
    padding: 20px 40px;
} 



#bloginfo {
    height: auto;
    font-size: 10px;
}
#bloginfo #category{
    padding: 5px;
}

#bloginfo #category a{
   color: #c71c4c;
   font-weight: 500;
   font-size: 14px;
    
}

#bloginfo #category a:hover{
   color: #c71c4c;
   font-weight: 700;
   text-decoration: none;
}

#bloginfo #date{
   color: grey;
   padding: 8px;
}


 #bloginfo #info{
    height: auto;
     font-size: 20px;
     padding: 10px;
     color: : rgba(41, 54, 73, 1);

}

 #bloginfo #details{
    height: auto;
     font-size: 16px;
     color: black;
     text-align: left;
     font-weight: 300;
}

 #blogbtn{
    padding-left:10px; 
 } 

.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.hvr-bounce-in:hover,
.hvr-bounce-in:focus,
.hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.hvr-bounce-in-logo {
    display: block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.hvr-bounce-in-logo:hover,
.hvr-bounce-in-logo:focus,
.hvr-bounce-in-logo:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

.services-wrapper {
  width: auto;
  min-height: 400px;
  padding: 25px;
}

.service-container {
  text-align: center;
  margin-top: 25px;
}

.singleservice {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color:rgba(248,214,194,0.2);
  padding: 25px;
  color: #b2b2b2;
  font-family: avenir;
  text-align: left;
  margin-bottom: 15px;
  padding: 40px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
}

.singleserviceb {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: rgba(60, 114, 120, 0.1);
  padding: 25px;
  color: #b2b2b2;
  font-family: avenir;
  text-align: left;
  margin-bottom: 15px;
  padding: 40px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
}

h2.servicetitle{
  font-family: roboto;
  font-size: 16pt;
  font-weight: 500;
  letter-spacing: 1px;
  padding-bottom: 0px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(65, 48, 51, 0.8);
}

img.serviceicon {
  width: 20%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15px;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  opacity: .5;
}

.serviceinfo{
   font-family: roboto;
  font-size: 12pt;
  font-weight: 300;
  padding-bottom: 0px;
  text-align: center;

  color: rgba(65, 48, 51, 1);
}





.col-sm-4{

  margin: 0 auto;

} 

img{
max-width: 100%;
height: auto;
}

.hover-container {
  position: relative;
  transition: .3s ease;
  cursor: pointer;
  overflow: hidden;
}

.hover-container img{
  display: block;
}

/*PORTFOLIO HOVER EFFECT*/
.overlay {
      position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    color: black;
    width: 100%;
    height: 100%;
    transition: .3s ease;
    opacity: 0.5;
    font-size: 20px;
}

.hover-container:hover .overlay {
  opacity: 1;
}

.hover-container img {
 transition: .3s ease;
}

.hover-container:hover img {
  transform: scale(1.1);
}
.hover-container:hover img {
  transform: scale(1.1);
}

.hover-container:hover .text {
  transition: 1s ease;
  opacity: 1;
}

.text {
    padding-top: 10px;
    font-size: 16px;
}


.text .desc{
  font-size: 11px;
  font-weight: 300;
}

.bold{
  font-weight: 500;
}

 #blogpost{
    padding: 20px;
        width: 80%;
 }

.post{
    background-color: black;
}




.blogheader h1 {
  color: whitesmoke;
  font-size: 40px;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 120px;
}

.blogheader p {
  max-width: 1280px;
  padding: 10px 100px 0px 100px;
  color: white;
      font-weight: 200;
    line-height: 25px;
    font-size: 18px;

  margin: auto; 
}

.aboutbtn{
        margin-top: 20px;
    background-color: rgba(65, 48, 51, 0.8);
    border-color: white;
}

.bloginfo2{
     max-width: 1280px;
  padding: 0px 100px 30px 100px;
  color: white;
  font-size: 18px;
  font-weight: 200;
  line-height: 32px;
  margin: auto; 
}

.square {
  height: 60px;
  width: 60px;
  border: 1px dashed white;
  margin: 0 0 0 55px;
  /*   padding: 1px; resize squares */
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-block;
  transform: rotateZ(44deg);
}

.square:hover {
  background-color: rgba(27, 182, 239, 0.2);
  transition: ease 0.2s;
  cursor: pointer;
}

.square .icons {
  position: absolute;
  transform: rotateZ(-44deg);
  margin: 20px 0 0px 21px;
}

.fa-facebook,
.fa-twitter,
.fa-dribbbler,
.fa-youtube,
.fa-dribbble {
  width: 11px;
  height: 22px;
  color: white;
  font-family: FontAwesome;
  font-size: 23px;
  font-weight: 400;
  text-transform: uppercase;
}

.square:hover .fa-facebook {
  color: rgba(59, 89, 152, 1)
}

.square:hover .fa-twitter {
  color: rgba(27, 182, 239, 1)
}

.square:hover .fa-dribbble {
  color: rgba(199, 59, 111, 1)
}

.square:hover .fa-youtube {
  color: rgba(229, 45, 39, 1)
}
.bloglogo{
   margin: 1em;
   position: fixed;
   bottom: -72px;
   z-index: 99999999999;
   right: 0;
}

.pen{
  fill:black;
 animation:rotateInDownLeft 3s forwards;
}
.all{
  animation:rotateOut 3s forwards;
}
@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0,0,0, 0deg);
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
 transform: ;
 transform:translateX(850px) translateY(-83px) rotate3d(0,0,1, -60deg);
    opacity: 1;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 1;
  }
}

.blogbody {
  background: url("images/blogheader.jpg");
      background-color: rgba(60, 114, 120, 0.8);
  background-blend-mode: overlay;
  background-position: center;
  background-size: cover;
  text-align: center;


}

.aboutbody {
  background: url("images/.jpg");
      background-color: rgba(60, 114, 120, 0.5);
  background-blend-mode: overlay;
  background-position: center;
  background-size: cover;
  text-align: center;


}

.social_icons{
    padding-top: 20px;
}


.colblog{
      max-width: 400px;
  margin: 0 auto;
  padding: 10px 20px;
}
#whoinfo {
    padding-top: 10px;
    margin: 0px;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 300;
    font-size: 14px;
}

.team{
    color: whitesmoke;
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 30px;
    }

.aboutline{
    margin-bottom: 1rem;
    border: 0;
    width: 90%;
    border-top: 1px solid rgba(0,0,0,.1);
    background-color: white;
}


.arrow{
    float: right;
}

.arrow a i{
    font-size: 45px;
}

.arrow a i:hover{
    font-size: 50px;
}


.btn-circle.btn-xl {
    width: 150px;
    height: 150px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 50%;
        background-color: white;
}

.btn-circle.btn-xl:hover{
    border-color: pink;
}

.status{
    font-size: 16px;
    color: rgba(65, 48, 51, 0.8);
    font-weight: 400;
}

.statusimg{
    padding: 10px;
}
#up{
    right: 10px;
    padding: 0px 20px 20px 20px;
    position: fixed;
    z-index: 1;
    bottom: 20px;
}

#up2{
    right: 10px;
    padding: 0px 20px 20px 20px;
    position: fixed;
    z-index: 1;
    bottom: 20px;
}


@media only screen and (max-width: 1000px) {
.paddinge {
    background-color: white;
    padding: 50px 10px;
}
.text {
    padding-top: 10px;
    font-size: 12px;
}

}



@media only screen and (max-width: 600px) {

    label {
        display: block;
        cursor: pointer;
        margin-left: auto;
        float: right;

    }

    .nav {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: auto;
    min-height: 50px;
    line-height: 70px;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
/* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%;
     z-index: 2;
}
    .menu {
      
        width: 100%;
        display: none;
        margin-left: -10px;


    }


    .menu a {
        display: block;
        border-bottom: 1px solid #EAEAEB;
        background-color: white;
       width: 110%;
        text-align: center;
        box-shadow: 1px 1px 1px 1px;
        color: rgba(65, 48, 51, 1);
}
    .menu a:hover{
padding-top: 5px;
padding-bottom: 5px;
color:rgba(65, 48, 51, 1);
font-size: 16px;
 font-weight: 300px;
}

    .menu .now {
    color: rgba(65, 48, 51, 1);
    font-weight: 500;
    font-size: 16px;
}
    #toggle:checked + .menu {
        display: block;
    }
    #demo-2 {
    float: none;
    width: 110%;
    background-color: white;
    padding-right: 20px;
}
#demo-2 input[type=search] {
    width: 80%;
    padding: 10px;
    margin-right: 20px;
    color: transparent;
    cursor: pointer;
    height: 15px;
    /* align-items: center; */
    /* margin: auto; */
}

    div.img{
       
       margin: auto;
       background-repeat: no-repeat;
       height: 250px;
       margin-top: 50px;
       max-width:100%;
       background-size: contain;
       background-color: grey;
    }

    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }

    .landing-text h1 {
    text-align: center;
    vertical-align: middle;
    padding: 100px 50px 10px 50px;
    color: white;
    font-size: 25px;
    font-weight: 400;
    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    display: inline-block;
}

.paddinge h1 {
    padding: 0px 40px 0 40px;
    margin-top: -20px;
    background-color: white;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    color: rgba(65, 48, 51, 1);
    text-transform: uppercase;
}
.landing-text h3 {
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 16px;
    font-weight: 300;
    margin-top: 20px;
    animation: text 3s 1;
    letter-spacing: 5px;
    width: 100%;
}

h2.servicetitle {
    font-family: roboto;
    font-size: 14pt;
    font-weight: 500;
    letter-spacing: 1px;
    padding-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    color: rgba(65, 48, 51, 0.8);
}

#home {
    background: url(images/header.jpg) no-repeat center center fixed;
    display: table;
    top: 60px;
    position: relative;
    width: 100%;
    height: 60%;
    background-size: cover;
    background-color: white;
}
.paddinga{
    padding: 20px 10px;
    margin-top: 0px;
    background-color: white;
}

.paddingb {
    padding: 0px 10px;
    margin-top: 0px;
    background: white;
}
.paddingb h1 {
    padding: 10px 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-transform: uppercase;
    text-align: center;
    color: rgba(65, 48, 51, 1);
    font-weight: 500;
    font-size: 20px;
    font-stretch: expanded;
}
.paddingb p {
    padding: 10px 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 300;
    font-size: 16px;
    /* font-size: 2px; */
}

.paddinge{
    

    background-color: white;
        padding: 50px 25px;
}

.paddingd{
    padding: 0px;
    margin-top: 0px;
    background: rgba(65, 48, 51, 0.7);
}

.paddingd h1 {
    padding: 20px 40px 0px 40px;
    margin-top: 0px;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    color: white;
    text-transform: uppercase;
}
#address {
    text-align: center;
    margin-top: 0px;
    padding: 0px;
}
#phone {
    text-align: center;
    background: rgba(41, 54, 73, 0);
    padding: 0 50px;
    height: auto;
    width: 100%;
}

#phoneinfo{
    color: white;
    text-align: center;
    padding: 0px 0px;
}

.main {
    background-color: $bg;
    border: 1px solid #e7e7e7;
    padding: 5px;
    border-radius: 5px;
}
#enquireqn {
    margin-top: 0px;
    padding: 5px 15px;
    background: rgba(41, 54, 73, 0);
    height: auto;
    text-align: center;
}

#serviceimg {
    background: url(images/coin.jpg) no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 150px;
    margin-top: -40px;
}

.rateformheader {
    padding: 10px 0 20px 0;
    color: white;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
}
#rateform {
    padding: 30px 0 20px 0;
    background-color: white;
    border-radius: 10px;
    width: 100%;
    margin: auto;
}
.serviceinfo {
    font-family: roboto;
    font-size: 12pt;
    font-weight: 300;
    padding-bottom: 0px;
    text-align: center;
    color: rgba(65, 48, 51, 1);
    margin-bottom: 0px;
}
#serviceimg h1 {
    color: white;
    text-align: center;
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
    margin: auto;
}

.col-sm-2 img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
}
.btn-primary {
    margin-top: 15px;
    background-color: rgba(65, 48, 51, 0.8);
    border-color: white;
}
#rateqn {
    font-weight: 400;
    font-size: 16px;
    margin-top: 5px;
    text-align: center;
    color: rgba(65, 48, 51, 0.9);
    padding: 0 15px;
}

#rateterms {
    font-weight: 400;
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
    color: rgba(65, 48, 51, 0.9);
    padding: 0 15px;
    padding-bottom: 10px;
}
#rateans {
    margin-top: 5px;
    text-align: center;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 300;
    font-size: 16px;
    padding: 0 15px;
}

.paddinga h1 {
    padding: 0px 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: white;
    text-align: center;
    color: rgba(65, 48, 51, 1);
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
}

.col-sm-3 {
    margin: 0px;
    padding: 10px 20px 20px 20px;
    text-align: center;
    margin: auto;
    width: 100%;
    height: auto;
}
#who {
    padding-top: 10px;
    margin: 0px;
    color: rgba(60, 114, 120, 1);
    font-weight: 500;
    text-align: center;
    font-size: 14px;
}
#whoinfo {
    padding-top: 10px;
    margin: 0px;
    color: rgba(65, 48, 51, 0.9);
    font-weight: 300;
    font-size: 13px;
}

#cal{
    padding: 0 0px;
}

 .singleservice, .singleserviceb {
    width: 100%;
        padding: 20px;
        margin: 10px 0px;
  }
.service-container {
    text-align: center;
    margin-top: 10px;
}
.paddingnew p.intro1 {
    padding: 10px 0px 0px 0px;
    margin-top: 0px;
    text-align: center;
    font-size: 14px;
    color: white;
    max-width: 1280px;
    min-height: 120px;
    font-weight: 200;
    line-height: 25px;
    margin: auto;

}
#calform {
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 5px;
}
#calansstatus {
    color: rgba(65, 48, 51, 0.8);
    text-align: center;
     margin-top: 0px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 16px;
}
#calans {
    color: rgba(65, 48, 51, 0.8);
    text-align: center;
    margin-top: 1px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 14px;
}

#calqn {
    color: rgba(65, 48, 51, 0.9);
    font-weight: 500;
    text-align: center;
    font-size: 18px;
    padding: 0 10px;
}

#reportform {
    background-color: white;
    border-radius: 5px;
    padding: 0px 10px 10px 10px;
}
.paddingcal{
    padding: 0px 20px;
    padding-bottom: 30px;
    margin-top: 0px;
    background-color: rgba(164, 194, 204, 0.9);
}
#calans2 {
    padding-top: 10px;
    font-size: 13px;
}
.rep {
    margin-top: 30px;
    padding: 0px;
}

.end {
    background-color: white;
    margin-top: -10px;
}
#reportheader {
    color: #f5917d;
    font-size: 25px;
    font-weight: 500;
    padding-top: 0px;
    margin-top: 20px;
}
.paddingf {
    padding: 20px 10px 0 10px;
    margin-top: 0px;
    background: rgba(60, 114, 120, 1);
}
.us {
    color: white;
    font-size: 12px;
    font-weight: 200;
    padding-bottom: 10px;
}
.status {
    font-size: 14px;
    color: rgba(65, 48, 51, 0.8);
    font-weight: 400;
}
.btn-circle.btn-xl {
    width: 140px;
    height: 140px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 50%;
    background-color: white;
}

    .blog-item .content {
        width: 100%;
        margin-top: 35px;
    }

    .blog-item .content .title {
        font-size: 18px;
    }

    .blog-item .item-arrow {
        margin: auto;
    }

    .blog-item .icon {
        width: 100%;
    }

    .blog-item .icon img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .blog-item {
        width: 92%;
        margin: auto;
    }

    .blog-item a {
        display: block;
        padding: 30px;
    }

.intro {
    padding: 30px 10px 20px 10px;
    margin-top: 0px;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    color: #864c44;
}

.paddingnew h1 {
    padding: 20px 0 0 0;
    margin-top: 0px;
    text-align: center;
    font-weight: 500;
    font-size: 23px;
    color: white;
    text-transform: uppercase;
}

.blogheader h1 {
    color: whitesmoke;
    font-size: 23px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 120px;
}

.blogheader p {
    max-width: 1280px;
    padding: 10px 30px 0px 30px;
    color: white;
    font-size: 16px;
    font-weight: 200;
    line-height: 25px;
    margin: auto;
}
.team {
    color: whitesmoke;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 20px;
}

#blogpost {
    padding: 0px;
    width: 80%;
}
.text {
    padding-top: 25px;
        font-size: 18px;
    text-align: center;
}

.hvr-bounce-in-logo {
    display: block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.img {
    max-width: 100%;
    height: auto;
    padding-right: 50px;
    margin-top: -40px;
    margin-bottom: -20px;
}
#savebtn{
        margin-top: 0px;
    background-color: rgba(65, 48, 51, 0.8);
    border-color: white;
    width: 100%;
}




}
@media (min-width: 576px){
.col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}
}