body {
    overflow-x: hidden;
}

/********** Template CSS **********/


.back-to-top {
    position: fixed !important;
    display: none;
    left: 45px;
    bottom: 45px;
    z-index: 99;
}

/*** Fonts ***/
.font-work-sans {
    font-family: "Work Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.font-playfair-display {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.font-dancing-script {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 2.5rem;
}


/*** Button ***/
.btn {
    position: relative;
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-dark,
.btn-primary {
    margin: 10px;
}

.btn-primary::before,
.btn-primary::after {
    position: absolute;
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    top: -5px;
    left: -5px;
}

.btn-primary::before {
    top: -10px;
    height: calc(100% + 20px);
    border-left: 2px solid var(--bs-primary);
    border-right: 2px solid var(--bs-primary);
}

.btn-primary::after {
    left: -10px;
    width: calc(100% + 20px);
    border-top: 2px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

.btn-dark::before,
.btn-dark::after {
    position: absolute;
    content: "";
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    top: -5px;
    left: -5px;
}

.btn-dark::before {
    top: -10px;
    height: calc(100% + 20px);
    border-left: 2px solid var(--bs-dark);
    border-right: 2px solid var(--bs-dark);
}

.btn-dark::after {
    left: -10px;
    width: calc(100% + 20px);
    border-top: 2px solid var(--bs-dark);
    border-bottom: 2px solid var(--bs-dark);
}


/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
}

.navbar .navbar-nav .nav-link {
    margin: 0 12px;
    padding: 0;
    outline: none;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bs-dark);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.active {
    color: #6f1d1b;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item.active {
    color: #000;
    font-weight: 600;
    background: var(--bs-primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.navbar .btn-primary {
    border-width: 2px;
    background: var(--bs-light);
}

.navbar .btn-primary:hover {
    background: var(--bs-primary);
}


/*** Hero Header ***/
.hero-header {
    background: url(../img/hero-bg.jpg) top left no-repeat;
    background-size: cover;
}

@media (min-width: 992px) {
    .hero-header .container {
        max-width: 100% !important;
    }

    .hero-header .hero-header-text {
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }
}

@media (min-width: 1200px) {
    .hero-header .hero-header-text {
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }
}

@media (min-width: 1400px) {
    .hero-header .hero-header-text {
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }
}

.header-carousel .owl-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: center;
    display: flex;
    justify-content: center;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: relative;
    margin-left: 2px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-dark);
    background: var(--bs-primary);
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    color: var(--bs-white);
}

.page-header {
    background: url(../img/page-header.jpg) top center no-repeat;
    background-size: contain;
}


/*** Service ***/
@media (max-width: 768px) {
    .service .service-item {
        border: none !important;
        box-shadow: 0 0 45px rgba(0, 0, 0, .05);
    }
}

@media (min-width: 992px) {
    .service .service-item.border-lg-end {
        border-right: 1px solid #dee2e6;
    }

    .service .service-item.border-lg-end-0 {
        border-right: none !important;
    }

    .service .service-item.border-lg-bottom-0 {
        border-bottom: none !important;
    }
}

.service .service-item .btn-primary {
    border-width: 2px;
    background: var(--bs-white);
}

.service .service-item .btn-primary:hover {
    background: var(--bs-primary);
}

.service .service-item img {
    width: 70px;
    margin-bottom: 20px;
}


/*** Pricing ***/
.price .price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, .05);
    padding: 1.2%;
}


/*** Blog ***/
.blog .btn-dark {
    border-width: 2px;
    background: var(--bs-primary);
    color: var(--bs-dark);
}

.blog .btn-dark:hover {
    background: var(--bs-dark);
    color: var(--bs-white);
}


/*** Gallery ***/
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery .gallery-item img {
    transition: .5s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.gallery .gallery-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .7);
    transition: .5s;
    z-index: 1;
}

.gallery .gallery-item:hover .gallery-icon {
    width: 100%;
    height: 100%;
}

.gallery .gallery-icon .btn {
    opacity: 0;
    transition: .5s;
}

.gallery .gallery-item:hover .gallery-icon .btn {
    opacity: 1;
    transition-delay: .5s;
}


/*** Team ***/
.team {
    position: relative;
}

.team::before {
    position: absolute;
    content: "";
    width: 200%;
    height: 200px;
    top: 50%;
    left: -50%;
    transform: translateY(-50%);
    margin-top: 1rem;
    background: #252525;
}

.team-item img {
    transition: .5s;
}

.team-item:hover img {
    transform: scale(1.2);
}

.team-overlay {
    position: absolute;
    padding: 5px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    text-align: center;
    background: rgba(75, 4, 4, 0.493);
    transition: .5s;
    z-index: 1;
}

.team-item:hover .team-overlay {
    background: rgba(27, 0, 0, 0.9);
}

.team-overlay p {
    letter-spacing: 1px;
    color: #fff !important;
    font-size: 30px;
    font-family: "Dancing Script", cursive;
    font-weight: 800;


}

.team-overlay .btn-dark {
    border-width: 2px;
    color: var(--bs-dark);
    background: transparent;
}

.team-overlay .btn-dark:hover {
    color: var(--bs-white);
    background: var(--bs-dark);
}


/*** Testimonial ***/
.testimonial-carousel .testimonial-box {
    min-height: 420px;
    /* force equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-carousel .testimonial-box p {
    flex-grow: 1;
    font-size: 16px;
    /* balance text height */
    font-weight: 600;
    letter-spacing: 1px;
}

.testimonial-carousel img {
    max-height: 80px;
    /* uniform image size */
    object-fit: cover;
}



