/*===============================================
Template Name: Architecture
Description: Description
Version: 1.0.0
Text Domain: Architecture
Tags:
================================================*/

/*TABLE OF Life Cocah*/
/*=======================
01. Architecture Header Menu Area Css
02. Architecture Hero Area Css
03. Architecture About Area Css
04. Architecture Project Area Css
05. Architecture Map area Area Css
06. Architecture Service Area Css
07. Architecture Testimonial Area Css
08. Architectureh Faq Area Css
09. Architecture Blog  Area Css
10. Architecture Service Details Area Css
11. Architecture Fotter Area Css
12. Architecture Bridcamb Area Css
13. Architecture Blog Details Area Css
14. Architecture Blog Area Css
15. Architecture Blog Two  Area Css
16. Architecture Faq Area Css
17. Architecture Contact Area Css
18. Architecture Team Area Css
19. Architecture Protfolio  Area Css
20. Architecture Protfolio  Details Area Css
20. Architecture Priching Area Css
20. Architecture Search Popup Area Css
21. Architecture Loader Css
=======================*/

/*================================
 <-- Architecture  Header Area Css-->
==================================*/
.header-top-menu {
    background: #d1a133;
    padding: 10px 0;
}
.header-top-address ul li {
    list-style: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin-right: 45px;
    position: relative;
    line-height: 1.7;
}
.header-top-address ul li:before {
    content: "";
    left: -23px;
    top: -10px;
    position: absolute;
    opacity: 0.200;
    width: 1px;
    height: 45px;
    background-color: #ffffff;
}
.header-top-address ul li i {
    margin-right: 10px;
}
/*header-top menu right*/
.header-top-right-social {
    text-align: right;
}
.header-top-right-social ul li {
    list-style: none;
    display: inline-block;
}
.header-top-right-social ul li a {
    display: inline-block;
  height: 30px;
  width: 30px;
  line-height: 30px;
  background: transparent;
  text-align: center;
  color: #fff;
  margin: 0 7px;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff;
}
.header-top-right-social ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: transparent;
    z-index: -1;
    transition: .5s;
}
.header-top-right-social ul li a:hover:before {
    width: 100%;
}
/*=====================================
<--  Dreamhub Architecture Header Area Css -->
=======================================*/
.header-area {
    position: relative;
    margin-bottom: -97px;
    border-bottom: 1px solid rgba(209, 161, 51, 0.55);
    z-index: 1;
}
.logo {
    text-align: left;
}
/*sticky*/
.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #CD9E50!important;
    transition: .5s;
    z-index: 44;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
    position: absolute !important;
}
/*stiky header logo*/
 a.active-sticky {
    display: none;
}

.header-area.sticky a.active-sticky {
    display: block !important;
}
.header-area.sticky a.active {
    display: none !important;
}


/*stiky header button*/
.sticky .header-menu ul li a {
    color: #fff;
}
.sticky .header-menu ul li a i {
    color: #fff;
}
.sticky .header-menu-button a {
    background: #fff;
    color: #CD9E50;
    transition: .5s;
}
.sticky .header-menu-button a:hover {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}
.sticky .header-menu-button a:hover:before{
    display: none;
}

/*header-menu*/
.header-menu {
    text-align: right;
}
.header-menu ul {
    display: inline-block;
}
.header-menu ul li {
    display: inline-block;
    list-style: none;
    position: relative;
    margin: 0 0 0 35px;
}

.header-menu ul li a {
	display: inline-block;
	padding: 34px 0;
	line-height: 28px;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	font-family: "Barlow";
	text-align: right;
}

.header-menu ul li a i {
    font-size: 15px;
    margin-left: 6px;
    color: #fff;
}
/*header menu button*/
.header-menu-button {
    display: inline-block;
    margin-left: 12px;
}
.header-menu-button a {
    color: #ffffff;
    text-align: center;
    display: inline-block;
    background: transparent;
    padding: 11px 33px;
    border: 1px solid #CD9E50;
    margin-left: 18px;
    position: relative;
    z-index: 1;
}
.header-menu-button a:hover{
    color: #CD9E50;
}
.header-menu-button a:before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    right: 0;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
    
}
.header-menu-button a:hover:before {
    transform: scale(1);
}
.header-menu-button a i {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
}

/*sub-menu*/
.header-menu ul li .sub-menu {
    position: absolute;
    top: 95px;
    left: 0;
    background: #fff;
    width: 250px;
    border-radius: 3px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-top: 20px;
    border-top: 2px solid #CD9E50;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 23px rgb(0 0 0 / 10%);
    border-bottom: 2px solid #CD9E50;
    z-index: 1;
}
.header-menu ul li:hover .sub-menu{
    top: 78px;
    visibility: visible;
    opacity: 1;
}
.header-menu ul li .sub-menu li {
    display: block;
    margin-left: 0;
}
.header-menu ul li .sub-menu li a {
    display: inline-block;
    padding: 10px 25px;
    margin: 0;
    font-size: 16px;
    color: #39374d;
    text-transform: capitalize;
    width: 100%;
    text-align: left;
}
.header-menu ul li .sub-menu li a:hover{
    background: #d1a133;
    color: #fff;
}

/*================================
 <-- Architecture Hero  Area Css-->
==================================*/
.hero-area {
    background: url(../images/h-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 660px;
}

.hero-main-title h1 {
    font-size: 70px;
    line-height: 90px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 400;
}
.hero-description p {
    width: 36%;
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    margin-top: 13px;
}

.hero-button {
    margin-top: 35px;
}

.hero-button a {
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    font-family: "Gilda Display";
    display: inline-block;
    background: #CD9E50;
    padding: 17px 33px 14px;
    z-index: 1;
    position: relative;
}

.hero-button a:hover{
    color: #CD9E50;
}

.hero-button a:before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    width: 100%;
    background: #393939;
    right: 0;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
}

.hero-button a:hover:before {
    transform: scale(1);
}
/*================================
 <-- Architecture  Section Title  Css-->
==================================*/
.section-main-title {
    margin-bottom: 46px;
}
.section-main-title h1 {
    font-size: 50px;
    color: #fffefe;
    font-weight: 400;
    position: relative;
    margin-left: 120px;
    display: inline-block;
}
.section-main-title h1:before {
    position: absolute;
    left: -120px;
    top: 28px;
    height: 1px;
    width: 100px;
    background: #CE9F51;
    content: "";
}
.section-description p {
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
    font-style: italic;
    width: 100%;
}

/*================================
 <-- Architecture  About  Area Css-->
==================================*/
.about-area {
    background: #070707;
    padding: 112px 0 98px;
}
.row.style_bg {
    margin-top: 133px;
}
/*about box*/
.about-single-box {
    padding: 0 143px 0 0;
}
.about-title h3 {
    margin: 28px 0 13px;
    font-size: 24px;
    color: #ffffff;
    font-weight: 400;
}

.about-description p {
    color: #dcdcdc;
    line-height: 24px;
}



/*================================
 <-- Architecture  Project  Area Css-->
==================================*/
.project-area {
    background: #0A0A0A;
    padding: 110px 0 60px;
}

.project-area.style  .project-content {
    margin: 24px 65px 52px 30px;
}

.project-single-box {
    margin-bottom: 30px;
}
.project-thumb {
    position: relative;
    overflow: hidden;
}
.project-thumb img {
    width: 100%;
    transition: .5s;
    transform: scale(1.1);
}
.project-single-box:hover .project-thumb img {
    transform: scale(1.2);
}
/*project details button*/
.project-details-button {
    position: absolute;
    right: 0px;
    bottom: 0;
}

