/* =========================================
   AiMoneyGuideCo — Premium WordPress Comments
   Existing Astra Comment Section
   ========================================= */

.comments-area {
    background: #ffffff;
    border: 1px solid #e8e8ee;
    border-radius: 18px;
    padding: 32px;
    margin-top: 45px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

/* Comment Heading */
.comments-title,
.comment-reply-title {
    color: #171717;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

/* Small line under heading */
.comments-title::after,
.comment-reply-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: #1A139C;
    border-radius: 10px;
    margin-top: 12px;
}

/* Form spacing */
.comment-form {
    margin-top: 28px;
}

/* Labels */
.comment-form label {
    display: block;
    color: #252525;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Inputs + Textarea */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dfe1e8;
    border-radius: 10px;
    color: #222222;
    font-size: 15px;
    padding: 13px 15px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

/* Comment textarea */
.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Focus Effect */
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    border-color: #1A139C;
    box-shadow: 0 0 0 3px rgba(26, 19, 156, 0.08);
}

/* Placeholder */
.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: #9a9aa3;
}

/* Form Fields spacing */
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url,
.comment-form .comment-form-comment {
    margin-bottom: 18px;
}

/* Checkbox area */
.comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 8px 0 22px;
}

/* Checkbox */
.comment-form .comment-form-cookies-consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: #1A139C;
    flex-shrink: 0;
}

/* Checkbox text */
.comment-form .comment-form-cookies-consent label {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    color: #666666;
}

/* Post Comment Button */
.comment-form .submit {
    background: #1A139C;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 13px 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 16px rgba(26, 19, 156, 0.18);
}

/* Button Hover */
.comment-form .submit:hover {
    background: #120d78;
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(26, 19, 156, 0.25);
}

/* Existing Comments */
.comments-area .comment-list {
    margin-top: 30px;
}

.comments-area .comment {
    border-bottom: 1px solid #eeeeee;
    padding: 20px 0;
}

.comments-area .comment:last-child {
    border-bottom: none;
}

/* Comment Author */
.comments-area .comment-author {
    font-weight: 700;
    color: #222222;
}

/* Comment Content */
.comments-area .comment-content {
    color: #555555;
    line-height: 1.7;
    margin-top: 8px;
}

/* Reply Link */
.comments-area .reply a {
    color: #1A139C;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.comments-area .reply a:hover {
    text-decoration: underline;
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .comments-area {
        padding: 22px 18px;
        margin-top: 30px;
        border-radius: 14px;
    }

    .comments-title,
    .comment-reply-title {
        font-size: 22px;
    }

    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        font-size: 14px;
        padding: 12px 13px;
    }

    .comment-form textarea {
        min-height: 130px;
    }

    .comment-form .submit {
        width: 100%;
        padding: 13px 20px;
    }
}
/* =========================================
   AiMoneyGuideCo
   Premium Comment Fields Layout
   ========================================= */

