.sprite{background:url("assets/images/sprite.png") no-repeat;}
.top-bar{background-color: #f5f5f5;}
.main-header{border-bottom:1px solid #dbdbdb}
#menu-mobile-slide{display: none;}
#hero-banner{height:90vh; max-height:750px; background:url("assets/images/hero-banner-bg.png") no-repeat #f5f5f5; background-repeat: none; background-size: cover;}
#hero-banner .container{height:100%;}
.whatsapp-color-bg{background-color: #25D366 !important;}
.black-color-bg{background-color:#000 !important}
.text-black-hfix{color:#000 !important}
.bg-warning-hfix{background: #FFDD00 !important;}
.text-warning-hfix{color: #FFDD00 !important;}
.text-muted-hfix{color: #757575;}
.text-hover-warning {transition: color 0.3s ease;}
.text-hover-warning:hover{color: #FFDD00 !important;}
.yellow-square-box{display: inline-block; width:11px; height:11px;}
.error{color:#f00; font-size: 12px}
.note{font-size: 10px; color: #757575; font-style: italic;}

.logo img{max-width: 100px;}

.step-box{width: 60%; margin: 0 auto;}
    .step-box h3{font-size: 20px;}
    .step-box p{color: #757575;}
    .step-box-inner{display: inline-block; width:150px; height: 150px; box-shadow: 0px 4px 38.70000076293945px rgba(0, 0, 0, 0.08); position: relative }
    .step-box-inner img{width:50px; height:50px; position: absolute; left:50%; top:50%; margin-left:-25px; margin-top:-25px}
    .step-box-inner .count{width:25px; height:25px; display: block; position: absolute; right:0%; top:0%}

#trusted-handyman ul{list-style: none; margin:0%; padding:0%}
#trusted-handyman ul li {
  display: flex;
  align-items: center; /* perfect vertical alignment */
  gap: 10px;
}
#show-search-btn{display: inline-block; cursor: pointer;}
#search-box{display:none}
#search-box.active{display:block}
#search-header-field{border-bottom:2px solid #B1B1B1; padding: 100px 0 10px 0;}
#search-header-field input[type="text"]{width:80%; font-size:20px; color:#575757}
#search-header-field input[type="text"]:focus {outline: none; border: none;}
#search-header-field button{position: absolute; right:0%; bottom: 10px;}
.close-search-field{width:35px !important; height:35px !important; display: inline-block; border-radius: 50%; background-color:#F0F0F0; text-align: center; cursor: pointer; position: absolute; right:0%; top: 20px; background:url("assets/images/close-x.png") no-repeat #f5f5f5; background-repeat: none;}

.close-search-field:hover{background-color:#CCCCCC}
#suggestions-box {
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}

#suggestions-box .list-group-item {
    border: none;
    padding: 10px 15px;

}

#suggestions-box .list-group-item:hover {
    background-color: #f8f9fa;
    color: #FFDD00; /* Matching your theme color */
}
#trusted-handyman ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("assets/images/up-right-arrow-ordered-style.png") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
}
#trusted-handyman p{color:#757575; border-bottom: 1px solid #ededed; padding-bottom: 30px;}
.phone_calling_bg{border-radius: 50%;}

#home-popular-services{background-color: #f9f9f9;}
#home-popular-services-categories ul{margin: 0%; padding: 0%;}
#home-popular-services-categories ul li{background-color: #FFFAF6; cursor: pointer; transition: background-color 0.3s ease;}
#home-popular-services-categories ul li:hover{background-color:#FFDD00}
#home-popular-services-categories ul li.active{background-color:#FFDD00}
#single-page-hero-info{padding:100px 0}
.single-page-hero-info-inner{width: 70%;}
#service-title-img{position: absolute; right: 0%;}
#service-title-img img{width:350px; max-width:100%; top:50%; margin-top: -225px;}
.services-box{background-color: #fff; height: 100%; transition: background-color 0.3s ease;}
.services-box:hover{background-color:#FFDD00}
.services-box .link{color:#000; text-decoration:none;}
.services-box:hover .btn-warning{background-color: #fff !important; border-color: #fff !important;}

#quote-banner{overflow: hidden;}
#free-quote-right{background:url("assets/images/free_quote_bg.png") no-repeat;}
#free-quote-left{background:url("assets/images/contact-us-section-mask.png") no-repeat #000000; overflow: hidden;}
    #repairman-img{position: absolute; right:0%}

#gallery-section #thumbs{margin: 0%; padding: 0%; list-style: none;}
#gallery-section #thumbs li{display: inline-block; border:5px solid #fff; transition: border 0.3s ease; cursor: pointer;}
#gallery-section #thumbs li:hover{display: inline-block; border:5px solid #FFDD00}

.ba-container {
  position: relative;
  overflow: hidden;
  height: 500px;
  cursor: ew-resize;
}

.ba-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #fff;
  transform: translateX(-50%);
}

.slider-handle::after {
    content: "\F695"; /* bootstrap icon unicode */
    font-family: "bootstrap-icons";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    background: #fff;
    padding: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 48px;
}

/* Thumbnails */
.thumbs img {
  width: 100%;
  margin-bottom: 10px;
  cursor: pointer;
  border: 3px solid transparent;
}

.thumbs img.active {
  border-color: #ffc107;
}

#happy-customer-section{background:url("assets/images/happy-to-serve-bg.png") no-repeat; background-size: cover;}
#happy-customer-section .info{background:url("assets/images/happy-customer-mask.png") no-repeat #FFDD00; max-width: 500px;}

.hire-us-box{background-color: #FFF8F3; padding:30px}

#cant-find-service-section-inner{background:url("assets/images/cant-find-service-bg.png") no-repeat; background-size: cover;}
#cant-find-service-section-inner h2{width: 50%;}
#cant-find-service-section ul{margin:0%; padding:0%; list-style: none; align-items: center;}
#cant-find-service-section ul li{display: inline-block;}
#cant-find-service-section ul li:not(:last-child)::after {
      content: "\F309";
      font-family: "bootstrap-icons";
      color: #000;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 30px;
      line-height: 40px;
    }

#cant-find-service-section ul li a{font-size: 30px; color:#000; text-decoration: none;}
#customer-reviews-section{background-color: #f9f9f9;}

#free-quote-form-right{background:url("assets/images/free-quote-pattern.png") repeat;}

.blog-post-item{border-bottom: 1px solid #ececec; padding-bottom: 20px; position: relative;}
.blog-post-item .link{text-decoration: none;}
.blog-post-item .category-link:after{content: "\F309"; font-family: "bootstrap-icons"; margin-left: 10px; margin-right: 10px;}
.blog-post-item .border-yellow{width:75px; height: 4px; background-color: #FFDD00; position: absolute; bottom: 0%;}

.blog-post-item .blog-post-item-thumb{position:relative}
.category-blog-post{position: absolute; background:#FFDD00; right:10px; top:10px}
.category-blog-post a{color:#000; text-decoration:none;}
.writer-thumb{background-color: #000; width:60px; height: 60px; border-radius: 50%; line-height: 60px;}
.writer-thumb img{margin-top: 12px;}
.post-single-content-category-link{color:#FF7700; text-decoration: none;}
#post-content{font-size: 18px; color:#757575}
#post-content h2, #post-content h3, #post-content h4{color:#000}
#post-content a{color:#FF7700;}
#post-banner img{border:1px solid #EDEDED}
.sidebar-box{border:1px solid #DBDBDB}
    .sidebar-box ul.categories{margin:0%; padding:0%}
    .sidebar-box ul.categories li a{font-size:18px; text-decoration: none;}
    .sidebar-box ul.categories li a span.text{color:#757575}
.related-posts{padding:0%; margin:0%}
    .related-posts img{border:1px solid #EDEDED}
    .related-posts a{color:#000; text-decoration: none;}
    .related-posts a:hover{color:#FFDD00}
    .related-posts .date{font-size: 12px;}

/****************************
* SINGLE SERVICE
*****************************/
#single-page-hero-banner{height:auto; background:url("assets/images/hero-bg-element.png") no-repeat;}
#single-page-hero-banner .container{height:auto}
#single-page-hero-banner h1{width:80%; font-size: 60px;}
.breadcrumb-item::before{margin:7px 0 !important}
.breadcrumb-item{font-size: 12px;}
.breadcrumb-item a{color:#6B6B6B; text-decoration: none;}
.breadcrumb-item.active{font-style: italic;}
.services-include-summary{width: 70%; margin:0%; padding:0%}
.services-include-summary li{width: 45%; margin-bottom: 10px;}
.services-include-summary li::before {
    content: "\F144";
    font-family: "bootstrap-icons";
    flex-shrink: 0;
    margin:0 10px 0 0;
}
.offer-service-box{width:auto; max-width:70%; display: inline-block;}
.offer-service-box-inner{width:100%; background-color: #fff; border:1px solid #FFDD00; padding: 30px;}
.offer-service-box p{font-style: italic; font-size: 12px;}
.price-starts-box{border-right:1px solid #ececec}
.single-package-why-hire-us-section .container{position: relative;}

#upload-quotation-image{width:100%; background: #fff; height:120px; cursor: pointer; border:2px dashed #E0E0E0}
#upload-quotation-image:hover{background:#fff6da}

#request-quote{width:80%; background-color: #1F1F1F;}
#banner-ads{width:80%; background:url("assets/images/banner-ads-mask.png") no-repeat #1F1F1F; background-size: cover;}
#related-services{background-color: #fef1e5;}
.related-services-link{background-color: #fff; color:#000; text-decoration: none; transition: background-color 0.3s ease;}
.related-services-link:hover{background-color: #FFDD00;}
#our-finished-projects{background-color: #fef1e5;}

.gallery-item {
    position: relative;
    overflow: hidden;
    width: 300px;   /* adjust */
    height: 400px;  /* adjust */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover overlay */
.gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background: rgba(255, 179, 0, 0.75); /* yellow transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

/* Text */
.gallery-item .overlay a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hover effect */
.gallery-item:hover .overlay {
    width: 100%;
}

.gallery-item:hover .overlay a {
    opacity: 1;
}

#page-banner-section{position: relative; height: 60vh; max-height: 400px;}
#page-banner-section .container,#page-banner-section .container .d-flex{height: 100%;}
#page-banner-section h1{font-size: 70px; line-height: 1;}
#page-banner-section #nav-breadcrumbs{position: absolute; left:0%; bottom:20px; text-align: center; color:#ffffff}
#page-banner-section #nav-breadcrumbs ol{display: block; color:#ffffff}
#page-banner-section #nav-breadcrumbs li{display: inline-block !important; color:#fff}
#page-banner-section #nav-breadcrumbs li a{color:#fff}
#page-banner-section #nav-breadcrumbs li.breadcrumb-item+.breadcrumb-item::before{color:#fff !important; fill:#ffffff !important}

#check-service-availability-section{background-color: #f9f9f9;}
.call-us-box{width:70%; background-color: #fff; border-left:2px solid #FFDD00}
.address-hfix-info p{margin-bottom: 5px;}

#small-touch-up-section{background:url("assets/images/contact-us-section-mask.png") no-repeat #000000; background-size: cover;}
#small-touch-up-section .thumb-circle-clients{width:128px; height:41px}
.outlined {
  font-size: 120px;
  font-weight: 900;
  color: transparent; /* no fill */
  -webkit-text-stroke: 1px #FFD400; /* yellow outline */
}

#testimonial-section{background-color:#f9f9f9}
    .testimonial-card {
      background: #fff;
      border-radius: 10px;
      padding: 25px;
      height: 100%;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      transition: 0.3s;
    }

    .testimonial-card:hover {
      transform: translateY(-5px);
    }

    .quote {
      font-size: 30px;
      color: #ccc;
    }

    .stars {
      color: #000;
      font-size: 14px;
    }

    .avatar {
      width: 40px;
      height: 40px;
      background: #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: yellow;
      font-size: 18px;
    }

    .name {
      font-weight: 500;
      margin-left: 10px;
    }

.packages-offer-box{position:relative; height:100%;  border:1px solid #E3E3E3; }
    .card-top{position:absolute; top: 0%; left:0%; width:100%; height: 50%; z-index: 1;}
    .card-top.ver1{background: linear-gradient(155deg,#ece8d7 0%, #f5f4eb 30%, #ffffff 60%);}
    .card-top.ver2{background: linear-gradient(155deg,#CFD6E1 0%, #E0E5EC 30%, #ffffff 60%);}
    .card-top.ver3{background: linear-gradient(155deg,#E6C5C4 0%, #EED8D7 30%, #ffffff 60%);}
    .card-top.ver4{background: linear-gradient(155deg,#F3FBCA 0%, #F8FDE1 30%, #ffffff 60%);}
    .card-body{position: relative; z-index: 2;}

.download-bg{background:url("assets/images/bg_download.png") no-repeat #000000; background-size: cover;}
.brochure-bg{background:url("assets/images/brochure.png") no-repeat #000000; background-size: cover;}
.download-bg h2{font-size: 50px;}

.packages-offer-box ul{margin:0%; padding: 0%;}
.packages-offer-box ul li:before{content: "\F26B"; font-family: "bootstrap-icons"; color: #ebc200; margin-right: 10px;}
.learn-more-package-link{font-size:14px; text-decoration: none;}
.learn-more-package-link:hover{color:#000}

#contact-form-right{background-color:#fff}

#contact-us-section{background:url("assets/images/contact-us-section-mask.png") no-repeat #000000; background-size: cover;}
#footer-section h4{font-size: 18px;}
#footer-section ul{margin: 0%; padding:0%; list-style: none;}
#footer-section ul li{margin-bottom: 5px;}
#footer-section ul li a{color:#757575; text-decoration: none; font-size: 14px; transition: color 0.3s ease;}
#footer-section ul li a:hover{color: #FFDD00 !important;}
#footer-sub{color:#a2a2a2; font-size: 12px;}
#footer-social a{display: inline-block; border-radius: 50%; border:1px solid #a2a2a2; padding:10px; color:#a2a2a2; transition: color 0.3s ease;}
#footer-social a:hover{background-color: #000; border-color: #000; color: #FFDD00 !important;}

#footer-services{background:#f3f3f3}
#footer-services ul{margin: 0%; padding:0%; list-style: none;}
#footer-services ul li{display: inline-block; width:30%; vertical-align: middle;}
#footer-services ul li a{color:#757575; text-decoration: none; font-size: 12px; transition: color 0.3s ease;}
#footer-services ul li a:hover{color: #FFDD00 !important;}
#partners-link a{color:#a2a2a2; transition: color 0.3s ease;}
#partners-link a:hover{color: #FFDD00 !important;}

@media (max-width: 768px) {
    .mobile-100{width: 100% !important}
    .logo img{max-width: 75px;}
   .main-header .nav{display: none;}

   #hero-banner{height: 80vh;}
   #hero-banner .call-to-action{display: block; width:100%; margin-bottom: 10px;}
   #hero-banner #hero-mobile-banner{width: 90%; margin: 0 auto; text-align: center;}
   #page-banner-section{max-height: 250px;}
   #page-banner-section h1{font-size: 30px;}
   .step-box{width:100%}
   .step-box-inner{width:90px; height: 90px; box-shadow: 0px 4px 38.70000076293945px rgba(0, 0, 0, 0.08); position: relative;}
   .step-box-info{text-align: left;}
   #gallery-section #thumbs li img{width:50px}
   #cant-find-service-section-inner h2{width:100%}
   #cant-find-service-section ul{display: flex; gap: 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;}
    #cant-find-service-section ul li a{font-size: 25px;}
    #free-quote-form-left{display: none;}
    #menu-mobile-slide{height:100vh; width:75%; position: fixed; z-index:9999; top:0%; right:-100%; background-color: #fff; display: block; transition: right 0.4s ease;  overflow-y: auto;}
    #close-menu{display: inline-block; padding:10px; background:#F0F0F0; border-radius: 50%; cursor: pointer; text-align: center;}
    #menu-mobile-slide ul.menu{margin:30px 0 0; padding:0%; list-style: none;}
    #menu-mobile-slide ul.menu li{padding:10px; font-size: 18px; border-bottom:1px solid #E9E9E9}
    #menu-mobile-slide ul.menu li:last-child{border-bottom: none;}
    #menu-mobile-slide ul.menu li a{color:#000; text-decoration: none; font-weight: 500; text-decoration: none;}
    #menu-mobile-slide #registered-trademark{position: absolute; bottom:20px; color:#717171}
    #menu-mobile-slide.active {right: 0;}
    #menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0;
        visibility: hidden;
        transition: all 0.35s ease;
        z-index: 9998;
    }
    #menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    #login-menu-banner{background:radial-gradient(circle at top left, rgba(255,255,255,0.08) 1px, transparent 1px),
        linear-gradient(135deg, #d6d000 0%, #c98a00 45%, #e07b00 100%); background-size: 20px 20px, cover;}
    #single-page-hero-banner{height:auto; max-height:unset !important; padding-bottom: 20px; background-repeat: repeat-y; margin-bottom: 50px;}
    .single-page-hero-info-inner{width: 100%;}
    #single-page-hero-banner .container{height: unset;}
    #single-page-hero-info{width: 100%; padding: 30px 0 0 0;}
        #single-page-hero-info h1{font-size: 25px; width:100%; text-align: center;}
    .services-include-summary li{width:100%}
    .offer-service-box{width:100%; max-width:100%}
    .offer-service-box button{width:100%; margin-top:20px}
    .single-package-why-hire-us-section .container{height: auto;}
    .single-package-why-hire-us-section .container .row{position: relative; top: unset;}
    #request-quote{width: 100%;}
    #banner-ads{width:100%}
    .gallery-item {position: relative; overflow: hidden; width: 100%;   /* adjust */ height: 200px;  /* adjust */ }
    #footer-section .logo{width:100px; display: inline-block;}
    #free-quote-form-right{width: 100%;}
    #service-title-img{position: relative; right: unset;}
    #service-title-img img{width:auto; top:unset; margin-top: unset;}

    #request-form-quotation button{width:100%}
    .download-bg h2{font-size: 25px;}
    .brochure-bg{height: 300px;}
    .call-us-box{width:100%}
    #footer-services ul li{display: inline-block; width:45%}
}