.project-details-button a {
    background: #0A0A0A;
    display: inline-block;
    padding: 14px 63px;
    font-size: 16px;
    color: #ce9e51;
    font-weight: 400;
    font-family: "Gilda Display";
    border: 1px solid transparent;
    transition: .5s;
}
.project-details-button a:hover {
    border: 1px solid #CD9E50;
}
.project-details-button a i {
    font-size: 15px;
    position: absolute;
    margin-top: 1px;
    margin-left: 5px;
}
/*project content*/
.project-content {
    margin: 24px 0 52px 30px;
}
.project-location span {
    color: #ce9e51;
}
.project-location span i {
    color: #CE9F51;
    font-size: 20px;
    margin-right: 9px;
}
.project-title h3 a {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
    margin-top: 18px;
    transition: .5s;
}
.project-title h3 a:hover{
    color: #ce9e51;
}




/*================================
 <-- Architecture  map  Area Css-->
==================================*/
.map-area {
    background: #070707;
    padding: 110px 0 120px;
}

.map-area.style {
    background: #0A0A0A;
}
.map-thumb {
    position: relative;
}
.shape-1 {
    position: absolute;
    top: 23%;
    left: 14%;
}

.shape-2 {
    position: absolute;
    top: 10%;
    left: 30%;
}

