* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/*end global rules*/
/*start head top*/
.head-top {
  width: 100%;
  background-color: #030e27;
}

.head-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head-top p {
  text-align: center;
  padding-top: 15px;
  font-size: 16px;
  color: #798795;
}

.head-top p svg {
  color: #ffc107;
  padding-right: 10px;
}

.head-top p span {
  color: #ffc107;
  font-size: 16px;
}

.head-top .social-links svg {
  color: #798795;
  font-size: 16px;
  padding-right: 10px;
  transition: .6s;
}

.head-top .social-links svg:hover {
  color: #ffc107;
}

.head-top .head-links a {
  text-decoration: none;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  text-transform: capitalize;
  letter-spacing: 1px;
  color: #798795;
  padding-right: 10px;
  transition: .6s;
}

.head-top .head-links a:hover {
  color: #ffc107;
}

.head-top .head-links a:not(:last-child) {
  border-right: 1px solid #798795;
}

/*end head top*/
/*start head mid*/
.head-mid {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding-top: 30px;
  padding-bottom: 80px;
}

.head-mid .head-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.head-mid .head-content .brand-logoo {
  display: inline;
  width: 25%;
}

.head-mid .head-content .brand-logoo img {
  width: 90%;
}

.head-mid .head-content .phone, .head-mid .head-content .open, .head-mid .head-content .mail {
  display: flex;
}

.head-mid .head-content .phone svg, .head-mid .head-content .open svg, .head-mid .head-content .mail svg {
  margin-top: 10px;
  margin-right: 25px;
  font-size: 24px;
  color: #ffc107;
}

.head-mid .head-content .phone p, .head-mid .head-content .open p, .head-mid .head-content .mail p {
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  color: #ffc107;
  text-transform: capitalize;
  padding: 0;
  margin: 0;
}

.head-mid .head-content .phone a, .head-mid .head-content .open a, .head-mid .head-content .mail a {
  text-decoration: none;
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
  color: #030e27;
  transition: .6s;
}

.head-mid .head-content .phone a:hover, .head-mid .head-content .open a:hover, .head-mid .head-content .mail a:hover {
  color: #ffc107;
}

/*end head mid*/
/*start navbar*/
.my-nav {
  width: 100%;
  position: relative;
}

.my-nav .navbar {
  background-color: #030e27;
  display: flex;
  position: absolute;
  top: -40px;
  width: 80%;
  padding: 20px;
  border-radius: 15px;
}

.my-nav .navbar .home-link, .my-nav .navbar .pages-link, .my-nav .navbar .serv-link, .my-nav .navbar .element-link, .my-nav .navbar .blog-link, .my-nav .navbar .contact-link {
  padding: 10px;
  font-size: 18px;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
  transition: .6s;
}

.my-nav .navbar .home-link:hover, .my-nav .navbar .pages-link:hover, .my-nav .navbar .serv-link:hover, .my-nav .navbar .element-link:hover, .my-nav .navbar .blog-link:hover, .my-nav .navbar .contact-link:hover {
  color: #ffc107;
}

.my-nav .navbar .home-link.active, .my-nav .navbar .pages-link.active, .my-nav .navbar .serv-link.active, .my-nav .navbar .element-link.active, .my-nav .navbar .blog-link.active, .my-nav .navbar .contact-link.active {
  color: #ffc107;
}

.my-nav .navbar .home-menu, .my-nav .navbar .element-menu {
  position: absolute;
  z-index: 999999;
  top: 58px;
  border-radius: 15px;
  width: 250px;
  background-color: #fff;
  box-shadow: 2px 2px 2px #ddd;
}

