/**
 * Dastak - Urdu Language Support CSS
 * RTL Layout, Urdu Fonts, and Proper Alignment
 */

/* Import Urdu Font - Noto Nastaliq Urdu */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

/* RTL Base Styles */
html[lang="ur"],
body.urdu-lang {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Outfit', sans-serif;
}

/* Typography Adjustments for Urdu */
body.urdu-lang h1,
body.urdu-lang h2,
body.urdu-lang h3,
body.urdu-lang h4,
body.urdu-lang h5,
body.urdu-lang h6,
body.urdu-lang p,
body.urdu-lang span,
body.urdu-lang a,
body.urdu-lang li,
body.urdu-lang button,
body.urdu-lang input,
body.urdu-lang textarea,
body.urdu-lang select,
body.urdu-lang label {
    font-family: 'Noto Nastaliq Urdu', 'Outfit', sans-serif;
    /* text-align: right; */
}

/* Flip all images horizontally for RTL */
body.urdu-lang img {
    transform: scaleX(-1);
}

/* Don't flip logos */
body.urdu-lang .navbar-brand img,
body.urdu-lang .dastak_logo_footer,
body.urdu-lang .govt_logo_footer,
body.urdu-lang .preloader-logo {
    transform: scaleX(1);
}

/* Navbar RTL Adjustments */
body.urdu-lang .navbar-nav {
    margin-right: 0;
    margin-left: auto;
}

body.urdu-lang .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}

body.urdu-lang .header-controls {
    flex-direction: row-reverse;
}

/* Fix header controls order in Urdu */
body.urdu-lang .header-controls .order-1 {
    order: 2;
}

body.urdu-lang .header-controls .order-2 {
    order: 1;
}

body.urdu-lang .header-controls .order-lg-1 {
    order: 2;
}

body.urdu-lang .header-controls .order-lg-2 {
    order: 1;
}

body.urdu-lang .dropdown-menu {
    text-align: right;
    right: auto;
    left: 0;
}

/* Hero Section RTL */
body.urdu-lang .home_3_hero h1,
body.urdu-lang .home_3_hero p,
body.urdu-lang .hero_sec_small_title {
    text-align: right;
}

/* body.urdu-lang .apply_services_btn_wrap {
    flex-direction: row-reverse;
} */