.shape-3 {
    position: absolute;
    top: 20%;
    left: 52%;
}
.shape-4 {
    position: absolute;
    top: 58%;
    right: 33%;
}
.shape-5 {
    position: absolute;
    top: 64%;
    left: 24%;
}
.shape-6 {
    position: absolute;
    left: 42%;
    top: 60%;
}
/*all animation*/
.dance {
    -webkit-animation: dance 1s alternate infinite;
    animation: dance 1s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
  .dance2 {
    -webkit-animation: dance 3s alternate infinite;
    animation: dance 3s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
  .dance3{
    -webkit-animation: dance 4s alternate infinite;
    animation: dance 4s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
  .dance4 {
    -webkit-animation: dance 5s alternate infinite;
    animation: dance 5s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
  .dance5 {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
  .dance6 {
    -webkit-animation: dance 1s alternate infinite;
    animation: dance 1s alternate infinite;
  }
  
  @keyframes dance {
    0% {
      -webkit-transform: scale(0.5);
    }
  
    100% {
      -webkit-transform: scale(1.2);
    }
  }
.map-description p {
    font-size: 14px;
    color: #919191;
    width: 70%;
}
.map-title {
    margin: 15px 0 40px;
}
.map-title h3 {
    font-size: 20px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
}
/*counter namber*/
.counter-namber h1 {
    display: inline-block;
    font-size: 60px;
    color: #ce9e51;
    font-weight: 400;
}
.map-button {
    margin-top: 35px;
}
.map-button a {
    color: #d1a133;
    font-family: "Gilda Display";
    display: inline-block;
    background: #393939;
    padding: 14px  33px;
    position: relative;
    z-index: 1;
    font-weight: 500;
}
.map-button a:hover{
    color: #fff;
}
.map-button a:before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    width: 100%;
    background: #d1a133;
    right: 0;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
}
.map-button a:hover:before {
    transform: scale(1);
}

/*================================
 <-- Architecture  Faq  Area Css-->
==================================*/
/*accordion*/
.faq-area {
    padding: 120px 0 120px;
    background:black;
}

.section-main-title h1.section_style:before {
    display: none;
}
.section-main-title h1.section_style {
    margin: 0;
}

/*accordion*/

.accordion li {
    list-style: none;
    padding: 5px 0 0;
    position: relative;
    z-index: 1;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: #fff !important;
    z-index: 1;
}
.accordion li a.active span {
    color: #ce9e51;
}
.faq-area .accordion li a.active {
    padding: 0;
    border-bottom: 1px solid rgba(100,100,100,0.8);
}
.accordion li p {
    display: none;
    font-size: 16px;
    padding: 25px 0 10px 30px;
    margin: 0;
}

.accordion a:before {
    width: 2px;
    height: 12px;
    background: #fff;
    position: absolute;
    right: 29px;
    content: " ";
    top: 16px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 12px;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 24px;
    content: " ";
    top: 21px;
    transition: all 0.2s ease-in-out;
}
.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #ce9e51;
}

.accordion a.active:before {
    display: none;
}

.accordion li a span.namber {
    font-size: 16px;
    line-height: 55px;
    color: #ce9e51;
    font-family: "Gilda Display";
    position: relative;
    top: -5px;
    margin-right: 12px;
}

.accordion li a span {
    z-index: 1;
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Gilda Display";
}

/* Faq New Style */
.faq-area .accordion li a {
    padding: 0 0px 0px;
    border-bottom: 1px solid rgba(100,100,100,0.8);
    display: inline-block;
}
.faq-area .accordion li a:hover{
    color: #00AFF5;
}

.faq-area .accordion li p {
    padding: 10px 56px 25px 25px;
    border-bottom: 1px solid rgba(100,100,100,0.2);
    font-size: 15px;
    line-height: 26px;
}

/*================================
 <-- Architecture  Testimonial  Area Css-->
==================================*/
.testimonial-area {
    background: #070707;
    padding: 120px 0 175px;
}

.testimonial-box {
    text-align: center;
}
.testi-thumb {
    position: relative;
    display: inline-block;
}

.testi-description {
    margin: 37px 0 41px;
}
.testi-description p {
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-style: italic;
    width: 52%;
    text-align: center;
    margin: auto;
}
/*testi name title*/
.testi-name-title {
    margin-bottom: 3px;
}
.testi-name-title h3 {
    display: inline-block;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    margin-right: 10px;
}
.testi-name-title span {
    font-size: 15px;
    color: #d1a133;
    font-weight: 400;
    font-family: "Gilda Display";
}
.testi-star-icon i {
    margin: 0 2px;
    font-size: 15px;
    color: #d1a133;
}
.testi-star-icon i.style {
    color: #fff;
}
/*owl-dots */
.owl-dots {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -64px;
}
.owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 4px;
    background-color: #4e4e4e;
    transition: .5s;
}
.owl-dot.active {
    background: #d1a133;
}

/*================================
 <-- Architecture  Blgo  Area Css-->
==================================*/
.blog-area {
    background: #0A0A0A;
    padding: 113px 0 90px;
}

.blog-area.style .single-blgo-box {
    margin-bottom: 30px;
    background: #070707;
    padding: 0 0 5px;
}

.blog-two-area {
    background: #0F0F0F;
    padding: 120px 0 90px;
}

.blog-two-area .single-blgo-box {
    background: #020202;
    padding: 0px 0 5px;
    margin-bottom: 30px;
}
.blog-thumb {
    position: relative;
    overflow: hidden;
}
.blog-thumb img {
    width: 100%;
    transform: scale(1.1);
    transition: .5s;
}
.single-blgo-box:hover .blog-thumb img {
    transform: scale(1.2);
}
.blog-date {
    position: absolute;
    left: 0;
    top: 0;
}
.blog-date p {
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Gilda Display";
    display: block;
    background: #0A0A0A;
    padding: 9px 14px;
    position: relative;
}
.blog-date p:before {
    content: "";
    position: absolute;
    left: 0;
    top: 44px;
    right: 0;
    margin: auto;
    height: 1px;
    background: #ce9e51;
    width: 33px;
}
.blog-date span {
    display: block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Barlow";
    margin-top: 3px;
}

.blog-content {
    margin: 21px 28px 20px;
}
.blog-view span {
    font-size: 14px;
    color: #ce9e51;
    font-weight: 400;
}

.blog-title h3 a {
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    font-weight: 400;
    display: inline-block;
    margin-top: 10px;
}



/*================================
 <-- Architecture  footer  Area Css-->
==================================*/
.footer-area {
    background: #070707;
    padding: 80px 0 0 0;
    border-top: 1px solid #d1a133;
}
.footer-widget-item {
    /*border-left: 1px solid rgba(100,100,100,0.8);*/
    padding-left: 30px;
}
.footer-widget-item.style:last-child {
    border: none;
    padding-left: 0;
}

.footer-widget-description p {
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
    width: 100%;
    margin: 21px 0 50px;
}

.footer-area .form-box input {
    height: 60px;
    width: 41%;
    outline: 0;
    border: none;
    position: relative;
}
.footer-area .form-box button {
    padding: 15px 19px;
    background: #CE9F51;
    color: #ffff;
    border: none;
    margin-left: 0%;
    font-size: 18px;
    line-height: 30px;
    float: left;
    position: absolute;
}
.footer-area .form-box input::placeholder {
    opacity: 0.502;
    color: #070707;
    padding: 0 17px;
}
.footer-widget-address ul li {
    list-style: none;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    font-family: "Barlow";
    margin-bottom: 13px;
    transition: .5s;
}
/*.footer-widget-address ul li:hover {
    color: #CE9F51;
}*/
.footer-widget-address p {
    font-size: 16px;
    color: #fff;
    margin-top: 51px;
}

.footer-widget-social-info ul li {
    list-style: none;
}

.footer-widget-social-info ul li a {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 14px;
    transition: .5s;
}
.footer-widget-social-info ul li a:hover{
    color: #CE9F51;
}

.footer-widget-social-info ul li a i {
    padding-right: 31px;
}
.newsletter {
    margin-top: 34px;
}

.newsletter a {
    font-size: 16px;
    color: #ffffff;
    display: inline-block;
}
.newsletter a:hover{
    color: #CE9F51;
}
/*
<!-- ============================================================== -->
<!--  Architecture  breadcumb-area -->
<!-- ============================================================== -->*/
.breadcumb-area {
    background: url(../images/bread-banner.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 500px;
    position: relative;
}
.breadcumb-area.supp-bb {
    background: url(../images/supp-bb.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 500px;
    position: relative;
}
.breadcumb-area:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(360deg, #000000, #130c05);
    opacity: 0.4;
}
.breadcumb-area.supp-bb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(360deg, #000000, #130c05);
    opacity: 0.4;
}
.breadcumb-area.new-about {
    background: url(../images/new-about.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
    position: relative;
}
.breadcumb-area.new-about:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(360deg, #000000, #130c05);
    opacity: 0.4;
}
.breacumb-content {
    text-align: center;
    position: relative;
}
.breadcumb-title h1 {
    font-size: 60px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}
.breadcumb-content-text a {
    color: #fff;
    font-weight: 500;
    transition: .5s;
}
.breadcumb-content-text i {
    color: #fff;
    font-size: 16px;
    margin: 0 10px 0;
}
.breadcumb-content-text span {
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
}



/*================================
 <-- Architecture  Priching  Area Css-->
==================================*/
.priching-area {
    background: #0A0A0A;
    padding: 110px 0 120px;
}


.priching-single-box {
    background: #070707;
    padding: 31px 0px 50px;
    position: relative;
    text-align: center;
    box-shadow: 0px 5px 12.5px rgba(92,98,207,0.06);
}

/* priching table */
.priching-table {
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    margin: auto;
}
.priching-table span {
    background: #CD9E50;
    display: inline-block;
    font-size: 17px;
    color: #fff;
    padding: 3px 30px;
}
h3.priching-table-title {
    font-size: 25px;
    margin-top: 14px;
}
/* priching table dolar */
.priching-table-dolar h1 {
    font-size: 40px;
    color: #CD9E50;
    font-family: "Roboto";
    margin: 15px 0 40px;
}
.priching-table-dolar span.doler-style {
    font-size: 17px;
    position: relative;
    bottom: 9px;
    left: -6px;
}
/* priching table body */
.priching-table-body ul li {
    list-style: none;
    border-top: 1px solid rgba(100,100,100,0.2);
    padding: 10px 0;
}
.priching-table-body ul li:last-child{
    border-bottom: 1px solid rgba(100,100,100,0.2);
}
.priching-table-body ul li i {
    font-size: 14px;
    color: #CD9E50;
    float: right;
    position: relative;
    right: 27px;
    display: inline-block;
    top: 6px;
}
/*priching button*/
.priching-button {
    margin-top: 50px;
}
.priching-button a {
    text-transform: uppercase;
    z-index: 1;
    background: transparent;
    color: #CD9E50;
    display: inline-block;
    padding: 10px 32px;
    border: 1px solid #CD9E50;
    position: relative;
    overflow: hidden;
}
.priching-button a:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    height: 100%;
    background: #CD9E50;
    width: 0;
    z-index: -1;
    transition: .5s;
}

.priching-button a.active {
    background: #CD9E50;
    color: #fff;
}

.priching-button a i {
    margin-left: 10px;
    font-size: 15px;
}
/*all hover*/

.priching-single-box:hover .priching-button a:after {
    width: 100%;
    left: 0;
}
.priching-single-box:hover .priching-button a {
    color: #fff;
}



/*================================
 <--Start Architecture Contact Area   Css-->
=================================*/
.contact-area {
    padding: 110px 0 120px;
    background: #0A0A0A;
}
.contact-area  .section-title {
    margin-bottom: 50px;
}
.contact-area .section-main-title {
    margin-bottom: 23px;
}
.contact-area .section-main-title h1 {
    margin: 0;
}
.contact-area .section-main-title h1:before {
    display: none;
}
.contact-area .section-description p {
    width: 73%;
    margin: auto;
}

/*google*/

.mapouter.fixed-height {
    height: 515px;
}

.gmap_canvas {
    width: 100%;
    height: 100%;
}

.mapouter iframe {
    width: 100%;
    height: 100%;
}

/*row canatc bg*/
.row.contact_bg {
    padding: 43px 23px 50px;
    background: #070707;
    box-shadow: 0px 5px 15px rgb(88 82 174 / 10%);
    position: relative;
    margin-left: 25px;
}
.row.contact_bg p {
    color: #fff;
    margin-bottom: 25px;
    font-family: 'Gilda Display';
    font-size: 20px;
    font-weight: 500;
}
.form_box input {
    border: 1px solid rgba(100,100,100,0.5);
    width: 100%;
    height: 50px;
    padding: 0 18px;
    margin-bottom: 20px;
    outline: 0;
    background: #0a0a0a5c;
    color: #fff;
}
.form_box input::placeholder {
    color: #fff;
}
.form_box textarea {
    width: 100%;
    height: 135px;
    padding: 14px 18px;
    border:  1px solid rgba(100,100,100,0.5);
    outline: 0;
    background: #0a0a0a5c;
    color: #fff;
}
.form_box textarea::placeholder {
    color: #fff;
}
.contact-form-button button {
    background: #d1a133;
    color: #fff;
    border: 1px solid #d1a133;
    padding: 11px 33px;
    margin-top: 35px;
    position: relative;
    z-index: 1;
    transition: .5s;
    font-size: 18px;
}
.contact-form-button button:hover {
    color: #d1a133;
}
.contact-form-button button:before {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background: #fff;
    height: 100%;
    transition: .5s;
    width: 0;
    z-index: -1;
}
.contact-form-button button:hover:before {
    width: 100%;
    left: 0;
}
.contact-form-button button i {
    margin-left: 10px;
}


/*================================
 <--Start Architecture Team Area   Css-->
=================================*/
.team-area {
    background: #0A0A0A;
    padding: 120px 0 90px;
}
.team-area .section-description p {
    width: 57%;
    margin: auto;
}
.single-team-box {
    border-radius: 5px;
    padding: 0 0 33px;
    background: #070707;
    position: relative;
    z-index: 1;
    transition: .5s;
    margin-bottom: 30px;
}

.single-team-thumb {
    position: relative;
}
.single-team-thumb img {
    width: 100%;
}
.team-title {
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    background: #393939;
    width: 80%;
    height: 80px;
    border: 1px solid rgba(30,22,102,0.1);
    border-radius: 5px;
    transition: .5s;
}

.team-title h3 a {
    font-size: 24px;
    font-weight: 400;
    margin: 14px 0 2px;
    display: inline-block;
    color: #fff;
}
.team-title span{
	color:#fff;
}
.team-title span:hover{
	color:#fff;
}
/*team-box-content*/
.team-box-content {
    text-align: center;
    padding: 58px 24px 2px;
    background: #070707;
}
.team-description p {
    color: #fff;
}
/*team social icon*/
.team-social-info ul li {
    list-style: none;
    display: inline-block;
}
.team-social-info ul li a {
    display: inline-block;
    color: #CE9F51;
    background: #393939;
    height: 30px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    border-radius: 50%;
    margin: 14px 5px 0;
}
.team-social-info ul li a:hover {
    background: #CE9F51;
    color: #fff;
}

/*all hover*/
.single-team-box:hover .team-title {
	background: #D0A37C;
}
.single-team-box:hover .team-title h3 a{
	color:#fff;
}
.team-title p{
	transition:.5s;
}
.single-team-box:hover .team-title p{
	color:#fff;
}
/*owl nav*/
.owl-nav {
    position: relative;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    top: 50px;
}
.owl-prev {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 5px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    transition: .5s;
    background: #D0A37C;
    margin-right: 40px;
    border: 1px solid transparent;
}
.owl-prev:hover {
    background: #fff;
    border: 1px solid #D0A37C;
    color: #D0A37C;
}
.owl-next {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 5px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    transition: .5s;
    background: #D0A37C;
	border: 1px solid transparent;
}
.owl-next:hover {
    background: #fff;
    border: 1px solid #D0A37C;
    color: #D0A37C;
}
/*================================
 <--Start Architecture Service Area   Css-->
=================================*/
.service-area {
    background: #0A0A0A;
    padding: 120px 0 90px;
}
.single-servce-box {
    padding: 30px 25px 37px 34px;
    background: #393939;
    margin-bottom: 30px;
}
.service-title h3 {
    font-size: 24px;
    color: #ffffff;
    font-weight: 400;
    margin: 21px 0 15px;
}

.service-description p {
    color: #dcdcdc;
    line-height: 24px;
    margin-bottom: 25px;
}
.service-button a {
    text-transform: uppercase;
    display: inline-block;
    font-size: 16px;
    color: #CD9E50;
    background: #000000;
    padding: 10px 35px 10px;
    position: relative;
    z-index: 1;
}
.service-button a:hover{
    color: #fff;
}
.service-button a:before {
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    width: 100%;
    background: #CD9E50;
    right: 0;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}
.service-button a:hover:before {
    transform: scale(1);
}




/*================================
 <--Start Architecture Service  Details Area   Css-->
=================================*/
.service-detials-area {
    padding: 120px 0 90px;
    background: #0F0F0F;
}
/*widget search*/

.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #000000;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

.service-detials-area .widget_search {
    background: #000000;
    box-shadow: none;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #ffff;
    border: 0;
    outline: 0;
    background: #0F0F0F;
}

.widget_search input::placeholder{
    color: #fff;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #CD9E50;
    border-radius: 0 4px 4px 0;
}

/*widget categories box*/

.service-detials-area .widget-categories-box {
    background: #000000;
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: none;
}

.widget-categories-box {
    background: #020202;
    padding: 42px 40px 25px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 70px rgb(0 0 0 / 5%);
}

/*title*/

.categories-title h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
    padding-left: 10px;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 24px;
    width: 3px;
    background: #CD9E50;
}
/*categories menu*/

.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 15px;
    background: #0F0F0F;
    padding: 16px 20px 16px;
    border-radius: 4px;
    transition: .5s;
    border: 2px solid #CD9E50;
    position: relative;
    z-index: 1;
}

.widget-categories-menu ul li:hover {
    border: 2px solid #CD9E50;
}

.widget-categories-menu ul li:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: #CD9E50;
    transition: .5s;
    z-index: -1;
}

.widget-categories-menu ul li:hover:before{
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    color: #CD9E50;
    transition: .5s;
}
.widget-categories-menu ul li a span {
    display: inline-block;
    float: right;
    background: #CD9E50;
    height: 22px;
    width: 22px;
    font-size: 12px;
    text-align: center;
    margin-top: 6px;
    color: #fff;
    line-height: 22px;
    transition: .5s;
}

.widget-categories-menu ul li:hover a span {
    background: #fff;
    color: #0E1317;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.pdf-button a {
    display: block;
    background: #CD9E50;
    padding: 15px 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.pdf-button a i {
    float: right;
    font-size: 20px;
    margin-top: 2px;
}

/* Sidber Recent Post */

.sidber-widget-recent-post {
    margin-bottom: 20px;
    background: #0F0F0F;
    overflow: hidden;
}

.sidber-widget-recent-post .recent-widget-content {
    padding-top: 20px;
}
.recent-widget-content a {
    color: #fff !important;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    display: block;
    line-height: 26px;
    transition: .5s;
    margin-bottom: 7px;
}
.recent-widget-thumb {
    float: left;
    margin-right: 25px;
}

.sidber-widget-recent-post .recent-widget-content a {
    color: #0E1317;
    font-size: 18px;
}

.sidber-widget-recent-post .recent-widget-content span i {
    margin-right: 7px;
    color: #CD9E50;
}

/* Sidber Achivement CSS */

.widget-achivement ul li {
    list-style: none;
    margin-bottom: 6px;
}

.widget-achivement ul li a i {
    font-size: 17px;
    margin-right: 3px;
}

.widget-achivement ul li a {
    font-weight: 600;
    transition: .5s;
    color: #fff;
}

.widget-achivement ul li a span {
    float: right;
}

.widget-achivement ul li a:hover{
    color: #CD9E50;
}

/* Sidber Widget Gallery CSS */

.widget-gallery {
    overflow: hidden;
}

.widget-gallery-thumb {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Sidber Widget Tags CSS */

.widget-tags a {
    display: inline-block;
    border: 2px solid #fff;
    padding: 3px 20px;
    margin: 4px 3px;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    background: #CD9E50;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover{
    color: #fff;
    border-color: #CD9E50;
}

.widget-tags a:hover:before{
    width: 102%;
}

/* Service Details Content CSS */

.service-details-main-title {
    padding: 20px 0 18px;
}

.service-details-main-title h1 {
    font-size: 50px;
    color: #fffefe;
    font-weight: 400;
}
.service-details-video-thumb {
    position: relative;
    padding-top: 20px;
}
.video-icon {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    padding-top: 8px;
}
.video-icon a i {
    height: 80px;
    line-height: 80px;
    width: 80px;
    display: inline-block;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #CD9E50;
    text-align: center;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
} 
@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.3), 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3)
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0);
        box-shadow: 0 0 0 10px rgba(255,255,255, 0.3), 0 0 0 20px rgba(255,255,255, 0.3), 0 0 0 30px rgba(255,255,255, 0)
    }
}



