.vgp{font-family:"Vahid Yekan",Yekan,Tahoma,sans-serif}.vgp h2,.vgp h3,.vgp h4{font-family:inherit}.vgp button{font:inherit;text-transform:none;letter-spacing:normal;padding:0}.vgp a{color:inherit;text-decoration:none}.vgp img{max-width:100%;border-radius:0}


.vgp{--vgp-primary: #14543d; --vgp-primary-dark: #0a2b20; --vgp-accent: #f58220; --vgp-accent-light: #ffab5a; --vgp-ink: #102019; --vgp-muted: #65766f; --vgp-surface: #f4f8f6; --vgp-surface2: #eef4f1; --vgp-line: #dce6e1; --vgp-white: #fff; --vgp-card-radius: 16px; --vgp-button-radius: 9px; --vgp-shadow: 0 6px 18px rgba(8,43,31,.045); --vgp-section: 84px; --vgp-container: 1120px; --vgp-motion: 300ms; --vgp-ease: cubic-bezier(.22,.8,.25,1); --vgp-font-fa: 'Yekan',Tahoma,Arial,sans-serif; --vgp-font-en: 'Manrope',Arial,sans-serif;}
@property --vgp-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vgp *{box-sizing: border-box;}

.vgp{margin: 0px; font-family: var(--vgp-font-fa); color: var(--vgp-ink); background: rgb(255, 255, 255); line-height: 1.85; overflow-x: hidden;}
.vgp img{display: block; width: 100%;}
.vgp a{text-decoration: none; color: inherit;}
.vgp button,.vgp  input,.vgp  textarea,.vgp  select{font: inherit;}
.vgp .container{width: min(calc(100% - 40px),var(--vgp-container)); margin: auto;}
.vgp .index,.vgp  .eyebrow{font-family: var(--vgp-font-en);}
.vgp :focus-visible{outline: rgba(245, 130, 32, 0.34) solid 3px; outline-offset: 3px;}
.vgp .eyebrow{display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--vgp-primary);}
.vgp .eyebrow::before{content: ""; width: 18px; height: 2px; background: var(--vgp-accent);}
.vgp .section-title{font-size: clamp(31px, 4vw, 46px); line-height: 1.28; letter-spacing: -0.035em; color: var(--vgp-primary-dark); margin: 8px 0px 10px;}
.vgp .section-copy{max-width: 600px; color: var(--vgp-muted); font-size: 14px; margin: 0px;}
.vgp .section-head{display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 32px;}
.vgp .neon-edge{position: relative; isolation: isolate;}
.vgp .neon-edge::before{content: ""; position: absolute; inset: 0px; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--vgp-angle),transparent 0 28%,rgba(245,130,32,.88) 34%,transparent 39% 67%,rgba(20,84,61,.78) 73%,transparent 79%); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); opacity: 0.12; pointer-events: none; animation: 5s linear 0s infinite normal none running vgpEdgeSpin; transition: opacity var(--vgp-motion);}
.vgp .neon-edge:hover::before,.vgp  .neon-edge.active::before{opacity: 0.95;}
@keyframes vgpEdgeSpin { 
  100% { --vgp-angle: 360deg; }
}
.vgp.projects{padding: var(--vgp-section) 0; background: var(--vgp-primary-dark); color: rgb(255, 255, 255); overflow: hidden; position: relative;}
.vgp.projects::before{content: ""; position: absolute; inset: 0px; background-image: linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, transparent);}
.vgp.projects .eyebrow{color: rgb(186, 208, 198);}
.vgp.projects .section-title{color: rgb(255, 255, 255);}
.vgp.projects .section-copy{color: rgb(168, 191, 181);}
.vgp .project-controls{display: flex; gap: 8px; direction: ltr;}
.vgp .circle-btn{width: 45px; height: 45px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); display: grid; place-items: center; color: rgb(255, 255, 255); cursor: pointer; transition: all var(--vgp-motion);}
.vgp .circle-btn:hover{background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); box-shadow: rgba(245, 130, 32, 0.35) 0px 0px 0px 1px, rgba(245, 130, 32, 0.17) 0px 0px 24px;}
.vgp .circle-btn svg{width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 2.5;}
.vgp .project-window{position: relative; overflow: visible;}
.vgp .project-track{display: flex; gap: 18px; will-change: transform; transition: transform 760ms cubic-bezier(0.18, 0.82, 0.2, 1);}
.vgp[dir="rtl"] .project-track{direction: rtl;}
.vgp[dir="ltr"] .project-track{direction: ltr;}
.vgp .project-slide{position: relative; flex: 0 0 min(82%, 900px); height: 500px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.11); background: rgb(18, 55, 43); opacity: 0.48; transform: perspective(1200px) rotateY(-3deg) scale(0.94); transition: opacity 700ms var(--vgp-ease),transform 700ms var(--vgp-ease),filter 700ms,box-shadow 700ms; filter: saturate(0.7);}
.vgp .project-slide.active{opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1); filter: saturate(1); box-shadow: rgba(20, 84, 61, 0.32) 0px 0px 0px 1px, rgba(28, 196, 132, 0.12) 0px 0px 38px, rgba(0, 0, 0, 0.27) 0px 30px 62px;}
.vgp .project-slide img{height: 100%; object-fit: cover; transition: transform 1.3s var(--vgp-ease),filter 700ms;}
.vgp .project-slide.active img{transform: scale(1.035);}
.vgp .project-slide::after{content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(6, 28, 20, 0.88), rgba(6, 28, 20, 0.28) 55%, rgba(6, 28, 20, 0.08)), linear-gradient(transparent 52%, rgba(6, 28, 20, 0.72)); z-index: 1;}
.vgp .project-info{position: absolute; z-index: 5; right: 31px; left: 31px; bottom: 30px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px;}
.vgp .project-info .index{font-size: 9px; color: var(--vgp-accent); font-weight: 800; letter-spacing: 0.16em;}
.vgp .project-info h3{font-size: 29px; line-height: 1.45; margin: 3px 0px 5px;}
.vgp .project-info p{font-size: 12px; color: rgb(192, 209, 201); max-width: 600px; margin: 0px;}
.vgp .project-tags{display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end;}
.vgp .project-tags span{font-size: 10px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); border-radius: 7px; white-space: nowrap;}
.vgp .project-progress{display: flex; align-items: center; gap: 13px; margin-top: 20px;}
.vgp .progress-line{height: 2px; flex: 1 1 0%; background: rgba(255, 255, 255, 0.11); overflow: hidden;}
.vgp .progress-line span{display: block; width: calc(14.2857%); height: 100%; background: var(--vgp-accent); transition: transform 760ms var(--vgp-ease);}
.vgp .progress-count{font-family: var(--vgp-font-en); font-size: 10px; color: rgb(158, 181, 170); direction: ltr;}
.vgp .reveal{opacity: 1; transform: none; transition: opacity 720ms var(--vgp-ease),transform 720ms var(--vgp-ease);}
@media (max-width: 920px){.vgp{--vgp-section: 68px;}
.vgp .project-slide{flex-basis: 88%; height: 440px;}}
@media (max-width: 720px){.vgp{--vgp-section: 56px;}
.vgp .container{width: min(calc(100% - 28px),var(--vgp-container));}
.vgp .section-head{display: block;}
.vgp .section-head .section-copy{margin-top: 10px;}
.vgp .project-slide{flex-basis: 94%; height: 390px;}
.vgp .project-info{grid-template-columns: 1fr; inset: auto 20px 20px;}
.vgp .project-tags{justify-content: flex-start;}}
@media (max-width: 460px){.vgp .project-slide{height: 350px;}
.vgp .project-info h3{font-size: 21px;}}
@media (prefers-reduced-motion: reduce){.vgp *,.vgp  ::before,.vgp  ::after{animation: auto ease 0s 1 normal none running none !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important;}
.vgp .reveal{opacity: 1; transform: none;}}
.vgp[dir="rtl"],.vgp  .vgp[dir="rtl"] button,.vgp  .vgp[dir="rtl"] input,.vgp  .vgp[dir="rtl"] textarea,.vgp  .vgp[dir="rtl"] select{font-family: var(--vgp-font-fa) !important;}
.vgp .index,.vgp  .eyebrow,.vgp  .progress-count{font-family: var(--vgp-font-en) !important;}
.vgp .vg-journey-background{position: absolute; inset: 0px; z-index: -2; overflow: hidden; pointer-events: none; --vg-journey-line: rgba(20,84,61,.18); --vg-journey-head: rgba(245,130,32,.82); --vg-journey-opacity: .68; --vg-journey-duration: 5.6s;}
.vgp .vg-journey-svg{position: absolute; inset: 0px; width: 100%; height: 100%; overflow: visible; opacity: var(--vg-journey-opacity); transform-origin: center center;}
.vgp .vg-journey-svg--mobile{display: none;}
.vgp .vg-journey-line,.vgp  .vg-journey-head{fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; will-change: stroke-dashoffset;}
.vgp .vg-journey-line{stroke: var(--vg-journey-line); stroke-width: 2.45; stroke-dasharray: 1; stroke-dashoffset: 1;}
.vgp .vg-journey-head{stroke: var(--vg-journey-head); stroke-width: 3.2; stroke-dasharray: 0.038, 0.962; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(rgba(245, 130, 32, 0.18) 0px 0px 7px);}
.vgp .vg-journey-background.is-visible .vg-journey-line{animation: vgpJourneyDraw var(--vg-journey-duration) cubic-bezier(.5,0,.22,1) var(--vgp-line-delay,0ms) forwards;}
.vgp .vg-journey-background.is-visible .vg-journey-head{animation: vgpJourneyTravel var(--vg-journey-duration) cubic-bezier(.5,0,.22,1) var(--vgp-line-delay,0ms) forwards;}
.vgp .vg-journey-background[data-entry="top-right"] .vg-journey-svg{transform: scaleX(-1);}
.vgp .vg-journey-background[data-entry="bottom-left"] .vg-journey-svg{transform: scaleY(-1);}
.vgp .vg-journey-background[data-entry="bottom-right"] .vg-journey-svg{transform: scale(-1);}
@keyframes vgpJourneyDraw { 
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes vgpJourneyTravel { 
  0% { stroke-dashoffset: 0; opacity: 0; }
  4% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { stroke-dashoffset: -0.962; opacity: 0; }
}
.vgp.projects > .container{position: relative; z-index: 2;}
.vgp.projects .vg-journey-background{mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 55%, transparent 100%);}
.vgp .project-window{cursor: grab; overscroll-behavior: auto; touch-action: pan-y; padding-block: 5px; user-select: none;}
.vgp .project-window.is-dragging{cursor: grabbing;}
.vgp .project-track.is-dragging{will-change: transform; transition: none !important;}
.vgp .project-slide{transition: opacity 700ms var(--vgp-ease),transform 700ms var(--vgp-ease),filter 700ms,box-shadow 700ms;}
.vgp .project-drag-hint{position: absolute; z-index: 20; top: 18px; left: 18px; direction: rtl; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 7px 11px 7px 9px; border-radius: 999px; border: 1px solid rgba(20, 84, 61, 0.14); background: rgba(255, 255, 255, 0.88); box-shadow: rgba(8, 43, 31, 0.1) 0px 10px 28px; backdrop-filter: blur(12px); color: rgb(54, 90, 75); font-size: 10px; font-weight: 800; opacity: 0; transform: translateY(-5px) scale(0.97); pointer-events: none; transition: opacity var(--vgp-motion) var(--vgp-ease),transform var(--vgp-motion) var(--vgp-ease);}
.vgp .project-drag-hint .hint-icon{width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--vgp-primary); color: rgb(255, 255, 255); box-shadow: rgba(20, 84, 61, 0.08) 0px 0px 0px 5px;}
.vgp .project-drag-hint svg{width: 14px; height: 14px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.vgp .project-drag-hint small{font-family: var(--vgp-font-en); font-size: 8px; letter-spacing: 0.12em; color: var(--vgp-accent); margin-inline-start: 2px;}
.vgp .project-window.is-dragging .project-drag-hint{opacity: 0 !important; transform: translateY(-3px) scale(0.96) !important;}
@media (hover: hover) and (pointer: fine){.vgp .project-window:hover .project-drag-hint{opacity: 1; transform: translateY(0px) scale(1);}}
@media (max-width: 920px){.vgp .project-drag-hint{display: none;}}
@media (max-width: 720px){.vgp .vg-journey-svg--desktop{display: none;}
.vgp .vg-journey-svg--mobile{display: block;}
.vgp .vg-journey-line{stroke-width: 2.2;}
.vgp .vg-journey-head{stroke-width: 2.9;}}
@media (prefers-reduced-motion: reduce){.vgp .vg-journey-line{stroke-dashoffset: 0; animation: auto ease 0s 1 normal none running none !important;}
.vgp .vg-journey-head{display: none; animation: auto ease 0s 1 normal none running none !important;}}
.vgp.projects{padding: 70px 0px 64px; background: linear-gradient(rgb(248, 250, 249) 0%, rgb(243, 247, 245) 100%); color: var(--vgp-ink); border-top: 1px solid rgba(20, 84, 61, 0.07); border-bottom: 1px solid rgba(20, 84, 61, 0.07);}
.vgp.projects::before{background-image: linear-gradient(rgba(20, 84, 61, 0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 84, 61, 0.024) 1px, transparent 1px); opacity: 0.72; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 16%, rgb(0, 0, 0) 84%, transparent);}
.vgp.projects .eyebrow{color: var(--vgp-primary);}
.vgp.projects .section-title{color: var(--vgp-primary-dark);}
.vgp.projects .section-copy{color: var(--vgp-muted);}
.vgp.projects > .container{position: relative; z-index: 2;}
.vgp.projects .section-head{margin-bottom: 25px;}
.vgp .project-controls{align-self: flex-end;}
.vgp .circle-btn{border-color: rgba(20, 84, 61, 0.15); background: rgba(255, 255, 255, 0.86); color: var(--vgp-primary); box-shadow: rgba(8, 43, 31, 0.043) 0px 6px 18px; backdrop-filter: blur(10px);}
.vgp .circle-btn:hover{background: rgb(255, 255, 255); border-color: rgba(245, 130, 32, 0.32); box-shadow: rgba(245, 130, 32, 0.18) 0px 0px 0px 1px, rgba(245, 130, 32, 0.12) 0px 0px 20px, rgba(8, 43, 31, 0.08) 0px 9px 22px;}
.vgp .project-window{padding-block: 4px 3px;}
.vgp .project-track{gap: 18px;}
.vgp .project-slide{flex-basis: min(80%, 880px); height: 440px; border-color: rgba(20, 84, 61, 0.13); background: rgb(255, 255, 255); opacity: 0.72; filter: saturate(0.86) brightness(0.98); transform: perspective(1200px) rotateY(-2deg) scale(0.965); box-shadow: rgba(8, 43, 31, 0.055) 0px 12px 28px;}
.vgp .project-slide.active{opacity: 1; filter: saturate(1) brightness(1); transform: perspective(1200px) rotateY(0deg) scale(1); border-color: rgba(20, 84, 61, 0.22); box-shadow: rgba(20, 84, 61, 0.1) 0px 0px 0px 1px, rgba(20, 84, 61, 0.075) 0px 0px 27px, rgba(8, 43, 31, 0.11) 0px 20px 44px;}
.vgp .project-slide::after{background: linear-gradient(transparent 0%, transparent 54%, rgba(10, 43, 32, 0.024) 64%, rgba(10, 43, 32, 0.18) 100%);}
.vgp .project-slide img{filter: none;}
.vgp .project-slide.active img{transform: scale(1.025);}
.vgp .project-slide.neon-edge::before{opacity: 0.06;}
.vgp .project-slide.neon-edge.active::before{opacity: 0.55;}
.vgp .project-info{right: 18px; left: 18px; bottom: 17px; grid-template-columns: minmax(0px, 1fr) auto; gap: 18px; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 14px; background: rgba(255, 255, 255, 0.91); backdrop-filter: blur(15px) saturate(1.08); box-shadow: rgba(8, 43, 31, 0.1) 0px 10px 30px, rgba(20, 84, 61, 0.035) 0px 0px 0px 1px; color: var(--vgp-ink);}
.vgp .project-info .index{color: var(--vgp-accent); font-size: 9px;}
.vgp .project-info h3{color: var(--vgp-primary-dark); font-size: 25px; line-height: 1.4; margin: 3px 0px;}
.vgp .project-info p{color: rgb(96, 114, 105); font-size: 11px; line-height: 1.75; max-width: 590px;}
.vgp .project-tags{align-self: center;}
.vgp .project-tags span{color: var(--vgp-primary); border-color: rgba(20, 84, 61, 0.12); background: rgba(244, 248, 246, 0.92); font-weight: 700;}
.vgp .project-progress{margin-top: 16px;}
.vgp .progress-line{background: rgba(20, 84, 61, 0.12);}
.vgp .progress-line span{background: var(--vgp-accent);}
.vgp .progress-count{color: rgb(108, 128, 119);}
.vgp .vg-journey--projects-light{z-index: 0; --vg-journey-line: rgba(20,84,61,.105); --vg-journey-head: rgba(245,130,32,.72); --vg-journey-opacity: .52; --vg-journey-duration: 5.8s;}
.vgp.projects .vg-journey-background{mask-image: linear-gradient(rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0.16) 82%, transparent 100%);}
.vgp.projects .vg-journey-head{filter: drop-shadow(rgba(245, 130, 32, 0.16) 0px 0px 8px);}
@media (max-width: 920px){.vgp.projects{padding: 62px 0px 58px;}
.vgp .project-slide{height: 405px; flex-basis: 88%;}
.vgp .project-info h3{font-size: 23px;}}
@media (max-width: 720px){.vgp.projects{padding: 54px 0px 52px;}
.vgp.projects .section-head{margin-bottom: 22px;}
.vgp .project-slide{height: 340px; flex-basis: 94%;}
.vgp .project-info{right: 12px; left: 12px; bottom: 12px; grid-template-columns: 1fr; padding: 12px 13px; gap: 8px;}
.vgp .project-info h3{font-size: 20px;}
.vgp .project-info p{display: none;}
.vgp .project-tags{justify-content: flex-start; gap: 5px;}
.vgp .project-tags span{font-size: 8px; padding: 5px 7px;}
.vgp.projects .vg-journey-background{opacity: 0.8; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 58%, transparent 100%);}}
@media (max-width: 460px){.vgp .project-slide{height: 318px;}
.vgp .project-info h3{font-size: 18px;}}
.vgp .section-copy{font-size: 15.5px; line-height: 1.95;}
.vgp .eyebrow{font-size: 12px;}
.vgp .project-info p{font-size: 12.5px;}
.vgp .project-drag-hint{font-size: 11.5px;}
.vgp[dir="ltr"]{font-family: var(--vgp-font-en); line-height: 1.65; letter-spacing: -0.005em;}
.vgp[dir="ltr"] .section-title{letter-spacing: -0.04em; line-height: 1.12;}
.vgp[dir="ltr"] .section-copy{font-size: 15px; line-height: 1.75;}
.vgp[dir="ltr"] .project-drag-hint{direction: ltr; left: 18px; right: auto;}
.vgp[dir="ltr"] .project-info{text-align: left;}
.vgp[dir="ltr"] .project-info h3{font-size: 23px; line-height: 1.25;}
@media (max-width: 560px){.vgp{font-size: 16.5px; line-height: 1.95;}
.vgp .section-copy{font-size: 15px;}
.vgp .project-tags span{font-size: 12px;}}
@media (max-width: 720px){.vgp .section-copy{font-size: 15px;}}
.vgp{--vg-green: #14543d; --vg-green-dark: #0a2b20; --vg-orange: #f58220; --vg-ink: #17372a; --vg-muted: #5f7369; --vg-surface: #f4f8f6; --vg-line: #dce6e1; --vg-radius: 16px; --vg-shadow: 0 18px 48px rgba(8,43,31,.09);}

.vgp{min-width: 320px;}
.vgp .eyebrow{font-size: 12px !important; line-height: 1.55 !important;}
@media (max-width: 720px){
.vgp .eyebrow{font-size: 12px !important;}
.vgp .section-copy{font-size: 16px !important; line-height: 1.9 !important;}}




.vgp .project-window:focus-visible{outline-offset: 8px;}
.vgp .project-slide img{pointer-events: none;}

@media (prefers-reduced-motion: reduce){.vgp .project-track,.vgp  .project-slide,.vgp  .project-slide img,.vgp  .reveal,.vgp  .project-progress span{transition: none !important;}
.vgp .neon-edge::before{animation: auto ease 0s 1 normal none running none !important;}}
.vgp{--vgp-primary:var(--vg-green,#14543d);--vgp-primary-dark:var(--vg-green-deep,#0a2b20);--vgp-accent:var(--vg-orange,#f58220);--vgp-font-fa:"Vahid Yekan",Yekan,Tahoma,sans-serif;--vgp-font-en:Manrope,Arial,sans-serif}
.vgp .vgp-image-link{display:block;position:absolute;inset:0;height:100%}.vgp .project-slide:after{pointer-events:none}.vgp .neon-edge:before{z-index:6}.vgp .project-info a{color:inherit;font:inherit;text-decoration:none}.vgp .project-info a:hover{color:var(--vgp-primary)}
.vgp .vgp-pause{display:grid;place-items:center;background:transparent;color:var(--vgp-primary);border:1px solid var(--vgp-line);border-radius:7px;width:30px;height:30px;cursor:pointer;flex:0 0 30px}.vgp .vgp-pause[hidden]{display:none}
.vgp .vgp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.vgp-empty{padding:24px;border:1px dashed #dce6e1;color:#14543d;font:inherit}
.vgp.vgp-no-motion .neon-edge:before{display:none}.vgp.vgp-no-motion .vg-journey-background{display:none}.vgp.vgp-editor .vg-journey-line{animation:none;stroke-dashoffset:0}.vgp.vgp-editor .vg-journey-head{display:none}

/* Metadata stays inside the approved info panel, including long translated names. */
.vgp .project-tags.vgp-metadata{display:flex;visibility:visible;opacity:1;max-width:300px;min-width:0;flex-wrap:wrap;align-content:center}
.vgp .vgp-metadata .vgp-meta-tag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.vgp .vgp-editor-metadata-note{margin:16px auto 0;padding:10px 14px;max-width:1120px;border:1px dashed var(--vgp-primary);border-radius:8px;font-size:13px;line-height:1.8;color:var(--vgp-primary-dark);background:#f4f8f6}
@media(max-width:720px){.vgp .project-tags.vgp-metadata{max-width:100%}.vgp .vgp-metadata .vgp-meta-tag{max-width:calc(50% - 5px);font-size:12px;padding:4px 7px}}