.about-introduction {

    position: relative;

    padding: 10px 0;

    overflow: hidden;

}


.about-content-card {

    position: relative;

    max-width: 1000px;

    margin: auto;

    padding: 55px;

    background: rgba(255,255,255,0.72);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.8);

    border-radius: 30px;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.8);

    transition: all .5s ease;

}


.about-content-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 35px 90px rgba(0,0,0,0.13),
        inset 0 1px 0 rgba(255,255,255,0.9);

}


.about-icon-box {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #0d6efd,
        #084298
    );

    color: white;

    font-size: 25px;

    box-shadow:
        0 12px 30px rgba(13,110,253,.25);

}


.about-small-title {

    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: #0d6efd;

}


.about-content-card h2 {

    margin-bottom: 15px;

    font-size: 44px;

    font-weight: 800;

    color: #171b26;

}


.about-line {

    width: 80px;

    height: 4px;

    margin-bottom: 30px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #0d6efd,
        #6ea8fe
    );

}


.about-content-card p {

    color: #687080;

    font-size: 16px;

    line-height: 2;

}


/* =========================================
   DECORATIONS
========================================= */

.about-section-decoration {

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    opacity: .15;

    pointer-events: none;

}


.decoration-one {

    width: 300px;

    height: 300px;

    top: 20px;

    left: -100px;

    background: #0d6efd;

}


.decoration-two {

    width: 250px;

    height: 250px;

    right: -80px;

    bottom: 0;

    background: #6f42c1;

}






















/* =========================================================
   ABOUT PEOPLE — GLASSMORPHISM
========================================================= */

.about-people-section {

    --about-blue: #aac8f586;
     --about-purple: #270575d8;
    --about-pink: #171ffc3e;
    --about-orange: #f974162d;
    --about-yellow: #15e3fa3f;


    position: relative;

    width: 100%;

    padding: 90px 24px 120px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(138, 92, 246, 0.037),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(249, 245, 22, 0.07),
            transparent 30%
        );

}


/* =========================================================
   HEADER
========================================================= */

.about-people-header {

    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;

}


.about-people-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    color: var(--about-blue);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.about-people-kicker i {

    font-size: 14px;

}


.about-people-header h2 {

    margin: 0;

    color: #171a22;

    font-size: 36px;

    font-weight: 800;

    line-height: 1.4;

}


.about-people-header-line {

    width: 70px;

    height: 3px;

    margin: 17px auto;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--about-purple),
            var(--about-pink),
            var(--about-orange)
        );

}


.about-people-header p {

    margin: 0;

    color: #7b8190;

    font-size: 15px;

}


/* =========================================================
   GRID
========================================================= */

.about-people-grid {

    width: 100%;

    max-width: 1120px;

    margin-left: auto;
    margin-right: auto;

    display: grid;

    grid-template-columns: repeat(3, 285px);

    justify-content: center;

    align-items: start;

    gap: 30px;

}



/* =========================================================
   CARD
========================================================= */

.about-person-card {

    position: relative;

    width: 285px;

    min-height: 390px;

    padding: 1px;

    perspective: 1000px;
  text-align: center;
    justify-content: center;
    border-radius: 25px;

   background:
        linear-gradient(
            135deg,
            rgba(13, 217, 253, 0.127),
            rgba(138, 92, 246, 0.049),
            rgba(72, 236, 206, 0.13),
            rgba(230, 249, 22, 0.151)
        );

    box-shadow:
        0 15px 35px rgba(31, 38, 135, 0.23);

    transition:
        box-shadow .45s ease,
        transform .2s ease;

}

.about-person-cardm {

    position: relative;

    width: 285px;

     min-height: 390px;

    padding: 1px;

    perspective: 1000px;
  text-align: center;
    justify-content: center;
    border-radius: 25px;

   background:
        linear-gradient(
            135deg,
            rgba(13, 217, 253, 0.127),
            rgba(138, 92, 246, 0.049),
            rgba(72, 236, 206, 0.13),
            rgba(230, 249, 22, 0.151)
        );

    box-shadow:
        0 15px 35px rgba(31, 38, 135, 0.23);

    transition:
        box-shadow .45s ease,
        transform .2s ease;

}


/* =========================================================
   MOVING COLOR GLOW
========================================================= */

.about-person-glow {

    position: absolute;

    width: 170px;

    height: 170px;

    left: var(--mouse-x, 50%);

    top: var(--mouse-y, 50%);

    transform: translate(-50%, -50%);

    border-radius: 50%;

    pointer-events: none;

  background:
        radial-gradient(
            circle,
            rgba(221, 120, 12, 0.37) 0%,
            rgba(72, 217, 236, 0.297) 30%,
            rgba(18, 161, 213, 0.378) 52%,
            transparent 72%
        );


    filter: blur(25px);

    opacity: 0;

    transition: opacity .35s ease;

    z-index: 1;

}