.service-details-overview-title {
    padding: 22px 0 15px;
}

.service-details-overview-title h2 {
    font-size: 30px;
}

.service-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.service-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: #CD9E50;
    border-radius: 50%;
}

.service-details-choose-us {
    padding-bottom: 10px;
}

.service-details-choose-us-title {
    padding: 5px 0 15px;
}

.service-details-choose-us-title h2 {
    font-size: 30px;
}

.service-details-box {
    background: #000000;
    padding: 30px 30px 10px;
    margin-bottom: 30px;
    position: relative;
}
.service-details-number {
    position: absolute;
    right: 60px;
}

.service-details-number h2 {
    -webkit-text-stroke-width: 1px;
    color: transparent;
    -webkit-text-stroke-color: rgba(255,255,255,0.2);
    font-size: 48px;
    font-weight: 600;
    font-family: "Rubik";
}

.service-details-icon i {
    font-size: 50px;
    color: #CD9E50;
}

.service-details-content h2 {
    font-size: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-details-thumb img {
    width: 100%;
}

.service-details-video-thumb-inner img {
    width: 100%;
}

/*================================
 <-- Architecture  Protfolio Details  Area Css-->
==================================*/
.portfolio-detials-area {
	padding: 110px 0 100px;
	background: #0A0A0A;
}
.portfolio-details-main-title {
    padding: 0 0 18px;
}

.portfolio-details-text {
    padding-bottom: 1px;
}

.portfolio-details-overview-title {
    padding: 22px 0 15px;
}

.portfolio-details-overview-title h2 {
    font-size: 30px;
    font-weight: 600;
}

.portfolio-details-overview-list ul li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    padding-right: 12px;
    padding-bottom: 12px;
}