/* Keep the three fields properly separated */
.comments-area .comment-form-author,
.comments-area .comment-form-email,
.comments-area .comment-form-url {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

/* Labels */
.comments-area .comment-form-author label,
.comments-area .comment-form-email label,
.comments-area .comment-form-url label {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222222 !important;
}

/* Inputs */
.comments-area .comment-form-author input,
.comments-area .comment-form-email input,
.comments-area .comment-form-url input {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dedee6 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    color: #222222 !important;
    outline: none !important;
    transition: all 0.25s ease !important;
}

/* Input focus */
.comments-area .comment-form-author input:focus,
.comments-area .comment-form-email input:focus,
.comments-area .comment-form-url input:focus {
    border-color: #1A139C !important;
    box-shadow: 0 0 0 3px rgba(26,19,156,0.08) !important;
}

/* Comment field */
.comments-area .comment-form-comment {
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

/* Comment label */
.comments-area .comment-form-comment label {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222222 !important;
}

/* Textarea */
.comments-area .comment-form-comment textarea {
    width: 100% !important;
    min-height: 150px !important;
    box-sizing: border-box !important;
    padding: 14px 15px !important;
    background: #ffffff !important;
    border: 1px solid #dedee6 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

/* Checkbox */
.comments-area .comment-form-cookies-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 5px 0 22px !important;
    padding: 0 !important;
}

.comments-area .comment-form-cookies-consent input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    margin: 2px 0 0 !important;
    flex: 0 0 17px !important;
    accent-color: #1A139C !important;
}

.comments-area .comment-form-cookies-consent label {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #666666 !important;
}

/* Submit button */
.comments-area .form-submit {
    margin: 0 !important;
    padding: 0 !important;
}

.comments-area .form-submit .submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 26px !important;
    background: #1A139C !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.comments-area .form-submit .submit:hover {
    background: #120d78 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(26,19,156,0.20) !important;
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    .comments-area .comment-form-author,
    .comments-area .comment-form-email,
    .comments-area .comment-form-url,
    .comments-area .comment-form-comment {
        margin-bottom: 16px !important;
    }

    .comments-area .comment-form-author input,
    .comments-area .comment-form-email input,
    .comments-area .comment-form-url input {
        height: 46px !important;
    }

    .comments-area .form-submit .submit {
        width: 100% !important;
    }
}
/* عنوان واري حصي کي هيڊر کان هيٺ ڇڪڻ ۽ سوڙهو ڪرڻ لاءِ */
.single-post .ast-single-post-order,
.single-post .entry-header {
    margin-top: 100px !important; /* عنوان کي هيڊر کان هيٺ آڻڻ لاءِ */
    padding-top: 20px !important;  /* مٿان کان سوڙهو ڪرڻ لاءِ */
    padding-bottom: 20px !important; /* هيٺان کان سوڙهو ڪرڻ لاءِ */
}

/* جيڪڏهن پورو بينر نيري رنگ جو آهي ته ان کي سيٽ ڪرڻ لاءِ */
.single-post .ast-single-entry-banner {
    padding-top: 120px !important;
    padding-bottom: 30px !important;
}
/* عنوان کي پريميئم بولڊ، اکرن کي ننڍو ۽ دٻي کي سوڙهو ڪرڻ لاءِ */
.single-post .entry-title {
    font-weight: 800 !important; /* اکرن کي تمام گهڻو بولڊ ڪرڻ لاءِ */
    font-size: 22px !important;  /* اکرن جي سائيز کي موبائيل لاءِ ننڍو ڪرڻ لاءِ */
    line-height: 1.3 !important; /* لائنن جي وچ ۾ فاصلي کي درست ڪرڻ لاءِ */
}

/* نيري بينر يا دٻي کي مٿان ۽ هيٺان کان وڌيڪ دٻائڻ (سوڙهو ڪرڻ) لاءِ */
.single-post .ast-single-entry-banner {
    padding-top: 80px !important;   /* مٿيون فاصلو گھٽائڻ لاءِ */
    padding-bottom: 10px !important; /* هيٺيون فاصلو گھٽائڻ لاءِ ته موضوع مٿي اچي */
}

