/* css/rtl.css — Persian (RTL) overrides */

/* ---------- Global direction ---------- */
html[lang="fa"] {
    direction: rtl;
}

html[lang="fa"] body {
    font-family: Tahoma, "Iran Sans", "Segoe UI", Arial, sans-serif;
    text-align: right;
}

/* Headings fallback font for Persian */
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6 {
    font-family: Tahoma, "Iran Sans", "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

/* ---------- Header / navigation mirroring ---------- */
html[lang="fa"] .header-container {
    direction: rtl;
}

html[lang="fa"] .logo {
    grid-column: 1;
}

html[lang="fa"] .desktop-nav {
    grid-column: 2;
}

html[lang="fa"] .header-actions {
    grid-column: 3;
    justify-self: start;
}

html[lang="fa"] .mobile-nav {
    right: auto;
    left: -100%;
    transition: left 0.35s ease;
}

html[lang="fa"] .mobile-nav.active {
    right: auto;
    left: 0;
}

html[lang="fa"] .mobile-nav-content a {
    text-align: right;
}

/* ---------- Language toggle ---------- */
.lang-toggle {
    padding: 0.5rem 1rem;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}

/* ---------- Hero grid mirroring (RTL) ---------- */
html[lang="fa"] .hero-grid {
    direction: rtl;
    /* Force exactly 12 columns */
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important; 
}

/* 1. Move the section number (e.g., ۰۱) to the far right */
html[lang="fa"] .hero-meta {
    grid-column: 12 / 13 !important;
    text-align: right;
    align-items: flex-end;
}

/* 2. Text block on the left (7 columns wide) */
html[lang="fa"] .hero-content {
    grid-column: 2 / 9 !important;
    text-align: right;
    min-width: 0 !important; 
}

/* 3. Image block on the right (4 columns wide) */
html[lang="fa"] .hero-visual {
    grid-column: 9 / 13 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- TABLET & MOBILE FIX --- */
@media (max-width: 1023px) {
    html[lang="fa"] .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Stack everything perfectly on mobile */
    html[lang="fa"] .hero-meta {
        align-items: flex-start !important;
        text-align: right !important;
        width: 100% !important;
    }
    
    html[lang="fa"] .hero-content {
        width: 100% !important;
        text-align: right !important;
    }
    
    html[lang="fa"] .hero-visual {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        /* Ensure the image container has a nice height on mobile */
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        max-height: 400px !important;
    }
    
    /* Ensure the glass strip is readable on mobile */
    html[lang="fa"] .hero-visual--glass {
        aspect-ratio: 3 / 4 !important;
    }
}

/* ---------- Editorial grid mirroring ---------- */
html[lang="fa"] .editorial-grid {
    direction: rtl;
}

html[lang="fa"] .section-index {
    grid-column: 12 / 13;
    text-align: right;
}

html[lang="fa"] .section-content {
    grid-column: 2 / 11;
    text-align: right;
}

/* ---------- Quotes mirrored ---------- */
html[lang="fa"] .rogers-quote,
html[lang="fa"] .gendlin-quote {
    padding-left: 0;
    padding-right: 1.25rem;
    text-align: right;
}

html[lang="fa"] .rogers-quote::before,
html[lang="fa"] .gendlin-quote::before {
    left: auto;
    right: 0;
}

html[lang="fa"] .rogers-quote-text,
html[lang="fa"] .gendlin-quote p,
html[lang="fa"] .rogers-quote-author,
html[lang="fa"] .gendlin-quote cite {
    text-align: right;
}

/* ---------- Topic list (Schwerpunkte / about) ---------- */
html[lang="fa"] .topic-list {
    direction: rtl;
}

html[lang="fa"] .topic-item {
    flex-direction: row; 
    text-align: right;
}

html[lang="fa"] .topic-arrow {
    transform: scaleX(-1) !important; 
    display: inline-block !important;
    margin-right: 0;
    margin-left: 1rem !important; 
}

@media (max-width: 767px) {
    html[lang="fa"] .topic-item {
        display: flex !important;
        flex-direction: row !important; 
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        padding: 1rem 0 !important;
    }

    html[lang="fa"] .topic-title,
    html[lang="fa"] .topic-item h4,
    html[lang="fa"] .topic-item > span {
        flex: 1 !important; 
        text-align: right !important;
    }

    html[lang="fa"] .topic-arrow {
        transform: scaleX(-1) !important; 
        margin-top: 0.2rem !important;
        flex-shrink: 0 !important; 
    }
}

/* ---------- Process (Methode) ---------- */
html[lang="fa"] .process {
    direction: rtl;
}

html[lang="fa"] .process::before {
    left: auto;
    right: 2rem;
}

html[lang="fa"] .process li {
    grid-template-columns: 4rem 1fr;
    direction: rtl;
    text-align: right;
}

/* ---------- Method / fee / info blocks ---------- */
html[lang="fa"] .method-item,
html[lang="fa"] .fee-info,
html[lang="fa"] .info-section,
html[lang="fa"] .about-section {
    text-align: right;
}

html[lang="fa"] .method-item {
    grid-template-columns: 80px 1fr;
}

/* ---------- Contact form ---------- */
html[lang="fa"] .contact-form,
html[lang="fa"] .form-group,
html[lang="fa"] .checkbox-group {
    text-align: right;
    direction: rtl;
}

html[lang="fa"] .form-group label,
html[lang="fa"] .checkbox-group label {
    text-align: right;
}

html[lang="fa"] .form-group input,
html[lang="fa"] .form-group textarea {
    direction: rtl;
    text-align: right;
}

html[lang="fa"] .contact-item,
html[lang="fa"] .contact-item h3,
html[lang="fa"] .contact-details {
    text-align: right;
}

html[lang="fa"] .contact-item address {
    text-align: right;
    font-style: normal;
}

/* ---------- FAQ (Rahmenbedingungen) ---------- */
html[lang="fa"] .faq-question {
    direction: ltr; 
    flex-direction: row; 
    justify-content: space-between;
}

html[lang="fa"] .faq-question > span:first-child {
    direction: rtl;
    text-align: right;
    flex: 1; 
}

html[lang="fa"] .faq-answer {
    direction: rtl;
    text-align: right;
}

/* ---------- Scroll-down arrow centering unaffected by RTL ---------- */
html[lang="fa"] .scroll-down-wrapper {
    direction: ltr;
}

/* ---------- Footer ---------- */
html[lang="fa"] .footer,
html[lang="fa"] .footer-grid,
html[lang="fa"] .footer-nav-column,
html[lang="fa"] .footer-contact,
html[lang="fa"] .footer-brand,
html[lang="fa"] .footer-legal {
    text-align: right;
}

html[lang="fa"] .footer-contact {
    text-align: right;
}

html[lang="fa"] .footer-heading h4 {
    text-align: right;
}

/* ---------- CTA section ---------- */
html[lang="fa"] .cta-content,
html[lang="fa"] .cta-text {
    text-align: center;
}

/* ---------- Cookie banner ---------- */
html[lang="fa"] .cookie-consent-content {
    direction: rtl;
}

html[lang="fa"] .cookie-consent-content p {
    text-align: right;
}

/* ---------- About hero image crop direction ---------- */
html[lang="fa"] .about-photo .hero-visual-image {
    object-position: center 8%;
}

/* ---------- Editorial section heading — keep German section number on the right ---------- */
html[lang="fa"] .hero-meta span {
    text-align: right;
}

/* ---------- Glass strip — text stays centered regardless of RTL ---------- */
html[lang="fa"] .glass-strip,
html[lang="fa"] .glass-strip-text,
html[lang="fa"] .glass-strip-text-methode {
    direction: rtl;
    text-align: center;
}

/* ---------- Contact image section — keep centered ---------- */
html[lang="fa"] .contact-image-wrapper {
    direction: ltr;
}

/* ============ PERSIAN TYPOGRAPHY SCALING ============ */

html[lang="fa"] .hero-title {
    font-size: clamp(2.2rem, 4vw, 3.8rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}


html[lang="fa"] .hero-description {
    font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
    line-height: 1.7 !important;
}


html[lang="fa"] h2,
html[lang="fa"] .about-title,
html[lang="fa"] .welcome-title,
html[lang="fa"] .therapy-title {
    font-size: clamp(1.2rem, 2vw, 2.0rem) !important;
    line-height: 1.3 !important;
}

html[lang="fa"] h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    line-height: 1.4 !important;
}

@media (max-width: 767px) {
    html[lang="fa"] .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }
    
    html[lang="fa"] .hero-description {
        font-size: 1rem !important;
    }
}

/*
html[lang="fa"] .glass-strip-text,
html[lang="fa"] .glass-strip-text-methode {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    direction: rtl;
}
*/

/* Base: Glass strip text (Persian) */
html[lang="fa"] .glass-strip-text,
html[lang="fa"] .glass-strip-text-methode {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    direction: rtl;
}

/* Tablet (max-width: 1023px) */
@media (max-width: 1023px) {
    html[lang="fa"] .glass-strip-text,
    html[lang="fa"] .glass-strip-text-methode {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    html[lang="fa"] .glass-strip-text,
    html[lang="fa"] .glass-strip-text-methode {
        font-size: 0.65rem !important; /* Very compact for small screens */
        line-height: 1.3 !important;
    }
}

html[lang="fa"] .hero-visual-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============ QUADRANT TOPIC BULLET ============ */

.topic-arrow {
    font-size: 1.25rem !important; 
    line-height: 1 !important;
    display: inline-block;
    color: var(--accent) !important; 
    transform: none !important;
    opacity: 1 !important;
    transition: opacity var(--transition-fast) !important;
}

html[lang="fa"] .topic-arrow {
    margin-left: 1rem !important;
    margin-right: 0 !important;
    margin-top: 0.15rem !important; 
}

html:not([lang="fa"]) .topic-arrow {
    margin-right: 1rem !important;
    margin-left: 0 !important;
    margin-top: 0.15rem !important;
}

.topic-item:hover .topic-arrow {
    opacity: 0.7 !important;
}

/* ============ PERSIAN DARK MODE HERO ============ */
html[lang="fa"][data-theme="dark"] main > section:first-of-type {
   /* background: linear-gradient(to bottom, #1a0b2e 0%, #6b32b8 100%) !important; */
    background: linear-gradient(to bottom, #202a27 0%, #8eb8ad 100%) !important; 
   
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
    overflow: hidden;
    margin-bottom: 2rem;
}

html[lang="fa"][data-theme="dark"] main > section:first-of-type h1,
html[lang="fa"][data-theme="dark"] main > section:first-of-type h2,
html[lang="fa"][data-theme="dark"] main > section:first-of-type h3,
html[lang="fa"][data-theme="dark"] main > section:first-of-type p {
    color: #FFFFFF !important;
}

html[lang="fa"][data-theme="dark"] main > section:first-of-type .hero-meta span {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============ PERSIAN LIGHT MODE HERO ============ */
html[lang="fa"][data-theme="light"] main > section:first-of-type {
    background: linear-gradient(to bottom, var(--background) 0%, var(--surface-secondary) 100%) !important; 
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
    overflow: hidden;
    margin-bottom: 2rem;
}

html[lang="fa"][data-theme="light"] main > section:first-of-type h1,
html[lang="fa"][data-theme="light"] main > section:first-of-type h2,
html[lang="fa"][data-theme="light"] main > section:first-of-type h3,
html[lang="fa"][data-theme="light"] main > section:first-of-type p {
    color: var(--text) !important;
}

html[lang="fa"][data-theme="light"] main > section:first-of-type .hero-meta span {
    color: var(--text-secondary) !important;
}

/* ============ PERSIAN ROGERS FIGURE (DESKTOP & MOBILE) ============ */

/* 1. Reset the generic hero container to wrap the portrait naturally */
html[lang="fa"] .hero-visual:has(.carl-rogers-figure) {
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    align-self: center !important;
    
    /* Center the whole block on mobile */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. Constrain the portrait size on Desktop */
html[lang="fa"] .hero-visual:has(.carl-rogers-figure) .carl-rogers-figure {
    width: 100% !important;
    max-width: 280px !important; /* Controls the desktop width */
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Constrain the portrait size on Mobile */
@media (max-width: 1023px) {
    html[lang="fa"] .hero-visual:has(.carl-rogers-figure) .carl-rogers-figure {
        max-width: 220px !important; /* Smaller on mobile */
    }
}

/* 4. Ensure the image scales perfectly inside the constrained box */
html[lang="fa"] .carl-rogers-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: var(--radius-sm) !important;
    display: block !important;
}

/* 5. Align the caption properly below the image */
html[lang="fa"] .carl-rogers-caption {
    text-align: center !important;
    margin-top: 0.75rem !important;
    font-size: var(--text-xxs) !important;
    color: var(--text-secondary) !important;
    direction: rtl !important;
}

/* ============ PERSIAN MOBILE SIZING ============ */

@media (max-width: 767px) {
    /* 1. Make the section heading smaller */
    html[lang="fa"] .about-title {
        font-size: 1.2rem !important; /* Adjust this to your preference (e.g., 1.4rem or 1.6rem) */
        line-height: 1.3 !important;
    }

    /* 2. Make the Rogers image and caption container smaller */
    html[lang="fa"] .hero-visual:has(.carl-rogers-figure) .carl-rogers-figure {
        max-width: 160px !important; /* Reduced from 220px */
    }
}

/* Make Carl Rogers image 60% smaller on fa_methode.html */
html[lang="fa"] #therapeutischer-ansatz .carl-rogers-figure {
    max-width: 40% !important; 
    margin-inline: auto !important; /* Keeps it centered */
}

/* Optional: Ensure it doesn't get too tiny on mobile screens */
@media (max-width: 1023px) {
    html[lang="fa"] #therapeutischer-ansatz .carl-rogers-figure {
        max-width: 40% !important; 
    }
}

@media (max-width: 767px) {
    html[lang="fa"] #therapeutischer-ansatz .carl-rogers-figure {
        max-width: 40% !important; 
    }
}

/* ============ TABLET FIX: Carl Rogers image on fa_methode.html ============ */
@media (min-width: 768px) and (max-width: 1023px) {
    html[lang="fa"] #therapeutischer-ansatz .carl-rogers-figure {
        max-width: 40% !important;      /* Matches the mobile size */
        margin-inline: 0 !important;    /* Removes the auto-centering */
        margin-right: auto !important;  /* Pushes it to the left */
        margin-left: 0 !important;
    }
}

/* ============ PERSIAN MOBILE & TABLET RTL ALIGNMENT FIX ============ */

@media (max-width: 1023px) {
    /* Force the entire hero content block to align right */
    html[lang="fa"] .hero-content,
    html[lang="fa"] .contact-hero .hero-content,
    html[lang="fa"] .about-hero .hero-content {
        text-align: right !important;
        align-items: flex-end !important; /* Pushes flex children to the right */
        direction: rtl !important;
        width: 100% !important;
    }

    /* Ensure headings, paragraphs, and quotes inside the hero align right */
    html[lang="fa"] .hero-content h1,
    html[lang="fa"] .hero-content h2,
    html[lang="fa"] .hero-content h3,
    html[lang="fa"] .hero-content .about-title,
    html[lang="fa"] .hero-content .hero-description,
    html[lang="fa"] .hero-content p,
    html[lang="fa"] .hero-content blockquote,
    html[lang="fa"] .hero-content cite {
        text-align: right !important;
        direction: rtl !important;
    }

    /* Fix the hero meta (e.g., "01") to stay on the right */
    html[lang="fa"] .hero-meta {
        align-items: flex-start !important;
        text-align: right !important;
        direction: rtl !important;
    }
}

/*Kamran*/
@media (max-width: 1023px) {
    html[lang="fa"] .topic-item-fa {
        direction: rtl !important;
        text-align: right !important;
    }
}





/* ============ PERSIAN RTL LIST — UNIQUE CLASSES ============ */

/* Base wrapper */
html[lang="fa"] .rtl-list-wrapper {
    direction: rtl;
    text-align: right;
}

/* List container */
html[lang="fa"] .rtl-item-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Default row */
html[lang="fa"] .rtl-item-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: right;
    direction: rtl;
    padding: 0.5rem 0;
}

