/* =========================================================
1. Reset & Variables
========================================================= */

:root{

--primary:#aa2c70;
--secondary:#d2ab67;
--white:#ffffff;
--text:#2c2c2c;
--gray:#666666;
--bg:#f4f5f8;

--radius:22px;

--shadow:0 10px 35px rgba(0,0,0,.12);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

font-family:'Vazirmatn',sans-serif;

display:flex;

justify-content:center;

padding:20px;

color:var(--text);

}


/* =========================================================
2. Mobile Container
========================================================= */

.mobile{
width:100%;

max-width:430px;

background:#fff;

border-radius:35px;

overflow:hidden;

box-shadow:var(--shadow);

position:relative;

}


/* =========================================================
3. Header
========================================================= */

.header{

position:relative;

width:100%;

}

.cover{

width:100%;

height:210px;

overflow:hidden;

}

.cover img{

width:100%;

height:100%;

display:block;

object-fit:cover;

}


/* =========================================================
4. Logo
========================================================= */

.logo{

width:130px;

height:130px;

background:white;

border-radius:50%;

position:absolute;

left:50%;

bottom:-65px;

transform:translateX(-50%);

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 12px 30px rgba(0,0,0,.18);

border:6px solid white;

}

.logo img{

width:95px;

height:auto;

}


/* =========================================================
5. Intro
========================================================= */

.intro{

padding:90px 30px 25px;

text-align:center;

}

.intro h1{

font-size:34px;

font-weight:800;

margin-bottom:15px;

color:var(--primary);

}

.title-line{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

margin-bottom:18px;
}

.line{

flex:1;

height:2px;

background:var(--secondary);

opacity:.45;

}

.title-line span{

font-size:15px;

font-weight:600;

color:#555;

white-space:nowrap;

}

.desc{

font-size:15px;

line-height:2;

color:#666;

max-width:320px;

margin:auto;

}
/* =========================================================
6. Statistics
========================================================= */

.stats{

display:flex;

justify-content:space-between;

align-items:center;

padding:0 25px 30px;

margin-top:10px;

}

.stat-item{

display:flex;

align-items:center;

gap:10px;

flex:1;

}

.stat-item img{

width:38px;

height:38px;

object-fit:contain;

}

.stat-item h3{

font-size:17px;

font-weight:700;

color:var(--primary);

margin-bottom:4px;

}

.stat-item p{

font-size:12px;

color:#666;
line-height:1.4;

}

.divider{

width:1px;

height:45px;

background:#e8e8e8;

margin:0 12px;

}



/* =========================================================
7. Menu Buttons
========================================================= */

.menu-links{

padding:0 22px 35px;

display:flex;

flex-direction:column;

gap:14px;

}

.menu-item{

display:flex;

align-items:center;

justify-content:space-between;

background:#ffffff;

border-radius:18px;

padding:16px 18px;

text-decoration:none;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.35s;

border:1px solid #f2f2f2;

}

.menu-item:hover{

transform:translateY(-4px);

box-shadow:0 14px 30px rgba(0,0,0,.15);

}

.menu-icon{

width:58px;

height:58px;

background:#f8f3f7;

border-radius:16px;
display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

}

.menu-icon img{

width:34px;

height:34px;

object-fit:contain;

}

.menu-text{

flex:1;

padding:0 18px;

text-align:right;

}

.menu-text h3{

font-size:17px;

font-weight:700;

color:var(--primary);

margin-bottom:6px;

}

.menu-text p{

font-size:13px;

color:#777;

line-height:1.7;

}

.menu-arrow{

width:36px;

height:36px;

display:flex;

align-items:center;

justify-content:center;

}

.menu-arrow img{

width:18px;

transition:.35s;

}

.menu-item:hover .menu-arrow img{

transform:translateX(-6px);

}
/* =========================================================
8. Download & Share
========================================================= */