/* Hero Section Images RTL Positioning */
body.urdu-lang .home_3_hero .cm_pun {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.urdu-lang .home_3_hero .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.urdu-lang .home_3_hero .call_us_021 {
    right: 3% !important;
    left: auto !important;
}

/* Fix Hero Background for RTL */
body.urdu-lang .home_3_hero::before {
    transform: scaleX(-1);
    /* Mirror the background image */
}

/* Hero section background and layout */
body.urdu-lang .home_3_hero .container_fluid {
    direction: rtl;
}

body.urdu-lang .home_3_hero .row {
    direction: rtl;
}

/* Ensure hero content alignment */
body.urdu-lang .home_3_hero .col-sm-8,
body.urdu-lang .home_3_hero .col-md-6 {
    text-align: right;
}

/* Fix hero image positioning for RTL */
body.urdu-lang .home_3_hero .text-md-end {
    text-align: left !important;
}

body.urdu-lang .home_3_hero .text-center {
    text-align: center !important;
}

/* Fix text alignment in hero */
body.urdu-lang .home_3_hero .text-start {
    text-align: right !important;
}

/* Fix hand pattern background for RTL */
body.urdu-lang .hand_ptrn_wrap::after {
    left: -20%;
    right: auto;
    background-position: left;
    transform: scaleX(-1);
    /* Flip the background image pattern */
}

body.urdu-lang .hand_ptrn_wrap::before {

    right: 0%;
    left: auto;

}

/* Buttons RTL */
body.urdu-lang .btn {
    text-align: center;
}

body.urdu-lang .btn i,
body.urdu-lang .btn svg {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Search Input RTL */
body.urdu-lang .home_page_search {
    text-align: right;
    padding-right: 3rem;
    padding-left: 6rem;
}

body.urdu-lang .searc_icon_home {
    right: auto;
    left: auto;
    right: 1rem;
}

body.urdu-lang .searc_btn {
    right: auto;
    left: 0.5rem;
}

/* Service Cards RTL */
body.urdu-lang .home_page_servicves_card {
    direction: rtl;
}

body.urdu-lang footer .list-unstyled.d-flex {
    /* flex-direction: row-reverse !important; */
}

/* Slick Slider RTL Fixes */
body.urdu-lang .services_slide_1,
body.urdu-lang .services_slide_2 {
    direction: rtl;
}

body.urdu-lang .services_slide_1 .slick-slide,
body.urdu-lang .services_slide_2 .slick-slide {
    float: right;
    direction: rtl;
}

body.urdu-lang .services_slide_1 .slick-track,
body.urdu-lang .services_slide_2 .slick-track {
    direction: rtl;
}

/* Fix slider card content */
body.urdu-lang .services_slide_1 .home_page_servicves_card,
body.urdu-lang .services_slide_2 .home_page_servicves_card {
    direction: rtl;
    text-align: right;
}

/* Don't flip slider cards - they're already flipped by img rule */
body.urdu-lang .services_slide_1 img,
body.urdu-lang .services_slide_2 img {
    transform: scaleX(-1);
}

/* Fix button alignment in slider cards */
body.urdu-lang .services_slide_1 .btn,
body.urdu-lang .services_slide_2 .btn {
    text-align: center;
    font-size: 12px;
    min-width: 96px;
}

body.urdu-lang .home_page_servicves_card p {
    font-size: 12px;
}

/* Partners Slider RTL Fixes */
body.urdu-lang .partners_slider {
    direction: rtl;
}

body.urdu-lang .partners_slider .slick-slide {
    float: right;
    direction: rtl;
}

body.urdu-lang .partners_slider .slick-track {
    direction: rtl;
}

body.urdu-lang .partners_slider .partner_card {
    direction: rtl;
    text-align: right;
}

/* Ensure images in partner slider are flipped if needed, or un-flipped if logos */
/* Since logos are generally un-flipped, we might need to be specific */
/* But the general rule flips all images, then un-flips specific logos. */
/* Let's ensure partner images are treated correctly. Assuming they are content images for now. */

/* Section Titles RTL */
body.urdu-lang .section-title,
body.urdu-lang .section_small_title {
    text-align: right;
}

/* QR Code Section RTL */
body.urdu-lang .qr_code_wrap {
    /* flex-direction: row-reverse; */
}

body.urdu-lang .qr_code_wrap .d-flex {
    flex-direction: row-reverse;
}

/* Process Steps RTL */
/* body.urdu-lang .process-wrapper {
    flex-direction: row-reverse;
} */


body.urdu-lang .card_hover_blob {
    right: -15px;
    left: auto;


}

body.urdu-lang .step_process_tag {
    text-align: center;
}

/* Partners Section RTL */
body.urdu-lang .partner-box {
    text-align: center;
}

/* News Cards RTL */
body.urdu-lang .news-item {
    text-align: right;
}

body.urdu-lang .news-link-btn {
    text-align: center;
}

/* Footer RTL */
body.urdu-lang footer {
    text-align: right;
}

body.urdu-lang footer ul {
    padding-right: 0;
    padding-left: 0;
}

body.urdu-lang footer .d-flex {
    /* flex-direction: row-reverse; */
}

body.urdu-lang .footer_social_icons {
    /* flex-direction: row-reverse; */
}

/* Icons RTL Flip */
body.urdu-lang .fa-arrow-right::before {
    content: "\f060";
    /* arrow-left */
}

body.urdu-lang .fa-arrow-left::before {
    content: "\f061";
    /* arrow-right */
}

body.urdu-lang .fa-chevron-right::before {
    content: "\f053";
    /* chevron-left */
}

body.urdu-lang .fa-chevron-left::before {
    content: "\f054";
    /* chevron-right */
}

/* Form Elements RTL */
body.urdu-lang .form-control,
body.urdu-lang .form-select {
    text-align: right;
    direction: rtl;
}

body.urdu-lang .form-label {
    text-align: right;
}

body.urdu-lang .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

body.urdu-lang .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

/* Offcanvas RTL */
body.urdu-lang .offcanvas-header {
    flex-direction: row-reverse;
}

body.urdu-lang .offcanvas-body {
    text-align: right;
}

body.urdu-lang .offcanvas-end {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

body.urdu-lang .offcanvas-end.show {
    /* transform: translateX(0); */
}

/* AI Chatbot RTL */
body.urdu-lang .ai-offcanvas {
    direction: rtl;
}

body.urdu-lang .ai-chat-body {
    text-align: right;
}

body.urdu-lang .ai-input-wrapper {
    flex-direction: row-reverse;
}

body.urdu-lang .ai-input-wrapper input {
    text-align: right;
}

/* Language Toggle Styling */
/* .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
} */

/* .lang-opt {
    font-weight: 600;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-family: 'Outfit', sans-serif !important;
}

.lang-opt.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.lang-opt:hover {
    color: #fff;
} */

.navbar.scrolled .lang-opt {
    color: rgba(0, 0, 0, 0.7);
}

/* .navbar.scrolled .lang-opt.active {
    color: #000;
    background: rgba(0, 0, 0, 0.1);
} */

/* .navbar.scrolled .lang-opt:hover {
    color: #000;
} */

/* Fix header controls in Urdu mode */
body.urdu-lang .lang-toggle {
    background: rgba(255, 255, 255, 0.1);
    direction: ltr;
    /* Keep LTR for toggle buttons */
}

body.urdu-lang .navbar.scrolled .lang-toggle {
    background: rgba(0, 0, 0, 0.05);
}

body.urdu-lang .lang-opt {
    text-align: center;
}

/* Language Switch Animation Overlay */
.language-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a5f3f 0%, #2d8659 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.language-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.language-transition-content {
    text-align: center;
    color: white;
}

.language-transition-content .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.language-transition-content p {
    margin-top: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Fade Animation for Content */
body.language-switching {
    overflow: hidden;
}

body.language-switching .home_3_body {
    animation: fadeOut 0.3s ease;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    body.urdu-lang .offcanvas-start {
        right: auto;
        left: 0;
    }

    body.urdu-lang .offcanvas-header {
        flex-direction: row-reverse;
    }

    body.urdu-lang .navbar-nav {
        text-align: right;
    }
}

/* Utility Classes for Urdu */
.urdu-text {
    font-family: 'Noto Nastaliq Urdu', 'Outfit', sans-serif;
    direction: rtl;
    text-align: right;
}

.urdu-font {
    font-family: 'Noto Nastaliq Urdu', 'Outfit', sans-serif;
}

/* Ensure proper line height for Urdu text */
body.urdu-lang {
    line-height: 1.8;
}

body.urdu-lang h1 {
    line-height: 1.4;
}

body.urdu-lang h2,
body.urdu-lang h3 {
    line-height: 1.5;
}

/* Adjust spacing for better Urdu readability */
body.urdu-lang p {
    margin-bottom: 1.25rem;
}

/* Fix Bootstrap RTL issues */
body.urdu-lang .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.urdu-lang .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

body.urdu-lang .ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

body.urdu-lang .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

body.urdu-lang .ms-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

body.urdu-lang .ms-4 {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
}

body.urdu-lang .ms-5 {
    margin-left: 0 !important;
    margin-right: 3rem !important;
}

body.urdu-lang .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

body.urdu-lang .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

body.urdu-lang .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

body.urdu-lang .me-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

body.urdu-lang .me-5 {
    margin-right: 0 !important;
    margin-left: 3rem !important;
}

body.urdu-lang .ps-1 {
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
}

body.urdu-lang .ps-2 {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

body.urdu-lang .ps-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

body.urdu-lang .ps-4 {
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
}

body.urdu-lang .ps-5 {
    padding-left: 0 !important;
    padding-right: 3rem !important;
}

body.urdu-lang .pe-1 {
    padding-right: 0 !important;
    padding-left: 0.25rem !important;
}

body.urdu-lang .pe-2 {
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

body.urdu-lang .pe-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

body.urdu-lang .pe-4 {
    padding-right: 0 !important;
    padding-left: 1.5rem !important;
}

body.urdu-lang .pe-5 {
    padding-right: 0 !important;
    padding-left: 3rem !important;
}

/* Text alignment fixes */
body.urdu-lang .text-start {
    text-align: right !important;
}

body.urdu-lang .text-end {
    text-align: left !important;
}

.hand_ptrn_wrap::before {
    content: "";
    position: absolute;
    width: 113%;
    height: 100px;
    left: -20%;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18.5px);
    bottom: -70px;
}

body.urdu-lang .download_app_desc_info {

    padding-right: 18px;
    padding-left: 0;
    font-size: 14px;
}

body.urdu-lang .download_app_desc_info::before {

    left: auto;
    right: 0;
}

body.urdu-lang .home_3_hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/home_bg_updated.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0.6;
}




/* new urdu style  */

body.urdu-lang .hero_sec_small_title {
    font-size: 24px;
    margin-bottom: 44px !important;

}

body.urdu-lang .home_3_hero_title {
    font-size: 3rem;
    margin-bottom: 36px !important;
}

body.urdu-lang .btn_track_appp_btn {
    font-size: 14px;
}

body.urdu-lang .btn-primary-yellow {
    font-size: 14px;
}

body.urdu-lang .hero_desc {
    font-size: 16px;
    line-height: 2.2;
}

body.urdu-lang .section-title {
    font-size: 2rem;
    margin-bottom: 28px !important;
}

body.urdu-lang .partner-box h6 {
    font-size: 1rem;
    line-height: 2;
}

body.urdu-lang .lang-toggle a {
    color: #333;
}

body.urdu-lang .custom-accordion .accordion-header .accordion-button::after {
    right: 0;
    left: auto;
}

body.urdu-lang .custom-accordion .accordion-header .accordion-button {

    padding-right: 38px;

}

body.urdu-lang .accordion-button span::before {
    left: unset;
    right: -4px;
}

body.urdu-lang .select_services_wrap h6 {
    margin-bottom: 16px !important;
}


body.urdu-lang .offcanvas_bg {
    background-image: url("../images/offcanvas_services_urdu.png");
    background-position: left bottom;

}

body.urdu-lang .offcanvas_decor_bottom {
    left: 0;
    right: auto;
}

body.urdu-lang .track_app_btn {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.urdu-lang .search-clear-icon {
    left: 15px !important;
    right: auto !important
}

body.urdu-lang .search-service.service-card-item-dynamic img {
    margin-left: 12px;
    margin-right: 0px !important;
}

body.urdu-lang .qr_code_wrap img {
    transform: scaleX(1);
}

body.urdu-lang .section_small_title {
    margin-bottom: 24px;

}

body.urdu-lang .service-search-box .search-main-icon {
    left: auto;
    right: 15px;

}

body.urdu-lang .user-icon-wrapper {
    transform: scaleX(-1);
}

body.urdu-lang .login-header-btn.dropdown-toggle span {
    transform: scaleX(1);
}

body.urdu-lang .home_3_header .dropdown-toggle::after {
    margin-top: 6px;
}

body.urdu-lang .news-details-content-box h4 {
    font-size: 30px;
    line-height: 1.6;
}

body.urdu-lang .offcanvas-footer .btn {
    min-width: 120px;
    font-size: 14px;
}

body.urdu-lang .custom-lang-toggle.urdu-active .lang-switch-knob {
    left: 0px;
    right: 14px;
}

body.urdu-lang .lang-switch-track {
    top: 5px;
}

body.urdu-lang .hero_logos img,
body.urdu-lang .call_us_img,
body.urdu-lang .dlims-services-img,
body.urdu-lang .dlims-services-logo,
body.urdu-lang .wildlife-department-img,
body.urdu-lang .register_img_urdu,
body.urdu-lang table tbody tr td img,
body.urdu-lang .qr_code_modal img,
body.urdu-lang .onboarding-img,
body.urdu-lang .download_sec img {
    transform: scaleX(1);
}

body.urdu-lang #doorstepModal .modal-content {
    background-position: left center;
}

body.urdu-lang .custom-doc-table thead th.rounded-end {
    border-radius: 8px 0px 0px 8px !important;
}

body.urdu-lang .custom-doc-table thead th.rounded-start {
    border-radius: 0px 8px 8px 0px !important;
}

body.urdu-lang .hero_sub_title {
    font-size: 20px;
    margin-bottom: 28px !important;
}

body.urdu-lang .hero_main_title {
    font-size: 46px;
}

body.urdu-lang .hero_desc_text {
    line-height: 2.2;
}

body.urdu-lang .btn_explore_services_hero,
body.urdu-lang .btn_apply_service_hero {
    font-size: 13px;
    padding: 6px 18px;
}

body.urdu-lang .explore_desc {
    line-height: 2.3;
}

body.urdu-lang .download_citizen_circle::before {
    right: -26%;
    left: 0;
}

body.urdu-lang .lead {
    font-size: 1rem;
    line-height: 2.3;
}

body.urdu-lang .view_all_btn {

    right: auto;
    left: 0;
}

body.urdu-lang .service-expanded-box h5 {
    margin-bottom: 18px !important;

}

body.urdu-lang .service-expanded-box p {
    line-height: 2.2 !important;

}

body.urdu-lang .service-expanded-box .apply-option-card h6 {
    margin-bottom: 12px !important;

}

body.urdu-lang .accordion-button {
    font-size: 0.9rem;
}

/* Responsive Adjustments for Urdu Titles */
@media (max-width: 1200px) {
    body.urdu-lang .home_3_hero_title {
        font-size: 2.5rem;
    }

    body.urdu-lang .hero_sec_small_title {
        font-size: 22px;
    }
}

@media (max-width: 991.98px) {
    body.urdu-lang .home_3_hero_title {
        font-size: 2.2rem;
    }

    body.urdu-lang .hero_sec_small_title {
        font-size: 20px;
    }

    body.urdu-lang .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    body.urdu-lang .home_3_hero_title {
        font-size: 1.8rem;
    }

    body.urdu-lang .hero_sec_small_title {
        font-size: 18px;
    }

    body.urdu-lang .section-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 575.98px) {
    body.urdu-lang .home_3_hero_title {
        font-size: 1.6rem;
    }

    body.urdu-lang .hero_sec_small_title {
        font-size: 16px;
    }

    body.urdu-lang .section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    body.urdu-lang .home_3_hero_title {
        font-size: 1.4rem;
    }
}