.preload-img {
    width: 200px;
    height: 100px;
}

.ctn-preloader .animation-preloader .txt-loading {
    font: bold 4em var(--ztc-family-font1);
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading2:before {
    color: #a3060c !important;
}


.ctn-preloader .animation-preloader .txt-loading .letters-loading2 {
    color: #000;
}

.bnr-img {
    max-width: 80% !important;
}

.home-slider-area .owl-dots {
    left: 50px !important;
}

.header-btn2 {
    background: #000000;
    color: #fff;
}

.header-btn2:hover {
    background: #da1c21 !important;
    color: var(--ztc-bg-bg-1);
    transform: translateY(-5px);
}

.sp1 {
    padding: 80px 0 70px;
}

.sp2 {
    padding: 70px 0 60px;
}

.about2-section-area .about-header .counter-area {
    background: #da2328;
    bottom: -246px;
    right: -70px;
}

.about2-section-area .about-header .counter-area h2 {
    color: #fff;
}

.about2-section-area .about-header .counter-area p {
    color: #fff;
}

.features2-section-area {
    background: #b5181d;
}

.features2-section-area .featured-boxarea .sell-point .sell {
    background: #da2227;
    color: #fff;
}

.features2-section-area .featured-boxarea .sell-point .featured:hover {
    background: #dc3545;
}

.features2-section-area .featured-boxarea .img1::after {
    background: #16161687;
}

.features2-section-area .featured-boxarea .content-area .price-area a {
    color: #fff;
}

.ft-28 {
    font-size: 28px;
}

.header-btn2.edt-btn {
    padding: 8px 8px !important;
    font-size: 14px !important;
}

.testimonial2-section-area {
    background: #b5181d;
}

.testimonial2-section-area .testimonial-boxes-area .owl-nav button {
    background: #000000;
}

.testimonial2-section-area .testimonial-boxes-area .owl-nav button:hover {
    background: #f8f9fa;
}

.service2-section-area .service-boxes-area:hover .content-area {
    background: #b71d21cf;
}

.home-slider-area .hero2-section-area {
    height: 100vh;
    padding: 180px 0 250px;

}

.home-slider-area .hero2-section-area::after {
    background: #a3060c;
}

.cta2-section-area .images img {
    height: 270px !important;
}


.cta2-section-area .cta-content-area {
    background: #ccd7d9;
    padding: 16px 50px;
}


.footer2-section-area {
    padding: 200px 0 15px 0;
    background: #b92429;
    margin-top: -280px;
}

.footer2-section-area .footer-header ul li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: #ffffff;
}

.footer2-section-area .footer-logo-area ul li a:hover {
    background: #f8f9fa !important;
}

.footer2-section-area .footer-header ul li a:hover {
    color: #000 !important;
}

.icn {
    color: #fff;
}


/* mobole view */
@media screen and (max-width: 767px) {
    .home-slider-area .hero2-section-area {
        padding: 160px 0 60px !important;
        height: unset !important;
    }

    .contact-info-single {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        color: #fff;
    }

    .social-links-mobile-menu ul {
        display: flex;
        gap: 50px;
    }

    .about2-section-area .about-header .counter-area {
        bottom: -204px;
        right: -31px;
    }

    .mobile-nav li a {
        color: #fff;
    }

    .mobile-sidebar {
        background: #971218;
    }

    .single-footer h3 {
        color: #fff;
    }

    .single-footer a {
        color: #fff;
    }

    .ctn-preloader .animation-preloader .txt-loading {
        font: bold 2em var(--ztc-family-font1);
    }

    .tbp-1 {
        padding: 50px 0 0 0px !important;
    }

    .about3-section-area .about-content-area {
        padding: 0 12px 0 12px !important;
    }

}

/* end mobile view */

/* about page */

.inner-section-area {
    background-image: url(../img/bg/bg2.png);
    padding: 180px 0 40px !important;
}

.about3-section-area .about-content-area {
    padding: 0 100px 0 12px;
}

.tbp-1 {
    padding: 50px 0 0 60px;
}

.ft-p {
    padding: 27px 0 15px 0;
}

.team1-section-area {
    background: #b5181d;
}

.service4-section-area .service-boxes .service-author-box:hover {
    background: #dc3545;
}

/* end about page */

/* contact page */
.header-btn1 {
    color: #ffffff;
    background-color: #000000;

}

.header-btn1:hover {
    background: #dc3545;
}

.contact-inner-section-area .contact-inner-header ul li a {
    display: flex;
}

/* end contactpage */