.download-area{

padding:0 22px 35px;

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.download-card,

.share-card{

background:#fff;

border-radius:18px;

padding:18px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

display:flex;

justify-content:space-between;

align-items:center;

}

.download-card{

text-decoration:none;

}

.download-card h3,

.share-card h3{

font-size:16px;

color:var(--primary);

margin-bottom:6px;

}

.download-card p,

.share-card p{

font-size:12px;

color:#666;

}

.download-card img,

.share-card img{

width:42px;

height:42px;

object-fit:contain;

}
/* =========================================================
9. Partners Gallery
========================================================= */

.partners-gallery{

padding:0 22px 35px;

}

.gallery-title{

text-align:center;

margin-bottom:18px;

}

.gallery-title h2{

font-size:22px;

color:var(--primary);

font-weight:700;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

}

.gallery-grid a{

display:block;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.35s;

}

.gallery-grid a:hover{

transform:scale(1.04);

}

.gallery-grid img{

width:100%;

height:105px;

display:block;

object-fit:cover;

}

.gallery-more{

margin-top:18px;

display:flex;
justify-content:center;

}

.more-btn{

width:80px;

height:80px;

background:var(--primary);

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

text-decoration:none;

font-size:18px;

font-weight:700;

line-height:1.5;

transition:.3s;

box-shadow:0 12px 30px rgba(170,44,112,.35);

}

.more-btn:hover{

transform:scale(1.08);

}



/* =========================================================
10. Partners
========================================================= */

.partners{

padding:10px 22px 40px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

}

.partner-box{

background:#fff;

border-radius:18px;

padding:18px;

display:flex;

justify-content:center;

align-items:center;
height:95px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.partner-box img{

max-width:100%;

max-height:55px;

object-fit:contain;

}

.partner-text{

grid-column:1 / span 2;

text-align:center;

margin-top:10px;

}

.partner-text h3{

font-size:26px;

color:var(--primary);

margin-bottom:6px;

}

.partner-text p{

font-size:15px;

color:#666;

}



/* =========================================================
11. Footer
========================================================= */

.footer{

background:linear-gradient(135deg,#aa2c70,#8d215d);

padding:35px 25px;

color:white;

text-align:center;

}

.footer-content p{

margin-bottom:12px;

font-size:14px;

line-height:2;

}



/* =======================================
==================
12. Animation
========================================================= */

.mobile{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/* =========================================================
Scrollbar
========================================================= */

::-webkit-scrollbar{

width:6px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:10px;

}



/* =========================================================
13. Responsive
========================================================= */

@media(max-width:430px){

body{

padding:8px;

}

.mobile{

border-radius:22px;

}

.logo{

width:110px;
height:110px;

bottom:-55px;

}

.logo img{

width:80px;

}

.intro{

padding:75px 20px 20px;

}

.intro h1{

font-size:28px;

}

.stats{

padding:0 15px 25px;

}

.stat-item h3{

font-size:15px;

}

.stat-item p{

font-size:11px;

}

.menu-links{

padding:0 15px 30px;

}

.menu-item{

padding:14px;

}

.menu-icon{

width:50px;

height:50px;

}

.menu-icon img{

width:28px;

height:28px;

}

.menu-text h3{

font-size:15px;

}

.menu-text p{

font-size:12px;
}

.download-area{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

}

.gallery-grid img{

height:110px;

}

.partners{

grid-template-columns:1fr;

}

.partner-text{

grid-column:auto;

}

.footer{

padding:30px 18px;

}

.footer-content p{

font-size:13px;

}

}
.show{

opacity:1 !important;

transform:translateY(0)!important;

}

.menu-item,

.partner-box,

.gallery-grid a{

opacity:0;

transform:translateY(40px);

transition:.6s;

}

#topButton{

position:fixed;

left:20px;

bottom:20px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#aa2c70;

color:white;

font-size:24px;

display:none;

justify-content:center;

align-items:center;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.3);

z-index:999;

}

.ripple{

position:absolute;

width:15px;

height:15px;

background:rgba(255,255,255,.5);

border-radius:50%;

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

from{

transform:scale(1);

opacity:1;

}

to{

transform:scale(18);

opacity:0;

}

}

/* =========================================================
Professional Gallery Carousel Overrides
========================================================= */
.stat-item p{
    white-space:nowrap;
}
.menu-arrow{
    width:48px;
    height:48px;
}
.menu-arrow img{
    width:28px;
    filter:contrast(1.8) brightness(.78) saturate(1.25);
}
.gallery-carousel{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    direction:ltr;
}
.gallery-grid{
    direction:rtl;
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:8px 4px 16px;
    scrollbar-width:none;
}
.gallery-grid::-webkit-scrollbar{
    display:none;
}
.gallery-grid a{
    flex:0 0 calc((100% - 28px) / 3);
    min-width:0;
    scroll-snap-align:center;
    scroll-snap-stop:always;
}
.gallery-grid img{
    height:120px;
}
.gallery-nav{
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(170,44,112,.35);
    transition:.25s;
    flex:0 0 42px;
    z-index:2;
}
.gallery-nav:hover{
    transform:scale(1.08);
}
.gallery-nav:active{
    transform:scale(.96);
}
.gallery-nav.is-disabled{
    opacity:.35;
    cursor:default;
}
.gallery-nav.is-disabled:hover{
    transform:none;
}
@media (max-width:480px){
    .gallery-carousel{
        gap:7px;
    }
    .gallery-nav{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:30px;
    }
    .gallery-grid a{
        flex-basis:82%;
    }
    .gallery-grid img{
        height:155px;
    }
}


/* =========================================================
Final carousel/share refinements
========================================================= */
.gallery-grid{
    direction:ltr !important;
}
.gallery-nav{
    opacity:1 !important;
    color:#fff !important;
    background:var(--primary) !important;
    font-weight:900 !important;
    box-shadow:0 10px 25px rgba(170,44,112,.48) !important;
}
.gallery-nav.is-disabled,
.gallery-nav:disabled{
    opacity:1 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
}
.gallery-nav.is-disabled:hover,
.gallery-nav:disabled:hover{
    transform:scale(1.08) !important;
}
.share-card{
    gap:16px;
}
.share-card > div{
    flex:1;
    min-width:0;
}
.share-card h3{
    white-space:nowrap;
    font-size:15px;
    line-height:1.4;
}
.share-card img{
    flex:0 0 42px;
    margin-left:10px;
}
@media (max-width:380px){
    .share-card h3{
        font-size:13.5px;
    }
    .share-card{
        gap:12px;
        padding:16px 14px;
    }
}

/* =========================================================
Final download/share alignment refinements
========================================================= */
.download-area{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:12px !important;
    align-items:stretch;
}
.download-card,
.share-card{
    min-width:0;
    width:100%;
    box-sizing:border-box;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:16px 14px !important;
    direction:rtl;
}
.download-card img,
.share-card img{
    flex:0 0 42px !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
}
.download-card > div,
.share-card > div{
    flex:1 1 auto !important;
    min-width:0 !important;
    text-align:right;
}
.download-card h3,
.share-card h3,
.download-card p,
.share-card p{
    white-space:nowrap !important;
    overflow:hidden;
    text-overflow:ellipsis;
}
.download-card h3,
.share-card h3{
    font-size:14px !important;
    line-height:1.45 !important;
    margin:0 0 5px !important;
}
.download-card p,
.share-card p{
    font-size:11px !important;
    line-height:1.45 !important;
    margin:0 !important;
}
@media (max-width:380px){
    .download-area{
        gap:10px !important;
        padding-left:14px !important;
        padding-right:14px !important;
    }
    .download-card,
    .share-card{
        gap:9px !important;
        padding:14px 10px !important;
    }
    .download-card img,
    .share-card img{
        flex-basis:34px !important;
        width:34px !important;
        height:34px !important;
    }
    .download-card h3,
    .share-card h3{
        font-size:12.5px !important;
    }
    .download-card p,
    .share-card p{
        font-size:10px !important;
    }
}


/* =========================================================
Link arrows white background + Person modal
========================================================= */
.menu-arrow{
    background:#fff !important;
    border-radius:50% !important;
    box-shadow:0 4px 14px rgba(0,0,0,.10) !important;
    border:1px solid rgba(170,44,112,.08) !important;
}
.menu-arrow img{
    display:block;
}
.person-card{
    cursor:pointer;
    outline:none;
}
.person-card:focus-visible{
    box-shadow:0 0 0 3px rgba(170,44,112,.25), 0 8px 20px rgba(0,0,0,.08);
}
.person-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
}
.person-modal.is-open{
    display:flex;
}
.person-modal__overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(4px);
}
.person-modal__box{
    position:relative;
    width:min(360px,100%);
    background:#fff;
    border-radius:26px;
    padding:26px 22px 24px;
    text-align:center;
    box-shadow:0 18px 55px rgba(0,0,0,.28);
    animation:personModalIn .25s ease;
}
.person-modal__close{
    position:absolute;
    top:12px;
    left:12px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#f7f1f5;
    color:var(--primary);
    font-size:28px;
    line-height:38px;
    font-weight:800;
    cursor:pointer;
}
.person-modal__img{
    width:210px;
    height:210px;
    max-width:78vw;
    object-fit:cover;
    border-radius:22px;
    display:block;
    margin:8px auto 18px;
    box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.person-modal__box h3{
    font-size:22px;
    color:var(--primary);
    margin:0 0 8px;
    font-weight:800;
}
.person-modal__role{
    font-size:15px;
    color:#666;
    margin:0;
    line-height:1.8;
}
body.person-modal-open{
    overflow:hidden;
}
@keyframes personModalIn{
    from{opacity:0; transform:translateY(12px) scale(.96)}
    to{opacity:1; transform:translateY(0) scale(1)}
}


/* =========================================================
Correction: modal only for gallery + stronger white link arrows
========================================================= */
.menu-arrow{
    width:48px !important;
    height:48px !important;
    background:#ffffff !important;
    border:3px solid var(--primary) !important;
    border-radius:50% !important;
    box-shadow:0 7px 18px rgba(170,44,112,.22) !important;
    position:relative !important;
    overflow:hidden !important;
}
.menu-arrow img{
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
}
.menu-arrow::before{
    content:"";
    width:13px;
    height:13px;
    border-left:4px solid var(--primary);
    border-bottom:4px solid var(--primary);
    transform:rotate(45deg);
    display:block;
    margin-right:-4px;
}
.menu-item:hover .menu-arrow::before{
    transform:translateX(-4px) rotate(45deg);
    transition:.25s;
}
.partners .partner-box{
    cursor:default !important;
}
.partners .partner-box:focus-visible{
    box-shadow:0 8px 20px rgba(0,0,0,.08) !important;
}
.gallery-grid .person-card{
    cursor:pointer;
}
.gallery-grid .person-card:focus-visible{
    outline:3px solid rgba(170,44,112,.32);
    outline-offset:3px;
}
@media (max-width:430px){
    .menu-arrow{
        width:44px !important;
        height:44px !important;
        flex:0 0 44px !important;
    }
    .menu-arrow::before{
        width:12px;
        height:12px;
    }
}