.testimonial-carousel .owl-item {
    position: relative;
}

.testimonial-carousel .owl-item::before {
    position: absolute;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .1;
}

.testimonial-carousel .owl-item img {
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.testimonial-carousel .owl-item,
.testimonial-carousel .owl-item * {
    transition: .5s;
}

.testimonial-carousel .owl-item span {
    letter-spacing: 2px;
}

.testimonial-carousel .owl-item.center .bg-light {
    background: var(--bs-primary) !important;
}

.testimonial-carousel .owl-item.center .bg-light * {
    color: var(--bs-dark) !important;
}

.testimonial-carousel .owl-nav {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    margin: 0 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--bs-dark);
    background: var(--bs-primary);
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--bs-white);
    background: var(--bs-dark);
}





/*  */

.badge {
    color: #000 !important;
    font-size: 18px !important;
    letter-spacing: 1px;
}

.accordion-button {
    color: #000 !important;
    font-family: "Work Sans", sans-serif !important;
    font-weight: 800;
}

#obfuscatedEmail a {
    color: #000 !important;
}

/* ===== Floating service cards: responsive behavior ===== */

/* Base look (works with your existing classes) */
.service-float{
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: .9rem 1rem;
  max-width: 260px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-float:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.service-float i[class*="fa"]{ margin-right:.5rem; color: #6f1d1b; }

/* Desktop/Large (default absolute positions) */
@media (min-width: 1200px){
  .service-1{ top: 6%;   left: 7%;  }
  .service-2{ top: 8%;   right: 7%; }
  .service-3{ top: 40%;  left: 4%;  }
  .service-4{ top: 42%;  right: 4%; }
  .service-5{ bottom: 8%; left: 9%; }
  .service-6{ bottom: 8%; right: 9%; }
}

/* Laptop / Medium desktops */
@media (min-width: 992px) and (max-width: 1199.98px){
  .service-1{ top: 6%;   left: 4%;  }
  .service-2{ top: 6%;   right: 4%; }
  .service-3{ top: 40%;  left: 2%;  }
  .service-4{ top: 40%;  right: 2%; }
  .service-5{ bottom: 6%; left: 5%; }
  .service-6{ bottom: 6%; right: 5%; }
  .service-float{ max-width: 240px; }
}

/* Tablet: convert overlay cards to a tidy 2-column grid under the image */
@media (min-width: 768px) and (max-width: 991.98px){
  /* Turn the container into a grid so image sits on top, cards flow below */
  .position-relative{
    /* display: grid; */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .position-relative > img{
    grid-column: 1 / -1;   /* image spans full width */
    margin-bottom: .5rem;
  }
  .position-relative .service-float{
    position: static;      /* stop overlay; make them flow */
    max-width: 100%;
    width: 100%;
  }
}

/* Mobile: single column stack under the image */
@media (max-width: 767.98px){
  .position-relative{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .position-relative > img{
    grid-column: 1 / -1;
    margin-bottom: .25rem;
  }
  .position-relative .service-float{
    position: static;
    width: 100%;
    max-width: 100%;
  }
}

/* Tiny polish so badges never overflow small screens */
@media (max-width: 360px){
  .service-float{ padding: .75rem .85rem; border-radius: 10px; }
  .service-float p{ font-size: .95rem; line-height: 1.35; }
}





/* FAQ */
#faq .accordion-button:not(.collapsed) {
    background: #fff3e0;
    color: #000;
    border-bottom: 1px solid #f3e0c5;
    font-family: "Work Sans", sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
}

#faq .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(191, 148, 86, .25);
}

#faq .accordion-item {
    border: 1px solid #eee;
    border-radius: .5rem;
    overflow: hidden;
}

#faq .accordion-item+.accordion-item {
    margin-top: .75rem;
}


/* brands */
#brands img {
    max-height: 80px;
    object-fit: contain
}

/* contact */
.contact-link {
    text-decoration: underline;
    /* Makes link clear */
    font-weight: 600;
    /* Bolder for visibility */
    color: #000;
    /* Keeps your dark style */
}

.contact-link:hover {
    color: #6f1d1b;
    /* Accent color on hover */
}

/* emergency banner */
.emergency-bar {
    background: linear-gradient(90deg, #B69057, #a88043);
    color: #000;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}

.emergency-bar .tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
}

.emergency-bar .eta {
    opacity: .95
}

@media (max-width: 575.98px) {
    .emergency-bar .wrap {
        gap: .5rem
    }

    .emergency-bar .tag {
        font-size: .95rem
    }

    .emergency-bar .btn {
        width: 100%
    }
}

/* repair service */
#repair-services h2 {
    font-size: 1.9rem;
}

#repair-services h4 {
    color: #6f1d1b;
}

#repair-services p {
    color: #555;
}

#repair-services i {
    transition: transform .3s ease;
}

#repair-services i:hover {
    transform: scale(1.1);
    color: #B69057;
}

/* about */
.circle-wrap {
    display: inline-block
}

.circle-badge {
    position: relative;
    display: inline-block;
    padding: .6rem 1.2rem;
    line-height: 1;
    border-radius: 9999px;
    /* pill/round */
    isolation: isolate;
}

.circle-badge::before {
    content: "";
    position: absolute;
    inset: -8px;
    /* ring thickness/offset */
    border-radius: 9999px;
    border: 3px solid currentColor;
    /* uses .text-primary color */
    opacity: .9;
    z-index: -1;
}

.circle-badge::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: rgba(191, 148, 86, .08);
    /* subtle gold fill (#BF9456) */
    z-index: -2;
}