.portfolio-details-overview-list ul li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 9px;
    height: 12px;
    width: 12px;
    background: #CE9F51;
    border-radius: 50%;
}

.portfolio-details-thumb img {
    width: 100%;
}

.portfolio-details-thumb {
    margin-top: 20px;
}

.portfolio-details-clients-title {
    padding-bottom: 10px;
}

.portfolio-details-clients-title h2 {
    font-size: 30px;
    font-weight: 800;
}

/*================================
 <-- Architecture  Blgo Details  Area Css-->
==================================*/
.blog-detials-area {
    padding: 120px 0 120px;
    background: #0A0A0A;
}

.blog-grid-area {
    padding: 120px 0 90px;
}

.blog-details-main {
    background: #cd9e501f;
    padding: 30px;
    box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.05);
}
.blog-details-meta {
    background: #020202;
    padding: 16px 30px;
}

.blog-details-meta span {
    margin-right: 30px;
}

.blog-details-meta span i {
    color: #CD9E50;
    padding-right: 5px;
}

.blog-details-content {
    padding: 20px 0 18px;
}

.blog-details-content h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-des {
    padding: 30px 0 10px;
}

.blog-details-blockquote {
    background: #020202;
    padding: 40px 38px 26px;
    position: relative;
    margin-bottom: 10px;
}

.blog-details-blockquote blockquote {
    font-size: 18px;
}

.blog-details-video-thumb {
    margin-top: 30px;
    position: relative;
}

.blog-details-video-thumb img {
    width: 100%;
}

.blog-details-video-thumb-inner img {
    width: 100%;
}

.blog-details-content h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.blog-details-content-list p i {
    font-size: 14px;
    height: 32px;
    width: 32px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 31px;
    border-radius: 100%;
    margin-right: 15px;
    color: #CD9E50;
}

.blog-detials-area .blog-content {
    padding: 20px 30px 38px;
}

.blog-details-button a {
    display: inline-block;
    border: 2px solid #CD9E50;
    padding: 3px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 10px;
}

.blog-details-button a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: -1px;
    height: 104%;
    width: 104%;
    background: #CD9E50;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-button a.active {
    background: transparent;
    transition: .5s;
    margin-left: 10px;
    color: #CD9E50;
}
.blog-details-button a.active:before{
    background: transparent;
}

.blog-details-button a.active:hover:before{
    background: #CD9E50;
}

.blog-details-button a.active:hover{
    color: #fff;
    border-color: #CD9E50;
}

.blog-details-social {
    text-align: right;
}

.blog-details-social a {
    display: inline-block;
    border: 2px solid #CD9E50;
    height: 40px;
    width: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 100%;
    font-size: 14px;
    transition: .5s;
    margin-left: 5px;
    color: #CD9E50;
}

.blog-details-social a:hover{
    background: #CD9E50;
    border-color: #CD9E50;
    color: #fff;
}

/* Blog Details Author */

.blog-details-author {
    border-top: 2px solid rgba(255,255,255,0.2);
    padding-top: 40px;
    margin-top: 32px;
}

.blog-details-author-inner {
    background: #020202;
    padding: 30px 30px 70px;
}

.blog-details-author-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-author-content h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Comment CSS */

.blog-details-comment {
    margin-bottom: 10px;
    position: relative;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 30px;
}

.blog-details-comment-content {
    overflow: hidden;
}

.blog-details-comment-content h2 {
    font-size: 18px;
    margin-top: 0;
}

