/* =========================================
   RangMax Design System
========================================= */
@font-face {
    font-family: 'Vazirmatn';

    src: url('/static/fonts/Vazirmatn/Vazir.woff2')
         format('woff2');

    font-weight: 400;

    font-style: normal;

    font-display: swap;
}

:root {

    --primary-blue: #0A3D62;
    --accent-yellow: #F4D03F;

    --bg-main: #ffffff;
    --bg-light: #f8f9fa;

    --text-main: #212529;
    --text-muted: #6c757d;

    --border-color: #dee2e6;

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

    --container-width: 1280px;

    --radius: 18px;

    --transition: .35s cubic-bezier(.25, .8, .25, 1);

    --shadow: 0 15px 40px rgba(0, 0, 0, .12);

}


/* =========================================
   RESET
========================================= */


*,
*::before,
*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--font-family);

    background: var(--bg-main);

    color: var(--text-main);

    line-height: 1.8;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

}


/* =========================================
   TYPOGRAPHY
========================================= */


h1 {

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    line-height: 1.15;

    font-weight: 900;

}


h2 {

    font-size: clamp(1.8rem, 4vw, 2.8rem);

    line-height: 1.3;

    font-weight: 800;

}


h3 {

    font-size: 1.25rem;

    font-weight: 800;

}


/* =========================================
   LAYOUT
========================================= */


.container {

    max-width: var(--container-width);

    margin: auto;

    padding: 0 24px;

}


.section {

    padding: 100px 0;

}


.text-center {

    text-align: center;

}


.text-max-width {

    max-width: 750px;

    margin: auto;

    color: var(--text-muted);

}


.section-title {

    margin-bottom: 35px;

}


.section-description {

    color: var(--text-muted);

    line-height: 2;

}


.bg-light-gray {

    background: var(--bg-light);

    border-top: 1px solid var(--border-color);

    border-bottom: 1px solid var(--border-color);

}


/* =========================================
   BUTTONS
========================================= */


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 24px;

    border-radius: 30px;

    font-size: .9rem;

    font-weight: 700;

    cursor: pointer;

    border: 1px solid transparent;

    transition: var(--transition);

}


.btn-accent {

    background: var(--accent-yellow);

    color: var(--text-main);

}


.btn-accent:hover {

    background: #fff;

    border-color: var(--accent-yellow);

    transform: translateY(-2px);

}


.btn-primary {

    background: var(--primary-blue);

    color: #fff;

}


.btn-primary:hover {

    opacity: .9;

}


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


.header {

    position: fixed;

    top: 25px;

    right: 0;

    left: 0;

    z-index: 1000;

    transition: var(--transition);

}


.header-content {


    direction: rtl;

    gap: 20px;
    height: 78px;

    padding: 0 28px;


    display: flex;

    align-items: center;


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

    backdrop-filter: blur(18px);

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


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

    border-radius: 22px;


    box-shadow: var(--shadow);


    transition: var(--transition);


}


.header.scrolled .header-content {


    height: 68px;


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


    backdrop-filter: blur(20px);

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


    border-color: rgba(255, 255, 255, .35);


    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);


}


.header-logo {

    order: 1;

}


.header-logo img {

    height: 42px;

}


.nav {


    order: 2;


    display: flex;

    align-items: center;


    gap: 28px;


    margin-left: auto;


}


.nav a {


    position: relative;


    color: #fff;


    font-size: .95rem;


    font-weight: 500;


    padding: 8px 0;


    transition: var(--transition);


}


.header.scrolled .nav a {

    color: var(--text-main);

}


.nav a::after {


    content: "";


    position: absolute;


    bottom: 0;

    right: 0;


    width: 0;


    height: 3px;


    border-radius: 10px;


    background: var(--accent-yellow);


    transition: .3s;


}


.nav a:hover::after {


    width: 100%;


}


.nav a:hover {


    color: var(--accent-yellow);


    transform: translateY(-2px);


}


.header-action {

    order: 3;

}


.header-action .btn {

    padding: 9px 22px;

    font-size: .85rem;

}


.mobile-menu {

    order: 4;

    display: none;

    font-size: 1.7rem;

    color: #fff;

}


.header.scrolled .mobile-menu {

    color: var(--text-main);

}


/* =========================================
   HERO
========================================= */


.hero-slider {

    height: 100vh;

    min-height: 700px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

}


.hero-slider .slide {


    position: absolute;

    inset: 0;


    background-size: cover;

    background-position: center;


    opacity: 0;


    transition: 1s;


}


.hero-slider .slide.active {


    opacity: 1;


}


.hero-overlay {


    position: absolute;

    inset: 0;


    background: linear-gradient(
            90deg,
            rgba(0, 0, 0, .75),
            rgba(10, 61, 98, .35)
    );


    z-index: 2;


}


.hero-content {


    position: relative;

    z-index: 3;


    max-width: 800px;


}


/* =========================================
   FOOTER
========================================= */


.footer {

    background: var(--primary-blue);

    color: #fff;

    padding: 80px 0 0;

}


.footer h3 {

    color: #fff;

}


.footer-bottom {


    margin-top: 50px;

    padding: 25px 0;

    text-align: center;


    border-top: 1px solid rgba(255, 255, 255, .15);


    color: rgba(255, 255, 255, .6);

}


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