.about-person-card:hover .about-person-glow {

    opacity: 1;

}


/* =========================================================
   GLASS BODY
========================================================= */

.about-person-inner {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.70),
            rgba(255,255,255,.35)
        );



    backdrop-filter: blur(22px);

    -webkit-backdrop-filter: blur(22px);

    border: 1px solid rgba(255,255,255,.72);

    outline: 1px solid rgba(255,255,255,.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        inset 0 -1px 0 rgba(255,255,255,.15);

}


/* =========================================================
   TOP HIGHLIGHT
========================================================= */

.about-person-inner::before {

    content: "";

    position: absolute;

    top: 0;

    left: 12%;

    width: 76%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            transparent
        );

    z-index: 5;

}


/* =========================================================
   IMAGE
========================================================= */

.about-person-image {

    position: relative;

    width: 300px;

    height: 300px;

    margin: 11px;

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid rgba(255,255,255,.8);

    outline: 1px solid rgba(13,110,253,.08);

    background: #e7e9ed;

}


.about-person-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            transparent 40%
        );

}


.about-person-image img {

    width: 250px;

    height: 300px;

    display: block;

    object-fit: cover;

    object-position: center;

    filter: none !important;

    transform: scale(1);

    transition:
        transform .8s cubic-bezier(.2,.75,.2,1);

}


/* فقط مقدار بسیار کم */

.about-person-card:hover .about-person-image img {

    transform: scale(1.055);

}


/* =========================================================
   INFO
========================================================= */

.about-person-info {

    position: relative;

    padding: 8px 22px 24px;

    text-align: center;

}


.about-person-role {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 7px;

    color: var(--about-purple);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;

}


.about-person-role i {

    font-size: 10px;

}


.about-person-info h3 {

    margin: 0;

    color: #1d212b;

    font-size: 17px;

    font-weight: 750;

    line-height: 1.6;

}


.about-person-email {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    max-width: 100%;

    margin-top: 12px;

    padding-top: 11px;

    border-top: 1px solid rgba(0,0,0,.07);

    color: #596273;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        color .3s ease,
        transform .3s ease;

}


.about-person-email i {

    color: var(--about-blue);

}


.about-person-email:hover {

    color: var(--about-purple);

    transform: translateY(-1px);

}


/* =========================================================
   SUBSECTIONS
========================================================= */

.about-people-subsection {

    margin-top: 115px;

}


.about-people-grid-small {

    grid-template-columns:
        repeat(4, 285px);

}


/* =========================================================
   CARD HOVER BORDER
========================================================= */

.about-person-card::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: 26px;

    padding: 2px;

    background:
        linear-gradient(
            135deg,
            var(--about-blue),
            var(--about-purple),
            var(--about-pink),
            var(--about-orange),
            var(--about-yellow)
        );

    background-size: 300% 300%;

    opacity: 0;

    z-index: 0;

    transition: opacity .45s ease;

    animation: aboutBorderMove 5s linear infinite;

}


.about-person-card:hover::before {

    opacity: 1;

}


@keyframes aboutBorderMove {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .about-people-grid,
    .about-people-grid-small {

        grid-template-columns:
            repeat(2, 285px);

    }

}


@media (max-width: 680px) {

    .about-people-section {

        padding-left: 15px;

        padding-right: 15px;

    }


    .about-people-grid,
    .about-people-grid-small {

        grid-template-columns:
            minmax(0, 285px);

    }


    .about-person-card {

        width: 285px;

    }


    .about-people-header h2 {

        font-size: 29px;

    }

}


@media (max-width: 340px) {

    .about-person-card {

        width: 100%;

    }


    .about-person-image {

        height: 220px;

    }

}
.about-people-grid {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 30px;
}


/* کارت‌ها */

.about-people-grid .about-person-card {
    flex: 0 0 285px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .about-people-grid {
        max-width: 650px;
    }

}


@media (max-width: 680px) {

    .about-people-grid {
        max-width: 320px;
    }

    .about-people-grid .about-person-card {
        flex: 0 0 285px;
    }

}

.MyImgg1{
      background-color: rgba(0, 0, 0, 0.438);
}
.mydivIMG{
    background-color: rgba(255, 247, 247, 0.532);
      color: black;
       border-radius: 30px;
  border: 1px solid white;
    font-size: 12px;
}
.textColorme{
   color:gold;
}









/* =========================================
   DARK BLUE GLASS READ MORE
========================================= */