.blog-details-comment-content span {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.blog-details-comment-reply {
    position: absolute;
    right: 25px;
}

.blog-details-comment-reply a {
    background: #CD9E50;
    padding: 3px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border-radius: 2px;
    display: inline-block;
}

.blog-details-comment.reply {
    margin-left: 70px;
    padding-top: 35px;
    border-top: 2px solid rgba(255,255,255,0.2);
}

/* Blog Details Contact */

.blog-details-contact {
    border-top: 2px solid rgba(255,255,255,0.2);
    margin: 12px 10px 10px;
    padding-top: 8px;
}
/*input-box*/
.input-box input {
    width: 100%;
    height: 50px;
    border: 1px solid #0202024d;
    margin-bottom: 30px;
    padding: 0 20px;
    outline: 0;
    color: #fff;
    border-radius: 3px;
    background: #020202ab;
}
.input-box input::placeholder{
    color: #fff;
}
.input-box textarea {
    width: 100%;
    height: 207px;
    outline: 0;
    border: 1px solid  #0202024d;
    padding: 22px 20px 0;
    border-radius: 3px;
    background: #020202ab;
    color: #ffff;
}
.input-box textarea::placeholder{
    color: #fff;
}
/*input button*/
.input-button {
    margin-top: 27px;
}
.input-button button {
    display: inline-block;
    padding: 14px 40px;
    outline: 0;
    border: 0;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 500;
    background: #CD9E50;
}
.input-button button i {
    margin-left: 10px;
}




/*
<!-- ============================================================== -->
<!-- Hendre Scrollup Button Section -->
<!-- ============================================================== -->*/

.scroll-area{
    position: relative;
    z-index: 999;
   }
  
  .scroll-area .go-top {
      position: fixed;
      cursor: pointer;
      top: 0;
      right: 30px;
      color: #ffffff;
      background-image: -moz-linear-gradient(0deg, #d1651a 0%, #573FEB 100%);
      background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #573FEB 100%);
      z-index: 9999;
      width: 45px;
      text-align: center;
      height: 45px;
      line-height: 42px;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.9s ease-out 0s;
      -moz-transition: all 0.9s ease-out 0s;
      border-radius: 10px; 
  }
  
  .scroll-area .go-top i {
        position: absolute;
        top: 50%;
        left: -4px;
        right: 0;
        margin: 0 auto;
        font-size: 15px;
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all 0.5s ease-out 0s;
        -moz-transition: all 0.5s ease-out 0s;
    }
  
  .scroll-area .go-top i:last-child {
      opacity: 0;
      visibility: hidden;
      top: 60%; 
  }
  
  .scroll-area .go-top::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: linear-gradient(to right, #232353 0%, #232353 100%);
      background-image: -ms-linear-gradient(0deg, #232353 0%, #232353 100%);
      opacity: 0;
      visibility: hidden;
      -webkit-transition: all 0.5s ease-out 0s;
      -moz-transition: all 0.5s ease-out 0s;
      border-radius: 100%;
  }
  
  .scroll-area .go-top:focus, .scroll-area .go-top:hover {
        color: #fff; 
    }
  
  .scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
          opacity: 1;
          visibility: visible; 
  }
  
  .scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
          opacity: 0;
          top: 0;
          visibility: hidden;
   }
  
  .scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
          opacity: 1;
          visibility: visible;
          top: 50%; 
  }
  
  .scroll-area .go-top.active {
      top: 95%;
      -webkit-transform: translateY(-98%);
      -moz-transform: translateY(-98%);
      opacity: 1;
      visibility: visible;
      border-radius: 0;
      right: 30px;
      border-radius:100%;
  }
  
  .top-wrap {
    position: relative; 
  }
  
  .top-wrap .go-top-button {
      display: inline-block;
      width: 50px;
      height: 50px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      top: 3px;
      z-index: 1;
      background: #d1a133;
      box-shadow: 0 0 3px #000;
  }
  
   .top-wrap .go-top-button i {
        font-size: 20px;
        font-weight: 700;
        padding-left: 4px;
        color: #fff;
   }
  
  .top-wrap .go-top-button::after {
      z-index: -1;
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 45px;
      height: 45px;
      -webkit-animation: ripple 1.6s ease-out infinite;
      -moz-animation: ripple 1.6s ease-out infinite;
      opacity: 0;
      background-image: -moz-linear-gradient(0deg, #a78856 0%, #CD9E50 100%);
      background-image: -webkit-linear-gradient(0deg, #a58249 0%, #CD9E50 100%);
      border-radius: 100%;
  }
  
  .top-wrap .go-top-button:hover {
        background-color: #222;
        color: #fff; 
    }
  @keyframes ripple {
    0%, 35% {
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      opacity: 1; }
    50% {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      -o-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 0.8; }
    100% {
      opacity: 0;
      -webkit-transform: scale(2);
      -moz-transform: scale(2);
      -ms-transform: scale(2);
      -o-transform: scale(2);
      transform: scale(2); } }
  
/*===========================
<-- Moving Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #CD9E50;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #CD9E50;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #111;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/
.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}
/***********************************************/

.logo img
{
 width: 100%;
 height: 77px;
}
.h-cont-li a
{
 color: #fff;
 font-size: 16px;
  font-weight: 500;
}
.h-cont-li a:hover {
  color: #4e3b2e;
}
.header-top-right-social ul li a:hover
{
  color: #d1a133;
  background-color: #fff;
  box-shadow: none;
}
.h-wel-txt h5
{
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}
.h-wel-txt h3
{
  font-size: 33px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 12px;
}
.wel-li li
{
  color: #d1a133;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 8px;
  font-weight: 500;
  list-style-type: disclosure-closed;
}
.wel-li
{
 padding-left: 20px;
 margin: 10px auto 25px auto;
}
.h-wel-txt p
{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #fff;
}
.h-welcome .row.style_bg {
  margin-top: 80px;
}
.h-welcome .about-icon img
{
  width: 90px;
  height: 90px;
  margin: 0 auto;
  display: block;
}
.h-welcome .about-single-box {
    padding: 0;
    text-align: center;
  }
.h-wel-img img
{
  width: 100%;
  height: 382px;
  box-shadow: 0 0 5px #d1a133;
  margin: 0 auto;
  display: block;
  border: 1px solid #d1a133;
}
.h-wel-txt
{
 padding-left: 30px;
}
.footer-logo img
{
  width: 360px;
  height: 91px;
  margin: 0 auto;
}
.footer-widget-item h4
{
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  color: #d1a133;
  margin-bottom: 15px;
}
.footer-widget-social-info .foot-cont-soci li a i {
  padding-right: 0;
}
.footer-widget-social-info .foot-cont-soci li a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  display: block;
  margin-bottom: 14px;
  transition: .5s;
  background-color: #d1a133;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-right: 20px;
}
.foot-cont-soci
{
 display: flex;
 margin-top: 30px;
}
.footer-widget-social-info .foot-cont-soci li a:hover
{
 color: #d1a133;
 background-color: Transparent;
 box-shadow: 0 0 3px #d1a133;
}
.q-li li
{
  color: #fff;
  font-size: 18px !important;
  line-height: 1.7;
  margin-bottom: 10px !important;
  font-weight: 500;
  list-style-type: disclosure-closed !important;
  width: fit-content;
}
.q-li li a
{
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
}
.q-li li a:hover
{
  color: #d1a133;
}
.q-li
{
 padding-left: 20px;
}
.foot-cont p
{
  color: #fff !important;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.foot-cont p a
{
  color: #fff !important;
  font-size: 17px;
  line-height: 1.7;
}
.foot-cont p a:hover
{
  color: #d1a133 !important;
}
.foot-cont p .bi
{
 margin-right: 8px;
}
.footer-widget-item.f-links {
  padding-left: 80px;
}
.copy-sec 
{
  padding: 15px 0;
  background-color: #d1a133;
  text-align: center;
}
.copy-sec p
{
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #070707;
  font-weight: 500;
}
.copy-sec p a
{
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: #fff;
  font-weight: 500;
}
.copy-sec p a:hover
{
  color: #070707;
}
.mid-h1 {
  font-size: 50px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.5;
}
.testi-thumb img
{
 width: 90px;
 height: 90px;
}
.about-bg
{
 background-image: url(../images/about-bg.jpg);
 min-height: 600px;
  background-repeat: no-repeat;
}
.h-wel-txt h6 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 12px;
}
.wel-li li a {
  color: #fff;
}
.wel-li li a:hover {
  color: #d1a133;
}
.service-bg
{
 background-image: url(../images/bg-sec.jpg);
  background-repeat: no-repeat;
  padding: 90px 0;
  background-size: cover;
}
.ser-bg-text h3 {
  font-size: 33px;
  font-weight: 700;
  line-height: 1.7;
  color: #d1a133;
  margin-bottom: 12px;
  text-shadow: 2px 2px 2px #000;
}
.ser-bg-li li {
  color: #fff;
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 12px;
  font-weight: 500;
  list-style-type: disclosure-closed;
  text-shadow: 2px 2px 2px #000;
}
.col-lt-bg
{
 padding-right: 40px;
}
.col-rt-bg
{
 padding-left: 40px;
}
.ser-bg-li
{
 padding-left: 15px;
}
.ser-bg-li.cc2
{
 column-count: 2;
}
.prod-box h3 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.7;
  color: #d1a133;
  margin: 25px auto 10px auto;
}
.box-li li {
  color: #fff;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 12px;
  font-weight: 500;
  list-style-type: disclosure-closed;
}
.box-li
{
 padding-left: 15px;
 height: 380px;
}
.prod-box
{
  background: transparent;
  box-shadow: 0 0 4px #d1a133;
  padding: 30px;
  width: 600px;
  margin: 0 auto 40px auto;
  border-radius: 20px;
}
.prod-box img
{
  width: 100%;
  height: 270px;
  margin: 0 auto;
  display: block;
}
.box-li li a {
  color: #d1a133;
}
.box-li li a:hover {
  color: #fff;
}
.special-pg .h-wel-txt h5 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.5;
  color: #d1a133;
  margin-bottom: 12px;
}
.special-pg .h-wel-img img {
  width: 540px;
  height: 360px;
  box-shadow: 0 0 5px #d1a133;
  margin: 0 auto;
  display: block;
  border: 1px solid #d1a133;
}
.h-welcome .row
{
 align-items: center;
}
.pair img
{
  width: 380px;
  height: 162px;
  margin: 0 auto 20px auto;
}
.pair.pair-mid img {
  width: 380px;
  height: 162px;
  margin: 0 auto 20px auto;
}
.flexxi
{
  display: flex;
  justify-content: space-around;
}
.pair h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  text-align: center;
}
.project-area.sp-logo-sec {
  background: #d1a133;
  padding: 80px 0 80px;
}
.pair-mid h4 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
} 
.pair-mid
{
  margin-bottom: 15px;
}
.cont-page .foot-cont-soci li a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  display: block;
  margin-bottom: 14px;
  transition: .5s;
  background-color: #d1a133;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-right: 20px;
}
.cont-page .foot-cont-soci li
{
 list-style-type: none !important;
}
.cont-page .foot-cont-soci li a:hover {
  color: #d1a133;
  background-color: Transparent;
  box-shadow: 0 0 3px #d1a133;
}
.cont-page .bi-geo-alt
{
  float: left;
  height: 130px;
  margin-top: 2px;
}
.contact_bg h3
{
  font-size: 25px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  text-align: left;
  margin-bottom: 20px;
}
.map-sec iframe
{
 width: 100%;
 height: 450px;
 border: 0;
}
.site-pg h2 {
  font-size: 45px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
} 
.header-menu ul li.active a {
  color: #d1a133;
}
.header-menu ul li a:hover
{
 color: #d1a133;
}


