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

input:focus,
a:focus,
button:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
}

a,
img,
button,
input[type="submit"],
ul li {
  transition: all 0.5s ease;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.container {
  position: relative;
}

body {
  font-weight: 400 !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 16px;
  overflow-x: hidden;
  font-family: "Roboto", sans-serif !important;
}
.book-now-btn {
    position: fixed;
    right: 0;
    top: 80%;
   background: linear-gradient(to right, #0B4587, #DBCB88);
    text-decoration: none;
    padding: 12px 30px;
    font-size: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #fff;
    border-radius: 20px 0 0 20px;
    z-index: 9999999;
}
.book-now-btn span {
    display: block;
    margin: 0;
    padding: 0;
}
.book-now-btn img {
    display: block;
    width: 32px;
    margin: 0 auto;
}
body.home {
   position: relative;
}
.main-wrapper{padding: 20px 30px 0 30px;}
.hero-section {
  background: url("../images/banner.png");
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  border-radius: 16px 16px 0 0;
  
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
  to bottom,
  transparent 90%,
  rgb(0, 0, 0) 100%
);
  border-radius: 16px 16px 0 0;
}
header.site-header { position:relative; z-index: 99; top:0; left:0; width:100%; padding:0; }
.home header.site-header { position: absolute; z-index: 99; top:20px; left:0; width:100%; padding:15px 0; }
.home header.site-header .main-menu{margin:-56px 0 0 0; padding: 25px; min-height: 85px;}
header.site-header .row{align-items: center;}
header.site-header .main-menu {
    margin:0;
    padding: 0;
    display: flex;
    list-style-type: none;
    background: #fff;
    justify-content: center;
    position: relative;
    
}

.home header.site-header .main-menu:before {
    position: absolute;
    left: -85px;
    content: "";
    border-top: 0 solid transparent;
    border-right: 85px solid #fff;
    border-bottom: 85px solid transparent;
    top: 0;
}
.home header.site-header .main-menu:after {
    position: absolute;
    right: -85px;
    content: "";
    border-top: 0 solid transparent;
    border-left: 85px solid #fff;
    border-bottom: 85px solid transparent;
    top: 0;
}
header.site-header .main-menu li {
    margin: 0;
    padding: 0;
}

header.site-header .main-menu li a {
    color: #000;
    display: inline-flex;
    padding: 5px 15px; text-decoration: none; border-bottom: 1px solid transparent;
}
header.site-header .main-menu li a:hover{border-bottom: 1px solid #000;}
header.site-header .header-right{text-align: right;}
header.site-header .custom-btn a{
  background: #E2D088;
  color: #000;
  border-radius: 30px;
  padding: 8px 22px;
  font-weight: 600;
  margin:0;
}
header.site-header .custom-btn a:hover{color: #fff; background: #000;}

.home header.site-header .header-top{display: none;}
header.site-header .header-top {
  background: #000;
  padding:0;
  margin: 0;
  color: #fff;
}

header.site-header .header-top .row {
  align-items: center;
}

header.site-header .social-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
  gap: 0;
}

header.site-header .social-list li {
  margin: 0;
  padding: 0;
}

header.site-header .social-list li a {
  display: flex;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

header.site-header .social-list li a.twitter:hover {background: #008ECB;}
header.site-header .social-list li a.facebook:hover {background: #1877F2;}
header.site-header .social-list li a.google:hover {background: #FF0000;}
header.site-header .social-list li a.linkedin:hover {background: #0077B5;}
header.site-header .site-brand img {height: 110px; width: auto;}
header.site-header .contact-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 15px;
}

header.site-header .contact-list a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

header.site-header .contact-list a i {
  color: #fff;
  padding-right: 5px;
}


/* ===== HERO CONTENT ===== */
.hero-content {
  padding: 250px 0 60px 0;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
}


.hero-content .hero-subtitle{
  font-size: 21px;
  margin-bottom: 30px;
}
.hero-content .custom-btn{margin:25px 0 0 0}
.hero-content .custom-btn a{
  background: #E2D088;
  color: #000;
  border-radius: 30px;
  padding: 15px 30px;
  display: inline-block;
  font-size:16px;
}
.hero-content .custom-btn a:hover{
  background-color: #000;
  color: #fff;
}
.banner-vertical-text {
  position: absolute;
  top: 0;
  right: 30px;
  writing-mode: vertical-rl;  
   
  font-size: 16px;
  color: #fff;    
  display: flex;
  gap: 20px;
  justify-content: center;
  z-index: 99;
  height: 100%;
}

.banner-vertical-text span {

  writing-mode: vertical-rl;  
   
  font-size: 16px;
  color: #fff;
  transform: rotate(180deg);

}

.banner-vertical-text span a {
  color: #fff;
  
}
.banner-vertical-text span a:hover{color:#E2D088}

.partners {
  background: #000;
  color: #fff;
  padding: 60px 0;
  border-radius: 0 0 16px 16px;
}

.partners .sub-title {
  color: #E2D088;  font-size:16px;
  margin-bottom: 10px;  position: relative;
}
.partners .sub-title:before{background: url(../images/white-arrow.png) no-repeat left bottom; position: absolute; width:27px; height:30px; left: -20px; bottom: -25px; content:""}
.partners h4 {
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
}

.partners h4 span {
  font-size: 56px;
}

.partners img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;  /* center image in its column */
}

.about{
  padding: 60px 0;
  position: relative;
}
.about .about-images{position: relative; padding-left: 60px;}
.about .list-items {margin: 0; padding: 0; display: flex; flex-wrap: wrap; list-style-type: none; flex-direction: column; justify-content: flex-end; gap: 15px; height: 100%; position: absolute; right: -15px; justify-content: center; top: 0;}
.about .about-images img{width:100%}
.about .list-items li {background: #fff; padding: 20px 15px; text-align: left; border-radius: 10px; box-shadow: 0px 0px 3px #ccc; font-size: 16px; position: relative;}

.about .list-items li i {background: #CFB54E; color: #fff; padding: 0; border-radius: 100%; width: 25px; display: inline-flex; height: 25px; align-items: center; justify-content: center; font-size: 14px; margin-right: 5px;}
.about .years {
    position: absolute;
    left: 0;
    bottom: 15px;
    background: #CFB54E;
    display: flex;
    flex-direction: column;
    padding: 15px;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    border-radius: 10px;
}

.about .years span {
    font-size: 16px;
    font-weight: normal;
}

.about .sub-title{
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 20px;
  color: #CFB54E;
}
.about h3{
  margin-bottom: 15px;
  font-size: 48px ;
  font-weight: 700;
}
.about h3 span{
  color: #CFB54E;
}
.about .custom-btn{
  margin-top: 50px;
}
.about .custom-btn a{
  background: #333;
  color: #E2D088;
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 16px;
  border: none;
  display: inline-block;
}
.about .custom-btn a:hover{background:#E2D088 ; color: #000;}

marquee {
  padding: 10px 0;
  color: #E2D088;
  padding: 10px 0;
  font-size: 120px;
  font-weight: 700;
   text-transform: uppercase;
}



.contact{
  position: relative;
  background: #333;
  color: #fff;
}
.contact:before {
    height: 30px;
    background: #fff;
    width: 100%;
    content: "";
    position: absolute;
    top: 0;
}

.contact:after {
    height: 30px;
    background: #fff;
    width: 100%;
    content: "";
    position: absolute;
    bottom: 0;
}
.contact h3{
  font-size: 42px;
  color: #E2D088;
  font-weight: 700;
  margin: 0 0 15px 0;
}
.contact .content-box{padding-right: 120px;}
.contact .contact-form{
  display: flex;
  justify-content: end;
}
.contact .contact-card{
  color: #000;
  background: #fff;
  padding: 45px; box-shadow: 0 0 5px #ccc;
    border-radius: 10px; position: relative;
}
.contact .contact-card label{
  font-size: 12px;
}
.contact .contact-card input{
  border-radius: 0;
  font-size: 16px;
  border: none;
  outline: none;
  border-bottom: 2px solid #D8DBDE;
  color: #000; font-weight: 500; padding: 0; margin: 0 0 30px 0;
}
.contact .contact-card input::placeholder{color: #000;}
.contact .contact-card textarea{
    border-radius: 0;
  font-size: 16px;
  border: none;
  outline: none;
  border-bottom: 2px solid #CFB54E;
}
.contact .contact-card .contact-label{
  color: #CFB54E;
}
.contact .contact-card .custom-btn {
  background: #333;
  color: #E2D088;
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 16px;
  margin: 30px 0 0 0; 
  border: none;
}
.contact .contact-card .custom-btn:hover{background: #E2D088; color: #000;}
.tribe-build.service-page{padding: 30px 0;}
.tribe-build {
    margin: 0;
    padding: 0 0 60px 0;
    background: #FFF;
    position: relative;
    width: 100%;
    color: #f5f0db;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 700;
}
.tribe-build .item{white-space: nowarp;}
.services{
  padding: 60px 0;
  position: relative;
  background: url("../images/roofing-service.png") no-repeat center center;
}
.services .img-box img{width:100%}
.services .sub-title{
    font-size: 16px;
  margin-bottom: 20px;
  color: #CFB54E;
  text-align: center;
}
.services h3{
    margin-bottom: 30px;
  font-size: 42px ;
  font-weight: 700;
  text-align: center;
}
.services .custom-btn a{
   background: #F4F3F8;
  color: #000;
  border-radius: 30px;
  padding: 15px 30px;
  font-weight: 600;
}
.services .custom-btn a:hover{
  background: #CFB54E;
}
.services .content-wrapper{
  padding:0 15px;
  z-index: 9;
}
.services .content{
  background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  z-index: 1 !important;
  min-height: 290px;
  position: relative;
  top:0;
  margin-top: -75px;
}
.services .content .icon-box {
    position: absolute;
    right: 0;
    background: #E3D4A0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    right: 15px;
    top: -16px;
    border-radius: 0 10px 10px 10px;
}

.services .content .icon-box:before {
    position: absolute;
    left: -15px;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #CFB54E;
    border-top: 8px solid transparent;
    content: "";
    top: 0;
    border-right: 8px solid #CFB54E;
}
.services .content .sub-heading{
   font-size: 12px;
   color: #CFB54E;
   font-weight: 500;
   margin-bottom: 5px;
}
.services .content h4{
   font-size: 18px;
   margin-bottom: 15px;
   font-weight: 700;
}
.services .content p{
   font-size: 14px;
   margin-bottom: 30px;
}

.services .img-wrapper{
  position: absolute;
  top: 40%;
  right: 0;
  z-index: -50;
}

.loyal{
  padding: 60px 0;
  position: relative;
  background: #333;
  color: #fff;
}
.loyal h3{
  font-size: 24px;
  color: #CFB54E;
  font-weight: 700;
}

.cta{
  padding: 60px 0;
  position: relative;
  background: #fff;
}
.cta.video-page{padding-top: 0;}
.cta .row{align-items: center;}
.cta h3{
  font-size: 42px;
  color: #E2D088;
  margin-bottom: 30px;
  font-weight: 600;
}
.cta .cta-wrapper{
  padding: 30px;
  border-radius: 16px;
  border: 1px solid #D8DBDE;
}
.cta .img-box{
  display: flex;
  align-items: center;
  justify-content: end;
}
.cta .custom-btn a{
  background: #333;
  color: #E2D088;
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 16px;
  border: none;
  display: inline-block;
}
.cta .custom-btn a:hover{background: #E2D088; color: #000;}

footer{
  padding:60px 0 15px 0;
  background: #CFB54E;
  color: #000;
}
footer hr{width: 100%; height: 4px; background: #000; position: absolute; top:-62px; border: none; margin: 0; opacity: 1;}
footer .social-list {
    margin:45px 0 0 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    gap: 25px;
    align-items: center;
}
footer .social-list li a:hover img{filter: brightness(0) invert(1);}

footer .social-list li{margin: 0; padding: 0; ;}
footer .nav-list{margin: 0; padding: 0; list-style-type: none}
footer .nav-list li{margin: 0 0 10px 0;}
footer .nav-list li a{
  font-size: 16px;
  margin-bottom: 10px;
  color: #000;
}
footer .nav-list li a:hover{color: #fff;}
.footer-bottom {
  text-align: end;
  padding: 20px 0;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-bottom a:hover {
  background: #000;
  color: #fff;
}


.latest-projects{
  background:#333;
  padding:0;
  position:relative;
  text-align:center;
}
.latest-projects:after {
    position: absolute;
    content: "";
    background: #fff;
    width: 100%;
    bottom: 0;
    height: 150px;
    left: 0;
}
.latest-projects::before{
  content:"TRIBE BUILT";
  position:absolute;
  top:50px;
  left:50%;
  transform:translateX(-50%);
  font-size:110px;
  font-weight:800;
  color:rgba(255,255,255,0.04);
  letter-spacing:6px;
  pointer-events:none;
   width: 100%;
}

.latest-projects .section-tag{
  color:#d4af37;
  font-size:14px;
  margin-bottom:10px;
}

.latest-projects .section-title{
  color:#fff;
  font-size:32px;
  font-weight:700;
  margin-bottom:50px;
  line-height: 36px;
}

.latest-projects .project-wrapper{
  position: relative
}
.latest-projects .owl-dots {
    text-align: center;
    position: relative;
    margin: 30px 0 0 0;
}

.latest-projects .owl-dots .owl-dot {
    position: relative;
    margin: 0 10px;
    width: 16px;
    height: 16px;
    background: #F5F1EF !important;
    border-radius: 100%;
    border: 1px solid #CFB54E;
}

.latest-projects .owl-dots .owl-dot:before {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #CFB54E;
    content: "";
    border-radius: 100%;
    left: 4px;
    top: 4px;
}

.latest-projects .owl-dots .owl-dot.active {
    background: #CFB54E !important;
}
.project-card{
  position:relative;
}
.project-card img{
  display:block;
  border-radius:8px;
  width:100%;
  height:auto;
}

.project-overlay{
  margin: 0 12px;
  border-radius:16px;
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.75), transparent 65%);
  opacity:0;
  transition:0.4s ease;
}


.text-top{
  position:absolute;
  top:20px;
  left:20px;
  color:#d4af37;
  font-weight:600;
  opacity:0;
  transform:translateX(-40px);
  transition:0.5s ease;
}

/* BOTTOM RIGHT TEXT */
.text-bottom{
  position:absolute;
  bottom:25px;
  right:20px;
  color:#fff;
  font-size:14px;
  opacity:0;
  transform:translateX(40px);
  transition:0.6s ease;
}

.project-card:hover .project-overlay{
  opacity:1;
}
.project-card:hover .text-top,
.project-card:hover .text-bottom{
  opacity:1;
  transform:translateX(0);
}

.slider-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:40px;
}
.slider-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#777;
}
.slider-dots span.active{
  background:#d4af37;
}


.service-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  cursor:pointer;
}

.service-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s ease;
}

/* Overlay */
.service-overlay{
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.701);
  opacity:0;
  transition:0.4s ease;
}

/* Top-left content */
.service-content{
  position:absolute;
  top:25px;
  left:25px;
  color:#fff;
  opacity:0;
  transform:translateX(-30px);
  transition:0.5s ease;
  padding: 10px;
  border-top: 3px solid #2196F3;
  border-left: 3px solid #2196F3;
  width: calc(100% - 70px);
}

.service-content .service-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#2196F3;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

/* Title & paragraph */
.service-content h5{
  font-weight:600;
  margin:0 0 8px 0;
  text-align: left;
}
.service-content p{
  font-size:14px;
  line-height:1.4;
  margin:0;
  text-align: left;
}

/* Bottom-right number */
.service-number{
  border-bottom: 3px solid #2196F3;
   border-right: 3px solid #2196F3;
  padding: 10px;
  position:absolute;
  bottom:25px;
  right:25px;
  font-size:50px;
  font-weight:700;
  color:rgba(255,255,255,0.3);
  opacity:0;
  transform:translateY(20px);
  transition:0.5s ease;
}

/* Hover effect */
.service-card:hover img{
  transform:scale(1.08);
}
.service-card:hover .service-overlay{
  opacity:1;
}
.service-card:hover .service-content,
.service-card:hover .service-number{
  opacity:1;
  transform:translate(0);
}







/*------------ 21 Dec 2025 ----------*/

.inner-banner {
  padding: 200px 0;
  margin: 0;
  background: url('../images/Frame\ 2121450024.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.inner-banner h1 {
  color: #fff;
  font-size: 72px;
  font-weight: 700;
  margin-bottom: 15px;
}

.inner-banner p {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 60px;
}

.inner-banner .custom-btn a {
  background: #E2D088;
  color: #000;
  border-radius: 30px;
  padding: 15px 30px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.inner-banner .custom-btn a:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.paragraph-section {
  padding: 60px 0;
  margin: 0;
  background: url('../images/klipartz.com\ -\ 2024-06-10T095744\ 3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.paragraph-section p {
  font-size: 18px;
  color: #707070;
  margin-bottom: 20px;
}

.paragraph-section p strong {
  font-weight: 700;
  font-size: 22px;
}

.paragraph-section .custom-btn {
  margin-top: 60px;
}

.paragraph-section .custom-btn a {
  background: #CD9933;
  color: #fff;
  border-radius: 30px;
  padding: 15px 30px;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.paragraph-section .custom-btn a:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.explain {
  padding: 60px 0;
  margin: 0;
  position: relative;
}

.explain {
  padding: 60px 0;
  margin: 0;
  position: relative;
}

.explain .sub-title {
  font-size: 20px;
  color: #707070;
  margin: 20px 0;
  text-transform: uppercase;
}

.explain h3 {
  font-size: 48px;
  font-weight: 700;
  color: #000;
  line-height: 50px;
}

.explain p {
  color: #707070;
  margin-bottom: 20px;
}

.explain .custom-btn {
  margin-top: 60px;
}

.explain .custom-btn a {
  background: #333;
  color: #E2D088;
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 16px;
  margin-top: 60px;
  border: none;
}

.explain .custom-btn a:hover {
  background: #E2D088;
  color: #000;
  text-decoration: none;
}

.explain .img-box {
  border-radius: 8px;
  position: relative;
}

.explain .img-box::after {
  position: absolute;
  content: '';
  right: 40px;
  bottom: -18px;
  background: #CFB54E;
  width: 150px;
  height: 150px;
  border-radius: 16px;
  z-index: -1;
}

.labouring {
  padding: 120px 0;
  margin: 0;
  background: url('../assets/labouring.png');
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.labouring p {
  color: #707070;
  margin-bottom: 60px;
}
.labouring p strong{color: #000; font-size: 18px;}

.cta {
  padding: 60px 0;
  position: relative;
  background: #fff;
}

.cta h3 {
  font-size: 56px;
  color: #E2D088;
  margin-bottom: 30px;
  font-weight: 600;
}

.cta .cta-wrapper {
  padding: 30px;
  border-radius: 16px;
  border: 1px solid #D8DBDE;
}

.cta .img-box {
  display: flex;
  align-items: center;
  justify-content: end;
}

.cta .custom-btn a {
  background: #333;
  color: #E2D088;
  border-radius: 30px;
  padding: 15px 30px;
  font-size: 16px;
  margin-top: 60px;
  border: none;
}


.about-banner {
  background: url('../images/about-banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.services-banner {
  background:url("../assets/service-banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.services-banner.inner-banner h1{color: #000;} 
.services-banner.inner-banner p{color: #000;}
.about-banner .text-box {
  padding-left: 120px;
}

.about-banner h1 {
  color: #000;
}

.about-banner p {
  color: #000;
}

.trevor-brown {
  padding: 60px 0;
  position: relative;
  background: url('../images/klipartz.com\ -\ 2024-06-10T095744\ 3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.trevor-brown .services-wrapper {
  padding: 0 0 0 180px;
}

.trevor-brown h3 {
  font-size: 46px;
  font-weight: 700;
  text-align: center;
}

.trevor-brown p {
  font-size: 16px;
  text-align: center;
}

.trevor-brown .img-wrapper {
  position: absolute;
  top: 23%;
  right: 0;
  z-index: -50;
}

.brain {
  padding: 60px 0;
  position: relative;
}

.brain .services-wrapper {
  padding: 0 180px 0 0
}

.brain h3 {
  color: #fff;
  font-size: 46px;
  font-weight: 700;
  text-align: center;
}

.brain p {
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.brain .img-wrapper {
  position: absolute;
  top: 23%;
  left: 0;
  z-index: -50;
}


.why-choose-us {
  padding: 60px 0;
  margin: 0;
  position: relative;
}

.why-choose-us .sub-title {
  font-size: 16px;
  color: #CFB54E;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 500;
}

.why-choose-us h3 {
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 700;
  color: #000;
  line-height: 50px;
  margin-bottom: 15px;
}

.why-choose-us h5 {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 30px;
  margin-top: 60px;
}

.why-choose-us .plus-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-choose-us .plus {
  padding: 20px 45px;
  font-size: 15px;
  position: relative;
}

.why-choose-us .plus::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 22px;
  width: 18px;
  height: 18px;
  background-image:url("../assets/right-icon.png");
  /* apni image ka path */
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0 10px;
}

.why-choose-us .tl {
  border-right: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}

.why-choose-us .tr {
  border-left: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}

.why-choose-us .bl {
  border-top: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
}

.why-choose-us .br {
  border-top: 1px solid #DDDDDD;
  border-left: 1px solid #DDDDDD;
}

.why-choose-us .img-box {
    position: relative;
    padding-right: 150px;
}
.why-choose-us .img-box:before {
    position: absolute;
    left: 0;
    bottom: -13px;
    width: 200px;
    height: 200px;
    background: #CFB54E;
    content: "";
    border-radius: 10px;
    z-index: -1;
}
.why-choose-us .img-box img {
    border-radius: 15px;
    width: 100%;
}

.why-choose-us .img-box .thumb {
    width: 200px;
    height: 200px;
    position: absolute;
    right: 0;
    top: 30px;
    border: 8px solid #fff;
    border-radius: 100% 100% 100% 0%;
    transform: rotate(45deg);
    object-fit: cover;
}

.why-choose-us .call-btn {
    position: absolute;
    right: 0;
    bottom: 30px;
}

.why-choose-us .call-btn a {
    background: #F5F1EF;
    border: 8px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
    color: #000;
    font-weight: 600;
}
.why-choose-us .call-btn a:hover{border-color: #333;}

.why-choose-us .call-btn a span {
    background: #CFB54E;
    padding: 11px;
    border-radius: 100%;
    height: 60px;
    width: 60px;
 
    margin-right: 10px;
}


.our-mission {
  padding:0;
  margin: 0;
  position: relative;
}

.our-mission .sub-title {
  font-size: 16px;
  text-align: center;
  margin-bottom: 100px;
  font-weight: 500;
}

.our-mission h2 {
  font-size: 48px;
  font-weight: 700;
  color: #000;
  line-height: 50px;
  margin-bottom: 15px;
  text-align: center;
}

.our-mission .quote {
  font-size: 120px;
  color: #0000002E;
  line-height: 50px;
}

.our-mission p {
  font-size: 16px;
  margin-bottom: 20px;
}

marquee {
  padding: 10px 0;
  color: #E2D088;
  padding: 10px 0;
  font-size: 120px;
  font-weight: 700;
  text-transform: uppercase;
}

.roffing-solution {
  padding: 0px 0 60px;
  margin: 0;
  position: relative;
}

.roffing-solution h3 {
  font-size: 60px;
  font-weight: 700;
  color: #000;
  margin-bottom: 40px;
}

.roffing-solution img {
  border-radius: 8px;
  margin-bottom: 15px;
}

.roffing-solution .image-overlap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.roffing-solution .img-main {
  position: relative;
  z-index: 1;
  width: 90%;
  align-self: flex-end;
}

.roffing-solution .img-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.services-section{
  padding: 60px 0;
  margin: 0;
  position: relative;
  background: #333  url("../images/service-query.png") no-repeat top center;
  background-size: cover !important;
  color: #fff;
  margin-bottom: 40px;

}
.services-section .sub-title {
  color: #CD9933;
  margin-bottom: 10px;
}
.services-section h2 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 15px;
}
.services-section .service-right{
  position: relative;
  right: 0;
  top: 100px;
  z-index: 999;
}
.services-section .service-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
}

.services-section .service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 350px;
}

.services-section .service-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent 60%);
  opacity: 0;
  transition: 0.4s ease;
}

.services-section .service-card .content,
.services-section .service-card .number {
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
}
.services-section .service-card .number {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 60px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.636);
}

.services-section .service-card .content {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
}

.services-section .service-card:hover .overlay {
  opacity: 1;
}

.services-section .service-card:hover .content,
.services-section .service-card:hover .number {
  opacity: 1;
  transform: translateY(0);
}


.blog{
  background: url('../images/blog.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.article{
  padding: 60px 0;
  margin: 0;
  position: relative;
   background: url('../assets/klipartz.com\ -\ 2024-06-10T095744\ 3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
.article .search-box input[type="search"]{background: url("../images/search-icon.png") no-repeat 10px center; width: 100%; border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px 130px 10px 35px;
    border-radius: 30px;}
.article .search-box input[type="submit"] {
    position: absolute;
    right: 5px;
    background: #CD9933;
    border: none;
    padding: 5px 25px;
    border-radius: 30px;
    color: #fff;
    top: 6px;
    text-transform: uppercase;
}
.article .search-box input[type="submit"]:hover{background: #000; color: #CD9933;}
.article .search-box form {
    position: relative;
}
.article h2{
  font-size: 42px;
  font-weight: 700;
  color: #000;
  margin-bottom: 30px;
}
.article .article-box{
  padding: 10px;
  border-radius: 16px;
  margin-bottom: 30px;
}
.article .article-box .time{
  font-size: 14px;
  color: #707070;
  margin: 5px 0 10px 0;
}
.article .article-box h3{
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}
.article .article-box p{
  font-size: 16px;
  color: #707070;
  margin-bottom: 20px;
}
.article .article-box .read-more{
  border-radius: 25px;
  border: 1px solid #CD9933;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #CD9933;
  text-decoration: none;
}
.article .article-box .read-more:hover{
  background: #000;
  color: #fff;
  text-decoration: none;
}
.article .article-box.left{
  margin-right: auto;
}
.article .article-box.right-side{
  display: flex;
  gap: 20px;
}


.blog-sec{
  padding:0;
  margin: 0;
  position: relative;
  z-index: 1;
}
.blog-sec h3{
  font-size: 42px;
  font-weight: 700;
  color: #000;
  margin-bottom: 30px;
}

.blog-sec .article-box{
  padding: 10px;
  border-radius: 16px;
  margin-bottom: 30px;
}
.blog-sec .article-box .time{
  font-size: 14px;
  color: #707070;
  margin: 5px 0 10px 0;
}
.blog-sec .article-box h3{
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-bottom: 15px;
}
.blog-sec .article-box p{
  font-size: 16px;
  color: #707070;
  margin-bottom: 20px;
}
.blog-sec .article-box .read-more{
  border-radius: 25px;
  border: 1px solid #0000001A;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
}
.blog-sec .article-box .read-more:hover{
  background: #000;
  color: #fff;
  text-decoration: none;
}
.blog-sec .article-box .read-more i {
    transform: rotate(-45deg);
}

.blog-sec .pagination {
    width: 100%;
    margin: 15px 0 0 0;
    padding: 25px 0 0 0;
    position: relative;
    justify-content: center;
    gap: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.blog-sec .pagination li a {
    border: none;
    color: #000;
    border-radius: 5px;
}

.blog-sec .pagination li a:hover {
    background: #CD9933;
    color: #fff;
}

.blog-sec .pagination li:last-child a, .blog-sec .pagination li:first-child a {color: #707070;}

.blog-sec .pagination li:last-child a:hover, .blog-sec .pagination li:first-child a:hover {background: transparent; color: #CD9933;}

.blog-sec .navigation.pagination {
    margin: 0;
    padding: 30px 0 0 0;
}

.blog-sec .navigation.pagination a {
    color: #000;
    padding: 10px;
    border-radius: 5px;
}

.blog-sec .navigation.pagination a:hover {
    color: #fff;
    background: #CD9933;
}

.blog-sec .navigation.pagination span {
    color: #707070;
}



.video-section {
            padding: 60px 0;
            margin: 0;
            position: relative;
            background: url('../images/klipartz.com - 2024-06-10T095744 3.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 1;
        }

        .video-section h2 {
            font-size: 48px;
            font-weight: 700;
            color: #000;
            margin-bottom: 50px;
        }

        .video-card {
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .video-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            background: #000;
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .video-info {
            padding: 20px;
        }

        .video-info h4 {
            font-size: 20px;
            font-weight: 600;
            color: #000;
            margin-bottom: 10px;
        }

        .video-info p {
            font-size: 14px;
            color: #707070;
            margin-bottom: 0;
        }

        .video-meta {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }

        .video-meta span {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .featured-video {
            padding: 60px 0;
            margin: 0;
            position: relative;
            background: #333;
            color: #fff;
        }

        .featured-video h3 {
            font-size: 48px;
            font-weight: 700;
            color: #E2D088;
            margin-bottom: 30px;
        }

        .featured-video p {
            font-size: 18px;
            color: #fff;
            margin-bottom: 40px;
        }

        .featured-video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .featured-video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .video-stats {
            padding: 0;
            margin: 0;
            position: relative;
            background: url('../assets/klipartz.com - 2024-06-10T095744 3.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .video-stats h3 {
            font-size: 42px;
            font-weight: 700;
            color: #000;
            margin-bottom: 50px;
            text-align: center;
        }

        .stat-box {
            text-align: center;
            padding: 30px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stat-box:hover {
            transform: translateY(-10px);
        }

        .stat-box .stat-number {
            font-size: 56px;
            font-weight: 700;
            color: #CFB54E;
            margin-bottom: 10px;
        }

        .stat-box .stat-label {
            font-size: 18px;
            color: #000;
            font-weight: 600;
        }

        .video-banner {
            padding: 150px 0;
            background: url('../images/Frame 2121450024.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1;
        }

        .video-banner h1 {
            color: #fff;
            font-size: 72px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .video-banner p {
            color: #fff;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 60px;
        }
        .video-banner .custom-btn a {
    background: #E2D088;
    color: #000;
    border-radius: 30px;
    padding: 15px 30px;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}
.video-banner .custom-btn a:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

        .contact-page {
        padding: 60px 0;
    }

    .contact-page h3 {
        font-size: 54px;
        font-weight: 700;
    }

    .contact-page h3 span {
        color: #CFB54E;
    }

    .contact-page .subtext {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .contact-page .form-group {
        margin-bottom: 20px;
    }

    .contact-page .input,
    .contact-page .select {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #E0E0E0;
        border-radius: 0px;
        font-size: 14px;
    }

    .contact-page .select-wrapper {
        position: relative;
    }

    .contact-page .submit-btn {
        background-color: #333;
        color: #CFB54E;
        padding: 12px 30px;
        border: none;
        border-radius: 25px;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease;
        margin-bottom: 60px;
    }

    .contact-page .submit-btn:hover {
        background-color: #000;
        color: #fff;
    }
     .contact-page   .contact-info-wrapper {
        display: flex;
        gap: 15px;
    }

    .contact-page .contact-icon {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .contact-page .contact-info h4 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 5px;
    }
 

    .contact-page .contact-info p {
        font-size: 14px;
        color: #CFB54E;
    }

    .contact-page::before{
        content: "";
        position: fixed;
        top: -100px;
        right: 0;
        width: 25%;
        height: 1100px;
        background: #333;
        z-index: -1;
    }
    
    
    
    
/*------------ Responsive -------------------*/
@media(min-width:1200px){

header.site-header {position:relative !important}
header.site-header.fixed{margin: 0; padding: 0; position: fixed; left: 0; top: 0; background: #fff; width: 100%;}
.home header.site-header{position:absolute !important; background:transparent}
.home header.site-header.fixed{position:fixed; background:#fff; margin:0}
.home header.site-header.fixed-header .main-menu{margin:0}
header.site-header.fixed-header.fixed{position:relative !important}
header.site-header.fixed-header{margin: 0; padding: 0; position: fixed !important; left: 0; top: 0; background: #fff; width: 100%; border-bottom:1px solid #ccc}
/*.contact-page{padding-top:210px !important}*/
/*.inner-banner{padding-top:350px !important}*/
}

@media(min-width:768px){
header.site-header .header-menu .mobile-menu{display:none !important}
}


@media(max-width:767px){
.hero-section .hero-content{padding:130px 45px 30px 15px}
.hero-section .hero-content h1{        font-size: 30px;
        margin-top: 20px;}
.hero-section .banner-vertical-text{right:15px}
header.site-header .header-top{padding-top:10px; margin-bottom:0}
header.site-header .social-list, header.site-header .contact-list{justify-content:center}
header.site-header .site-brand img {max-width: 130px;}
header.site-header .header-right{display:none}
header.site-header .header-menu .mobile-menu {opacity: 1; position: absolute; z-index: 9; right: 15px; top: 22px; background: #CFB54E; padding: 5px 10px; border-radius: 5px;}
header.site-header .main-menu {display: none; position: absolute; left: 0; top: 85px; z-index: 9; width: 100%; background: #CFB54E; padding: 0 15px;}
header.site-header .header-menu .mobile-menu .bar1, header.site-header .header-menu .mobile-menu .bar2, header.site-header .header-menu .mobile-menu .bar3 {width: 35px; height: 3px; background-color: #000; margin:5px 0; transition: .4s;}
header.site-header .header-menu .mobile-menu.close .bar2 {opacity: 0;}
header.site-header .main-menu li{border-bottom:1px solid #9b8324}
header.site-header .header-menu .mobile-menu.close .bar1 {transform: translateY(8px) rotate(-45deg);}
header.site-header .header-menu .mobile-menu.close .bar3 {transform: translateY(-8px) rotate(45deg);}
header.site-header .main-menu li:last-child{border-bottom:none}
header.site-header .main-menu li a{padding:10px 0}

    
.cta, .loyal, .services, .contact, .about, .partners, .why-choose-us, .brain {padding:30px 0}
.contact-page{padding:30px 0; border-top:1px solid #ccc}
.trevor-brown{padding: 30px 0 0 0;}
.cta h3, .services h3, .contact h3, .about h3, .partners h4, .contact-page h3, .our-mission h2{font-size:32px}
.services{background-image:none !important}
.services .content{min-height:auto}
.services .services-wrapper [class*="col-"]{margin-bottom:15px}
.services .services-wrapper [class*="col-"]:last-child{margin-bottom:0}
.contact:before, .contact:after{display:none}
.contact-page .submit-btn{margin-bottom:0}
.contact .contact-card{padding:15px; box-shadow:none}
.tribe-build{padding-bottom:30px; font-size:36px}
.about .about-images{padding-left:calc(var(--bs-gutter-x) * .5); display:flex; flex-wrap:wrap}
.about .list-items{position:relative; left:0; right:auto; margin:15px 0 0 0; order:3; width:100%}
.about .about-images .years{order:1; position:relative; width:100%; bottom:auto; margin-bottom:15px}
.about .about-images a{order:2}
.about .custom-btn{margin:15px 0}
.main-wrapper{padding:0}
.partners{border-radius:0}
footer{padding:30px 0 15px 0; border-top:2px solid #000}
footer hr{display:none}
footer .site-brand{margin-bottom:15px}
.latest-projects::before{display:none}
.contact-page::before{display:none}
.about-banner h1, .about-banner p{color:#fff}
.inner-banner h1{font-size:42px}
.about-banner .text-box{padding-left:calc(var(--bs-gutter-x) * .5)}
.inner-banner{padding:45px 0}
.inner-banner:before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.4); z-index: -1;}
.inner-banner p{font-size:16px; margin-bottom:30px}
.cta .custom-btn a{margin-top:0}
.cta .cta-wrapper{padding:15px}
.our-mission .quote{font-size:60px; line-height:30px}
.our-mission p.fw-semibold, .our-mission .sub-title{margin-bottom:30px !important}
.why-choose-us .img-box{padding-right: calc(var(--bs-gutter-x) * .5); overflow:hidden}
.why-choose-us .img-box .thumb{width:100px; height:100px; top:80px}
.why-choose-us .call-btn{position:relative; margin:15px 0 0 0; bottom:auto; width:100%}
.why-choose-us .img-box:before{display:none}
.why-choose-us .plus-list{margin:0 0 15px 0; padding:20px 30px}
.why-choose-us .plus-list .plus{border:none !important; border-bottom:1px solid #DDDDDD !important}
.why-choose-us .plus-list .plus:last-child{border-bottom:none !important}
.why-choose-us .plus::before{left:0}
.brain .img-wrapper, .trevor-brown .img-wrapper{display:none}
.brain .services-wrapper {padding: 15px; background:#333; border-radius: 15px;}
.trevor-brown .services-wrapper{padding: 15px; background:#e2d088; border-radius: 15px;}
.trevor-brown h3, .brain h3{font-size:30px}
.brain .services-wrapper .col-md-4{order:2}
.brain .services-wrapper .col-md-8{order:1}
.trevor-brown .services-wrapper img, .brain .services-wrapper img{width:100%}
.why-choose-us .call-btn a{justify-content: flex-start;}
	  .roffing-solution {
    padding: 20px 0 40px;
  }

  .roffing-solution h3 {
    font-size: 32px;        /* desktop 60px → mobile friendly */
    line-height: 1.2;
    margin-bottom: 20px;
    text-align: center;
  }

  .roffing-solution .image-overlap {
    justify-content: center;   /* right se center */
  }

  .roffing-solution .img-main {
    width: 100%;
  }

  .roffing-solution .img-overlay {
    position: relative;    /* absolute hata diya mobile pe */
    bottom: auto;
    right: auto;
    margin-top: -40px;     /* thoda overlap feel */
    width: 70%;
    align-self: center;
  }

  .roffing-solution img {
    border-radius: 6px;
  }
}