@media (max-width: 1100px) {


    .header {

        top: 15px;

    }


    .header-content {

        height: 70px;

    }


    .nav {


        position: fixed;


        top: 0;

        right: -100%;


        height: 100vh;


        width: 300px;


        background: #fff;


        flex-direction: column;


        align-items: flex-start;


        padding: 100px 40px;


        transition: .4s;


        box-shadow: -10px 0 40px rgba(0, 0, 0, .15);


    }


    .nav.active {

        right: 0;

    }


    .nav a {

        color: var(--text-main);

        font-size: 1.1rem;

    }


    .header-action {

        display: none;

    }


    .mobile-menu {

        display: block;

    }


}


@media (max-width: 576px) {


    .header {

        top: 10px;

    }


    .header-content {

        border-radius: 18px;

    }


    .header-logo img {

        height: 36px;

    }


}

/* =====================================
   Gallery List Page
===================================== */


.gallery-page {
    padding: 80px 0;
}


.gallery-page .section-header {
    text-align: center;
    margin-bottom: 50px;
}


.gallery-page .section-header h1 {
    font-size: 38px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 15px;
}


.gallery-page .section-header p {
    color: #64748b;
    font-size: 17px;
}


.gallery-grid {

    display: grid;

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

    gap: 30px;

}


.gallery-card {

    display: block;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);

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

}


.gallery-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);

}


.gallery-card-image {

    height: 280px;

    overflow: hidden;

}


.gallery-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}


.gallery-card:hover img {

    transform: scale(1.06);

}


.gallery-card-content {

    padding: 25px;

}


.gallery-card-content h3 {

    font-size: 22px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 15px;

}


.gallery-card-content div {

    color: #475569;

    font-size: 15px;

    margin-bottom: 8px;

}


.gallery-card-content span {

    color: #94a3b8;

    font-size: 14px;

}

.gallery-detail-page{
    background:#fff;
}



/* Hero */

.gallery-detail-hero{

    padding:160px 0 90px;

    background:
    linear-gradient(
        135deg,
        rgba(10,61,98,.95),
        rgba(10,61,98,.75)
    );

    color:#fff;

}



.gallery-detail-header{

    max-width:850px;

}



.gallery-detail-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(244,208,63,.15);

    color:var(--accent-yellow);

    font-size:.9rem;

    margin-bottom:25px;

}



.gallery-detail-header h1{

    font-size:clamp(2.5rem,5vw,4rem);

    margin-bottom:30px;

}




.gallery-meta{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}



.gallery-meta div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#eee;

}








/* Content */


.gallery-detail-content{

    padding:80px 0;

}



.gallery-layout{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:40px;

    align-items:center;

}





.gallery-description-box{


    background:#f8f9fa;

    padding:40px;

    border-radius:var(--radius);

    border:1px solid var(--border-color);

}



.description-title{

    font-size:1.3rem;

    font-weight:800;

    margin-bottom:20px;

    color:var(--primary-blue);

}



.gallery-description-box p{

    color:var(--text-muted);

    line-height:2;

}







.gallery-cover img{


    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:var(--shadow);

}









/* Images */


.gallery-images-section{

    margin-top:90px;

}



.gallery-section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}



.gallery-section-header h2{

    color:var(--primary-blue);

}



.gallery-section-header span{

    color:var(--text-muted);

}






.gallery-bento{


    display:grid;

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

    grid-auto-rows:220px;

    gap:20px;


}



.gallery-item{

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

}



.gallery-item img{


    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.gallery-item:hover img{

    transform:scale(1.08);

}





.gallery-item.featured{

    grid-column:span 2;

    grid-row:span 2;

}







@media(max-width:900px){


.gallery-layout{

grid-template-columns:1fr;

}



.gallery-cover img{

height:350px;

}



.gallery-bento{

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

}


}




.gallery-hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #f7f7f5;
}


/* لایه‌های انتزاعی پس‌زمینه */

.gallery-hero::before {

    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    right: -120px;
    top: 120px;

    background: #0a3d62;

    opacity: .08;

    border-radius: 50%;

    filter: blur(2px);

}


.gallery-hero::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -120px;
    bottom: -80px;

    background: #e67e22;

    opacity: .12;

    border-radius: 40% 60% 55% 45%;

    transform: rotate(-20deg);

}


/* خطوط صنعتی شبیه بافت رنگ */

.gallery-hero-overlay {

    position: absolute;

    inset: 0;

    background-image: linear-gradient(
            120deg,
            transparent 0%,
            transparent 45%,
            rgba(10, 61, 98, .05) 45%,
            rgba(10, 61, 98, .05) 46%,
            transparent 46%
    );

    background-size: 180px 180px;

}


.gallery-hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

}


.gallery-hero-tag {

    display: inline-flex;

    padding: 8px 18px;

    border-radius: 30px;

    background: rgba(10, 61, 98, .08);

    color: #0a3d62;

    font-size: .95rem;

    margin-bottom: 25px;

}


.gallery-hero h1 {

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1.2;

    font-weight: 800;

    color: #17202a;

    margin-bottom: 25px;

}


.gallery-hero p {

    font-size: 20px;

    line-height: 2;

    color: #5f6b75;

    max-width: 620px;

    margin-bottom: 40px;

}


.gallery-hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 32px;

    background: #0a3d62;

    color: white;

    border-radius: 12px;

    transition: .3s;

}


.gallery-hero-btn:hover {

    transform: translateY(-4px);

    background: #08314f;

}