.single-post .ast-single-post-order,
.single-post .entry-header {
    margin-top: 80px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* 1. عنوان کو مزید زیادہ بولڈ (Extra Bold) کرنے کے لیے */
.single-post .entry-title {
    font-weight: 900 !important; /* حروف کو انتہائی گہرا اور بولڈ کرنے کے لیے */
    font-size: 22px !important;
    line-height: 1.3 !important;
}

/* 2. ہیڈر سیکشن کی اونچائی کم کر کے لوگو کے ساتھ فٹ کرنے کے لیے */
.site-header, 
#masthead, 
.ast-main-header-bar {
    padding-top: 5px !important;    /* اوپر کا فالتو فاصلہ ختم کرنے کے لیے */
    padding-bottom: 5px !important; /* نیچے کا فالتو فاصلہ ختم کرنے کے لیے */
    min-height: auto !important;    /* ہیڈر کی فکس اونچائی کو ختم کرنے کے لیے */
}

/* موبائل مینیو اور لوگو کے درمیانی فاصلے کو متوازن کرنا */
.site-header .site-branding img, 
.ast-mobile-header-wrap .ast-site-identity {
    max-height: 45px !important; /* لوگو کی ہائٹ کو مینیو بار میں فٹ رکھنے کے لیے */
}
/* 1. عنوان کي مڪمل ايڪسٽرا بولڊ رکڻ لاءِ */
.single-post .entry-title {
    font-weight: 900 !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
}

/* 2. هيڊر پٽي کي سنهو رکڻ ۽ لوگو کي وچ ۾ فٽ ڪرڻ لاءِ */
.site-header, 
#masthead, 
.ast-main-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
    padding-top: 5px !important;    /* مٿان معمولي فاصلو */
    padding-bottom: 5px !important; /* هيٺان معمولي فاصلو */
    min-height: auto !important;
    display: flex !important;
    align-items: center !important; /* لوگو ۽ مينيو کي پٽي جي بلڪل وچ ۾ رکڻ لاءِ */
}