/* =============================== Site Map ================================ */
.sitemapul
{
    list-style-type: none;
    padding: 20px;
    width: 60%;
    margin: 20px auto;
    background: #d1a133;
    /*border: 1px solid;*/
    border-radius: 10px;
}
.sitemapul ul
{
    list-style-type: none;
    padding: 20px;
    width: 60%;
    margin: 20px auto;
    background: #0094d9;
    border: 1px solid #0094d9;
    border-radius: 10px;
    color: #000;
}

.sitemapul li
{
    background: #070707;
    border: 1px solid;
    padding: 5px 20px;
    width: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.sitemapul li a
{
    font-weight: bold;
    font-size: 20px;
    color: #d1a133 !important;
    text-decoration: none;
}
.sitemapul li a:hover
{
    color: #fff !important;
}

/*****************************/

.serv-sub .box-li {
  padding-left: 15px;
  height: 185px;
  margin-top: 30px;
}
.hlr-iframe iframe
{
 width: 100%;
 height: 235px;
  box-shadow: 0 0 8px #fff;
}
#slideshow img
{
 width: 100%;
 height: 380px;
 margin: 0 auto;
}
.fencing-sec.h-welcome .row {
  align-items: baseline;
}
.fence-u.row {
  align-items: center !important;
  margin-top: 120px;
  justify-content: center;
}
.fence-u .hlr-iframe iframe {
  width: 100%;
  height: 450px;
  box-shadow: 0 0 8px #fff;
}
.header-menu ul li a:hover i {
  color: #d1a133;
}
.header-menu ul li.active a i {
  color: #d1a133;
}
.service-bg.hlr-bg {
  background-image: url(../images/u-bg.jpg);
  background-repeat: no-repeat;
  padding: 90px 0;
}
.fencing-sec .section-main-title {
  margin-bottom: 10px;
}
.serv-sub .prod-box {
  background: transparent;
  box-shadow: 0 0 4px #d1a133;
  padding: 30px;
  width: 560px;
  margin: 0 auto 40px auto;
  border-radius: 20px;
}
.supply-1 .col-lg-3 img
{
 width: 100%;
 height: 306px;
 margin: 15px auto;
 display: block;
}
.supply-2 .col-lg-3 img
{
 width: 100%;
 height: 183px;
 margin: 15px auto;
 display: block;
}
.supply-3 .col-lg-3 img
{
 width: 100%;
 height: 122px;
 margin: 15px auto;
 display: block;
}
.supply-4 .col-lg-3 img
{
 width: 100%;
 height: 76px;
 margin: 15px auto;
 display: block;
}
.about-bg.new-bg {
  background-image: url(../images/new-bg.jpg);
  min-height: 600px;
  background-repeat: no-repeat;
}
.about-bg.about-bg-sec {
  background-image: url(../images/abt-bg.jpg);
  min-height: 600px;
  background-repeat: no-repeat;
}
.special-pg .h-wel-img.sp-square img {
  width: 540px;
  height: 540px;
  box-shadow: 0 0 5px #d1a133;
  margin: 0 auto;
  display: block;
  border: 1px solid #d1a133;
}
.sp-row
{
 margin-top: 60px;
}
.h-wel-txt .special-p {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 12px;
  color: #fff;
}







/***** Media Queries *****/

@media (max-width: 1199px)
{
.logo img {
  width: 100%;
  height: 55px;
}
.hero-area
{
 height: 540px;
}
.h-wel-img img {
  width: 100% !important;
  height: 274px;
}
.h-wel-txt h3 {
  font-size: 28px;
  margin-bottom: 12px;
}
.h-wel-txt h5 {
  font-size: 21px;
}
.footer-area .col-lg-4 {
    flex: 0 0 auto;
    width: 100%;
  }
.footer-widget-item.f-links {
  padding-left: 0;
  margin-bottom: 30px;
}
.footer-widget-item {
    padding-left: 0 !important;
  }
.breadcumb-area.new-about
{
 height: 420px !important;
}
.breadcumb-area
{
 height: 420px !important;
}
.section-description p {
  font-size: 22px;
}
.h-wel-txt h6 {
  font-size: 18px;
  margin-bottom: 12px;
}
.wel-li li {
  font-size: 17px;
  margin-bottom: 8px;
}
.prod-box {
  padding: 30px;
  width: 100%;
  margin: 0 auto 40px auto;
}
.prod-box img {
  width: 100%;
  height: 198px;
}
.prod-box h3 {
  font-size: 22px;
  margin: 25px auto 10px auto;
}
.about-bg.new-bg {
  min-height: 540px;
}
.serv-sub .prod-box {
  padding: 30px;
  width: 100%;
  margin: 0 auto 40px auto;
}
.serv-sub .box-li {
  padding-left: 15px;
  height: 240px;
  margin-top: 30px;
}
#slideshow img {
  width: 100%;
  height: 290px;
}
.special-pg .h-wel-img.sp-square img {
  width: 100% !important;
  height: 456px;
}
.pair img {
  width: 300px;
  height: 128px;
}
.breadcumb-title h1 {
  font-size: 50px;
  margin-bottom: 20px;
}
.supply-4 .col-lg-3 img {
  width: 100%;
  height: 54px;
}
.supply-2 .col-lg-3 img {
  width: 100%;
  height: 129px;
}
.supply-3 .col-lg-3 img {
  width: 100%;
  height: 86px;
}
.about-bg.about-bg-sec {
  min-height: 540px;
}

}

@media (max-width: 1023px)
{
.mean-container .mean-nav ul li.active a {
  color: #d1a133 !important;
}
.mean-container .mean-nav ul li a .fa-angle-down
{
 display: none;
}
.hero-area {
    height: 480px;
  }
.h-wel-img img {
    width: 100% !important;
    height: 418px;
    margin: 0 auto 30px auto;
}
.h-wel-txt {
  padding-left: 0;
}
.h-welcome .row.style_bg .col-md-6 {
    flex: 0 0 auto;
    width: 33.3%;
  }
.about-title h3 {
  margin: 25px 0 10px;
  font-size: 21px;
}
.map-button a {
  padding: 8px 24px;
  font-size: 15px;
}
.h-welcome .about-icon img {
  width: 80px;
  height: 80px;
}
.breadcumb-area.new-about {
    height: 360px !important;
  }
.breadcumb-area
{
 height: 360px !important;
}
.breadcumb-title h1 {
    font-size: 42px;
    margin-bottom: 20px;
  }
.section-description p {
    font-size: 20px;
    width: 100%;
  }
.section-main-title h1 {
  font-size: 45px;
  margin-left: 120px;
}
.about-bg.about-bg-sec {
  min-height: 480px;
}
.footer-widget-description p {
    width: 100% !important;
  }
.col-rt-bg {
  padding-left: 0;
  margin-top: 20px;
}
.service-box-sec .col-md-6 {
    flex: 0 0 auto;
    width: 100%;
  }
.prod-box img {
    width: 100%;
    height: 318px;
  }
.box-li {
  height: auto;
}
.about-bg.new-bg {
    min-height: 480px;
  }
.serv-sub .box-li {
    padding-left: 15px;
    height: auto;
    margin-top: 30px;
  }
.hlr-iframe iframe {
  width: 100%;
  height: 360px;
  margin-bottom: 30px;
}
 #slideshow img {
    width: 100%;
    height: 450px;
  }