.my-nav .navbar .home-menu li, .my-nav .navbar .element-menu li {
  width: 90%;
  margin: 15px 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.my-nav .navbar .home-menu a, .my-nav .navbar .element-menu a {
  padding-left: 15px;
  color: #030e27;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  transition: .6s;
}

.my-nav .navbar .home-menu a:hover, .my-nav .navbar .element-menu a:hover {
  padding-left: 25px;
  color: #ffc107;
}

.my-nav .navbar .serv-menu {
  position: absolute;
  z-index: 999999;
  top: 58px;
  border-radius: 15px;
  width: 250px;
  background-color: #fff;
  box-shadow: 2px 2px 2px #ddd;
}

.my-nav .navbar .serv-menu li {
  width: 90%;
  margin: 15px 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.my-nav .navbar .serv-menu a {
  padding-left: 15px;
  color: #030e27;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
  transition: .6s;
  font-size: 13px;
}

.my-nav .navbar .serv-menu a:hover {
  padding-left: 25px;
  color: #ffc107;
}

.my-nav .navbar .blog-menu {
  position: absolute;
  z-index: 999999;
  top: 58px;
  left: -100px;
  border-radius: 15px;
  width: 250px;
  background-color: #fff;
  box-shadow: 2px 2px 2px #ddd;
  display: none;
}

.my-nav .navbar .blog-menu li {
  width: 90%;
  margin: 15px 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.my-nav .navbar .blog-menu a {
  padding-left: 15px;
  color: #030e27;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  transition: .6s;
}

.my-nav .navbar .blog-menu a:hover {
  padding-left: 25px;
  color: #ffc107;
}

.my-nav .navbar .element-menu .right-toggle, .my-nav .navbar .element-menu .right-toggle-one {
  position: relative;
}

.my-nav .navbar .element-menu .right-toggle .right-menu-one, .my-nav .navbar .element-menu .right-toggle .right-menu, .my-nav .navbar .element-menu .right-toggle-one .right-menu-one, .my-nav .navbar .element-menu .right-toggle-one .right-menu {
  position: absolute;
  z-index: 999999;
  left: 200px;
  width: 250px;
  background-color: #fff;
}

.my-nav .navbar .element-menu .right-toggle .right-menu, .my-nav .navbar .element-menu .right-toggle-one .right-menu {
  top: -10px;
  display: none;
}

.my-nav .navbar .element-menu .right-toggle .right-menu-one, .my-nav .navbar .element-menu .right-toggle-one .right-menu-one {
  top: 40px;
  display: none;
}

.my-nav .navbar .home-menu, .my-nav .navbar .element-menu, .my-nav .navbar .serv-menu, .my-nav .navbar .pages-layout, .my-nav .navbar .element-menu {
  display: none;
}

.my-nav .navbar .nav-item {
  position: relative;
}

.my-nav .navbar .nav-item .pages-layout {
  position: absolute;
  z-index: 999999;
  top: 58px;
  left: -250px;
  width: 800px;
  padding: 0px 15px;
  border-radius: 15px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 2px 2px 2px #ddd;
  display: none;
}

.my-nav .navbar .nav-item .pages-layout .pages-menu {
  border-radius: 15px;
  background-color: #fff;
  margin-bottom: 10px;
}

.my-nav .navbar .nav-item .pages-layout .pages-menu li {
  width: 100%;
  margin: 15px 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

.my-nav .navbar .nav-item .pages-layout .pages-menu a {
  padding-left: 15px;
  color: #030e27;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  transition: .6s;
}

.my-nav .navbar .nav-item .pages-layout .pages-menu a:hover {
  padding-left: 25px;
  color: #ffc107;
}

.my-nav .navbar .search-icon {
  position: relative;
  color: #fff;
  font-size: 22px;
}

.my-nav .navbar .search-filed {
  position: absolute;
  z-index: 99999;
  top: 58px;
  left: -150px;
  width: 250px;
  background-color: #030e27;
  padding: 25px 0px;
  border-radius: 10px;
  display: none;
}

.my-nav .navbar .search-filed #nav-search {
  height: 40px;
  padding-left: 10px;
  margin: 0px 10px;
  border-radius: 5px;
  outline: transparent;
  border: 2px solid #ddd;
  transition: .6s;
}

.my-nav .navbar .search-filed #nav-search:hover, .my-nav .navbar .search-filed #nav-search:focus {
  border-color: #ffc107;
}

.my-nav .navbar .search-filed a {
  font-size: 18px;
  color: #28a745;
  padding-right: 5px;
}

.my-nav .navbar .get-quote {
  background-color: #ffc107;
  color: #fff;
  padding: 22px 10px;
  border-radius: 15px;
  font-size: 15px;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
  transition: .6s;
}

.my-nav .navbar .get-quote:hover {
  padding-right: 35px;
}

.my-nav .navbar .get-quote svg {
  padding-right: 10px;
  font-size: 17px;
  font-family: 'Raleway', sans-serif;
}

/*end navbar*/
/*start home slider*/
.home-slider {
  position: absolute;
  z-index: -99;
  width: 100%;
  height: 120vh;
  overflow: hidden;
}

.home-slider .home-image {
  position: relative;
}

.home-slider .home-image::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.home-slider .home-image .slider-text {
  position: absolute;
  z-index: 999;
  top: 25%;
  left: 10%;
  width: 40%;
}

.home-slider .home-image .slider-text h3 {
  font-size: 75px;
  font-weight: bold;
  letter-spacing: 1.2px;
  color: #fff;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
}

.home-slider .home-image .slider-text b {
  color: #ffc107;
}

.home-slider .home-image .slider-text span {
  display: inline;
  letter-spacing: 1.2px;
  color: #fff;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-size: 27px;
}

.home-slider .home-image .slider-text span img {
  display: inline;
  padding-right: 15px;
}

.home-slider .home-image .slider-text p {
  color: #fff;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  line-height: 25px;
  padding-top: 20px;
  padding-bottom: 30px;
}

.home-slider .home-image .slider-text .slider-btn {
  display: flex;
  position: relative;
}

.home-slider .home-image .slider-text .slider-btn .slide-quote {
  color: #fff;
  border: 2px solid #fff;
  padding: 8px 14px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  margin-right: 20px;
  margin-top: 25px;
  transition: .6s;
}

.home-slider .home-image .slider-text .slider-btn .slide-quote:hover {
  border-color: #ffc107;
  color: #ffc107;
  background-color: #fff;
}

.home-slider .home-image .slider-text .slider-btn .slide-view {
  color: #fff;
  border: 2px solid   #ffc107;
  background-color: #ffc107;
  padding: 8px 14px;
  margin-top: 25px;
  text-transform: capitalize;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  margin-right: 20px;
  transition: .6s;
  cursor: pointer;
}

.home-slider .home-image .slider-text .slider-btn .slide-view:hover {
  border-color: #fff;
  background-color: #fff;
  color: #ffc107;
}

/*end home slider*/
/*start services section*/
.services {
  position: relative;
  height: 100%;
  padding-top: 132vh;
  padding-bottom: 100px;
}

.services .services-title {
  position: relative;
  text-align: center;
}

.services .services-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -70px;
  right: 0;
  background: url(../../img/service-title-icon.png);
  width: 70px;
  height: 130px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

.services .services-title h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  letter-spacing: 1.3px;
}

.services .services-title h1 a {
  color: #ffc107;
}

.services .single-service {
  width: 100%;
  text-align: center;
  transition: .6s;
  margin-top: 35px;
  margin-bottom: 40px;
}

.services .single-service .serv-text h3 a {
  font-size: 19px;
  color: #030e27;
  font-family: 'Raleway', sans-serif;
  color: black;
  font-weight: bold;
}

.services .single-service .serv-text p {
  color: #798795;
  font-size: 16px;
}

.services .single-service .serv-text span {
  background-color: #ffc107;
  padding: 8px 12px;
  border-radius: 50%;
  opacity: .4;
  transition: .6s;
}

.services .single-service:hover span {
  background-color: #fd7e14;
  opacity: 1;
  color: #f8f9fa;
}

/*end services section*/
.about {
  width: 100%;
  position: relative;
  background-color: #ddd;
  margin-bottom: 80px;
}

.about .about-images {
  position: relative;
  padding-top: 90px;
}

.about .about-images .about-img-one {
  position: relative;
  cursor: pointer;
  z-index: 88;
  transition: .8s;
}

.about .about-images .about-img-one img {
  width: 100%;
  transition: .8s;
}

.about .about-images .about-img-one::before {
  content: '';
  position: absolute;
  z-index: 9999;
  width: 10px;
  height: 100%;
  background-color: #ffc107;
  right: -15px;
}

.about .about-images .about-img-one::after {
  content: '';
  position: absolute;
  z-index: 9999;
  width: 40%;
  height: 10px;
  background-color: #ffc107;
  right: -15px;
  bottom: 0px;
}

.about .about-images .about-img-one:hover img {
  transform: scale(1.1);
}

.about .about-images .about-img-two {
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
  z-index: 88;
}

.about .about-images .about-img-two img {
  transition: .8s;
  width: 90%;
}

.about .about-images .about-img-two:hover img {
  transform: scale(1.1);
}

.about .about-images .about-img-three {
  position: absolute;
  z-index: 1;
  top: 160px;
  right: -160px;
  transition: .6s;
  cursor: pointer;
}

.about .about-images .about-img-three img {
  width: 100%;
  transition: .8s;
}

.about .about-images .about-img-three:hover {
  filter: grayscale(1.5);
}

.about .about-text {
  padding-left: 25%;
  padding-top: 90px;
}

.about .about-text h5 {
  font-size: 26px;
  color: #ffc107;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: 'Raleway', sans-serif;
}

.about .about-text h3 {
  color: black;
  font-weight: bold;
  font-size: 48px;
  text-transform: capitalize;
  letter-spacing: 1.2px;
}

.about .about-text h3 span {
  color: #ffc107;
  letter-spacing: 1.6px;
}

.about .about-text h3 span small {
  font-size: 16px;
  color: #fff;
  background-color: #ffc107;
  padding: 6px;
  border-radius: 10px;
}

.about .about-text p {
  color: #6c757d;
  text-transform: capitalize;
  padding-top: 30px;
  line-height: 30px;
}

.about .about-text img {
  margin-top: 25px;
}

.about .company-services {
  position: relative;
  background-image: url(../../img/newImgs/9.jpeg);
  background-size: cover;
  height: 75vh;
  margin-bottom: 10px;
}

.about .company-services::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.about .company-services .company-title {
  text-align: center;
  position: relative;
  padding-top: 40px;
  color: #fff;
}

.about .company-services .company-card-one {
  position: relative;
  z-index: 999;
  transition: .9s;
  margin-bottom: 25px;
  margin-top: 25px;
  overflow-x: hidden;
}

.about .company-services .company-card-one img {
  width: 100%;
}

.about .company-services .company-card-one .project-add {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 5px;
  left: 0px;
  width: 100%;
  background-color: #fff;
  transition: .7s;
}

.about .company-services .company-card-one .project-add svg {
  font-size: 20px;
  color: #ffc107;
  padding-left: 5px;
  padding-right: 15px;
}

.about .company-services .company-card-one .project-add p {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: black;
  padding-top: 12px;
  text-transform: capitalize;
  letter-spacing: 1px;
  padding-left: 25px;
}

.about .company-services .company-card-one .project-add a {
  margin-left: 55px;
  text-align: center;
  color: #fff;
}

.about .company-services .company-card-one .project-add a svg {
  color: #fff;
  font-size: 22px;
  padding: 4px 6px;
  background-color: #ffc107;
  text-align: center;
}

.about .company-services .overlay {
  position: absolute;
  z-index: 8888;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 1.2s;
}

.about .company-services .company-overlay {
  position: absolute;
  z-index: 999999999;
  left: 0;
  top: 0;
  width: 100%;
  display: none;
  transition: 2s;
}

.about .company-services .company-overlay .overlay-icon svg {
  color: #ffc107;
  font-size: 60px;
  margin-left: 43%;
  margin-top: 5%;
  margin-bottom: 20px;
}

.about .company-services .company-overlay .overlay-text {
  padding-top: 50px;
}

.about .company-services .company-overlay .overlay-text a {
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: 'Raleway', sans-serif;
  padding-left: 10px;
  transition: .6s;
}

.about .company-services .company-overlay .overlay-text a:hover {
  color: #ffc107;
}

.about .company-services .company-overlay .overlay-text a svg {
  padding-right: 10px;
  color: #ffc107;
}

.about .company-services .company-overlay .overlay-text p {
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 2px;
  font-size: 12px;
  font-family: 'Raleway', sans-serif;
  padding-left: 10px;
  padding-top: 25px;
}

.about .company-services .company-card-one:hover .project-add {
  display: none;
}

.about .company-services .company-card-one:hover .overlay {
  height: 100%;
}

.about .company-services .company-card-one:hover .company-overlay {
  display: block;
}

.company-btn {
  margin-top: 15px;
}

.company-btn a {
  background-color: #ffc107;
  color: #fff;
  text-transform: capitalize;
  font-size: 17px;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 1.2px;
  text-align: center;
  padding: 8px 16px;
  border: 1px solid #ffc107;
  display: block;
  margin: auto;
  width: 220px;
  border-radius: 5px;
  margin-top: 5px;
  transition: .6s;
}

.company-btn a svg {
  padding-left: 15px;
  padding-top: 5px;
  text-align: center;
}

.company-btn a:hover {
  background-color: #fff;
  color: #ffc107;
}

/*end about section*/
/*start event count*/
.event-count {
  position: relative;
  margin-top: 20vh;
  bottom: 0;
  width: 100%;
  padding-top: 50px;
  background-color: #eee;
  overflow-x: hidden;
}

.event-count .counter {
  margin-bottom: 30px;
}

.event-count .counter h3 {
  font-size: 19px;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 1.4px;
  color: black;
  font-weight: bold;
  padding-left: 70px;
  line-height: 30px;
}

.event-count .counter span:last-child {
  font-size: 60px;
}

.countfect {
  font-family: 'Amirir',serif;
  font-size: 60px;
  font-weight: bold;
  color: #ffc107;
}

/*end count event*/
/*start portfolio section*/
.portfolio {
  padding: 60px 0px;
  width: 100%;
  position: relative;
}

.portfolio .portfolio-head {
  text-align: center;
  padding-bottom: 30px;
}

.portfolio .portfolio-head p {
  color: #ffc107;
  font-size: 16px;
  font-weight: lighter;
  text-transform: capitalize;
  letter-spacing: 1.2px;
}

.portfolio .portfolio-head h3 {
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 32px;
}

.portfolio .portfolio-nav {
  display: flex;
  width: 90%;
  padding: 20px;
  margin: auto;
  border: 1px solid #ddd;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.portfolio .portfolio-nav li {
  margin: 10px 25px;
}

.portfolio .portfolio-nav a {
  color: black;
  text-transform: capitalize;
  letter-spacing: 1.4px;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  transition: .6s;
}

.portfolio .portfolio-nav a svg {
  padding-right: 10px;
}

.portfolio .portfolio-nav a.active {
  color: #ffc107;
}

.portfolio .portfolio-nav a:hover {
  color: #ffc107;
}

.portfolio .port-container {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.portfolio .portfolio-cases, .portfolio .portfolio-buliding, .portfolio .portfolio-bridge, .portfolio .portfolio-houses, .portfolio .portfolio-interio {
  position: absolute;
  margin-top: 90px;
}

.portfolio .portfolio-cases .portfolio-card, .portfolio .portfolio-buliding .portfolio-card, .portfolio .portfolio-bridge .portfolio-card, .portfolio .portfolio-houses .portfolio-card, .portfolio .portfolio-interio .portfolio-card {
  width: 100%;
  margin-bottom: 75px;
  margin-right: 10px;
}

.portfolio .portfolio-cases .portfolio-card .card-img, .portfolio .portfolio-buliding .portfolio-card .card-img, .portfolio .portfolio-bridge .portfolio-card .card-img, .portfolio .portfolio-houses .portfolio-card .card-img, .portfolio .portfolio-interio .portfolio-card .card-img {
  width: 100%;
  position: relative;
}

.portfolio .portfolio-cases .portfolio-card .card-img img, .portfolio .portfolio-buliding .portfolio-card .card-img img, .portfolio .portfolio-bridge .portfolio-card .card-img img, .portfolio .portfolio-houses .portfolio-card .card-img img, .portfolio .portfolio-interio .portfolio-card .card-img img {
  width: 100%;
  height: 260px;
}

.portfolio .portfolio-cases .portfolio-card .card-img .card-icon, .portfolio .portfolio-buliding .portfolio-card .card-img .card-icon, .portfolio .portfolio-bridge .portfolio-card .card-img .card-icon, .portfolio .portfolio-houses .portfolio-card .card-img .card-icon, .portfolio .portfolio-interio .portfolio-card .card-img .card-icon {
  position: absolute;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  transition: 3s;
}

.portfolio .portfolio-cases .portfolio-card .card-img .card-icon a, .portfolio .portfolio-buliding .portfolio-card .card-img .card-icon a, .portfolio .portfolio-bridge .portfolio-card .card-img .card-icon a, .portfolio .portfolio-houses .portfolio-card .card-img .card-icon a, .portfolio .portfolio-interio .portfolio-card .card-img .card-icon a {
  font-size: 22px;
  position: absolute;
  left: 45%;
  top: 25%;
  color: #fff;
  background-color: #ffc107;
  padding: 3px 6px;
  border-radius: 10px;
  transition: 3s;
}

.portfolio .portfolio-cases .portfolio-card .card-img:hover .card-icon, .portfolio .portfolio-buliding .portfolio-card .card-img:hover .card-icon, .portfolio .portfolio-bridge .portfolio-card .card-img:hover .card-icon, .portfolio .portfolio-houses .portfolio-card .card-img:hover .card-icon, .portfolio .portfolio-interio .portfolio-card .card-img:hover .card-icon {
  display: block;
}

.portfolio .portfolio-cases .portfolio-card .card-img:hover .portfolio-info, .portfolio .portfolio-buliding .portfolio-card .card-img:hover .portfolio-info, .portfolio .portfolio-bridge .portfolio-card .card-img:hover .portfolio-info, .portfolio .portfolio-houses .portfolio-card .card-img:hover .portfolio-info, .portfolio .portfolio-interio .portfolio-card .card-img:hover .portfolio-info {
  background-color: #ffc107;
  color: #fff;
  box-shadow: 0px 0px 10px #ddd;
}

.portfolio .portfolio-cases .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-buliding .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-bridge .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-houses .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-interio .portfolio-card .card-img:hover .portfolio-info p,
.portfolio .portfolio-cases .portfolio-card .card-img:hover .portfolio-info a, .portfolio .portfolio-buliding .portfolio-card .card-img:hover .portfolio-info a, .portfolio .portfolio-bridge .portfolio-card .card-img:hover .portfolio-info a, .portfolio .portfolio-houses .portfolio-card .card-img:hover .portfolio-info a, .portfolio .portfolio-interio .portfolio-card .card-img:hover .portfolio-info a,
.portfolio .portfolio-cases .portfolio-card .card-img:hover .portfolio-info span, .portfolio .portfolio-buliding .portfolio-card .card-img:hover .portfolio-info span, .portfolio .portfolio-bridge .portfolio-card .card-img:hover .portfolio-info span, .portfolio .portfolio-houses .portfolio-card .card-img:hover .portfolio-info span, .portfolio .portfolio-interio .portfolio-card .card-img:hover .portfolio-info span {
  color: #fff;
}

.portfolio .portfolio-cases .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-buliding .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-bridge .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-houses .portfolio-card .card-img:hover .portfolio-info p, .portfolio .portfolio-interio .portfolio-card .card-img:hover .portfolio-info p {
  border: 1px solid #fff;
}

.portfolio .portfolio-cases .portfolio-card .card-img .portfolio-info, .portfolio .portfolio-buliding .portfolio-card .card-img .portfolio-info, .portfolio .portfolio-bridge .portfolio-card .card-img .portfolio-info, .portfolio .portfolio-houses .portfolio-card .card-img .portfolio-info, .portfolio .portfolio-interio .portfolio-card .card-img .portfolio-info {
  position: absolute;
  z-index: 9999999;
  bottom: -40px;
  left: 5%;
  width: 90%;
  padding: 10px 0px;
  background-color: #fff;
  border-radius: 5px;
  transition: 1s;
  box-shadow: 0px 0px 10px #ddd;
}

.portfolio .portfolio-cases .portfolio-card .card-img .portfolio-info p, .portfolio .portfolio-buliding .portfolio-card .card-img .portfolio-info p, .portfolio .portfolio-bridge .portfolio-card .card-img .portfolio-info p, .portfolio .portfolio-houses .portfolio-card .card-img .portfolio-info p, .portfolio .portfolio-interio .portfolio-card .card-img .portfolio-info p {
  background-color: #ffc107;
  color: #fff;
  text-align: center;
  text-transform: capitalize;
  font-size: 14px;
  width: 100px;
  padding: 2px;
  border-radius: 5px;
  margin: 10px;
  transition: 2s;
}

.portfolio .portfolio-cases .portfolio-card .card-img .portfolio-info a, .portfolio .portfolio-buliding .portfolio-card .card-img .portfolio-info a, .portfolio .portfolio-bridge .portfolio-card .card-img .portfolio-info a, .portfolio .portfolio-houses .portfolio-card .card-img .portfolio-info a, .portfolio .portfolio-interio .portfolio-card .card-img .portfolio-info a {
  display: block;
  color: black;
  font-weight: bold;
  padding: 10px;
  transition: 2s;
}

.portfolio .portfolio-cases .portfolio-card .card-img .portfolio-info span, .portfolio .portfolio-buliding .portfolio-card .card-img .portfolio-info span, .portfolio .portfolio-bridge .portfolio-card .card-img .portfolio-info span, .portfolio .portfolio-houses .portfolio-card .card-img .portfolio-info span, .portfolio .portfolio-interio .portfolio-card .card-img .portfolio-info span {
  color: #ffc107;
  padding: 10px;
  line-height: 35px;
  transition: 2s;
}

.portfolio .portfolio-cases .portfolio-card .card-img .portfolio-info span svg, .portfolio .portfolio-buliding .portfolio-card .card-img .portfolio-info span svg, .portfolio .portfolio-bridge .portfolio-card .card-img .portfolio-info span svg, .portfolio .portfolio-houses .portfolio-card .card-img .portfolio-info span svg, .portfolio .portfolio-interio .portfolio-card .card-img .portfolio-info span svg {
  padding-right: 10px;
}

.portfolio .portfolio-cases .portofolio-button, .portfolio .portfolio-buliding .portofolio-button, .portfolio .portfolio-bridge .portofolio-button, .portfolio .portfolio-houses .portofolio-button, .portfolio .portfolio-interio .portofolio-button {
  position: relative;
  z-index: 99999999;
  border: 2px solid #ffc107;
  color: #ffc107;
  width: 220px;
  display: block;
  margin: auto;
  padding: 10px 18px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: .6s;
}

.portfolio .portfolio-cases .portofolio-button:hover, .portfolio .portfolio-buliding .portofolio-button:hover, .portfolio .portfolio-bridge .portofolio-button:hover, .portfolio .portfolio-houses .portofolio-button:hover, .portfolio .portfolio-interio .portofolio-button:hover {
  background-color: #ffc107;
  color: #fff;
}

.portfolio .portfolio-buliding {
  display: none;
}

.portfolio .portfolio-bridge {
  display: none;
}

.portfolio .portfolio-houses {
  display: none;
}

.portfolio .portfolio-interio {
  display: none;
}

/*end portfolio section*/
.testimonials {
  position: relative;
  padding-top: 120vh;
  width: 100%;
  overflow-x: hidden;
}

.testimonials .testimonial-banner {
  background-color: #ffc107;
  color: #fff;
  padding-top: 100px;
  padding-bottom: 152px;
  padding-left: 50px;
}

.testimonials .testimonial-banner p {
  font-size: 14px;
}

.testimonials .testimonial-banner h3 {
  font-size: 70px;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
  padding-left: 50px;
}

/*start test slider*/
.tesimonial-slider {
  width: 100%;
  margin-right: 0%;
  margin-top: 0%;
  background-color: #030e27;
}

.tesimonial-slider .item {
  width: 100%;
  position: relative;
  padding-top: 15%;
}

.tesimonial-slider .item .testimonial-quote {
  position: relative;
  border: 1px solid #030e27;
  font-size: 17px;
  padding: 15px;
  line-height: 30px;
  height: 250px;
  text-align: center;
  font-weight: bold;
  padding-top: 100px;
  color: #fff;
}

.tesimonial-slider .item .testimonial-quote svg {
  position: absolute;
  right: 35px;
  top: -5px;
  font-size: 52px;
  color: #ffc107;
}

.tesimonial-slider .item .quote-writer {
  display: flex;
  width: 260px;
  margin-top: 20px;
  margin-left: 25px;
  padding-bottom: 25px;
}

.tesimonial-slider .item .quote-writer svg {
  margin-top: 25px;
  margin-right: 20px;
  color: #ffc107;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 50%;
}

.tesimonial-slider .item .quote-writer p {
  color: #ffc107;
  text-transform: capitalize;
  letter-spacing: 1px;
}

.tesimonial-slider .item .quote-writer h5 {
  color: #fff;
}

.tesimonial-slider .leftslick, .tesimonial-slider .rightslick {
  position: absolute;
  top: 10px;
  background-color: transparent;
  outline: transparent;
  border: transparent;
  font-size: 24px;
  color: #ffc107;
}

.tesimonial-slider .leftslick {
  right: 35px;
  z-index: 999;
}

.tesimonial-slider .rightslick {
  right: 95px;
  position: absolute;
  z-index: 9999;
}

/*end test slider*/
/*start our team*/
.our-team {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  padding-top: 50px;
}

.our-team .ourteam-head {
  text-align: center;
  padding: 40px 0px;
}

.our-team .ourteam-head p {
  letter-spacing: 1px;
  text-transform: capitalize;
  font-size: 16px;
  color: #ffc107;
}

.our-team .ourteam-head h4 {
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: capitalize;
  font-size: 34px;
}

.our-team .team-card {
  width: 96%;
  box-shadow: 3px 3px 3px #ddd;
  margin-bottom: 30px;
  cursor: pointer;
}

.our-team .team-card .team-img {
  transition: 2s;
}

.our-team .team-card .team-img img {
  width: 100%;
  display: block;
  margin: auto;
  transition: 2s;
}

.our-team .team-card .team-name {
  padding: 15px;
  background-color: #fff;
  transition: 2s;
}

.our-team .team-card .team-name p {
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: bold;
}

.our-team .team-card .team-name .team-social {
  display: flex;
  transition: 2s;
}

.our-team .team-card .team-name .team-social svg {
  color: #798795;
  font-size: 22px;
  margin-right: 25px;
  transition: 2s;
}

.our-team .team-card .team-name .team-social svg:hover {
  color: #777;
}

.our-team .team-card:hover .team-name {
  background-color: #ffc107;
  color: #fff;
}

.our-team .team-card:hover .team-social svg {
  color: #fff;
}

.our-team .team-card:hover .team-img img {
  filter: grayscale(1);
}

/*end our team*/
/*star blog */
.blog {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.blog .blog-head {
  text-align: center;
  padding: 40px 0px;
}

.blog .blog-head p {
  letter-spacing: 1px;
  text-transform: capitalize;
  font-size: 16px;
  color: #ffc107;
}

.blog .blog-head h4 {
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: capitalize;
  font-size: 34px;
}

.blog .blog-card {
  width: 96%;
  margin-right: 2%;
  margin-bottom: 45px;
}

.blog .blog-card .blog-img {
  position: relative;
  margin-bottom: 30px;
}

.blog .blog-card .blog-img img {
  width: 100%;
  display: block;
  margin: auto;
  transition: 2s;
}

.blog .blog-card .blog-img span {
  position: absolute;
  left: 15px;
  top: 15px;
  background-color: #ffc107;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
}

.blog .blog-card .blog-img span svg {
  padding-right: 5px;
}

.blog .blog-card:hover .blog-img img {
  filter: grayscale(1);
  transform: scale(0.95);
}

.blog .blog-card .blog-text a {
  color: black;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 20px;
}

.blog .blog-card .blog-text .mini-link {
  font-size: 14px;
}

.blog .blog-card .blog-text p {
  color: #777;
  padding: 20px 0px;
  line-height: 30px;
  font-size: 17px;
}

.blog .blog-card .blog-text .blog-links {
  display: flex;
  justify-content: space-between;
}

.blog .blog-card .blog-text .blog-links a {
  color: #ffc107;
  font-size: 16px;
  font-weight: bold;
  text-transform: capitalize;
  letter-spacing: 1.2px;
}

.blog .blog-card .blog-text .blog-links a svg {
  padding: 0px 10px;
}

/*end blog*/
/*start brand*/
.brand {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  display: block;
  margin: auto;
}

.brand .brand-logo {
  position: relative;
  display: block;
  margin: auto;
  margin: 35px;
}

.brand .brand-logo > a {
  position: relative;
  top: 0;
  z-index: 1;
  text-align: center;
  padding-right: 15px;
}

.brand .brand-logo .brand-overlay a {
  position: absolute;
  top: 0px;
  z-index: -1;
  transition: .6s;
}

.brand .brand-logo:hover .brand-overlay a {
  z-index: 2;
}

/*end brand*/
/*start footer*/
.foot {
  width: 100%;
  background-color: #030e27;
  padding-top: 50px;
}

.foot .foot-logo img {
  width: 60%;
}

.foot .foot-logo img {
  margin-bottom: 25px;
}

.foot .foot-logo p {
  color: #fff;
  letter-spacing: 1px;
  line-height: 25px;
  font-size: 14px;
  padding-right: 35px;
}

.foot .foot-logo .foot-social {
  margin: 45px 0px;
}

.foot .foot-logo .foot-social a {
  color: #798795;
  background-color: #fff;
  border-radius: 50%;
  padding: 8px 12px;
  transition: .6s;
  margin-left: 15px;
}

.foot .foot-logo .foot-social a:hover {
  background-color: #fff;
  color: #ffc107;
}

.foot .foot-links h3 {
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 1.2px;
  padding-left: 25px;
}

.foot .foot-links .information-list, .foot .foot-links .information-list-two {
  list-style: disc;
  margin-top: 30px;
  margin-left: 15px;
  color: #fff;
}

.foot .foot-links .information-list li, .foot .foot-links .information-list-two li {
  margin: 15px 0px;
}

.foot .foot-links .information-list a, .foot .foot-links .information-list-two a {
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  padding-bottom: 15px;
  text-transform: capitalize;
  transition: .6s;
}

.foot .foot-links .information-list a:hover, .foot .foot-links .information-list-two a:hover {
  color: #007bff;
}

.foot .foot-links .information-list-two {
  margin-top: 65px;
}

.foot .foot-message {
  position: relative;
  width: 100%;
  border: 1px solid #000000;
  padding: 25px;
}

.foot .foot-message a {
  color: #fff;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: capitalize;
  font-size: 20px;
  transition: .6s;
}

.foot .foot-message a:hover {
  color: #ffc107;
}

.foot .foot-message > span {
  color: #ffc107;
  letter-spacing: 1px;
  font-size: 14px;
  padding-bottom: 15px;
  border-bottom: 1px solid #000000;
  display: block;
}

.foot .foot-message p {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  padding: 25px 0px;
}

.foot .foot-message .message-icon {
  display: flex;
  border: transparent;
  justify-content: space-between;
}

.foot .foot-message .message-icon a {
  font-size: 16px;
  font-family: 'Raleway', sans-serif;
}

.foot .foot-message .message-icon a svg {
  padding-right: 10px;
}

.foot .foot-message .message-icon span svg {
  color: #007bff;
  font-size: 36px;
}

.foot .copy-right {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 45px;
}

.foot .copy-right p {
  background-color: #ffc107;
  line-height: 65px;
  border-radius: 5px;
  padding: 5px;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 1.4px;
  font-size: 15px;
  text-align: center;
}

.foot .copy-right .copy-links {
  display: flex;
  padding-top: 25px;
  flex-wrap: wrap;
}

.foot .copy-right .copy-links a {
  color: #798795;
  padding-right: 10px;
  padding-left: 10px;
  border-right: 1px solid #fff;
  text-transform: capitalize;
  letter-spacing: 1.2px;
  transition: .6s;
}

.foot .copy-right .copy-links a:hover {
  color: #ffc107;
}

/*end footer*/
/*start scroll top*/
.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: none;
}

.scroll-top a {
  padding: 8px 14px;
  background-color: #fff;
  border-radius: 5px;
  color: black;
  border: 2px solid #ffc107;
}

/*end scroll top*/