/* لوگو واري دٻي کي مٿي ڇڪڻ ۽ فٽ ڪرڻ لاءِ */
.site-branding, 
.ast-site-identity, 
.ast-mobile-header-wrap .ast-site-identity {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* لوگو جي سائيز کي پٽي جي حساب سان بيلنس ڪرڻ */
.site-header .site-branding img, 
.ast-mobile-header-wrap .ast-site-identity img {
    max-height: 40px !important; /* لوگو کي پٽي جي اندر فٽ رکڻ لاءِ */
    width: auto !important;
}
/* موبائيل مينيو کي پوري اسڪرين تي ڪٿي به رکڻ جو مڪمل اختيار وارو ڪوڊ */
.ast-mobile-header-wrap .ast-mobile-menu-trigger-wrapper,
button.menu-toggle {
    position: absolute !important;
    right: auto !important;
    left: 85% !important; /* هن سان اڳتي پوئتي ٿيندو */
    
    /*--- هي نئون اختيار آهي مينيو کي مٿي کڻڻ ۽ وچ تي ڪرڻ لاءِ ---*/
    top: 50% !important; 
    transform: translateY(-50%) !important;
}
/* موبائيل پاپ اپ مينيو مان سرچ باڪس کي مڪمل ختم ڪرڻ جو پڪو حل */
.ast-mobile-header-content .ast-search-menu-item, 
.ast-mobile-header-content form.search-form,
.ast-mobile-popup-content .search-form {
    display: none !important;
}
/* صرف ڪمپيوٽر تي سنگل پوسٽ جي ٽائٽل کي هيٺ ڌڪڻ لاءِ */
@media (min-width: 922px) {
    .single-post .ast-single-entry-banner {
        padding-top: 140px !important;
    }
}
/* صرف ڪمپيوٽر تي سب مينيو کي رنگين باڪس ڏيڻ لاءِ */
@media (min-width: 922px) {
    .main-header-menu .sub-menu {
        background-color: #0c0d21 !important; /* پٺيان گهرو نيرو/ڪارو رنگ */
        border: 1px solid #22264b !important; /* پاسن کان هلڪي بارڊر */
        padding: 10px 0 !important;
    }
    .main-header-menu .sub-menu a {
        color: #ffffff !important; /* اکرن جو رنگ اڇو */
        padding: 8px 20px !important;
        display: block;
    }
    /* جڏهن اکرن تي ماؤس اچي ته رنگ تبديل ٿئي */
    .main-header-menu .sub-menu a:hover {
        background-color: #1e224f !important; 
        color: #ffffff !important;
    }
}

/* صرف ڊيسڪٽاپ تي پيجز جو هيڊر ڪارو ڪرڻ لاءِ (هوم پيج کي ڇڏي) */
@media (min-width: 922px) {
    body:not(.home).page .site-header,
    body:not(.home).page .main-header-bar {
        background-color: #0c0d21 !important;
    }
}
/* صرف ڪمپيوٽر تي پيجز جي مواد ۽ عنوان کي هيڊر کان هيٺ ڌڪڻ لاءِ */
@media (min-width: 922px) {
    body:not(.home).page .site-content {
        padding-top: 140px !important;
    }
}
/* ڪمپيوٽر اسڪرين لاءِ - هٿ سان سڀ ڪجهه سيٽ ڪرڻ وارو فليڪسيبل ڪوڊ */
@media (min-width: 769px) {
    /* سڄي ڪيري لوپ جي پوزيشن */
    .wp-block-query {
        width: 100vw !important;
        max-width: 100vw !important;
        
        /* ۱. کاٻي ۽ ساڄي پاسي ٻاهر ڪڍڻ/اندر ڪرڻ (ليفٽ رائٽ ڌڪڻ) */
        margin-left: calc(50% - 210px) !important; /* توهان جو سيٽ ٿيل 325px */
        margin-right: calc(50% - 50vw) !important;
        
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* باڪسز جو پاڻ ۾ فاصلو ۽ ترتيب */
    .wp-block-post-template {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; 
        gap: 25px !important; /* باڪسز جي وچ واري خالي جڳهه (Gap) */
        width: 100% !important;
        max-width: 1200px !important; 
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* هر هڪ باڪس (Card) جي هٿ سان سيٽنگ */
    .wp-block-post-template > li {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
        box-sizing: border-box !important;

        /* ۲. باڪس کي سوڙهو (ويڪر گهٽ) ڪرڻ جو سسٽم */
        /* هن 280px کي هٿ سان تبديل ڪريو. جيتري ويليو گهٽ ڪندؤ (مثال 250px)، باڪس اوترا سوڙها ٿيندا */
        width: 280px !important; 

        /* ۳. باڪس کي هيٺ ڊگهو ڪرڻ ۽ اندرين جڳهه سيٽ ڪرڻ (مٿان/هيٺان، کاٻي/ساڄي) */
        /* پهرين ويليو (45px) باڪس کي هيٺ ڊگهو ڪندي، ٻي ويليو (20px) کاٻي ساڄي جي جڳهه ٺاهيندي */
        padding: 45px 20px 45px 20px !important; 
    }

    /* تصوير جي سائيز */
    .wp-block-post-template img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
    }

    /* عنوان جي سيٽنگ */
    .wp-block-post-template h2, 
    .wp-block-post-template h3,
    .wp-block-post-template .wp-block-post-title a {
        font-size: 21px !important;
        line-height: 1.4 !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
    }
}
/* =========================================
   AiMoneyGuideCo
   MOBILE 1-COLUMN FULL WIDTH MASTER CODE (MAX CONTROL)
   ========================================= */

@media screen and (max-width: 768px) {

    /* اصل پوسٽ لسٽ فريم */
    ul.wp-block-post-template.aimg-post-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important; /* باڪسن جي وچ واري هيٺين مٿين وٿي */
        
        width: auto !important;
        max-width: none !important;
        
        /* ۱. هٿ سان ٻنهي پاسن کان ٻاهر ڇڪڻ جو مڪمل اختيار (Negative Margin) */
        /* جيڪڏهن باڪس اڃا وڌيڪ ٻاهر ڇڪڻا آهن، ته ان -10px کي وڌائي -15px, -20px, يا -30px ڪندا وڃو */
        margin-left: -40px !important; 
        margin-right: -40px !important;
        
        /* ۲. باڪس جي اسڪرين ڪنڊن کان پوزيشن فٽ ڪرڻ جو اختيار */
        /* هن وقت هي 10px تي آهي. ان کي تبديل ڪري توهان ٻاهرئين فريم جو توازن رکي سگهو ٿا */
        padding-left: 20px !important; 
        padding-right: 20px !important;
        
        box-sizing: border-box !important;
        list-style: none !important;
    }

    /* پريميئم نيرين ٽڪليون ۽ پاڇو وارو ڪارڊ */
    ul.wp-block-post-template.aimg-post-card > li.wp-block-post {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 0 5px 0 !important;
        
        /* ۳. باڪس جي اندرين جڳهه ۽ هيٺ ڊگهو ڪرڻ جو اختيار */
        padding: 15px 15px 24px 15px !important; 

        box-sizing: border-box !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 16px !important; 
        
        /* نيريون ٽڪليون ۽ پاڇو */
        background-color: #ffffff !important;
        background-image: linear-gradient(to right, rgba(0, 102, 255, 0.03) 1px, transparent 1px), 
                          linear-gradient(to bottom, rgba(0, 102, 255, 0.03) 1px, transparent 1px) !important;
        background-size: 20px 20px !important;
        box-shadow: 0 6px 20px rgba(0, 102, 255, 0.04) !important;
        overflow: hidden !important;
    }

    /* تصوير جو مڪمل ڪنٽرول */
    ul.wp-block-post-template.aimg-post-card > li.wp-block-post img,
    .aimg-featured-container img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        object-fit: fill !important; 

        /* ۴. تصوير جي اوچائي (Height) هٿ سان سيٽ ڪرڻ */
        height: 175px !important;
        max-height: 175px !important;

        margin: 0 0 15px 0 !important;
        border-radius: 10px !important;
    }

    /* Title ڪنٽينر */
    ul.wp-block-post-template.aimg-post-card .wp-block-post-title {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* عنوان کي بولڊ (موٽو) ۽ مناسب سائيز ۾ رکڻ واري سيٽنگ */
    ul.wp-block-post-template.aimg-post-card .wp-block-post-title a {
        display: block !important;
        width: 100% !important;
        color: #0f172a !important;
        text-decoration: none !important;

        /* ۵. عنوان جي اکرن جي سائيز ۽ ٿولهه (Bold) جو اختيار */
        font-size: 20px !important; 
        font-weight: 900 !important; 
        
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* تاريخ جي صحيح سيٽنگ */
    ul.wp-block-post-template.aimg-post-card .wp-block-post-date {
        margin-top: 10px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #0f172a !important;
    }

    /* ڪلڪ ڪرڻ سان نيرو رنگ ظاهر ڪرڻ جو صحيح ڪوڊ */
    ul.wp-block-post-template.aimg-post-card .wp-block-post-title a:active,
    ul.wp-block-post-template.aimg-post-card .wp-block-post-title a:hover { 
        color: #0066ff !important; 
    }


/* سڄي ويب سائيٽ جو موبائيل تي لوڏو (Side Scrolling) ختم ڪرڻ جو ڪوڊ */
@media screen and (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* پيج کي کاٻي ساڄي لوڏا کائڻ کان زبردستي روڪيندو */
    }
}
/* صرف موبائل اسڪرين لاءِ پريميم باڪس ۽ مڪمل اختيار */
@media (max-width: 767px) {
    
    /* 1. باڪس جو اسٽائل (سائڊن کان وڌيڪ چٽو ڪرڻ لاءِ) */
    .ast-related-posts-wrapper .ast-related-post {
        background #18786 important;
        border-radius: 14px !important;
        
        /* باڪس کي چٽو ڪرڻ لاءِ هيٺين '0.15' کي وڌائي 0.20 ڪري سگهو ٿا */
        box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.15) !important; 
        
        /* باڪس جي بارڊر لڪير کي چٽو ڪرڻ لاءِ رنگ تبديل ڪري سگهو ٿا */
        border: 2px solid #cbd5e1 !important; 
        
      padding: 16px 16px 0px 16px !important;
        margin-bottom: 5px !important; /* ٻن باڪسن جي وچ ۾ فاصلو */
    }

    /* 2. تصوير ۽ عنوان جو گيپ مڪمل ختم ڪرڻ لاءِ */
    .ast-related-posts-wrapper .ast-related-post-featured-img {
        margin-bottom: 0px !important; /* گيپ ختم ڪرڻ لاءِ 0 ڪيو ويو آهي */
    }
    .ast-related-posts-wrapper .ast-related-post-featured-img img {
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* 3. عنوان (ٽائيٽل) جو گيپ ۽ اندروني چٽي لڪير */
    .ast-related-posts-wrapper .entry-header .ast-related-post-title {
        margin-top: -50px !important;    /* تصوير کان فاصلو (وڌائي يا گھٽائي سگھو ٿا) */
        margin-bottom: 12px !important; /* لڪير کان هيٺيون فاصلو */
        padding-bottom: 12px !important;
        
        /* عنوان جي هيٺان چٽي لڪير (رنگ وڌيڪ واضح ڪيو ويو آهي) */
        border-bottom: 2px solid #94a3b8 !important; 
    }

    /* 4. عنوان جو فونٽ ۽ رنگ (هاڻي لنڪ جي رنگن جي مڪمل اختيار سان) */
    .ast-related-posts-wrapper .entry-header .ast-related-post-title a {
        font-size: 22px !important;
        line-height: 1.4 !important;
        color: #0f172a !important; /* عام حالتن ۾ چٽو ڪارو رنگ */
        font-weight: 700 !important;
        text-decoration: none !important;
        display: block !important;
        transition: color 0.2s ease !important; /* رنگ نرمائي سان تبديل ٿيڻ لاءِ */
    }

    /* موبائل تي جڏهن عنوان تي آڱر رکجي يا ڪلڪ ڪجي (Hover/Active State) */
    .ast-related-posts-wrapper .entry-header .ast-related-post-title a:hover,
    .ast-related-posts-wrapper .entry-header .ast-related-post-title a:active,
    .ast-related-posts-wrapper .entry-header .ast-related-post-title a:focus {
        color: #0073aa !important; /* ڪلڪ ڪرڻ وقت هي نيرو رنگ ظاهر ٿيندو */
    }


    /* 5. پروفائل، نالو ۽ تاريخ جي الائنمينٽ */
    .ast-related-posts-wrapper .entry-meta {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: -10px !important;

    }

    /* نالي جو سيڪشن */
    .ast-related-posts-wrapper .entry-meta .posted-by,
    .ast-related-posts-wrapper .entry-meta .ast-related-post-author {
        display: flex !important;
        align-items: center !important;
    }

    /* تاريخ کي کاٻي پاسي ڪرڻ ۽ فاصلو اختيار ڏيڻ */
    .ast-related-posts-wrapper .entry-meta .posted-on,
    .ast-related-posts-wrapper .entry-meta .ast-related-post-date {
        margin-left: auto !important; 
        font-size: 13px !important;
        color: #475569 !important; /* تاريخ جو رنگ چٽو ڪيو ويو آهي */
    }
}
/* مين عنوان (Related Articles) کي ڪارڊ ۾ رکڻ لاءِ */
@media (max-width: 767px) {
    .ast-related-posts-title-section {
        background: #18786 !important; /* ڪارڊ جو اڇو رنگ */
        border-radius: 12px !important; /* ڪنڊون گول ڪرڻ */
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.07) !important; /* خوبصورت پريميم شيڊو */
        padding: 14px 20px !important; /* ڪارڊ جي اندروني جڳهه */
        margin-bottom: 20px !important; /* هيٺين پوسٽن کان فاصلو */
        border: 2px solid #cbd5e1 !important; /* ٻاهرين چٽي لڪير */
        text-align: center !important; /* عنوان کي وچ ۾ ڪرڻ لاءِ */
    }

    /* مين عنوان جي اکرن جو اسٽائل */
    .ast-related-posts-title-section .ast-related-posts-title {
        font-size: 25px !important;
        color: #0f172a !important; /* چٽو ڪارو رنگ */
        font-weight: 700 !important;
        margin: 0 !important;
    }
}