.row {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}
.news-block-two{
    border-radius: 10px;
}
.post-info.mb_30{
    margin-bottom: 10px;
}
.author-box{
    margin-bottom: 40px;
}
.sub-blog{
    padding-top: 130px;
    padding-bottom: 0;
}
.reliability-text h4{
    padding-top: 40px;
}
.reliability-list li{
    padding: 10px 0px;
    padding-left: 35px;
}
.reliability-list li i{
    top: 10px;
}
.category-list li a{
    padding-left: 25px;
}
.category-list li a i{
    left: 0;
}
.pagination{
    margin-top: 0;
}
.pagination li a{
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 5px;
}
.about-content-colmun .featured-button{
    max-width: 325px;
}
.newsletter-popup{
    padding-bottom: 150px;
}
.tab-buttons .tab-btn{
    padding: 33px 20px;
}
.tab-buttons .tab-btn .icon-one{
    margin-right: 10px;
}
.why-choose-us-section .section-title{
    margin-right: -15px;
}
.feature-block-one{
    padding: 75px 45px;
}
.our-specialties.inner-page {
    padding-bottom: 120px;
    background-color: #C4C4C4;
}
.pricing-item{
    margin-bottom: 40px;
}
.news-block-two .inner-box .blog-info li{
    margin-right: 25px;
}
.news-block-two .inner-box{
    padding: 33px;
}
.news-block-two .inner-box .blog-info{
    font-size: 12px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 10px;
}
.news-block-two .inner-box .read-more-btn{
    left: 34px;
}
.project-block-one .content-box{
    padding: 25px 40px;
}
.project-block-one .overley-content{
    padding: 40px;
}
.our-features .feature-block-three{
    padding: 72px 73px;
}
.why-choose-us-section .inner-page{
    padding: 85px 50px 85px 50px;
}
.team-block-one .content-box{
    padding: 25px 40px;
}
.team-block-one .overley-content{
    padding: 25px 40px;
}
.service-list-area.padd-60,
.helpus-area.padd-60,
.brochure-area.padd-60{
    padding: 40px;
}
.brochure-inner p{
    margin-bottom: 30px;
}
.service-text-one .title-text{
    margin-bottom: 40px;
}
.project-info{
    padding: 60px 25px 250px;
}
.featured-tab .tab-buttons .tab-btn{
    margin: 20px 15px;
}
.page-banner-section{
    background-attachment: local;
}
.news-block-two:hover .inner-box{
    padding-bottom: 33px;
}
.comments-form-area{
    padding: 50px;
}
.service-video-box .overly-box a{
    font-size: 33px;
}
.company-feature.style-02 .feature-block:hover{
    border-color: var(--secondary-color);
}
.about-image-colmun{
    padding-right: 80px;
}
.service-section{
    padding-bottom: 0px;
}
.service-section .service-text{
    border: 1px solid var(--grey-color-five);
}
.feature-list{
    margin-bottom: 40px;
}
.individual-approach .overly-box a{
    font-size: 33px;
    line-height: 100px;
}
.feature-block-one .icon-box img{
    transform: scale(1.0);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
.feature-block-one .icon-box img{
    transition: 1s;
}
.feature-block-one:hover .icon-box img{
    transform: scale(1.1);
}
.feature-block-three .icon-box img{
    transition: 1s;
}
.feature-block-three:hover .icon-box img{
    transform: scale(1.1);
}
.quote-section .map-shape{
    bottom: 0;
}
.quote-form .nice-select{
    font-size: 8px;
    height: 45px;
    line-height: 45px;
}
.quote-section .quote-form .form-group{
    margin-bottom: 15px;
}
.quote-form .form-group i{
    bottom: 20px;
}
.quote-form label{
    font-size: 10px;
    line-height: 20px;
}
.quote-form .sub-title{
    font-size: 14px;
    line-height: 29px;
    margin-bottom: 15px;
}
.quote-form .form-group .button-style-three{
    padding: 15px 45px;
    line-height: 28px;
}
.news-block-two .inner-box .blog-title a:hover{
    color: var(--secondary-color);
}
.news-block-two:hover .inner-box{
    padding-bottom: 60px;
}
.service-seven-content .row{
    --bs-gutter-x: 1.5rem;
}
.service-seven-block .inner-text{
    z-index: 1;
}
.feature-block-area{
    padding: 50px;
    padding-right: 0px;
    background-color: var(--white-color);
}
.feature-block-area .feature-block-one{
    position: relative;
    box-shadow: none;
    padding: 0px;
}
.feature-block-area .feature-block-one:before{
    position: absolute;
    height: 100%;
    width: 1px;
    content: '';
    right: 0;
    bottom: 0;
    background-color: #E8E8E8;
}
.feature-block-area .feature-block-one.border-none:before{
    display: none;
}
.feature-block-area .feature-block-one .icon-box{
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin-bottom: 30px;
}
.feature-block-area .feature-block-one h5{
    margin-bottom: 10px;
}
.feature-block-area .feature-block-one p{
    line-height: 29px;
    color: var(--block-color-three);
}
.how-to-work-section-two .row{
    --bs-gutter-x: 1.5rem;
}
.video-section .row{
    --bs-gutter-x: 1.5rem;
}
.protfolio-text-one p{
    font-size: 14px;
}
.protfolio-text-three p{
    font-size: 14px;
}
.post-share-option .social-list li .share-icon{
    position: absolute;
    right: -35px;
    bottom: -30px;
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}
.post-share-option .social-list li:hover .share-icon{
    bottom: 25px;
    opacity: 1;
    visibility: visible;
}
.post-share-option .social-list .share-icon li{
    display: block;
}
.post-share-option .social-list .share-icon li a{
    position: relative;
    font-size: 14px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 5px;
    border-radius: 5px;
    color: var(--white-color);
    background-color: var(--primary-color);
    display: inline-block;
}
.post-share-option .social-list .share-icon li a:hover{
    color: var(--white-color);
    background-color: var(--secondary-color);
}
.feature-block{
    position: relative;
    z-index: 1;
}
.feature-block:before{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 5px;
    content: '';
    z-index: 2;
    background-color: var(--white-color);
    transition: 0.35s;
}
.feature-block:after{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: '';
    z-index: 2;
    background-color: var(--white-color);
    transition: 0.35s;
}
.feature-block:hover:before,
.feature-block:hover:after{
    width: 0;
}
.feature-block .feature-inner{
    position: relative;
    z-index: 1;
    border: 5px solid var(--secondary-color);
}
.feature-block .feature-inner:before{
    position: absolute;
    width: 5px;
    height: 100%;
    content: '';
    bottom: 0;
    right: -5px;
    transition: 0.25s;
    background-color: var(--white-color);
}
.feature-block .feature-inner:after{
    position: absolute;
    width: 5px;
    height: 100%;
    content: '';
    top: 0;
    left: -5px;
    transition: 0.25s;
    background-color: var(--white-color);
}
.feature-block:hover .feature-inner:before,
.feature-block:hover .feature-inner:after{
    height: 0;
}
.service-block-004 .service-inner .lower-content .icon-box{
    position: relative;
    z-index: 1;
    width: 106px;
    height: 106px;
    font-size: 58px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    transition: .25s;
    overflow: hidden;
    color: var(--secondary-color);
}
.service-block-004 .service-inner:hover .lower-content .icon-box{
    color: var(--white-color);
    margin-bottom: 20px;
}
.service-block-004 .service-inner .lower-content .icon-box:before{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    content: '';
    z-index: -1;    
    transition: 1s;
    background: linear-gradient(0deg, #d91b1b 0%, #FFBE2E 83.37%);
}
.service-block-004 .service-inner:hover .lower-content .icon-box:before{
    height: 100%;
}
.service-block-004 .lower-content h4 a{
    color: var(--white-color);
}
.service-block-004 .lower-content h4 a:hover{
    color: var(--secondary-color);
}
.project-info{
    padding: 35px 35px 200px;
}
.service-text-one .title-text{
    font-size: 14px;
}
.service-list li.current a:after{
    width: 100%;
}
/*  Team Section*/
.team-block-one{
    border-radius: 10px;
    overflow: hidden;
}
.team-block-one .team-image{
    position: relative;
    overflow: hidden;
}
.team-block-one .team-image .social-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 54px;
    padding: 10px;
    transform: translateY(-120%);
    background: var(--secondary-color);
    border-radius: 0px 10px 50px 50px;
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
.team-block-one:hover .team-image .social-icon{
    transform: translateY(0);
}
.team-block-one .team-image .social-icon li{
    text-align: center;
    display: block;    
}
.team-block-one .team-image .social-icon li a{
    display: inline-block;
    text-align: center;
    padding: 5px;
    color: var(--white-color);
}
.team-block-one .team-image .share-box{
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 110px;
    display: block;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    transform: translateY(0);
    border-radius: 0px 10px 50px 50px;
    background-color: var(--primary-color);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
.team-block-one:hover .team-image .share-box{
    transform: translateY(-120%);
}
.team-block-one .team-image .share-box i{
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 44px;
    height: 44px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    color: var(--paragraph-color);
    background-color: var(--white-color);
}
.team-block-one .team-image .share-box .title-text{
    transform: rotate(-90deg);
    transform-origin: bottom right;
    padding-left: 25px;
    line-height: 35px;
    color: var(--white-color);
}
.team-block-one .team-image{
    border-radius: 5px 5px 0px 0px;
}
.team-block-one .team-image img{
    width: 100%;
}
.team-block-one .team-info{
    position: relative;
    padding: 28px 50px;
    z-index: 1;
    overflow: hidden;
    border-radius: 0px 0px 5px 5px;
}
.team-block-one .team-info:before{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    content: '';
    z-index: -1;    
    background-color: var(--secondary-color);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
.team-block-one:hover .team-info:before{
    height: 100%;
}
.team-block-one .team-info h5 a{
    font-weight: 700;
    color: var(--title-color);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
.team-block-one:hover .team-info h5 a{
    color: var(--white-color);
}
.team-block-one .team-info span{
    font-weight: 700;
    font-family: var(--manjari);
    color: var(--paragraph-color);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
.team-block-one:hover .team-info span{
    color: var(--white-color);
}
.banner-style-seven .quote-form .form-group i{
    bottom: 12px;
}
.banner-style-seven .quote-form .form-group button i{
    bottom: 0;
}
/* End Team Section*/

/* Crown Packers Custom Sections */
.crown-network-section {
    padding: 100px 0;
    background-color: #f7f9fc;
}
.network-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    height: 100%;
    transition: all 0.3s ease;
    border-top: 4px solid rgb(185, 28, 28) !important;
}
.network-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.network-card .icon-box,
.network-card .icon-box i,
.network-card .icon-box i:before {
    font-size: 34px;
    color: rgb(185, 28, 28) !important;
    margin-bottom: 20px;
}
.network-card h5 {
    font-weight: 700;
    margin-bottom: 15px;
}
.network-card p {
    font-size: 12px;
    line-height: 24px;
    color: #666;
}
.network-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}
.network-badge {
    background: #edf2f7;
    color: #2d3748;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

.crown-trust-section {
    padding: 90px 0;
    background: #111827;
    color: #ffffff;
}
.trust-box {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 30px;
}
.trust-box .trust-number {
    font-size: 40px;
    font-weight: 800;
    color: var(--theme-color, #ff5e15);
    margin-bottom: 10px;
}
.trust-box h6 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.trust-box p {
    color: #9ca3af;
    font-size: 11px;
    line-height: 20px;
    margin: 0;
}

/* Header Top Bar - Reference Image 1 Blue Style */
.main-header .header-top-one {
    background-color: #b91c1c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.header-top-one .header-outer-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}
.header-top-one .contact-info ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.header-top-one .contact-info ul li {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}
.header-top-one .contact-info ul li.phone-item {
    padding-right: 25px !important;
    margin-right: 25px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.header-top-one .contact-info ul li a {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    transition: opacity 0.3s ease !important;
}
.header-top-one .contact-info ul li a:hover {
    color: #ffffff !important;
    opacity: 0.85 !important;
}
.header-top-one .contact-info ul li a i {
    margin-right: 10px !important;
    font-size: 12px !important;
    color: #ffffff !important;
}
.header-top-one .social-midea ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 15px !important;
}
.header-top-one .social-midea ul li {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
}
.header-top-one .social-midea ul li a {
    color: #ffffff !important;
    font-size: 12px !important;
    margin-left: 6px !important;
    transition: opacity 0.3s ease !important;
}
.header-top-one .social-midea ul li a:hover {
    color: #ffffff !important;
    opacity: 0.85 !important;
}

@media (max-width: 767px) {
    .header-top-one .header-outer-box {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
    }
    .header-top-one .contact-info ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .header-top-one .social-midea ul {
        justify-content: center !important;
    }
}

/* Scrollable dropdown for multi-item menus (e.g. Cities) */
.main-menu .navigation > li > ul {
    max-height: 420px;
    overflow-y: auto;
}
.main-menu .navigation > li > ul::-webkit-scrollbar {
    width: 5px;
}
.main-menu .navigation > li > ul::-webkit-scrollbar-thumb {
    background: var(--secondary-color, #ff5e15);
    border-radius: 3px;
}

/* Hide hero banner carousel navigation arrows box */
.banner-section .owl-nav {
    display: none !important;
}

/* ==========================================================================
   Global Consistent Typography System
   ========================================================================== */

/* All Section Headings (Consistent Font Family, Weight 700, Relative Position) */
h1, h2, h3, h4, h5, h6,
.section-title .title,
h3.title {
    position: relative !important;
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-weight: 700 !important;
}

/* h3 Section Headings */
h3, h3.title, .section-title .title {
    font-size: 38px !important;
    line-height: 50px !important;
    color: var(--block-color-three, #282828) !important;
    margin-bottom: 20px !important;
}

/* Hero / Banner Section Title Exact Override */
.banner-section .title,
.banner-section .content-box .title,
.banner-section h1.title {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 200 !important;
    color: rgb(255, 255, 255) !important;
    font-size: 78px !important;
    line-height: 120px !important;
}

.banner-section .title span,
.banner-section .content-box .title span,
.banner-section h1.title span {
    font-family: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

@media (max-width: 1200px) {
    .banner-section .title,
    .banner-section .content-box .title,
    .banner-section h1.title {
        font-size: 68px !important;
        line-height: 85px !important;
    }
}

@media (max-width: 767px) {
    .banner-section .title,
    .banner-section .content-box .title,
    .banner-section h1.title {
        font-size: 40px !important;
        line-height: 52px !important;
    }
}

.sub-heading{
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: rgb(188,131,43) !important;
    font-size: 14px !important;
    line-height: 26px !important;
}

/* Sub-titles (.sub-title) Universal Exact Override */
.sub-title,
.section-title .sub-title,
.banner-section .content-box .sub-title,
.banner-section .active .content-box .sub-title,
.quote-form .sub-title,
h6.sub-title,
h4.sub-title,
div.sub-title {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: rgb(255, 255, 255) !important;
    font-size: 18px !important;
    line-height: 30px !important;
}

.sub-title *,
.section-title .sub-title *,
.sub-title span,
.sub-title i,
.sub-title a {
    font-family: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}


/* Paragraphs & Descriptions */
p,
.section-title .title-text,
p.title-text {
    position: relative !important;
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    line-height: 26px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: var(--block-color-three, #282828) !important;
}

.section-title .title-text {
    margin-bottom: 30px !important;
}

/* About Section Specific Typography (Slightly Larger - Matching Vervoer Theme Reference) */
.company-about .section-title .title {
    font-size: 44px !important;
    line-height: 56px !important;
}

.company-about .section-title .title-text {
    font-size: 16px !important;
    line-height: 28px !important;
}


/* Feature Titles */
.company-feature .feature-block .title {
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--block-color-three, #282828) !important;
    margin-top: 10px !important;
}

/* Mail/Contact Info Line */
.company-about .mail-info {
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--block-color-three, #282828) !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}
.company-about .mail-info a {
    color: var(--secondary-color, #ff5e15) !important;
    font-weight: 700 !important;
}

/* Mobile Responsive Typography */
@media (max-width: 991px) {
    h3, h3.title, .section-title .title {
        font-size: 30px !important;
        line-height: 42px !important;
    }
}
@media (max-width: 767px) {
    h3, h3.title, .section-title .title {
        font-size: 24px !important;
        line-height: 34px !important;
    }
    p, .section-title .title-text {
        font-size: 13px !important;
        line-height: 24px !important;
    }
}

/* ==========================================================================
   Company Feature Cards Styling (Equal Dimensions, Vertical Alignment & Responsiveness)
   ========================================================================== */

.company-feature {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
}

.company-feature .feature-block {
    display: flex !important;
    flex: 1 1 160px !important;
    max-width: 190px !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.company-feature .feature-block .feature-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 160px !important;
    padding: 25px 15px !important;
    background-color: #F0ECE5 !important;
    border: 5px solid #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
}

.company-feature .feature-block:hover .feature-inner {
    transform: translateY(-4px) !important;
    background-color: #ffffff !important;
    border-color: var(--secondary-color, #ff5e15) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

.company-feature .feature-block .icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 12px !important;
}

.company-feature .feature-block .icon-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.cta-001{
    color:#fff !important;
}

.company-feature .feature-block h6.title {
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    color: var(--block-color-three, #282828) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
}

/* Tablet & Mobile Responsiveness for Feature Cards */
@media (max-width: 767px) {
    .company-feature {
        justify-content: center !important;
        gap: 15px !important;
    }
    .company-feature .feature-block {
        flex: 1 1 calc(50% - 15px) !important;
        max-width: calc(50% - 10px) !important;
    }
    .company-about .content-colmun .mail-info,
    .company-about .mail-info {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .company-about .content-colmun .link-button,
    .company-about .link-button {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 480px) {
    .company-feature .feature-block {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Service 001 Section (Strict Color Palette Overrides)
   Primary Red: rgb(185, 28, 28) | Gold: rgb(188, 131, 43) | Black: #000000 | White: #FFFFFF
   ========================================================================== */

.service-001 .service-top-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 26px !important;
    color: rgb(188, 131, 43) !important; /* Gold */
    margin-bottom: 10px !important;
}

.service-001 .section-title .title {
    color: #000000 !important; /* Black */
}

.service-001 .section-title .title span {
    color: rgb(185, 28, 28) !important; /* Primary Red */
}

.service-001 .section-title .title-text {
    color: #000000 !important; /* Black */
}

.service-001 .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.service-001 .colmun {
    display: flex !important;
    margin-bottom: 30px !important;
}

.service-001 .service-block-001 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

.service-001 .service-inner {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 460px !important;
    margin-top: 15px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(188, 131, 43, 0.3) !important; /* Gold Border Accent */
}

.service-001 .logo-icon {
  width: 195px !important;
  height: 195px !important;
  padding: 18px 0 0 18px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  clip-path: polygon(100% 0px, 0px 0px, 0% 100%) !important;
  z-index: 5 !important;
  background-color: rgb(0,0,0)  !important; /* Primary Red Badge */
}

.service-001 .logo-icon img,
.service-001 .logo-icon i,
.service-001 .logo-icon svg {
  max-width: 100px !important;
  max-height: 79px !important;
  width: 100px !important;
  height: 79px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 4px 6px) !important;
}

.service-001 .tag {
    position: absolute !important;
    top: 30px !important;
    right: 25px !important;
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 82px !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    z-index: 2 !important;
    display: inline-block !important;
    -webkit-text-stroke-width: 1px !important;
    -webkit-text-stroke-color: rgb(255,255,255) !important; /* Gold Outlined Stroke */
    color: transparent !important;
    pointer-events: none !important;
    letter-spacing: -2px !important;
}

.service-001 .show-content,
.service-001 .hidden-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.service-001 .show-content .text-area,
.service-001 .hidden-content .text-area {
    padding: 130px 22px 35px !important;
}

.service-001 .hidden-content {
    background-color: #000000 !important; /* Black Hover Background */
    border-top: 3px solid rgb(185, 28, 28) !important; /* Primary Red Accent Top Border */
}

/* Heading: h4 */
.service-001 .text-area h4,
.service-001 .text-area h4 a {
    position: relative !important;
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 32px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    margin-bottom: 15px !important;
    color: #ffffff !important; /* White */
    display: inline-block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    transition: color 0.3s ease !important;
}

.service-001 .service-block-001:hover .text-area h4 a {
    color: rgb(188, 131, 43) !important; /* Gold on Hover */
}

/* Description: p */
.service-001 .text-area p {
    position: relative !important;
    font-family: var(--inter, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    color: #ffffff !important; /* White */
}

/* Arrow Button Accent */
.service-001 .link-button a {
    color: #ffffff !important; /* White Arrow */ /* Primary Red Accent Border */
}



/* Responsive grid & typography overrides for service-001 */
@media (min-width: 992px) {
    .service-001 .colmun {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .service-001 .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .service-001 .text-area h4,
    .service-001 .text-area h4 a {
        font-size: 26px !important;
        line-height: 36px !important;
    }
    .service-001 .text-area p {
        font-size: 13px !important;
        line-height: 26px !important;
    }
    .service-001 .service-inner {
        min-height: 420px !important;
    }
}

@media (max-width: 767px) {
    .service-001 .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .service-001 .text-area h4,
    .service-001 .text-area h4 a {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .service-001 .text-area p {
        font-size: 12px !important;
        line-height: 24px !important;
    }
    .service-001 .service-inner {
        min-height: 380px !important;
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   Why Choose Crown Packers Section Clean Text/List Layout
   ========================================================================== */
.why-choose-us-section {
    background-color: #fafafa !important;
    position: relative !important;
}

.why-choose-main-heading {
    font-family: 'Inter', sans-serif !important;
    font-size: 36px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 10px auto 0 !important;
    text-align: center !important;
}

.why-choose-main-heading span {
    color: rgb(185, 28, 28) !important;
}

.why-choose-grid {
    margin-top: 35px !important;
}

.why-choose-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px 28px !important;
    margin-bottom: 25px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border-left: 4px solid rgb(185, 28, 28) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.why-choose-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-left-color: rgb(188, 131, 43) !important;
}

.why-choose-icon {
    flex-shrink: 0 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    background-color: rgba(185, 28, 28, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    margin-top: 2px !important;
    transition: background-color 0.3s ease !important;
}

.why-choose-item:hover .why-choose-icon {
    background-color: rgba(188, 131, 43, 0.12) !important;
}

.why-choose-icon i,
.why-choose-icon i[class^="flaticon-"],
.why-choose-icon i[class*="flaticon-"] {
    font-family: "flaticon" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: rgb(185, 28, 28) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transition: color 0.3s ease !important;
}

.why-choose-icon i:before,
.why-choose-icon i[class^="flaticon-"]:before,
.why-choose-icon i[class*="flaticon-"]:before {
    font-family: "flaticon" !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.why-choose-item:hover .why-choose-icon i,
.why-choose-item:hover .why-choose-icon i:before {
    color: rgb(188, 131, 43) !important;
}

.why-choose-content h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
}

.why-choose-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #555555 !important;
    margin: 0 !important;
}

@media (max-width: 767px) {
    .why-choose-main-heading {
        font-size: 26px !important;
        line-height: 36px !important;
    }
    .why-choose-item {
        padding: 20px !important;
        gap: 15px !important;
    }
    .why-choose-icon {
        width: 44px !important;
        height: 44px !important;
    }
    .why-choose-icon i {
        font-size: 18px !important;
    }
    .why-choose-content h4 {
        font-size: 16px !important;
        line-height: 25px !important;
    }
}

/* ==========================================================================
   Moving Process Section Heading Area Overrides
   ========================================================================== */
.how-to-work-section .process-top-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 26px !important;
    color: rgb(188, 131, 43) !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    display: block !important;
}

.how-to-work-section .moving-process-heading {
    font-family: 'Inter', sans-serif !important;
    font-size: 36px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-align: center !important;
    margin: 0 !important;
}

.how-to-work-section .moving-process-heading span {
    color: rgb(185, 28, 28) !important;
}

@media (max-width: 767px) {
    .how-to-work-section .moving-process-heading {
        font-size: 26px !important;
        line-height: 36px !important;
    }
}

/* ==========================================================================
   Testimonial Section Premium Styling
   ========================================================================== */
.testimonial-section {
    background-color: #fafafa !important;
    position: relative !important;
}

.testimonial-section .testimonial-top-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 26px !important;
    color: rgb(188, 131, 43) !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    display: block !important;
}

.testimonial-main-heading {
    font-family: 'Inter', sans-serif !important;
    font-size: 36px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-align: center !important;
    margin: 0 !important;
}

.testimonial-grid {
    margin-top: 35px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.testimonial-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

.testimonial-card .card-inner {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 35px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    border: 1px solid rgba(188, 131, 43, 0.25) !important;
    border-top: 4px solid rgb(185, 28, 28) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.testimonial-card:hover .card-inner {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
    border-top-color: rgb(188, 131, 43) !important;
}

.testimonial-card .quote-icon {
    position: absolute !important;
    top: 25px !important;
    right: 25px !important;
}

.testimonial-card .quote-icon i {
    font-size: 34px !important;
    color: rgba(188, 131, 43, 0.25) !important;
    line-height: 1 !important;
    transition: color 0.3s ease !important;
}

.testimonial-card:hover .quote-icon i {
    color: rgba(185, 28, 28, 0.35) !important;
}

.testimonial-card .rating-stars {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 18px !important;
}

.testimonial-card .rating-stars i {
    color: rgb(188, 131, 43) !important;
    font-size: 13px !important;
}

.testimonial-card .testimonial-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 26px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    margin-bottom: 25px !important;
    flex-grow: 1 !important;
    font-style: italic !important;
}

.testimonial-card .client-info {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 18px !important;
    margin-top: auto !important;
}

.testimonial-card .client-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-color: rgb(185, 28, 28) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    transition: background-color 0.3s ease !important;
}

.testimonial-card:hover .client-avatar {
    background-color: rgb(188, 131, 43) !important;
}

.testimonial-card .client-details h5 {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 4px 0 !important;
}

.testimonial-card .client-details .client-location {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    color: rgb(188, 131, 43) !important;
    display: block !important;
}

@media (max-width: 991px) and (min-width: 768px) {
    .testimonial-grid .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .testimonial-main-heading {
        font-size: 26px !important;
        line-height: 36px !important;
    }
    .testimonial-grid .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .testimonial-card .card-inner {
        padding: 25px 20px !important;
    }
}

.crown-network-section .network-top-subtitle,
.crown-network-section .sub-title {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 26px !important;
    color: rgb(188, 131, 43) !important;
    margin-bottom: 10px !important;
    text-align: center !important;
    display: block !important;
}

/* ==========================================================================
   Reduced Spacing Between Testimonial & Coverage Area Sections
   ========================================================================== */
.testimonial-section,
.testimonial-section.sec-padd-150 {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
}

.crown-network-section {
    padding-top: 50px !important;
}

@media (max-width: 767px) {
    .testimonial-section,
    .testimonial-section.sec-padd-150 {
        padding-top: 60px !important;
        padding-bottom: 30px !important;
    }
    .crown-network-section {
        padding-top: 30px !important;
}

/* ==========================================================================
   Trust Highlights ("Why Customers Trust Us") White Background Styling
   ========================================================================== */
.crown-trust-section {
    background-color: #ffffff !important;
    padding: 100px 0 !important;
    position: relative !important;
    color: #000000 !important;
}

.crown-trust-section .sub-title,
.crown-trust-section .section-title .sub-title {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: rgb(188, 131, 43) !important;
    font-size: 14px !important;
    line-height: 26px !important;
}

.crown-trust-section .title,
.crown-trust-section .section-title .title,
.crown-trust-section .section-title h3 {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: rgb(40, 40, 40) !important;
    font-size: 38px !important;
    line-height: 50px !important;
}

.crown-trust-section .title span,
.crown-trust-section .section-title .title span {
    color: rgb(185, 28, 28) !important;
}

.crown-trust-section .title-text,
.crown-trust-section .section-title p {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: rgb(40, 40, 40) !important;
    font-size: 14px !important;
    line-height: 26px !important;
    opacity: 1 !important;
}

.trust-highlights-grid {
    margin-top: 35px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.trust-highlight-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 38px 25px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
    width: 100% !important;
    border: 1px solid rgba(188, 131, 43, 0.25) !important;
    border-top: 4px solid rgb(185, 28, 28) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

.trust-highlight-card:hover {
    transform: translateY(-6px) !important;
    background: #ffffff !important;
    border-top-color: rgb(188, 131, 43) !important;
    border-color: rgba(188, 131, 43, 0.4) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
}

.trust-highlight-card .icon-box {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    border-radius: 50% !important;
    background-color: rgba(185, 28, 28, 0.08) !important;
    border: 2px solid rgba(185, 28, 28, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
    overflow: visible !important;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
}

.trust-highlight-card:hover .icon-box {
    background-color: rgba(188, 131, 43, 0.12) !important;
    border-color: rgba(188, 131, 43, 0.3) !important;
    transform: scale(1.08) !important;
}

.trust-highlight-card .icon-box i,
.trust-highlight-card .icon-box i,
.trust-highlight-card .icon-box i[class*="flaticon-"] {
    font-family: 'flaticon' !important;
    font-size: 38px !important;
    line-height: 1 !important;
    color: rgb(185, 28, 28) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: color 0.3s ease !important;
}

.trust-highlight-card:hover .icon-box i,
.trust-highlight-card:hover .icon-box i[class*="flaticon-"] {
    color: rgb(188, 131, 43) !important;
}

.trust-highlight-card h5 {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 700 !important;
    color: rgb(51, 51, 51) !important;
    margin: 0 0 12px 0 !important;
    opacity: 1 !important;
}

.trust-highlight-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #333333 !important;
    opacity: 1 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* ==========================================================================
   GLOBAL RESPONSIVE OVERFLOW & VIEWPORT CORRECTIONS (DESKTOP & MOBILE)
   ========================================================================== */

/* 1. Global Viewport & Box Sizing */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.boxed_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

/* Prevent horizontal overflow across all homepage sections */
.banner-section,
.service-001,
.why-choose-us-section,
.how-to-work-section,
.testimonial-section,
.crown-network-section,
.crown-trust-section,
.cta-section,
.main-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 2. Hero Section Title Responsive Typography */
.banner-section .title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

@media (min-width: 1400px) {
    .banner-section .title {
        font-size: 88px !important;
        line-height: 110px !important;
    }
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .banner-section .title {
        font-size: 74px !important;
        line-height: 90px !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .banner-section .title {
        font-size: 58px !important;
        line-height: 72px !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .banner-section .title {
        font-size: 46px !important;
        line-height: 58px !important;
    }
}

@media (max-width: 767px) {
    .banner-section .title {
        font-size: 32px !important;
        line-height: 44px !important;
    }
    .banner-section .content-box {
        padding: 60px 15px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .banner-section .title {
        font-size: 26px !important;
        line-height: 36px !important;
    }
}

/* 3. OUR SERVICES (.service-001) Responsive Rules */
.service-001 .single-service {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 15px !important;
    width: 100% !important;
}

@media (min-width: 1200px) {
    .service-001 .colmun {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .service-001 .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .service-001 .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .service-001 .logo-icon {
        width: 150px !important;
        height: 150px !important;
        padding: 12px 0 0 12px !important;
    }
    .service-001 .logo-icon img {
        max-width: 75px !important;
        max-height: 60px !important;
        width: 75px !important;
        height: 60px !important;
    }
    .service-001 .tag,
    .service-block-001 .tag {
        position: absolute !important;
        top: 25px !important;
        right: 20px !important;
        left: auto !important;
        text-align: right !important;
        margin: 0 !important;
        z-index: 5 !important;
    }
}

/* 4. WHY CHOOSE US Section Responsiveness */
.why-choose-us-section .section-title {
    margin-right: 0 !important;
}

@media (max-width: 991px) and (min-width: 768px) {
    .why-choose-main-heading {
        font-size: 30px !important;
        line-height: 42px !important;
    }
}

@media (max-width: 767px) {
    .why-choose-main-heading {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .why-choose-item {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

/* 5. OUR MOVING PROCESS (.how-to-work-section) Responsiveness */
.how-to-work-section {
    position: relative !important;
    overflow: hidden !important;
}

@media (max-width: 991px) and (min-width: 768px) {
    .moving-process-heading {
        font-size: 30px !important;
        line-height: 42px !important;
    }
    .how-to-work-section .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .moving-process-heading {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .how-to-work-section .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* 6. TESTIMONIAL Section Responsiveness */
@media (min-width: 1200px) {
    .testimonial-grid .colmun {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .testimonial-grid .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .testimonial-main-heading {
        font-size: 30px !important;
        line-height: 42px !important;
    }
}

@media (max-width: 767px) {
    .testimonial-section .testimonial-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 25px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .testimonial-section .testimonial-grid::-webkit-scrollbar {
        display: none !important;
    }
    .testimonial-section .testimonial-grid .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        margin-bottom: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }
    .testimonial-main-heading {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .testimonial-dots-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 20px !important;
        margin-bottom: 5px !important;
        width: 100% !important;
        position: relative !important;
        z-index: 100 !important;
    }
    .testimonial-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(185, 28, 28, 0.25) !important;
        border: 1px solid rgba(185, 28, 28, 0.4) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .testimonial-dot.active {
        width: 28px !important;
        border-radius: 6px !important;
        background-color: rgb(185, 28, 28) !important;
        border-color: rgb(185, 28, 28) !important;
        box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35) !important;
    }
}

@media (min-width: 768px) {
    .testimonial-dots-nav,
    .testimonial-mobile-nav {
        display: none !important;
    }
}

/* 7. WHY CUSTOMERS TRUST US Responsiveness */
@media (min-width: 1200px) {
    .trust-highlights-grid .colmun {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .trust-highlights-grid .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .crown-trust-section .title {
        font-size: 30px !important;
        line-height: 42px !important;
    }
}

@media (max-width: 767px) {
    .crown-trust-section {
        padding: 60px 0 !important;
    }
    .trust-highlights-grid .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .crown-trust-section .title {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .trust-highlight-card {
        padding: 28px 20px !important;
    }
    .trust-highlight-card .icon-box {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
    }
    .trust-highlight-card .icon-box i {
        font-size: 32px !important;
    }
}

/* 8. CTA Section Responsiveness */
.cta-section {
    position: relative !important;
    overflow: hidden !important;
}

@media (max-width: 991px) {
    .cta-inner-box {
        display: flex !important;
        flex-direction: column !important;
    }
    .cta-left-image {
        width: 100% !important;
        min-height: 250px !important;
    }
    .cta-right-content {
        width: 100% !important;
        padding: 40px 20px !important;
        text-align: center !important;
    }
    .cta-right-content .title-box h4 {
        font-size: 22px !important;
        line-height: 34px !important;
    }
    .cta-right-content .button-style-four {
        display: inline-block !important;
        max-width: 100% !important;
    }
}
/* 5. OUR MOVING PROCESS (.how-to-work-section) Responsiveness */
.how-to-work-section {
    position: relative !important;
    overflow: hidden !important;
}

@media (max-width: 991px) and (min-width: 768px) {
    .moving-process-heading {
        font-size: 30px !important;
        line-height: 42px !important;
    }
    .how-to-work-section .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .moving-process-heading {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .how-to-work-section .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* 6. TESTIMONIAL Section Responsiveness */
@media (min-width: 1200px) {
    .testimonial-grid .colmun {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .testimonial-grid .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .testimonial-main-heading {
        font-size: 30px !important;
        line-height: 42px !important;
    }
}

@media (max-width: 767px) {
    .testimonial-section .testimonial-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 25px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .testimonial-section .testimonial-grid::-webkit-scrollbar {
        display: none !important;
    }
    .testimonial-section .testimonial-grid .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        margin-bottom: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }
    .testimonial-main-heading {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .testimonial-dots-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 20px !important;
        margin-bottom: 5px !important;
        width: 100% !important;
        position: relative !important;
        z-index: 100 !important;
    }
    .testimonial-dot {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        background-color: rgba(185, 28, 28, 0.25) !important;
        border: 1px solid rgba(185, 28, 28, 0.4) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: inline-block !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .testimonial-dot.active {
        width: 28px !important;
        border-radius: 6px !important;
        background-color: rgb(185, 28, 28) !important;
        border-color: rgb(185, 28, 28) !important;
        box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35) !important;
    }
}

@media (min-width: 768px) {
    .testimonial-dots-nav,
    .testimonial-mobile-nav {
        display: none !important;
    }
}

/* 7. WHY CUSTOMERS TRUST US Responsiveness */
@media (min-width: 1200px) {
    .trust-highlights-grid .colmun {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .trust-highlights-grid .colmun {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .crown-trust-section .title {
        font-size: 30px !important;
        line-height: 42px !important;
    }
}

@media (max-width: 767px) {
    .crown-trust-section {
        padding: 60px 0 !important;
    }
    .trust-highlights-grid .colmun {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .crown-trust-section .title {
        font-size: 22px !important;
        line-height: 32px !important;
    }
    .trust-highlight-card {
        padding: 28px 20px !important;
    }
    .trust-highlight-card .icon-box {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
    }
    .trust-highlight-card .icon-box i {
        font-size: 32px !important;
    }
}

/* 8. CTA Section Responsiveness */
.cta-section {
    position: relative !important;
    overflow: hidden !important;
}

@media (max-width: 991px) {
    .cta-inner-box {
        display: flex !important;
        flex-direction: column !important;
    }
    .cta-left-image {
        width: 100% !important;
        min-height: 250px !important;
    }
    .cta-right-content {
        width: 100% !important;
        padding: 40px 20px !important;
        text-align: center !important;
    }
    .cta-right-content .title-box h4 {
        font-size: 22px !important;
        line-height: 34px !important;
    }
    .cta-right-content .button-style-four {
        display: inline-block !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   About Us Page Premium Hero Banner (Visibility & Rendering Fix)
   ========================================================================== */
.page-banner-section,
.about-hero-banner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    min-height: 360px !important;
    padding: 170px 0 50px 0 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    overflow: hidden !important;
}

.about-hero-banner .hero-overlay {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(8, 14, 24, 0.8) 0%, rgba(15, 20, 30, 0.68) 55%, rgba(55, 30, 15, 0.52) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.about-hero-banner .container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

.about-hero-banner .about-hero-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 80px !important;
}

.about-hero-banner .page-banner-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 52px !important;
    line-height: 64px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.about-hero-banner .about-hero-breadcrumb {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left !important;
}

.about-hero-banner .breadcrumb {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.about-hero-banner .breadcrumb li {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    align-items: center !important;
}

.about-hero-banner .breadcrumb li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.about-hero-banner .breadcrumb li a:hover {
    color: rgb(188, 131, 43) !important;
}

.about-hero-banner .breadcrumb li.separator {
    margin: 0 8px !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

.about-hero-banner .breadcrumb li.active {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* Responsiveness for Tablet & Mobile Views */
@media (max-width: 991px) {
    .page-banner-section,
    .about-hero-banner {
        min-height: 280px !important;
        padding: 130px 0 40px 0 !important;
    }
    .about-hero-banner .about-hero-content {
        margin-bottom: 50px !important;
    }
    .about-hero-banner .page-banner-title {
        font-size: 38px !important;
        line-height: 50px !important;
        letter-spacing: 1px !important;
    }
}

@media (max-width: 767px) {
    .page-banner-section,
    .about-hero-banner {
        min-height: 220px !important;
        padding: 100px 0 30px 0 !important;
    }
    .about-hero-banner .about-hero-content {
        margin-bottom: 35px !important;
    }
    .about-hero-banner .page-banner-title {
        font-size: 26px !important;
        line-height: 36px !important;
        letter-spacing: 0.5px !important;
    }
    .about-hero-banner .breadcrumb li {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   Contact Us Page Premium Hero Banner
   ========================================================================== */
.contact-hero-banner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 5 !important;
    min-height: 380px !important;
    padding: 170px 0 50px 0 !important;
    background-image: url('../images/contact-hero-bg.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    overflow: hidden !important;
}

.contact-hero-banner .hero-overlay {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(8, 14, 24, 0.82) 0%, rgba(15, 20, 30, 0.7) 55%, rgba(55, 30, 15, 0.55) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.contact-hero-banner .container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

.contact-hero-banner .contact-hero-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 75px !important;
    text-align: center !important;
}

.contact-hero-banner .contact-hero-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 26px !important;
    color: rgb(188, 131, 43) !important;
    margin-bottom: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.contact-hero-banner .page-banner-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 50px !important;
    line-height: 62px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.contact-hero-banner .contact-hero-breadcrumb {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: left !important;
}

.contact-hero-banner .breadcrumb {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.contact-hero-banner .breadcrumb li {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    align-items: center !important;
}

.contact-hero-banner .breadcrumb li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.contact-hero-banner .breadcrumb li a:hover {
    color: rgb(188, 131, 43) !important;
}

.contact-hero-banner .breadcrumb li.separator {
    margin: 0 8px !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

.contact-hero-banner .breadcrumb li.active {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* Responsiveness for Tablet & Mobile Views */
@media (max-width: 991px) {
    .contact-hero-banner {
        min-height: 300px !important;
        padding: 130px 0 40px 0 !important;
    }
    .contact-hero-banner .contact-hero-content {
        margin-bottom: 45px !important;
    }
    .contact-hero-banner .page-banner-title {
        font-size: 36px !important;
        line-height: 48px !important;
    }
}

@media (max-width: 767px) {
    .contact-hero-banner {
        min-height: 230px !important;
        padding: 100px 0 30px 0 !important;
    }
    .contact-hero-banner .contact-hero-content {
        margin-bottom: 30px !important;
    }
    .contact-hero-banner .contact-hero-subtitle {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }
    .contact-hero-banner .page-banner-title {
        font-size: 24px !important;
        line-height: 34px !important;
    }
    .contact-hero-banner .breadcrumb li {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   Contact Page Section - Complete Overrides for Desktop, Tablet & Mobile
   ========================================================================== */

/* Outer Section */
section.contact-page.sec-padd-150,
.contact-page.sec-padd-150 {
    padding: 85px 0 !important;
    background-color: #f8fafc !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-page.sec-padd-150 .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.contact-page.sec-padd-150 .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* Card Containers (Left & Right) */
.contact-page .contact-card-container,
.contact-page .info-widget,
.contact-page .asked-any-query {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 38px 32px !important;
    border: 1px solid rgba(188, 131, 43, 0.22) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Subtitle (~ GET IN TOUCH ~ & ~ QUICK INQUIRY ~) - EXACT TYPOGRAPHY */
.contact-page .contact-top-subtitle,
.contact-page div.contact-top-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: rgb(188, 131, 43) !important;
    font-size: 14px !important;
    line-height: 26px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* Heading ("Have Questions? Talk to Our Team") - EXACT TYPOGRAPHY */
.contact-page .contact-main-title,
.contact-page h2.contact-main-title,
.contact-page h2 {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: rgb(0, 0, 0) !important;
    font-size: 36px !important;
    line-height: 48px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.contact-page .contact-main-title span,
.contact-page h2 span {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: rgb(0, 0, 0) !important;
    font-size: 36px !important;
    line-height: 48px !important;
}

/* Description Text - EXACT TYPOGRAPHY */
.contact-page .contact-description,
.contact-page p.contact-description {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: rgb(40, 40, 40) !important;
    font-size: 14px !important;
    line-height: 26px !important;
    margin-bottom: 25px !important;
}

/* Subheaders ("Crown Office Details" / "Send Us a Message") */
.contact-page .office-info-title h5,
.contact-page .form-title,
.contact-page h3.form-title,
.contact-page h5 {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: rgb(40, 40, 40) !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 0 !important;
}

.contact-page .office-info-title h5:before,
.contact-page .office-info-title h5:after,
.contact-page .widget-title h5:before,
.contact-page .widget-title h5:after {
    display: none !important;
}

/* Feature Cards List */
.contact-page ul.contact-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Feature Card Item */
.contact-page ul.contact-info-list li {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 16px 20px !important;
    background-color: #fafafa !important;
    border-radius: 10px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-left: 4px solid rgb(185, 28, 28) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

.contact-page ul.contact-info-list li:hover {
    transform: translateY(-2px) !important;
    background-color: #ffffff !important;
    border-color: rgba(188, 131, 43, 0.3) !important;
    border-left-color: rgb(185, 28, 28) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Circular Icon Badge Pill */

/* Center-align Cities Dropdown Spacing on Desktop Navigation */
@media (min-width: 992px) {
    .main-menu .navigation > li.cities-menu,
    .main-menu .navigation > li:nth-child(4) {
        margin: 0 14px !important;
        
    }
}
.contact-page ul.contact-info-list .info-icon

/* City Detail Cards Styling for cities.html */
.crown-cities-section {
    background-color: #f8fafc !important;
    padding: 80px 0 !important;
}

.city-detail-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 28px 24px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-top: 4px solid rgb(185, 28, 28) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.city-detail-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-top-color: rgb(188, 131, 43) !important;
}

.city-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.city-card-header .icon-box {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    background-color: rgba(185, 28, 28, 0.08) !important;
    border: 2px solid rgba(185, 28, 28, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.city-card-header .icon-box i {
    font-size: 22px !important;
    color: rgb(185, 28, 28) !important;
}

.city-card-header h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #282828 !important;
    margin: 0 !important;
}

.city-subtitle {
    font-size: 11px !important;
    color: rgb(188, 131, 43) !important;
    font-weight: 500 !important;
    display: block !important;
    margin-top: 3px !important;
}

.city-detail-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    line-height: 22px !important;
    color: #4a5568 !important;
    margin-bottom: 18px !important;
}

.city-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}

.city-tags .badge {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
}

.city-detail-card .card-btn {
    margin-top: auto !important;
}

.city-detail-card .theme-btn {
    background-color: rgb(185, 28, 28) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-align: center !important;
    transition: background-color 0.3s ease !important;
}

.city-detail-card .theme-btn:hover {
    background-color: rgb(188, 131, 43) !important;
    color: #ffffff !important;
}


/* Fixed Feature Card Size & Cover Images Across Desktop, Tablet and Mobile */
.project-section .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.project-block-one,
.project-section .project-block-one {
    width: 100% !important;
    max-width: 427px !important;
    height: 480px !important;
    margin: 0 auto 40px !important;
    padding: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1) !important;
    background-color: var(--white-color) !important;
    position: relative !important;
}

.project-block-one .inner-box,
.project-section .project-block-one .inner-box {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.project-block-one .image-box,
.project-section .project-block-one .image-box {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
}

.project-block-one img,
.project-block-one .inner-box img,
.project-block-one .image-box img,
.project-section .project-block-one .image-box img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 20px !important;
}

.project-block-one .content-box {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 40px 30px !important;
    display: flex !important;
    align-items: flex-end !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(29, 29, 29, 0) 30%, rgba(0, 0, 0, 0.88) 100%) !important;
}

.project-block-one .overley-content {
    position: absolute !important;
    left: 0 !important;
    bottom: -100% !important;
    width: 100% !important;
    height: 100% !important;
    padding: 40px 30px !important;
    display: flex !important;
    align-items: flex-end !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(27, 67, 196, 0.1) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
}

@media (max-width: 480px) {
    .project-block-one,
    .project-section .project-block-one {
        height: 400px !important;
    }
}

/* Contact Us Page Specific Word Highlighting */
.contact-page .info-widget h1,
.contact-page .asked-any-query .quote-title,
.contact-page .asked-any-query h3 {
    color: #1e293b !important;
}

.contact-page .info-widget h1 .highlight-text,
.contact-page .asked-any-query .quote-title .highlight-text,
.contact-page .asked-any-query h3 .highlight-text {
    color: rgb(185, 28, 28) !important;
}

}
/* ^ closes the @media (max-width: 767px) block opened above, which was missing its
   closing brace and was swallowing every rule below it (WhatsApp button included).
   Scoped deliberately: only the WhatsApp rules are lifted out to all viewports. */

/* Floating WhatsApp Button Styling - Always Visible across Laptop, Desktop & Mobile */
.whatsapp-float,
a.whatsapp-float,
body .whatsapp-float,
.boxed_wrapper .whatsapp-float {
    position: fixed !important;
    width: 60px !important;
    height: 60px !important;
    bottom: 30px !important;
    right: 30px !important;
    top: auto !important;
    left: auto !important;
    background-color: #25D366 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    text-align: center !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.35) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: all 0.3s ease-in-out !important;
}

.whatsapp-float:hover,
a.whatsapp-float:hover {
    background-color: #128C7E !important;
    color: #ffffff !important;
    transform: scale(1.12) !important;
    box-shadow: 0px 6px 25px rgba(37, 211, 102, 0.6) !important;
}

.whatsapp-float svg,
a.whatsapp-float svg {
    width: 34px !important;
    height: 34px !important;
    fill: #ffffff !important;
    display: block !important;
}

/* Explicit Laptop & Desktop Breakpoints */
@media (min-width: 768px) {
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float,
    .boxed_wrapper .whatsapp-float {
        position: fixed !important;
        bottom: 30px !important;
        right: 30px !important;
        width: 60px !important;
        height: 60px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }
}

@media (min-width: 1200px) {
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float,
    .boxed_wrapper .whatsapp-float {
        position: fixed !important;
        bottom: 30px !important;
        right: 30px !important;
        width: 60px !important;
        height: 60px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }
}

/* Mobile Breakpoints */
@media (max-width: 767px) {
    .whatsapp-float,
    a.whatsapp-float,
    body .whatsapp-float,
    .boxed_wrapper .whatsapp-float {
        position: fixed !important;
        width: 54px !important;
        height: 54px !important;
        bottom: 20px !important;
        right: 20px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999999 !important;
    }

    .whatsapp-float svg,
    a.whatsapp-float svg {
        width: 30px !important;
        height: 30px !important;
    }
}


@media (max-width: 767px) {
/* ^ re-opens the mobile block so the rules below keep their existing scope,
   leaving current rendering byte-for-byte unchanged. */

/* ==========================================================================
   Global Mobile & Tablet Image Anti-Cropping Rules
   ========================================================================== */
@media (max-width: 991px) {
    .image-box img,
    .img-box img,
    .blog-card-image img,
    .service-block-001 .image-box img,
    .project-block-one .image-box img,
    .news-block-one .image-box img,
    .service-details-content .image-box img,
    .about-section .image-box img,
    .feature-block img,
    .card-img img {
        object-fit: contain !important;
        object-position: center !important;
        max-width: 100% !important;
    }

    .service-block-001 .image-box,
    .project-block-one .image-box,
    .news-block-one .image-box,
    .blog-card-image {
        background-size: contain !important;
    }
}

@media (max-width: 767px) {
    .image-box img,
    .blog-card-image img,
    .service-block-001 .image-box img,
    .project-block-one .image-box img,
    .news-block-one .image-box img,
    .service-details-content .image-box img,
    .about-section .image-box img {
        object-fit: contain !important;
        object-position: center !important;
        width: 100% !important;
    }
}
}
/* ^ closes the re-opened mobile block at end of file (was implicitly auto-closed by the browser before). */


/* ===========================================================================
   "Services We Offer" cards — city pages (city.php, delhi.php)
   ---------------------------------------------------------------------------
   The card rules around line 2900 are stranded inside the
   @media (max-width: 767px) block that opens at line 2594 and is only closed
   at line 2992, so they never reached desktop. Desktop therefore fell back to
   style.css (.inner-box { height: 340px }) plus an inline object-fit: contain,
   which letterboxed the image and left a dark band across the lower half.

   Re-declared here at the end of the file, outside every media query, so the
   image covers the whole card at all widths. Scoped to
   .project-section .project-block-one: three classes plus the element beats the
   two-class `object-fit: contain !important` mobile rules above, so it wins on
   phones as well without touching those rules or the fragile brace structure.
   Only the city pages use .project-section, so nothing else is affected.
   ========================================================================= */
.project-section .project-block-one .inner-box {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 340px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
}

.project-section .project-block-one .image-box {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background-color: transparent !important;
}

/* Fills the card edge to edge. The images are a uniform 814x454, so centring
   keeps the subject in frame; only the far left/right edges fall outside. */
.project-section .project-block-one .image-box img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 20px !important;
    background-color: transparent !important;
}

/* The overlays sit above the image rather than beside it. */
.project-section .project-block-one .content-box,
.project-section .project-block-one .overley-content {
    z-index: 2 !important;
}

/* Whole-card click target. Sits above the image and both overlays (z-index 2),
   so a click anywhere on the card opens the service page. Purely transparent:
   the card keeps its existing look, and because :hover is matched on the parent
   .project-block-one, the slide-up overlay animation still fires normally. */
.project-section .project-block-one .card-link-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font-size: 0 !important;
    cursor: pointer !important;
}

/* The card is one link, so it gets one visible focus ring, driven by the
   "Read More" anchor that keyboard users actually land on. */
.project-section .project-block-one .overley-content .link-btn a:focus-visible,
.project-section .project-block-one .overley-content .title a:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
}

@media (max-width: 991px) {
    .project-section .project-block-one .inner-box {
        min-height: 320px !important;
    }
}

@media (max-width: 767px) {
    .project-section .project-block-one .inner-box {
        min-height: 300px !important;
    }
}

/* ==========================================================================
   Track option in the header
   One entry point at every width: a square, icon-only button in the
   header-lower bar, sitting immediately before the enquiry button. The
   navigation item and the top-bar "Track Shipment" link are both gone, so this
   button is how Track is reached on desktop, tablet and phone alike.
   ========================================================================== */
.header-top-one .header-top-right {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
}

/* The template hides `.header-right-button` outright below 1400px and again
   below 767px; this beats both, and the flex row is what lets `order` decide
   which button leads on phones. */
.main-header .header-lower .header-right-button {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
/* Sized to the enquiry button beside it, which the template shrinks twice on
   the way down: 58px at full width, 54px at 1140-1279, 42px below that. */
.main-header .header-lower .header-right-button .hdr-btn-track {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px !important;
    height: 58px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 58px;
    padding: 0 !important;
    border-radius: 0;
    /* No filled box: the pin reads as a dark outline on the white header,
       matching the reference. The 58/54/42px footprint above is untouched,
       so position and spacing in the button row are unchanged. */
    background-color: transparent;
    color: #333333;
}
@media only screen and (min-width: 1140px) and (max-width: 1279px) {
    .main-header .header-lower .header-right-button .hdr-btn-track {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px;
    }
}
@media only screen and (max-width: 1139px) {
    .main-header .header-lower .header-right-button .hdr-btn-track {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px;
    }
}
/* With no background left to fill, the hover affordance moves to the glyph. */
.main-header .header-lower .header-right-button .hdr-btn-track:hover {
    background-color: transparent;
    color: #b91c1c;
}
.main-header .header-lower .header-right-button .hdr-btn-track .btn-label {
    display: none;
}
.main-header .header-lower .header-right-button .hdr-btn-track i {
    margin: 0 !important;
    font-size: 16px;
    line-height: 1;
}
/* The offset outline hangs past the header's bottom edge on a white bar. */
.main-header .header-lower .header-right-button .hdr-btn-track:before {
    display: none !important;
}

/* Phones: the buttons and the hamburger share the row with the logo, so Call Us
   drops its label and matches Track as an icon-only square. The label text stays
   in the DOM for screen readers via aria-label on each control. */
@media only screen and (max-width: 767px) {
    .main-header .header-lower .header-right-button {
        gap: 8px;
    }
    /* Re-asserted: the icon-only `.button-style-one` rule below is as specific
       as header.css's own "hide the enquire button below 1139px" and lands
       later, so without this the hidden button would come back. */
    .main-header .header-lower .header-right-button .hdr-btn-enquire {
        display: none !important;
    }
    /* Track leads on desktop, where it sits before the enquiry button; on a
       phone the call action is the one that should fall under the thumb first. */
    .main-header .header-lower .header-right-button .hdr-btn-call {
        order: 1;
    }
    .main-header .header-lower .header-right-button .hdr-btn-track {
        order: 2;
        margin-left: 0;
    }
    .main-header .header-lower .header-right-button .button-style-one {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* !important throughout: mobile.css forces 26px of side padding onto
           every .button-style-one, which would stretch these into rectangles. */
        width: 44px !important;
        height: 44px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        flex: 0 0 44px;
        padding: 0 !important;
        /* Square, matching the sharp-cornered buttons the rest of the site uses. */
        border-radius: 0;
        cursor: pointer;
        margin: 0;
    }
    .main-header .header-lower .header-right-button .button-style-one .btn-label {
        display: none;
    }
    .main-header .header-lower .header-right-button .button-style-one i {
        display: inline-block;
        margin: 0;
        font-size: 15px;
        line-height: 1;
    }
    /* The offset outline reads as a smudge behind a 44px circle. */
    .main-header .header-lower .header-right-button .button-style-one:before {
        display: none;
    }
}
@media only screen and (max-width: 479px) {
    .main-header .header-lower .logo-box {
        max-width: 130px;
    }
    .main-header .header-lower .header-right-button {
        gap: 6px;
    }
    .main-header .header-lower .header-right-button .button-style-one {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px;
    }
    .main-header .header-lower .header-right-button .button-style-one i {
        font-size: 13px;
    }
}
/* End Track option in the header */

/* ==========================================================================
   Solid header, hero below it
   The template positioned `.main-header` absolutely so the banner showed
   through a transparent bar. The header is now an opaque white bar in normal
   flow - the same treatment `.sticky-header` already used - which means every
   hero starts *underneath* the header instead of behind it.

   Consequences handled here:
     - white nav links would vanish on white, so they take the sticky colours;
     - the hero paddings that existed only to clear the overlaying header are
       trimmed, otherwise every page opens with a band of empty space.
   ========================================================================== */
.main-header {
    position: relative !important;
    background-color: var(--white-color, #ffffff) !important;
}
/* `position: sticky` is silently ignored while an ancestor is a scroll
   container, and the viewport rules earlier in this file give <body>
   `overflow-x: hidden` (via .boxed_wrapper). Move that clipping up to <html>,
   whose overflow propagates to the viewport: same result, and the header's
   sticky ancestor chain is clear. The matching `html` rule higher up sits
   inside a media block, so it is restated here unconditionally. */
html {
    overflow-x: hidden !important;
}
body,
body.boxed_wrapper {
    overflow-x: visible !important;
}

/* Tablet and phone: the desktop `.sticky-header` bar is hidden below 1139px, so
   the header pins itself instead. `sticky` keeps it in flow - a `fixed` bar
   would take its own height out of the page and shunt everything up by one bar
   the moment it engaged. Below 767px the red top row is hidden, so what pins is
   exactly the logo + buttons row. */
@media only screen and (max-width: 1139px) {
    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
    }
}
.main-header .header-lower {
    background-color: var(--white-color, #ffffff) !important;
    border-bottom: 1px solid rgb(0 0 0 / 8%) !important;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 6%) !important;
}
/* Same colours the sticky bar uses, for the same reason: dark on white. */
.main-header .header-lower .main-menu .navigation > li > a {
    color: var(--block-color-one, #000000) !important;
}
.main-header .header-lower .main-menu .navigation > li:hover > a,
.main-header .header-lower .main-menu .navigation > li.current > a {
    color: var(--secondary-color, rgb(185, 28, 28)) !important;
}
/* The divider beside the logo was a white line for a dark backdrop. */
.main-header .header-lower .logo-box:before {
    background-color: rgb(0 0 0 / 8%) !important;
}
.main-header .header-lower .header-right-button .button-style-one {
    cursor: pointer;
}
/* The button's offset outline used to fall over the banner. On a white bar it
   hangs past the header's bottom edge and reads as a rendering fault. */
.main-header .header-lower .header-right-button .button-style-one:before {
    display: none !important;
}

/* Inner-page heroes: 250px/170px of top padding was header clearance. */
.page-banner-section {
    padding-top: 110px !important;
    padding-bottom: 20px !important;
}
.page-banner-title {
    padding-bottom: 90px !important;
}
.about-hero-banner,
.contact-hero-banner {
    padding: 80px 0 50px 0 !important;
}

@media only screen and (max-width: 991px) {
    .page-banner-section {
        padding-top: 80px !important;
    }
    .page-banner-title {
        padding-bottom: 60px !important;
    }
    .about-hero-banner,
    .contact-hero-banner {
        padding: 60px 0 40px 0 !important;
    }
}

@media only screen and (max-width: 767px) {
    .page-banner-section {
        padding-top: 55px !important;
    }
    .page-banner-title {
        padding-bottom: 40px !important;
    }
    .about-hero-banner,
    .contact-hero-banner {
        padding: 45px 0 32px 0 !important;
        min-height: 0 !important;
    }
}
/* End Solid header, hero below it */

/* ==========================================================================
   "About The Company" - text only
   The left column is gone from index.php and about.php: first the red quote
   card, then the photo under it. What remains is a single full-width column, so
   the copy is centred and capped for line length rather than left-aligned
   against an empty half of the row - which also matches the centred "Our
   Services" block directly below it.
   ========================================================================== */
/* The section had no vertical padding of its own - the row took its height from
   the image column. With only copy left, the sub-heading sat flush against the
   banner above and the button against the section below. */
.company-about {
    padding-top: 90px;
    padding-bottom: 80px;
}
.company-about .content-colmun {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}
.company-about .content-colmun .section-title .title-text {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* The three cards sat left-aligned beside the photo; centre the row. */
.company-about .company-feature {
    justify-content: center !important;
}
.company-about .content-colmun .mail-info,
.company-about .content-colmun .link-button {
    text-align: center;
}

/* responsive.css gives the copy 80px of its own padding below 1199px, to clear
   the image it used to sit under. Nothing sits above it now, and the section's
   padding already does that job. */
@media only screen and (max-width: 1199px) {
    .company-about .content-colmun {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media only screen and (max-width: 991px) {
    .company-about {
        padding-top: 70px;
        padding-bottom: 60px;
    }
    .company-about .content-colmun {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .company-about {
        padding-top: 55px;
        padding-bottom: 45px;
    }
}
/* End "About The Company" - text only */

/* ==========================================================================
   Services carousel (index.php)
   The section used to be a static grid of ten cards, each carrying a summary,
   a hover panel with a second paragraph, a number tag and an icon. It is now a
   carousel of image + title only: three across on desktop, two on tablet, one
   on a phone, advancing every 2s.
   ========================================================================== */
.crown-service-carousel {
    position: relative;
}
.crown-service-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    /* 16:10 against 814x454 source images - the photo is downscaled at every
       breakpoint, never stretched, so it stays sharp. */
    aspect-ratio: 16 / 10;
    background-color: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    text-decoration: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* Positioned rather than sized with `height: 100%`: mobile.css forces
   `img { height: auto !important }` below 767px, which left the photo at its
   intrinsic ratio and the bottom of the card showing bare background. Against a
   positioned parent, inset:0 fills the card whatever that rule says. */
.crown-service-card img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.6s ease;
}
/* Keeps the title legible over any photo without dimming the whole image. */
.crown-service-card:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 66%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.32) 52%, rgba(0, 0, 0, 0) 100%);
    transition: opacity 0.35s ease;
}
.crown-service-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 22px 24px;
    color: #ffffff;
    font-family: var(--inter, 'Inter', sans-serif);
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    text-align: center;
}
/* The accent grows out from the centre on hover. */
.crown-service-card__title:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 0;
    height: 3px;
    background-color: #b91c1c;
    transform: translateX(-50%);
    transition: width 0.35s ease;
}
.crown-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.crown-service-card:hover img {
    transform: scale(1.07);
}
.crown-service-card:hover .crown-service-card__title:before {
    width: 46px;
}
.crown-service-card:focus-visible {
    outline: 3px solid #b91c1c;
    outline-offset: 3px;
}

/* Owl's own chrome: arrows outside the cards, dots below. */
.crown-service-carousel.owl-theme .owl-nav {
    margin: 0;
}
.crown-service-carousel.owl-theme .owl-nav [class*="owl-"] {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #1e293b;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.crown-service-carousel.owl-theme .owl-nav [class*="owl-"]:hover {
    background-color: #b91c1c;
    color: #ffffff;
}
.crown-service-carousel.owl-theme .owl-nav .owl-prev {
    /* Was -24px, which spilled 4px past the 20px container padding at fluid
       widths and scrolled the page sideways on both edges. Matching the
       padding keeps the arrows outside the cards and exactly flush. */
    left: -20px;
}
.crown-service-carousel.owl-theme .owl-nav .owl-next {
    right: -20px;
}
/* owl.theme centres the dots; something earlier in this file resets the
   inherited text-align, so state it here. */
.crown-service-carousel.owl-theme .owl-dots {
    margin-top: 28px;
    text-align: center;
}
.crown-service-carousel.owl-theme .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0 5px;
    background-color: #d5d5d5;
    transition: all 0.3s ease;
}
.crown-service-carousel.owl-theme .owl-dots .owl-dot.active span,
.crown-service-carousel.owl-theme .owl-dots .owl-dot:hover span {
    width: 26px;
    border-radius: 5px;
    background-color: #b91c1c;
}

@media only screen and (max-width: 1199px) {
    /* No room for arrows beside the track once the container tightens. */
    .crown-service-carousel.owl-theme .owl-nav .owl-prev {
        left: 4px;
    }
    .crown-service-carousel.owl-theme .owl-nav .owl-next {
        right: 4px;
    }
}

@media only screen and (max-width: 767px) {
    .crown-service-card__title {
        font-size: 16px;
        line-height: 26px;
        padding: 0 18px 22px;
    }
    .crown-service-carousel.owl-theme .owl-nav [class*="owl-"] {
        width: 40px;
        height: 40px;
        margin-top: -20px;
        font-size: 15px;
    }
}
/* End Services carousel */

/* Box shapes ship as 2.5x assets for hidpi screens; pin their layout size
   (they have no width rule anywhere, so they'd otherwise render at natural size) */
img[src$="close-box.png"] { width: 203px; height: auto; }
img[src$="open-box.png"] { width: 254px; height: auto; }

/* Awards & Certificates carousel (homepage, above Why Choose Us) */
.awards-section { padding: 100px 0 30px; background: #fff; }
.awards-section .award-logo-item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 22px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* owl.css forces img width:100%; keep the logos contained and centred */
.awards-section .award-logo-item img {
    width: auto !important;
    max-width: 100%;
    max-height: 136px;
    margin: 0 auto;
}
@media only screen and (max-width: 767px) {
    .awards-section { padding: 60px 0 10px; }
    .awards-section .award-logo-item { height: 140px; padding: 14px; }
    .awards-section .award-logo-item img { max-height: 110px; }
}
.crown-awards-carousel .owl-nav { display: none !important; }
.crown-partners-carousel .owl-nav { display: none !important; }
/* partner logos are wide wordmarks; give them a little more breathing room */
.partners-section .award-logo-item { height: 150px; }
.partners-section .award-logo-item img { max-height: 100px; }
/* Coverage-area badges are links now; keep badge styling and add a hover cue */
a.network-badge, a.network-badge:visited { color: #2d3748; text-decoration: none; transition: background .25s, color .25s; }
a.network-badge:hover { background: #b91c1c; color: #fff; }

/* ==========================================================================
   Horizontal overflow fix
   The .row rule at the top of this file sets --bs-gutter-x: 2.5rem, so every
   row carries -20px side margins. The container's padding must be at least
   that 20px half-gutter, otherwise each row overhangs its container by the
   difference and the whole page scrolls sideways - on both edges. It bites at
   fluid widths (tablet and phone), where the container has no max-width to
   absorb the overhang. Matching the two keeps the 40px column gutters intact.
   The phone tiers in mobile.css set the same 20px with !important.
   ========================================================================== */
.container {
    padding-left: 20px;
    padding-right: 20px;
}

/* --------------------------------------------------------------------------
   Bleed containment
   Two things legitimately extend past their section and would otherwise widen
   the page:
     1. .pattern-layer / .pattern-1 - decorative shapes anchored with negative
        offsets (right: -260px) that are meant to run off the edge.
     2. The full-bleed .container-fluid sections, whose padding is 0 while the
        .row inside still carries -20px margins. The overhang is only the
        columns' transparent padding - card content already sits flush - so
        clipping it is invisible.
   overflow-x: clip is used rather than hidden because clip does NOT create
   a scroll container, so the sticky header and any sticky descendant keep
   working (see the note on the html/body rules above). hidden is declared
   first as a fallback for engines that predate clip.
   -------------------------------------------------------------------------- */
.company-about,
.banner-section,
.project-section,
.map-section,
.cta-style-three,
/* .cta-001 holds .shape-six, a decorative shape that JS translates sideways;
   it only pushes past the viewport once that animation runs, which is why a
   load-time measurement misses it. */
.cta-001 {
    overflow-x: hidden;
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Track button: pin + two-line red label (reference layout)
   The rules further up sized this as a fixed 58/54/42/40px square because it
   was icon-only. With the label it has to size to its content, so the width,
   height and centring are released here. These come last in the file, so they
   beat those earlier !important declarations at equal specificity - including
   the ones inside media blocks, since a media query adds no specificity.
   Header room for the extra width comes from the slightly tighter nav item
   spacing in header.css.
   -------------------------------------------------------------------------- */
.main-header .header-lower .header-right-button .hdr-btn-track {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.main-header .header-lower .header-right-button .hdr-btn-track .btn-label {
    display: block;
    text-align: left;
    white-space: nowrap;
    color: #d91b1b;
    font-size: 15px;
    line-height: 1.18;
    font-weight: 600;
}

.main-header .header-lower .header-right-button .hdr-btn-track .btn-label small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.18;
    color: inherit;
}

/* Hover already recolours the glyph; carry the label with it. */
.main-header .header-lower .header-right-button .hdr-btn-track:hover .btn-label {
    color: #b91c1c;
}

@media only screen and (max-width: 1139px) {
    .main-header .header-lower .header-right-button .hdr-btn-track {
        gap: 8px;
    }
    .main-header .header-lower .header-right-button .hdr-btn-track .btn-label {
        font-size: 13px;
    }
    .main-header .header-lower .header-right-button .hdr-btn-track .btn-label small {
        font-size: 11px;
    }
}
/* The reference shows the pin roughly as tall as the two-line label, so the
   glyph is scaled up from the icon-only 16px it used as a square button. */
.main-header .header-lower .header-right-button .hdr-btn-track i {
    font-size: 28px !important;
    line-height: 1 !important;
}

@media only screen and (max-width: 1139px) {
    .main-header .header-lower .header-right-button .hdr-btn-track i {
        font-size: 24px !important;
    }
}