/* Group labels (۰۱, ۰۲, ۰۳) */
html[lang="fa"] .rtl-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    width: 100%;
    text-align: right;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
}

/* Group headings (حوزه‌های اصلی, etc.) */
html[lang="fa"] .rtl-group-heading {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text);
    width: 100%;
    text-align: right;
    margin-bottom: 0.5rem;
}

/* Rows with a bullet + text */
html[lang="fa"] .rtl-item-row:has(.rtl-item-icon) {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.5rem 0;
}

/* The bullet icon sits on the LEFT */
html[lang="fa"] .rtl-item-icon {
    grid-column: 2;
    justify-self: end;
    align-self: start;
    font-size: 1rem;
    color: var(--accent);
    margin-top: 0.3rem;
}

/* The H4 text sits on the RIGHT and wraps correctly */
html[lang="fa"] .rtl-item-text {
    grid-column: 1;
    text-align: right;
    direction: rtl;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile-specific tightening (optional) */
@media (max-width: 767px) {
    html[lang="fa"] .rtl-item-text {
        font-size: 0.95rem;
        line-height: 1.45;
    }
    
    html[lang="fa"] .rtl-group-heading {
        font-size: 1.15rem;
    }
    
    html[lang="fa"] .rtl-item-row:has(.rtl-item-icon) {
        gap: 0.5rem;
    }
}

/*----------------------------KAMRAN--------------------------*/
/*  TARGET INTERMEDIATE TABLET VIEWPORTS (481px to 1024px) */
@media (481px <= width <= 1024px) {
  
  /* 1. Reset the grid layout into a stacked column format */
  html[lang="fa"] .hero-grid {
    display: flex !important;
    flex-direction: column !important; /* Stacks the content vertically */
    align-items: center !important;   /* Centers the items horizontally */
    text-align: center !important;    /* Centers the Persian heading text */
    gap: 24px !important;             /* Adds clear breathing room between text and image */
  }

  /* 2. Remove any explicit desktop widths or alignment margins from layout cells */
  html[lang="fa"] .hero-meta,
  html[lang="fa"] .hero-content,
  html[lang="fa"] .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* 3. Keep the image wrapper bounded and centered */
  html[lang="fa"] .hero-visual {
    display: flex !important;
    justify-content: center !important; /* Centers the image frame inside the 100% block */
  }

  /* 4. Dictate the perfect size ceiling for the portrait image on tablets */
  html[lang="fa"] .carl-rogers-image {
    max-width: 320px !important; /* Stops the portrait from blowing up too massive */
    width: 100% !important;      /* Lets it scale down smoothly if the viewport narrows */
    height: auto !important;
    margin-inline: auto !important;
  }
}




/*  FIX FOR TABLET VIEWPORTS (e.g., 986px down to 768px) */
@media (768px <= width <= 1024px) {
  
  /* 1. Ensure the parent keeps its side-by-side layout (do not stack) */
  html[lang="fa"] .hero-grid {
    display: grid !important; /* or use flex if your theme uses flexbox */
    align-items: start !important;
    text-align: right !important; /* Keep Persian text aligned correctly */
  }

  /* 2. Cap the size of the image container to match image 2 */
  html[lang="fa"] .hero-visual {
    max-width: 260px !important; /* Prevents the container from becoming massive */
    width: 100% !important;
    margin-inline-start: 0 !important; /* Keeps it aligned properly in RTL */
    margin-inline-end: auto !important;
  }

  /* 3. Ensure the image conforms nicely to its small container ceiling */
  html[lang="fa"] .carl-rogers-image {
    max-width: 260px !important; 
    width: 100% !important;
    height: auto !important;
  }
}



/* KAMRAN::Not Working MOBILE VIEWPORTS (Phones, up to 480px wide) */
@media (max-width: 480px) {
  html[lang="fa"] .topic-title-about-me-rtl {
    text-align: right !important; /* Forces the Persian text to align to the right edge */
    display: block !important;    /* Ensures the element spans full width to allow proper alignment */
  }
}


/*THIS IS DISABLED by KAMRAN*/
@media (max-width: 0px) {
/* --------------KAMRAN::In Use CODE::For <h> and <p> and <span>------------------ */
/*  MOBILE VIEWPORTS (Phones, up to 480px wide) */
@media (max-width: 480px) {
  /* Target your specific paragraph or body text class */
  [dir="rtl"] .mobile-ps-fa {
    font-size: 12px;
    line-height: 20px; /* Gives tall RTL letters room to breathe */
  }

  /* Target your specific heading class */
  [dir="rtl"] .mobile-heading-fa {
    font-size: 18px;    
    line-height: 20px;
  }
}

/*  TABLET VIEWPORTS (Tablets, 481px to 1024px wide) */
@media (481px <= width <= 1024px) {
  /* Target your specific paragraph or body text class */
  [dir="rtl"] .tablet-ps-fa {
    font-size: 17px;
    line-height: 24px;
  }

  /* Target your specific heading class */
  [dir="rtl"] .tablet-heading-fa {
    font-size: 28px;
    line-height: 30px;
  }
}
}

  /* Target your specific paragraph or body text class */
@media (max-width: 480px) {
  html[lang="fa"][dir="rtl"] .hero-description-mobile-ps-fa {
    font-size: 12px !important;
    line-height: 20px !important;
  }


  /* Target your specific heading class */
  [dir="rtl"] .hero-description-mobile-heading-fa {
    font-size: 18px !important;
    line-height: 20px !important;
  }
}

/*  TABLET VIEWPORTS (Tablets, 481px to 1024px wide) */
@media (481px <= width <= 1024px) {
  /* Target your specific paragraph or body text class */
  [dir="rtl"] .hero-description-tablet-ps-fa {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Target your specific heading class */
  [dir="rtl"] .hero-description-tablet-heading-fa {
    font-size: 24px !important;
    line-height: 26px !important;
  }
}

@media screen and (max-width: 1024px) {
  .topic-item-kt {
    /* Resets common styling properties to their default states */
    all: unset; 
    display: block; /* Ensures it still behaves like a standard div block */
  }
}


/* --------------KAMRAN CODE::Apply this to your icon + text container----NOT WORKING-------------- */
.icon-text-container {
  display: flex;
  align-items: center;
  
  /* 1. Aligns items to the end (Right in RTL, Left in LTR) */
  justify-content: flex-start; 
}

/* Apply this to the SVG icon */
.icon-text-container svg {
  /* 2. Automatically adds spacing AFTER the icon depending on direction */
  margin-inline-end: 10px; 
}


/*------------KAMRAN:: Form's button in the middle-------------------------*/
#contact-form .btn-primary {
    display: block; /* Ensures it acts as a block element */
    margin-inline: auto; /* Automatically centers it in both LTR and RTL */
    margin-top: 1.5rem; /* Optional: adds space above the button */
}