.mini-glass-readmore {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 7px 9px 7px 15px;

    color: #ffffff;
    text-decoration: none;

    /* Dark Blue Glass */
    background: rgba(10, 35, 62, 0.68);

    border: 1px solid rgba(120, 180, 220, 0.38);
    border-radius: 10px;

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 6px 20px rgba(5, 30, 55, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    overflow: hidden;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* Glass Shine */
.mini-glass-readmore::before {
    content: "";
    position: absolute;

    top: -50%;
    left: -90%;

    width: 45%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform: skewX(-22deg);

    transition: left .7s ease;
}


/* Text */
.mini-glass-readmore span {
    position: relative;
    z-index: 2;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .3px;

    transition: letter-spacing .3s ease;
}


/* Arrow */
.mini-glass-readmore i {
    position: relative;
    z-index: 2;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;

    color: #ffffff;

    background: rgba(65, 125, 170, 0.42);

    border: 1px solid rgba(180, 220, 245, 0.40);
    border-radius: 7px;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,.15),
        0 3px 10px rgba(0,30,60,.20);

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


/* Hover */
.mini-glass-readmore:hover {

    color: #ffffff;

    background: rgba(15, 55, 90, 0.78);

    border-color: rgba(150, 210, 240, 0.65);

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(5, 35, 65, .28),
        0 0 18px rgba(65, 145, 200, .16),
        inset 0 1px 0 rgba(255,255,255,.28);
}


/* Moving Glass Light */
.mini-glass-readmore:hover::before {
    left: 140%;
}


/* Arrow Animation */
.mini-glass-readmore:hover i {

    transform:
        translateX(3px)
        rotate(-4deg);

    background: rgba(75, 145, 195, 0.65);

    box-shadow:
        0 0 12px rgba(100, 190, 235, .30),
        inset 0 1px 4px rgba(255,255,255,.22);
}


/* Text Animation */
.mini-glass-readmore:hover span {
    letter-spacing: .6px;
}
  @media (max-width: 991.98px) {

    .mynavbarr {
        z-index: 1 !important;
    }

    .archive-index-section {
        position: relative;
        z-index: 9999 !important;
    }

    .archive-index-row,
    .archive-index-row a {
        position: relative;
        z-index: 10000 !important;
    }
}
p {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 2;
    font-weight: 400;
    word-spacing: 1px;
    letter-spacing: 0;
    text-align: right;
}
/* =========================================================
   ABOUT PAGE - RTL / LTR LANGUAGE SUPPORT
   ========================================================= */

/* Persian & Pashto */
.about-rtl {
    direction: rtl;
}

.about-rtl .about-us-content {
    direction: rtl;
    text-align: right;
}

.about-rtl .about-us-content p,
.about-rtl .about-us-content h5,
.about-rtl .about-us-content h6,
.about-rtl .about-us-content li,
.about-rtl .about-us-content span,
.about-rtl .about-us-content strong {
    direction: rtl;
    text-align: right;
}

/* Department list */
.about-rtl .about-departments {
    direction: rtl;
    text-align: right;
}

.about-rtl .about-departments li {
    text-align: right;
}

/* Highlight boxes */
.about-rtl .about-highlight-box {
    direction: rtl;
    text-align: right;
}

.about-rtl .about-highlight-box h5,
.about-rtl .about-highlight-box p {
    text-align: right;
}

/* Closing sections */
.about-rtl .about-closing {
    direction: rtl;
    text-align: right;
}

.about-rtl .about-closing h6,
.about-rtl .about-closing p {
    text-align: right;
}


/* =========================================================
   English / German / Dutch
   ========================================================= */

.about-ltr {
    direction: ltr;
}

.about-ltr .about-us-content {
    direction: ltr;
    text-align: left;
}

.about-ltr .about-us-content p,
.about-ltr .about-us-content h5,
.about-ltr .about-us-content h6,
.about-ltr .about-us-content li,
.about-ltr .about-us-content span,
.about-ltr .about-us-content strong {
    direction: ltr;
    text-align: left;
}

/* Department list */
.about-ltr .about-departments {
    direction: ltr;
    text-align: left;
}

.about-ltr .about-departments li {
    text-align: left;
}

/* Highlight boxes */
.about-ltr .about-highlight-box {
    direction: ltr;
    text-align: left;
}

.about-ltr .about-highlight-box h5,
.about-ltr .about-highlight-box p {
    text-align: left;
}

/* Closing sections */
.about-ltr .about-closing {
    direction: ltr;
    text-align: left;
}

.about-ltr .about-closing h6,
.about-ltr .about-closing p {
    text-align: left;
}