/* our works */
/* Style for the gallery section */
.gallery-section {
    text-align: center;
}

.tabs {
    margin-bottom: 20px;
}

.tabs button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.tabs button.active {
    background-color: #dc3545;
    color: white;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery div {
    display: none;
    /* Initially hidden, handled via JS */
    margin: 10px;
    padding: 30px;
}

.gallery img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
    margin: 8px;
}


/* end our works */

.service4-section-area .service-boxes .service-author-box .icons {
    background: #fff;
}

.service4-section-area .service-boxes .service-author-box:hover .icons {
    background: #161616;
}

@media (max-width: 767px) {
    .ctn-preloader .animation-preloader .txt-loading .letters-loading2 {
        font-size: 15px;
    }
}

.nice-select {
    background-color: #eaebeb;
}

.table-container {
    margin: 20px auto;
    padding: 20px;
    max-width: 90%;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo {
    max-height: 50px;
}

.property-single-area .agent-single-area .single-contact-area .sell {
    background: #dc3545;
}

.property-single-area .agent-single-area .single-contact-area .sell:hover {
    background: #161616;
}

.property-single-area .agent-single-area .agent-boxarea .left-area .img1 {
    height: unset;
}

.icon-s {
    width: 20px;
}

.property-single-area .agent-single-area .agent-boxarea .left-area .content a {
    font-size: 13px;
    display: flex;
}

.d-blk-mob {
    display: none;
}

/* Styling for the phone button */
.left-wp a {
    position: fixed;
    left: 10px;
    bottom: 70px;
    /* Adjusted spacing */
    z-index: 1000;
    padding: 12px 15px;
    background: #a32929;
    color: #fff;
    font-size: 24px;
    /* Reduced size for better visibility */
    line-height: 1;
    /* Adjusted for proper icon alignment */
    border-radius: 50%;
    display: none;
    /* Changed from 'none' to 'block' to ensure visibility */
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

/* Styling for the booking button */
.left-bk a {
    position: fixed;
    left: 10px;
    bottom: 130px;
    /* Adjusted position to avoid overlap */
    z-index: 1000;
    padding: 12px 15px;
    background: #a32929;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    display: none;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

.left-whatspp-mobile a {
    position: fixed;
    left: 10px;
    bottom: 190px;
    z-index: 1000;
    padding: 12px 15px;
    color: #fff;
    background-color: #a32929;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    display: none;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

/* Hover effect for better UX */
.left-wp a:hover,
.left-bk a:hover,
.left-whatspp-mobile a:hover {
    background: #161616;
    /* Changed to Bootstrap primary blue */
    color: #fff;
    transform: scale(1.1);
}



@media screen and (max-width: 767px) {
    .d-blk-mob {
        display: block;
    }

    .d-blk-desk {
        display: none;
    }

    .left-wp a {
        display: block !important;
    }

    .left-bk a {
        display: block !important;
    }

    .left-whatspp-mobile a {
        display: block !important;
    }


    .right-call a {
        display: none !important
    }

    .right-wp a {
        display: none !important
    }
}

.right-call a {
    position: fixed;
    right: 1.6%;
    bottom: 25%;
    z-index: 1000;
    padding: 15px 15px;
    background: var(--tg-primary-color);
    color: #fff;
    font-size: 28px;
    line-height: 0;
    border-radius: 50%;
    background: #a32929;
}

.right-wp a {
    position: fixed;
    right: 1.5%;
    bottom: 13%;
    z-index: 1000;
    padding: 15px 17px;
    background: #25D366;
    color: #fff;
    font-size: 28px;
    line-height: 0;
    border-radius: 50%;
}

.swal2-image {
    width: 180px;
}

.ourvision {
    padding: 80px 0 60px !important;
}

.project-bg {
    background-size: cover;
    background-position: center;
    padding: 115px 0 95px;
    overflow: hidden;
}

#mobcostpdf-view {
    display: none;
}

@media (max-width: 767px) {
    #mob-calc-pad {
        padding: 40px 10px !important;
    }
}

.mt-20 {
    margin-top: 20px;
}

.btn-pdf {
    background-color: #971218;
    color: #fff;
}

.btn-pdf:hover {
    background-color: #fff;
    color: #000;
}

/* ============== Cost calculator form css ============== */

#pdf-modal .btn-close {
    position: absolute;
    top: -4%;
    right: -3%;
    background-color: #dc3545;
    opacity: 1;
    color: #fff;
    padding: 10px;
}

.site-logo {
    width: 170px !important;
}

.footer-logo-area img {
    width: 170px !important;
}