#fencing .map-right
{
 margin-top: 420px;
}
element {
  display: none;
}
#slideshow > div {
  left: 0 !important;
  right: 0 !important;
}
.fence-u.row {
  align-items: center !important;
  margin-top: 40px;
  justify-content: center;
}
.fence-u .hlr-iframe iframe {
  width: 100%;
  height: 360px;
}
.special-pg .h-wel-img.sp-square img {
    width: 100% !important;
    height: 696px;
    margin: 0 auto 40px auto;
  }
.supply-4, .supply-3, .supply-2
{
  width: 60%;
  margin: 0 auto;
}
 .supply-4 .col-lg-3 img {
    width: 100%;
    height: 98px;
    margin: 20px auto;
  }
.supply-2 .col-lg-3 img {
    width: 100%;
    height: 236px;
    margin: 20px auto;
  }
.supply-3 .col-lg-3 img {
    width: 100%;
    height: 157px;
    margin: 20px auto;
  }
.pair.pair-mid img {
    width: 100%;
    height: 180px;
  }
.map-sec iframe {
  width: 100%;
  height: 420px;
  border: 0;
}
.contact-form-button button {
  padding: 8px 24px;
  margin-top: 30px;
  font-size: 17px;
}

}

@media (max-width: 767px)
{
 .h-wel-img img {
    width: 100% !important;
    height: 310px;
    margin: 0 auto 20px auto;
  }
.h-welcome .row.style_bg .col-md-6 {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 30px;
  }
.breadcumb-area.new-about {
    height: 320px !important;
  }
.breadcumb-area
{
 height: 320px !important;
}
.prod-box img {
    width: 100%;
    height: 228px;
  }
#slideshow img {
    width: 100%;
    height: 344px;
  }
#fencing .map-right {
    margin-top: 320px;
  }
.special-pg .h-wel-img.sp-square img {
    width: 100% !important;
    height: 516px;
    margin: 0 auto 30px auto;
  }
.supply-4 .col-lg-3 img {
    width: 100%;
    height: 71px;
    margin: 20px auto;
  }
.supply-2 .col-lg-3 img {
    width: 100%;
    height: 171px;
    margin: 20px auto;
  }
.supply-3 .col-lg-3 img {
    width: 100%;
    height: 114px;
    margin: 20px auto;
  }
.sitemapul {
  width: 80%;
}
.row.contact_bg {
    width: 100% !important;
  }
.scroll-area .go-top.active {
  top: 88%;
}

}

@media (max-width: 639px)
{
.h-wel-img img {
    width: 100% !important;
    height: 274px;
    margin: 0 auto 20px auto;
  }
.h-wel-txt h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }
.h-wel-txt h5 {
    font-size: 18px;
  }
.footer-logo img {
  width: 320px;
  height: 81px;
}
.footer-widget-item h4 {
  font-size: 25px;
  margin-bottom: 15px;
}
.breadcumb-title h1 {
    font-size: 38px;
    margin-bottom: 20px;
  }
.section-description p {
    font-size: 19px;
  }
.ser-bg-li.cc2 {
  column-count: 1;
}
.prod-box img {
    width: 100%;
    height: 198px;
  }
.hlr-iframe iframe {
    width: 100%;
    height: 320px;
    margin-bottom: 30px;
  }
 #slideshow img {
    width: 100%;
    height: 304px;
  }
 #fencing .map-right {
    margin-top: 275px;
  }
 .special-pg .h-wel-img.sp-square img {
    width: 100% !important;
    height: 456px;
    margin: 0 auto 20px auto;
  }
.supply-4 .col-lg-3 img {
    width: 100%;
    height: 62px;
    margin: 15px auto;
  }
.supply-2 .col-lg-3 img {
    width: 100%;
    height: 149px;
    margin: 15px auto;
  }
.supply-3 .col-lg-3 img {
    width: 100%;
    height: 99px;
    margin: 15px auto;
  }
.contact-form-button button {
    padding: 5px 20px;
    margin-top: 30px;
    font-size: 15px;
  }
.map-sec iframe {
    width: 100%;
    height: 360px;
    border: 0;
  }
.mean-container .mean-bar::before {
  font-size: 24px;
  left: 10px;
  top: 16px;
}


}

@media (max-width: 479px)
{
.h-wel-img img {
    width: 100% !important;
    height: 202px;
    margin: 0 auto 20px auto;
  }
.h-wel-txt h3 {
    font-size: 21px;
    margin-bottom: 12px;
  }
.h-wel-txt h5 {
    font-size: 16px;
  }
.footer-logo img {
    width: 280px;
    height: 71px;
  }
.copy-sec p {
  font-size: 14px;
}
.copy-sec p a {
  font-size: 14px;
}
.h-wel-txt h6 {
    font-size: 16px;
    margin-bottom: 12px;
  }
.ser-bg-li li {
  font-size: 18px;
  margin-bottom: 8px;
}
.ser-bg-text h3 {
  font-size: 28px;
}
.prod-box img {
    width: 100%;
    height: 138px;
  }
 .prod-box h3 {
    font-size: 21px;
    margin: 25px auto 10px auto;
  }
 .about-bg.new-bg {
    min-height: 400px;
  }
.box-li li {
  font-size: 16px;
  margin-bottom: 8px;
}
.hlr-iframe iframe {
    width: 100%;
    height: 260px;
    margin-bottom: 20px;
  }
#slideshow img {
    width: 100%;
    height: 224px;
  }
#fencing .map-right {
    margin-top: 200px;
  }
.special-pg .h-wel-img.sp-square img {
    width: 100% !important;
    height: 336px;
    margin: 0 auto 20px auto;
  }
.special-pg .h-wel-txt h5 {
  font-size: 19px;
  margin-bottom: 12px;
}
.h-wel-txt .special-p {
  font-size: 16px;
  margin-bottom: 12px;
}
.pair img {
    width: 100%;
    height: 144px;
  }
.pair-mid h4 {
  font-size: 25px;
  margin-bottom: 10px;
}
.pair.pair-mid img {
    width: 100%;
    height: 144px;
  }
.supply-4, .supply-3, .supply-2 {
    width: 80%;
    margin: 0 auto;
  }
 .supply-4 .col-lg-3 img {
    width: 100%;
    height: 61px;
    margin: 10px auto;
  }
.supply-2 .col-lg-3 img {
    width: 100%;
    height: 146px;
    margin: 10px auto;
  }
.supply-3 .col-lg-3 img {
    width: 100%;
    height: 97px;
    margin: 10px auto;
  }
.map-sec iframe {
    width: 100%;
    height: 320px;
    border: 0;
  }
.site-pg h2 {
  font-size: 33px;
  margin-bottom: 20px;
}
.sitemapul {
    width: 90%;
  }
.mean-container .mean-bar::before {
  font-size: 21px;
  left: 10px;
  top: 16px;
}
.sitemapul li a {
  font-size: 18px;
}

}

@media (max-width: 359px)
{
.mean-container .mean-bar::before {
    font-size: 19px;
  }
.h-wel-img img {
    width: 100% !important;
    height: 178px;
    margin: 0 auto 20px auto;
  }
 .h-wel-txt h3 {
    font-size: 19px;
    margin-bottom: 12px;
  }
.prod-box h3 {
    font-size: 19px;
    margin: 25px auto 10px auto;
  }
 #slideshow img {
    width: 100%;
    height: 197px;
  }
.fence-u .hlr-iframe iframe {
    width: 100%;
    height: 260px;
  }
.special-pg .h-wel-img.sp-square img {
    width: 100% !important;
    height: 296px;
    margin: 0 auto 20px auto;
  }
.pair img {
    width: 100%;
    height: 126px;
  }
.pair.pair-mid img {
    width: 100%;
    height: 126px;
  }
.supply-4, .supply-3, .supply-2 {
    width: 90%;
    margin: 0 auto;
  }
.cont-page .bi-geo-alt {
  float: left;
  height: 145px;
  margin-top: 2px;
}

}