/* Add here all your CSS customizations */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 90px;
    color: #fff;
    background: linear-gradient(120deg, #172034 0%, #263a5d 62%, #b28a46 150%);
}

/* Institutional pages — Hatef Shahr visual identity */
:root { --hatef-primary:#159eaa; --hatef-primary-dark:#0d747d; --hatef-primary-pale:#eaf7f8; --hatef-ink:#263238; --hatef-muted:#6f7b80; --hatef-line:#dce4e6; --hatef-paper:#f6f8f8; }
.institutional-page { color:var(--hatef-ink); background:#fff; }
.institutional-hero { position:relative; overflow:hidden; padding:92px 0 82px; background:#f7f9f9; border-bottom:1px solid var(--hatef-line); }
.institutional-hero::before { content:""; position:absolute; right:0; top:0; width:8px; height:100%; background:var(--hatef-primary); }
.institutional-hero::after { content:""; position:absolute; left:-120px; bottom:-250px; width:500px; height:500px; border:1px solid rgba(21,158,170,.13); border-radius:50%; box-shadow:0 0 0 58px rgba(21,158,170,.035),0 0 0 116px rgba(21,158,170,.025); }
.institutional-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:center; gap:80px; }
.institutional-eyebrow { display:inline-flex; align-items:center; gap:12px; color:var(--hatef-primary-dark); font-size:.86rem; font-weight:700; margin-bottom:18px; }
.institutional-eyebrow::before { content:""; width:34px; height:2px; background:var(--hatef-primary); }
.institutional-hero h1 { color:var(--hatef-ink); font-size:3.15rem; line-height:1.45; font-weight:800; margin:0 0 18px; }
.institutional-hero p { color:var(--hatef-muted); max-width:710px; font-size:1.05rem; line-height:2; margin:0; }
.institutional-hero-mark { display:flex; align-items:center; justify-content:center; height:160px; border-right:1px solid var(--hatef-line); padding-right:48px; }
.institutional-hero-mark img { width:290px; max-width:100%; filter:saturate(.88); }
.institutional-hero-compact { padding-top:78px; padding-bottom:70px; }
.institutional-hero-compact h1 { font-size:2.8rem; }
.institutional-motto { background:var(--hatef-primary-dark); color:#fff; padding:30px 0; }
.institutional-motto .container { display:flex; align-items:center; gap:35px; }
.institutional-motto span { flex:0 0 auto; color:rgba(255,255,255,.62); font-size:.78rem; border-left:1px solid rgba(255,255,255,.25); padding-left:35px; }
.institutional-motto blockquote { color:#fff; font-size:1.35rem; font-weight:700; margin:0; border:0; padding:0; }
.institutional-content-section { padding-top:85px; padding-bottom:85px; }
.strategy-block { display:grid; grid-template-columns:70px 230px minmax(0,1fr); gap:30px; align-items:start; padding:46px 0; border-top:1px solid var(--hatef-line); }
.strategy-block:last-child { border-bottom:1px solid var(--hatef-line); }
.strategy-index { color:var(--hatef-primary); font-size:.85rem; font-weight:700; padding-top:5px; }
.strategy-title span,.institutional-section-heading span,.contact-aside-header>span { display:block; color:var(--hatef-primary-dark); font-size:.78rem; font-weight:700; margin-bottom:8px; }
.strategy-title h2 { color:var(--hatef-ink); font-size:1.85rem; font-weight:800; margin:0; }
.strategy-text p { color:#536166; font-size:1rem; line-height:2.25; text-align:justify; margin:0; }
.institutional-values-section { padding:80px 0 95px; background:var(--hatef-paper); border-top:1px solid var(--hatef-line); }
.institutional-section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:42px; }
.institutional-section-heading h2 { color:var(--hatef-ink); font-size:2rem; font-weight:800; margin:0; }
.institutional-section-heading p { color:var(--hatef-muted); max-width:520px; line-height:1.9; margin:0; }
.values-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--hatef-line); border-right:1px solid var(--hatef-line); }
.formal-value { position:relative; min-height:265px; padding:36px 38px; background:#fff; border-left:1px solid var(--hatef-line); border-bottom:1px solid var(--hatef-line); }
.formal-value::before { content:""; position:absolute; right:0; top:0; width:3px; height:0; background:var(--hatef-primary); transition:height .25s ease; }
.formal-value:hover::before { height:100%; }
.formal-value-number { color:var(--hatef-primary); font-size:.75rem; font-weight:700; }
.formal-value h3 { color:var(--hatef-ink); font-size:1.18rem; font-weight:800; margin:16px 0 17px; }
.formal-value ul { list-style:none; padding:0; margin:0; }
.formal-value li { position:relative; color:#667277; line-height:1.85; margin-bottom:7px; padding-right:15px; }
.formal-value li::before { content:""; position:absolute; right:0; top:.8em; width:5px; height:1px; background:var(--hatef-primary); }
.formal-value-wide { grid-column:1/-1; min-height:0; }
.formal-value-wide ul { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.institutional-contact-section { padding-top:80px; padding-bottom:95px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); border:1px solid var(--hatef-line); }
.contact-primary { padding:46px 50px 36px; }
.contact-heading { align-items:start; margin-bottom:25px; }
.contact-heading p { font-size:.88rem; text-align:left; }
.official-contact-list { display:block; font-style:normal; margin:0; border-top:1px solid var(--hatef-line); }
.official-contact-row { display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:18px; min-height:96px; padding:18px 0; color:inherit!important; text-decoration:none!important; border-bottom:1px solid var(--hatef-line); }
.official-contact-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--hatef-primary-dark); background:var(--hatef-primary-pale); }
.official-contact-row small,.official-contact-row strong { display:block; }
.official-contact-row small { color:var(--hatef-muted); font-size:.73rem; margin-bottom:5px; }
.official-contact-row strong { color:var(--hatef-ink); font-size:.98rem; font-weight:700; line-height:1.9; }
.official-contact-arrow { color:var(--hatef-primary); font-size:.75rem; opacity:0; transform:translateX(8px); transition:.2s ease; }
a.official-contact-row:hover .official-contact-arrow { opacity:1; transform:translateX(0); }
.contact-aside { padding:47px 38px; color:#fff; background:var(--hatef-primary-dark); }
.contact-aside-header>span { color:rgba(255,255,255,.62); }
.contact-aside h2 { color:#fff; font-size:1.65rem; font-weight:800; margin:0 0 15px; }
.contact-aside p { color:rgba(255,255,255,.7); line-height:2; margin-bottom:35px; }
.official-social-list { border-top:1px solid rgba(255,255,255,.18); }
.official-social-list a { display:grid; grid-template-columns:42px 1fr 16px; align-items:center; gap:14px; min-height:82px; color:#fff!important; text-decoration:none!important; border-bottom:1px solid rgba(255,255,255,.18); }
.official-social-list a>span { font-size:1.2rem; }
.official-social-list small,.official-social-list strong { display:block; color:#fff; }
.official-social-list small { opacity:.62; font-size:.7rem; margin-bottom:3px; }
.official-social-list strong { font-size:.9rem; }
.official-social-list a>i { opacity:.45; font-size:.7rem; transition:opacity .2s ease; }
.official-social-list a:hover>i { opacity:1; }
.cooperation-bar { display:flex; align-items:center; justify-content:space-between; gap:35px; margin-top:30px; padding:30px 34px; background:var(--hatef-paper); border-right:4px solid var(--hatef-primary); }
.cooperation-copy { display:flex; align-items:center; gap:22px; }
.cooperation-symbol { color:var(--hatef-primary-dark); font-size:1.6rem; }
.cooperation-bar h3 { color:var(--hatef-ink); font-size:1.1rem; font-weight:800; margin:0 0 7px; }
.cooperation-bar p { color:var(--hatef-muted); margin:0; }
.institutional-button { flex:0 0 auto; display:inline-flex; align-items:center; gap:18px; padding:13px 22px; color:#fff!important; background:var(--hatef-primary-dark); text-decoration:none!important; font-weight:700; }
.institutional-button:hover { background:var(--hatef-primary); }
.institutional-button i { font-size:.75rem; }
@media(max-width:991px){.institutional-hero-grid{grid-template-columns:1fr 230px;gap:40px}.institutional-hero h1{font-size:2.65rem}.institutional-hero-mark{padding-right:30px}.strategy-block{grid-template-columns:55px 170px minmax(0,1fr);gap:20px}.contact-layout{grid-template-columns:1fr}}
@media(max-width:767px){.institutional-hero,.institutional-hero-compact{padding:62px 0 55px}.institutional-hero-grid{display:block}.institutional-hero h1,.institutional-hero-compact h1{font-size:2.05rem}.institutional-hero-mark{display:none}.institutional-motto .container{display:block}.institutional-motto span{display:block;border:0;padding:0;margin-bottom:8px}.institutional-motto blockquote{font-size:1.05rem}.institutional-content-section,.institutional-contact-section{padding-top:55px;padding-bottom:60px}.strategy-block{grid-template-columns:42px 1fr;padding:34px 0}.strategy-text{grid-column:1/-1}.strategy-text p{text-align:right}.institutional-values-section{padding:55px 0 65px}.institutional-section-heading{display:block}.institutional-section-heading p{margin-top:15px}.values-grid{grid-template-columns:1fr}.formal-value,.formal-value-wide{grid-column:auto;min-height:0;padding:30px 26px}.formal-value-wide ul{display:block}.contact-primary,.contact-aside{padding:34px 25px}.contact-heading p{text-align:right}.official-contact-row{grid-template-columns:42px minmax(0,1fr)}.official-contact-arrow{display:none}.cooperation-bar,.cooperation-copy{align-items:flex-start}.cooperation-bar{flex-direction:column;padding:26px 24px}.institutional-button{width:100%;justify-content:space-between}}

.page-hero::after {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    left: -110px;
    top: -190px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}

.page-hero .container { z-index: 1; }
.page-hero-kicker { display: block; color: #e1bb73; font-size: 1rem; font-weight: 700; margin-bottom: 12px; }
.page-hero h1 { color: #fff; font-size: 3rem; font-weight: 800; margin-bottom: 18px; }
.page-hero p { color: rgba(255,255,255,.78); font-size: 1.15rem; line-height: 2; margin: 0; max-width: 760px; }
.page-hero-icon { width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: #e1bb73; background: rgba(255,255,255,.04); }

.services-strip { margin-top: -32px; position: relative; z-index: 2; }
.services-strip .row { background: #fff; box-shadow: 0 14px 45px rgba(20,31,52,.13); border-radius: 12px; overflow: hidden; }
.service-intro-item { display: flex; align-items: center; gap: 18px; padding: 28px 30px; border-left: 1px solid #eceff3; }
.service-intro-item:last-child { border-left: 0; }
.service-intro-item > i { color: #b28a46; font-size: 2rem; }
.service-intro-item strong, .service-intro-item span { display: block; }
.service-intro-item strong { color: #172034; font-size: 1rem; margin-bottom: 5px; }
.service-intro-item span { color: #7c8491; font-size: .86rem; }

.section-heading > span { color: #b28a46; font-weight: 700; }
.section-heading h2 { color: #172034; font-size: 2.25rem; font-weight: 800; margin: 7px 0 12px; }
.section-heading p { color: #7c8491; font-size: 1rem; }
.project-card { height: 100%; border: 1px solid #e8ebef; border-radius: 12px; overflow: hidden; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.project-card:hover { transform: translateY(-7px); box-shadow: 0 18px 38px rgba(22,32,52,.12); }
.project-card-image { display: block; height: 235px; overflow: hidden; position: relative; background: #eef0f3; }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-card:hover .project-card-image img { transform: scale(1.05); }
.project-progress { position: absolute; right: 15px; bottom: 15px; color: #fff; background: rgba(23,32,52,.88); border-radius: 20px; padding: 6px 13px; font-size: .75rem; }
.project-card-body { padding: 25px; }
.project-subtitle { color: #b28a46; font-size: .8rem; font-weight: 700; }
.project-card h3 { font-size: 1.22rem; font-weight: 800; margin: 8px 0 12px; }
.project-card h3 a { color: #172034; text-decoration: none; }
.project-card p { color: #747d8a; line-height: 1.9; min-height: 55px; }
.project-more { color: #b28a46; font-weight: 700; text-decoration: none; }
.project-more i { margin-right: 7px; font-size: .8rem; }
.empty-projects { padding: 65px 20px; border: 1px dashed #d4d9df; border-radius: 12px; background: #fafbfc; }
.empty-projects i { font-size: 3rem; color: #b28a46; margin-bottom: 20px; }
.empty-projects h3 { color: #172034; }
.projects-cta { background: #b28a46; color: #fff; padding: 55px 0; }
.projects-cta h2 { color: #fff; font-size: 1.7rem; margin-bottom: 25px; }

.contact-section { max-width: 1180px; }
.contact-card { height: 100%; min-height: 275px; padding: 35px 25px; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: inherit; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
a.contact-card:hover { transform: translateY(-7px); box-shadow: 0 18px 38px rgba(22,32,52,.11); border-color: #d8bd8c; }
.contact-card-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f7f2e9; color: #b28a46; font-size: 1.7rem; margin-bottom: 20px; }
.contact-card-label { color: #8a929e; font-size: .82rem; margin-bottom: 8px; }
.contact-card strong { color: #172034; font-size: 1.1rem; line-height: 1.8; }
.contact-card small { color: #8a929e; line-height: 1.8; margin-top: 8px; }
.social-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 32px; border: 1px solid #e8ebef; border-radius: 12px; background: #fff; }
.social-contact-title { display: flex; align-items: center; gap: 18px; }
.social-contact-title > span { flex: 0 0 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #b28a46; background: #f7f2e9; font-size: 1.25rem; }
.social-contact-title h3 { color: #172034; font-size: 1.15rem; margin: 0 0 5px; }
.social-contact-title p { color: #7c8491; margin: 0; }
.social-contact-links { display: flex; gap: 12px; }
.social-contact-link { min-width: 210px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 9px; color: #fff !important; text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.social-contact-link:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(22,32,52,.15); }
.social-contact-link.bale-link { background: linear-gradient(135deg, #00a5c8, #087aaf); }
.social-contact-link.instagram-link { background: linear-gradient(135deg, #833ab4, #e1306c 55%, #f77737); }
.social-brand-icon { font-size: 1.45rem; }
.social-contact-link span:nth-child(2) { flex: 1; }
.social-contact-link small, .social-contact-link strong { display: block; color: #fff; }
.social-contact-link small { opacity: .78; font-size: .7rem; }
.social-contact-link strong { font-size: .9rem; margin-top: 2px; }
.social-external-icon { opacity: .65; font-size: .72rem; }
.contact-note { display: flex; align-items: center; gap: 24px; padding: 30px 35px; border-radius: 12px; background: #f4f6f8; }
.contact-note-icon { flex: 0 0 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #172034; color: #fff; font-size: 1.4rem; }
.contact-note > div:nth-child(2) { flex: 1; }
.contact-note h3 { color: #172034; margin: 0 0 7px; font-size: 1.25rem; }
.contact-note p { margin: 0; line-height: 1.9; color: #747d8a; }

@media (max-width: 767px) {
    .page-hero { padding: 70px 0 65px; }
    .page-hero h1 { font-size: 2.15rem; }
    .page-hero p { font-size: 1rem; }
    .services-strip { margin-top: 0; }
    .services-strip .row { border-radius: 0; }
    .service-intro-item { border-left: 0; border-bottom: 1px solid #eceff3; }
    .contact-note { flex-direction: column; text-align: center; }
    .contact-note .btn { width: 100%; }
    .social-contact-panel, .social-contact-links { flex-direction: column; align-items: stretch; }
    .social-contact-title { align-items: flex-start; }
    .social-contact-link { min-width: 0; width: 100%; }
}