/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
/* Vazir Regular */
@font-face {
font-family: "Vazir";
src: url("../fonts/Vazir.woff2") format("woff2"),
url("../fonts/Vazir.woff") format("woff"),
url("../fonts/Vazir.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Vazir Bold */
@font-face {
font-family: "Vazir";
src: url("../fonts/Vazir-Bold.woff2") format("woff2"),
url("../fonts/Vazir-Bold.woff") format("woff"),
url("../fonts/Vazir-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
html, body {
overflow-x: hidden; /* جلوگیری از اسکرول افقی */
margin: 0!important;
padding: 0!important;
}
body {
font-family: 'Vazirmatn';
color: #444444;
direction: rtl;
font-weight: 400;
line-height: 1.7em;
text-align: justify;
}
a {
color: #ffc451;
text-decoration: none;
}
a:hover {
color: #ffd584;
text-decoration: none;
}
h1 {
font-family: 'Vazirmatn', 'Vazir', Tahoma, sans-serif;
font-size: 20px!important;
}
h2, h3, h4, h5, h6 {
font-family: 'Vazirmatn', 'Vazir', Tahoma, sans-serif!important;
font-size: 19px!important;
}
.subtitle {
font-size: 17px; /* اندازه متن زیر تیتر */
font-weight: 500; /* کمی ضخیم */
color: #ffffff; /* رنگ سفید روی ویدیو */
text-shadow: 2px 2px 6px rgba(0,0,0,0.8); /* سایه برای خوانایی */
letter-spacing: 1px; /* فاصله حروف کمی بیشتر */
line-height: 38px;
}
html, body, div, p, span, h1, h2, h3, h4, h5, h6, a, li, ul, ol, input, textarea, button {
font-family: 'Vazirmatn', sans-serif;
}
@font-face {
font-family: 'Vazirmatn';
src: url('../../fonts/Vazirmatn-Medium.woff') format('woff2'),
url('../../fonts/Vazirmatn-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/*-----------------------------------------------------------
#language
-------------------------------------------------------------*/
.pagination{
margin-right:12px;
margin-top:5px;
padding: 0;
position:absolute;
z-index: 1000;
}
.pagination ul{
list-style: none;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 996;
background: #ffc451;
width: 30px;
height: 30px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 28px;
color: #151515;
line-height: 0;
}
.back-to-top:hover {
background: #151515;
}
.back-to-top:hover i {
color: #ffc451;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: #151515;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 0px);
left: calc(50% - 30px);
border: 6px solid #ffc451;
border-top-color: #151515;
border-bottom-color: #151515;
border-radius: 50%;
width: 60px;
height: 60px;
-webkit-animation: animate-preloader 1s linear infinite;
animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/* ============================================================
Header Gradient Fix
خوانایی بهتر منو روی صفحات روشن و هنگام اسکرول
============================================================ */
#header {
width: 100%;
position: fixed;
top: 0;
right: 0;
z-index: 999;
padding: 20px 0;
transition:
background 0.35s ease,
backdrop-filter 0.35s ease,
box-shadow 0.35s ease,
padding 0.35s ease;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.94) 0%,
rgba(0, 0, 0, 0.82) 42%,
rgba(0, 0, 0, 0.58) 72%,
rgba(0, 0, 0, 0.22) 92%,
rgba(0, 0, 0, 0) 100%
);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* حالت اسکرولشده؛ مخصوص صفحات داخلی و پسزمینههای روشن */
#header.header-scrolled {
padding: 14px 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.96) 0%,
rgba(0, 0, 0, 0.90) 48%,
rgba(0, 0, 0, 0.74) 76%,
rgba(0, 0, 0, 0.38) 94%,
rgba(0, 0, 0, 0.08) 100%
);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
#header .logo img {
max-height: 40px;
}
.navbar a:hover {
color: #ffc451;
}
/* راستچین کردن هدر و منو */
#header .container {
direction: rtl;
}
.navbar ul {
display: flex;
list-style: none;
gap: 20px;
}
.navbar a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}
.navbar a:hover {
color: #ffc451;
}
/*--------------------------------------------------------------
# title on header
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
font-family:"Vazirmatn Light", "Vazirmatn Thin" ;
}
@media only screen and(max-width:640px){
.navbar{
margin: auto;
width: 100%;
}
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
font-size: 1em;
}
.navbar li {
position: relative;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-size: 15px;
font-weight: 600;
color: #fff;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #ffc451;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
background-color: #ffc451;
opacity: 0.7;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
.mobile-nav-toggle{display: none;}
/* dropdown list */
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #ffc451;
border-radius:12px;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 10px;
top: calc(100% + 30px);
margin: 0;
padding: 5px 0;
z-index: 99;
opacity: 0.5;
visibility: hidden;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.45);
transition: 0.3s;
background: rgba(0, 0, 0, 0.25);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5.4px);
-webkit-backdrop-filter: blur(5.4px);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.navbar .dropdown ul li {
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 18px;
text-transform: none;
color: #fff;
font-weight:bold;
}
.navbar .dropdown ul a i {
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
background-color: #ffc451;
opacity: 0.7;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
}
/* ============================================================
Header Menu Typography Refinement
فقط اصلاح فونت، اندازه و ظرافت منو
============================================================ */
#header .navbar > ul {
gap: 14px;
}
#header .navbar a,
#header .navbar a:focus {
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.7;
letter-spacing: -0.2px;
padding: 8px 0 8px 22px;
}
/* آیکن فلش زیرمنو ظریفتر */
#header .navbar a i,
#header .navbar a:focus i {
font-size: 10px;
margin-right: 5px;
margin-left: 0;
}
/* زیرمنوها */
#header .navbar .dropdown ul {
min-width: 210px;
padding: 8px 0;
}
#header .navbar .dropdown ul a {
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.8;
padding: 8px 18px;
letter-spacing: -0.15px;
}
/* آیتم مشاوره فنی کمی شاخصتر ولی ظریف */
#header .navbar .nav-consult-link {
padding: 7px 14px !important;
border-radius: 999px;
color: #151515 !important;
background: rgba(255, 196, 81, 0.95);
font-weight: 700 !important;
box-shadow: 0 8px 22px rgba(255, 196, 81, 0.18);
}
#header .navbar .nav-consult-link:hover,
#header .navbar .nav-consult-link:focus {
color: #151515 !important;
background: #ffc451;
}
/* حالت موبایل؛ خوانا ولی نه درشت */
@media (max-width: 768px) {
#header .navbar-mobile a,
#header .navbar-mobile a:focus {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.8;
padding: 9px 18px;
}
#header .navbar-mobile .dropdown ul a {
font-size: 12.5px !important;
padding: 8px 18px;
}
#header .navbar-mobile .nav-consult-link {
display: inline-flex;
margin: 8px 14px;
padding: 8px 16px !important;
}
}
/**
* Mobile Navigation
*/
@media only screen and (max-width:768px){
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
}
@media (max-width: 768px) {
.mobile-nav-toggle {
display:inline-block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
transition: 0.3s;
z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #151515;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #151515;
background-color: #ffc451;
}
.navbar-mobile .getstarted {
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
color: #151515;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
background-color: #ffc451;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/*-------*/
.container h1{
margin-top: 30px;
}
/*-------*/
#hero {
width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cover;
position: relative;
z-index: 2;
}
.fullscreen-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: url("../img/hero-bg.jpg") center center / cover no-repeat;
overflow: hidden;
}
.fullscreen-bg__video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/hero-bg.jpg') center center / cover no-repeat;
width: 100%;
}
.fullscreen-bg__video{
display: none;
}
}
.fullscreen-bg::before {
content: "";
background: rgba(0, 0, 0, 0.6);
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.fullscreen-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* وسط شفاف، بالا و پایین مشکی پررنگ */
background: linear-gradient(
to bottom,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.2) 60%,
rgba(0,0,0,0.80) 90%,
rgba(0,0,0,0.95) 100%
);
pointer-events: none;
z-index: 2; /* روی ویدیو */
}
#hero .container {
position: relative;
padding-top: 74px;
text-align: center;
z-index: 1000;
}
#hero h1 {
margin: 0;
padding: 0;
font-size:20px;
font-weight: 700;
line-height: 64px;
color: #fff;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif;
}
#hero h1 span {
color: #ffc451;
}
#hero h2 {
color: rgba(255, 255, 255, 0.9);
margin: 10px 0 0 0;
font-size: 20px;
}
/* ============================================================
Hero Decision Cards - MOFU / Lead Generation
باکسهای هدایت کاربر به اقدام خرید
============================================================ */
.hero-cards-row {
row-gap: 18px;
}
#hero .icon-box {
position: relative;
isolation: isolate;
overflow: hidden;
height: 100%;
min-height: 118px;
padding: 18px 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
backdrop-filter: blur(5px) saturate(125%);
-webkit-backdrop-filter: blur(5px) saturate(125%);
transition:
transform 0.22s ease,
border-color 0.22s ease,
background-color 0.22s ease,
box-shadow 0.22s ease;
}
#hero .icon-box::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 50% 0%, rgba(255, 196, 81, 0.16), transparent 38%),
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
opacity: 0.8;
pointer-events: none;
}
#hero .icon-box i {
margin-bottom: 10px;
font-size: 19px;
line-height: 1;
color: #ffc451;
text-shadow: 0 0 16px rgba(255, 196, 81, 0.35);
transition: transform 0.22s ease, color 0.22s ease;
}
#hero .icon-box h3 {
margin: 0;
padding: 0;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: 1rem !important;
font-weight: 700;
line-height: 1.9 !important;
letter-spacing: 0;
}
#hero .icon-box h3 a {
display: inline-block;
color: #ffffff;
text-decoration: none;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.95),
0 4px 12px rgba(0, 0, 0, 0.70);
transition: color 0.22s ease;
}
#hero .icon-box:hover {
transform: translateY(-4px);
border-color: rgba(255, 196, 81, 0.78);
background: rgba(255, 255, 255, 0.05);
box-shadow:
0 20px 46px rgba(0, 0, 0, 0.32),
0 0 26px rgba(255, 196, 81, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
#hero .icon-box:hover i {
color: #ffd36d;
transform: translateY(-2px);
}
#hero .icon-box:hover h3 a {
color: #ffc451;
}
/* کلیکپذیری بهتر با فوکوس کیبورد */
#hero .icon-box h3 a:focus-visible {
outline: 2px solid #ffc451;
outline-offset: 5px;
border-radius: 8px;
}
/* کاهش انیمیشن برای کاربران حساس به حرکت */
@media (prefers-reduced-motion: reduce) {
#hero .icon-box,
#hero .icon-box i,
#hero .icon-box h3 a {
transition: none;
}
#hero .icon-box:hover {
transform: none;
}
}
/* ریسپانسیو هیرو کارتها */
@media (max-width: 991.98px) {
#hero .icon-box {
min-height: 104px;
padding: 16px 12px;
}
#hero .icon-box h3 {
font-size: 0.9rem !important;
line-height: 1.75 !important;
}
}
@media (max-width: 575.98px) {
.hero-cards-row {
margin-top: 2rem !important;
}
#hero .icon-box {
min-height: 92px;
padding: 14px 10px;
border-radius: 14px;
}
#hero .icon-box i {
font-size: 20px;
margin-bottom: 8px;
}
#hero .icon-box h3 {
font-size: 0.86rem !important;
line-height: 1.7 !important;
}
}
@media (min-width: 1024px) {
#hero {
background-attachment: fixed;
}
}
@media (max-width: 768px) {
#hero {
height: auto;
width: 100%;
}
#hero h1 {
margin:0;
padding: 0;
font-size:19px;
line-height: 36px;
}
#hero h2 {
font-size: 18px;
line-height:30px;
color: dodgerblue;
}
}
/*--------------------------------------------------------------
# Sections General- khadamat-
--------------------------------------------------------------*/
/*در بر گیرنده کل صفحه*/
section {
padding-top: 60px;
overflow: hidden;
}
.section-title {
padding-bottom: 20px;
}
.section-title h2 {
font-size: 14px;
font-weight: 500;
padding: 0;
line-height: 1px;
margin: 0 0 5px 0;
letter-spacing: 2px;
color: #aaaaaa;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif;
}
.section-title h2::after {
content: "";
width: 120px;
height: 1px;
display: inline-block;
background: #ffde9e;
margin: 4px 10px;
}
.section-title p {
padding-top:10px ;
margin: 0;
font-size:19px;
font-weight: 700;
text-transform: uppercase;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif;
color: #151515;
}
.breadcrumbs{
border: 1px #F00F13;
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
/* ===== Home About Section Refinement - Final Visual Polish ===== */
/* چیدمان کلی بخش درباره ما */
#about {
background:
radial-gradient(circle at 12% 18%, rgba(38, 59, 143, 0.045), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
#about .row {
--bs-gutter-x: 2.25rem;
align-items: center;
}
/* ستون متن: ایجاد قاب ظریف برای جلوگیری از پخش شدن محتوا */
#about .about-home-refined {
position: relative;
max-width: 760px;
margin-inline: auto;
padding: 26px 30px 24px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
radial-gradient(circle at 92% 10%, rgba(38, 59, 143, 0.06), transparent 34%);
border: 1px solid rgba(38, 59, 143, 0.10);
box-shadow:
0 18px 42px rgba(15, 23, 42, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
/* خط تأکیدی بسیار ظریف در سمت راست کادر متن */
#about .about-home-refined::before {
content: "";
position: absolute;
top: 28px;
right: 0;
width: 3px;
height: 78px;
border-radius: 999px;
background: linear-gradient(180deg, #263B8F, rgba(245, 158, 11, 0.75));
}
/* عنوان کوچک: چرا سپهر دنیا؟ */
#about .about-home-refined__label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
padding: 4px 12px;
border-radius: 999px;
color: #263B8F;
background: rgba(38, 59, 143, 0.065);
border: 1px solid rgba(38, 59, 143, 0.13);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.86rem;
font-weight: 800;
line-height: 1.7;
}
/* تیتر اصلی متن */
#about .about-home-refined h2 {
margin: 0 0 14px;
color: #263B8F;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.12rem, 1.35vw, 1.36rem) !important;
font-weight: 800;
line-height: 1.85;
letter-spacing: -0.25px;
}
/* پاراگراف اصلی */
#about .about-home-refined p {
margin: 0 0 14px;
color: #374151;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.94rem;
font-weight: 400;
line-height: 2.12;
text-align: justify;
}
/* لینکهای داخلی سئو شده */
#about .about-home-refined a {
color: #263B8F;
font-weight: 800;
text-decoration: none;
border-bottom: 1px solid rgba(38, 59, 143, 0.22);
transition: color 0.2s ease, border-color 0.2s ease;
}
#about .about-home-refined a:hover {
color: #F59E0B;
border-bottom-color: rgba(245, 158, 11, 0.48);
}
/* آیتمهای توضیحی داخل متن */
#about .about-home-refined__points {
display: grid;
gap: 9px;
margin: 16px 0 14px;
}
#about .about-home-refined__point {
position: relative;
padding: 10px 13px 10px 15px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow:
0 7px 18px rgba(15, 23, 42, 0.035),
inset 3px 0 0 rgba(38, 59, 143, 0.36);
}
#about .about-home-refined__point strong {
display: block;
margin-bottom: 3px;
color: #111827;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.9rem;
font-weight: 800;
line-height: 1.7;
}
#about .about-home-refined__point span {
display: block;
color: #475569;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.86rem;
font-weight: 400;
line-height: 1.95;
}
/* نتیجه برای شما */
#about .about-home-refined__result {
margin-top: 12px !important;
margin-bottom: 12px !important;
padding: 9px 12px;
border-radius: 12px;
color: #1f2937 !important;
background: rgba(245, 158, 11, 0.07);
border: 1px solid rgba(245, 158, 11, 0.15);
font-size: 0.9rem !important;
font-weight: 700 !important;
line-height: 1.9 !important;
text-align: right !important;
}
/* لینک ادامه */
#about .about-home-refined__link {
display: inline-flex;
margin-top: 2px;
}
#about .about-home-refined__link a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #263B8F;
font-size: 0.9rem;
font-weight: 800;
}
#about .about-home-refined__link a::after {
content: "←";
font-size: 1rem;
line-height: 1;
transition: transform 0.2s ease;
}
#about .about-home-refined__link a:hover::after {
transform: translateX(-3px);
}
/* کنترل بهتر باکس تصویر؛ کمی کوچکتر و ظریفتر */
#about #carouselExampleDark {
max-width: 560px;
margin-inline-start: auto;
margin-inline-end: auto;
border-radius: 18px;
overflow: hidden;
background: #eef3f9;
border: 1px solid rgba(38, 59, 143, 0.16);
box-shadow:
0 16px 36px rgba(15, 23, 42, 0.16),
0 0 0 1px rgba(255, 255, 255, 0.62) inset;
}
/* نسبت تصویر ثابت و حرفهای */
#about #carouselExampleDark .carousel-inner {
aspect-ratio: 5 / 4;
background: #eef3f9;
}
#about #carouselExampleDark .carousel-item,
#about #carouselExampleDark .carousel-item img {
height: 100%;
}
#about #carouselExampleDark .carousel-item img {
width: 100%;
object-fit: cover;
display: block;
}
/* کپشن داخل تصویر: جمعوجورتر و کاملتر */
#about #carouselExampleDark .carousel-caption {
right: 0;
left: 0;
bottom: 0;
padding: 26px 16px 13px;
text-align: right;
background: linear-gradient(
180deg,
rgba(6, 18, 44, 0) 0%,
rgba(6, 18, 44, 0.62) 44%,
rgba(6, 18, 44, 0.92) 100%
);
border-radius: 0;
}
/* تیتر کپشن؛ کمی کوچکتر */
#about #carouselExampleDark .carousel-caption h5 {
margin: 0 0 4px;
color: #fff;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.9rem !important;
font-weight: 800;
line-height: 1.75;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
}
/* متن کپشن؛ کوچکتر و خواناتر */
#about #carouselExampleDark .carousel-caption p {
margin: 0;
color: rgba(255, 255, 255, 0.90);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.76rem !important;
font-weight: 500;
line-height: 1.85;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
}
/* کنترل متنهای بلند کپشن */
#about #carouselExampleDark .carousel-caption p,
#about #carouselExampleDark .carousel-caption h5 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
#about #carouselExampleDark .carousel-caption h5 {
-webkit-line-clamp: 2;
}
#about #carouselExampleDark .carousel-caption p {
-webkit-line-clamp: 2;
}
/* کنترل فلشها */
#about #carouselExampleDark .carousel-control-prev,
#about #carouselExampleDark .carousel-control-next {
width: 9%;
opacity: 0.78;
}
#about #carouselExampleDark .carousel-control-prev:hover,
#about #carouselExampleDark .carousel-control-next:hover {
opacity: 1;
}
/* کنترل کپشن قدیمی بوتاسترپ که ممکن است تداخل بدهد */
#about #carouselExampleDark .carousel-caption h5,
#about #carouselExampleDark .carousel-caption p {
text-align: center;
}
/* ریسپانسیو */
@media (max-width: 991.98px) {
#about .row {
--bs-gutter-x: 1.5rem;
row-gap: 2rem;
}
#about .about-home-refined {
max-width: 100%;
padding: 24px 22px 22px;
}
#about #carouselExampleDark {
max-width: 100%;
margin-inline-start: 0;
margin-inline-end: 0;
}
#about #carouselExampleDark .carousel-inner {
aspect-ratio: 16 / 11;
}
#about #carouselExampleDark .carousel-caption {
padding: 22px 14px 12px;
}
#about #carouselExampleDark .carousel-caption h5 {
font-size: 0.84rem !important;
}
#about #carouselExampleDark .carousel-caption p {
font-size: 0.72rem !important;
line-height: 1.75;
}
}
@media (max-width: 575.98px) {
#about .about-home-refined {
padding: 22px 18px 20px;
border-radius: 18px;
}
#about .about-home-refined::before {
top: 24px;
height: 62px;
}
#about .about-home-refined__label {
font-size: 0.82rem;
}
#about .about-home-refined h2 {
font-size: 1.08rem !important;
line-height: 1.9;
}
#about .about-home-refined p {
font-size: 0.9rem;
line-height: 2.05;
}
#about .about-home-refined__point {
padding: 10px 12px;
}
#about .about-home-refined__point strong {
font-size: 0.88rem;
}
#about .about-home-refined__point span {
font-size: 0.84rem;
}
}
/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
padding-top: 20px;
}
.clients .swiper-slide img {
opacity: 0.5;
transition: 0.3s;
filter: grayscale(100);
}
.clients .swiper-slide img:hover {
filter: none;
opacity: 1;
}
.clients .swiper-pagination {
margin-top: 20px;
position: relative;
}
.clients .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
background-color: #ddd;
}
.clients .swiper-pagination .swiper-pagination-bullet-active {
background-color: #ffc451;
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features {
padding-top:10px;
}
.features .icon-box {
padding-left: 15px;
}
.features .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 5px 0 10px 30px;
}
.features .icon-box i {
font-size: 48px;
float: left;
color: #ffc451;
}
.features .icon-box p {
font-size: 15px;
color: #636060;
margin-left: 60px;
text-align:justify;
}
.features .image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height:250px;
}
/* ============================================================
PU Selection Matrix - Glass + Fully Aligned Left/Right + Bottom
============================================================ */
.pu-selection-matrix--glass {
position: relative;
padding: 46px 0;
overflow: hidden;
background:
radial-gradient(circle at 12% 18%, rgba(38, 59, 143, 0.06), transparent 30%),
radial-gradient(circle at 88% 16%, rgba(28, 117, 188, 0.07), transparent 30%),
radial-gradient(circle at 82% 86%, rgba(221, 184, 92, 0.15), transparent 32%),
linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
}
/* ================= Stage ================= */
.pu-selection-matrix__stage {
position: relative;
min-height: 640px;
overflow: visible;
--foam-right: -112px;
--foam-bottom: -98px;
--foam-width: min(33vw, 470px);
}
/* ================= Background Scene ================= */
.pu-selection-matrix__scene {
position: absolute;
inset: 0;
border-radius: 24px;
overflow: hidden;
background:
linear-gradient(
115deg,
rgba(18, 34, 68, 0.52) 0%,
rgba(38, 59, 143, 0.28) 34%,
rgba(28, 117, 188, 0.18) 60%,
rgba(221, 184, 92, 0.14) 100%
),
radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.12), transparent 28%),
radial-gradient(circle at 82% 22%, rgba(221, 184, 92, 0.18), transparent 24%),
url("../img/bg/polyurethane-foam-production-line-selection.png") center center / cover no-repeat;
box-shadow:
0 18px 42px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.pu-selection-matrix__scene::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(255,255,255,0.03) 0%,
rgba(255,255,255,0.01) 36%,
rgba(255,255,255,0.06) 100%
),
radial-gradient(circle at 72% 76%, rgba(221, 184, 92, 0.15), transparent 26%),
radial-gradient(circle at 34% 16%, rgba(255,255,255,0.06), transparent 24%);
}
/* ================= Foam Image ================= */
.pu-selection-matrix__foam-visual {
position: absolute;
right: var(--foam-right);
bottom: var(--foam-bottom);
z-index: 1;
width: var(--foam-width);
max-width: 100%;
height: auto;
object-fit: contain;
filter:
drop-shadow(0 24px 34px rgba(15, 23, 42, 0.22))
drop-shadow(0 8px 14px rgba(38, 59, 143, 0.10));
pointer-events: none;
user-select: none;
}
/* ================= Glass Panel ================= */
.pu-selection-matrix__glass {
position: relative;
z-index: 2;
/* چپچین شدن - مهمترین تغییر */
width: min(88%, 960px);
margin: 0; /* حذف margin: auto */
margin-right: auto; /* فقط راست خودکار (چپ میچسبد) */
margin-left: 0; /* چپ = 0 → چسبیده به لبه */
/* تراز کامل از پایین (حفظ شده) */
margin-bottom: 0;
padding: 24px 26px 28px;
border-radius: 21px;
/* گلستر شدن */
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.58),
rgba(255, 255, 255, 0.38) 48%,
rgba(255, 255, 255, 0.28) 100%
);
border: 1px solid rgba(255, 255, 255, 0.58);
box-shadow:
0 22px 42px rgba(15, 23, 42, 0.10),
0 8px 18px rgba(28, 117, 188, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.68);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
}
.pu-selection-matrix__glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(circle at 92% 12%, rgba(221, 184, 92, 0.22), transparent 24%),
radial-gradient(circle at 10% 88%, rgba(28, 117, 188, 0.14), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
}
/* ================= Header ================= */
.pu-selection-matrix__header {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto 20px;
padding: 4px 6px 0;
text-align: center;
}
.pu-selection-matrix__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
padding: 4px 12px;
border-radius: 999px;
color: #193c73;
background:
linear-gradient(90deg, rgba(221, 184, 92, 0.28), rgba(255, 255, 255, 0.22), rgba(28, 117, 188, 0.14));
border: 1px solid rgba(255, 255, 255, 0.32);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.74rem;
font-weight: 850;
line-height: 1.55;
box-shadow:
0 6px 14px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255,255,255,0.38);
}
.pu-selection-matrix__header h2 {
margin: 0 0 6px;
color: #10284f;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.08rem, 1.3vw, 1.32rem) !important;
font-weight: 900;
line-height: 1.68;
letter-spacing: -0.18px;
text-shadow:
0 1px 0 rgba(255,255,255,0.36),
0 6px 12px rgba(255,255,255,0.10);
}
.pu-selection-matrix__header p {
margin: 0 auto;
color: #34475f;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.82rem;
font-weight: 650;
line-height: 1.86;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.28);
}
/* ================= Grid ================= */
.pu-selection-matrix__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.12fr 1fr;
gap: 14px;
align-items: stretch;
}
.pu-selection-matrix__column {
position: relative;
padding: 16px 15px;
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.27));
border: 1px solid rgba(255,255,255,0.30);
box-shadow:
0 8px 16px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255,255,255,0.24);
}
.pu-selection-matrix__column--center {
background:
linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.30)),
radial-gradient(circle at 50% 0%, rgba(221,184,92,0.16), transparent 36%);
}
/* ================= Column Heads ================= */
.pu-selection-matrix__column-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.pu-selection-matrix__column-head span {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 52%, #ddbb58 150%);
border: 1px solid rgba(255,255,255,0.22);
font-size: 0.8rem;
font-weight: 900;
box-shadow:
0 6px 14px rgba(38, 59, 143, 0.18),
0 0 10px rgba(221, 184, 92, 0.12),
inset 0 1px 0 rgba(255,255,255,0.20);
}
.pu-selection-matrix__column-head h3 {
margin: 0;
color: #17325f !important;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.92rem !important;
font-weight: 900;
line-height: 1.66;
text-shadow: 0 1px 0 rgba(255,255,255,0.24);
}
.pu-selection-matrix__column:first-child .pu-selection-matrix__column-head h3 {
color: #17325f !important;
}
/* ================= Chips ================= */
.pu-selection-matrix__chips {
display: grid;
gap: 8px;
}
.pu-selection-matrix__chips a {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 38px;
padding: 8px 14px;
border-radius: 999px;
color: #17345f !important;
background:
linear-gradient(90deg, rgba(255,255,255,0.76), rgba(242,247,255,0.64), rgba(221,184,92,0.18));
border: 1px solid rgba(255,255,255,0.30);
text-decoration: none;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 850;
line-height: 1.56;
text-shadow: 0 1px 0 rgba(255,255,255,0.24);
box-shadow:
0 6px 12px rgba(15, 23, 42, 0.045),
inset 0 1px 0 rgba(255,255,255,0.16);
transition:
transform 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.pu-selection-matrix__chips a::after {
content: "←";
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-inline-start: 8px;
border-radius: 999px;
color: #17325f;
background:
linear-gradient(135deg, #fff7df, #ddbb58 65%, #f2d98b);
font-size: 0.78rem;
font-weight: 900;
opacity: 1;
box-shadow:
0 0 0 1px rgba(255,255,255,0.20) inset,
0 3px 8px rgba(221,184,92,0.18);
transition:
transform 0.2s ease,
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.pu-selection-matrix__chips a:hover {
color: #7a4f00 !important;
background:
linear-gradient(90deg, rgba(255,255,255,0.87), rgba(247,250,255,0.77), rgba(221,184,92,0.29));
border-color: rgba(221,184,92,0.38);
box-shadow:
0 10px 18px rgba(28,117,188,0.08),
0 0 14px rgba(221,184,92,0.18);
transform: translateX(-2px);
}
.pu-selection-matrix__chips a:hover::after {
color: #0f274d;
background:
linear-gradient(135deg, #ffffff, #f4ce64 55%, #ddbb58);
box-shadow:
0 0 0 1px rgba(255,255,255,0.28) inset,
0 0 12px rgba(221,184,92,0.34);
transform: translateX(-3px);
}
/* ================= Checklist ================= */
.pu-selection-matrix__checklist {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.pu-selection-matrix__checklist li {
position: relative;
padding: 9px 32px 9px 14px;
border-radius: 11px;
color: #17345f;
background:
linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.50));
border: 1px solid rgba(255,255,255,0.30);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.72;
text-shadow: 0 1px 0 rgba(255,255,255,0.22);
box-shadow:
0 6px 12px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255,255,255,0.16);
}
.pu-selection-matrix__checklist li::before {
content: "";
position: absolute;
top: 15px;
right: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #1C75BC, #ddbb58);
box-shadow:
0 0 0 3px rgba(221,184,92,0.15),
0 0 10px rgba(221,184,92,0.22);
}
/* ================= Actions ================= */
.pu-selection-matrix__actions {
display: grid;
gap: 8px;
}
.pu-selection-matrix__action {
display: block;
padding: 10px 14px;
border-radius: 13px;
color: #13315c;
background:
linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.52));
border: 1px solid rgba(255,255,255,0.30);
text-decoration: none;
box-shadow:
0 6px 14px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255,255,255,0.16);
transition:
transform 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.pu-selection-matrix__action:hover {
color: #082657;
transform: translateY(-2px);
background:
linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.58));
border-color: rgba(221,184,92,0.40);
box-shadow:
0 10px 18px rgba(15, 23, 42, 0.08),
0 0 14px rgba(221,184,92,0.15);
}
.pu-selection-matrix__action--primary {
color: #ffffff !important;
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 52%, #ddbb58 160%);
border-color: rgba(255,255,255,0.22);
box-shadow:
0 12px 22px rgba(38, 59, 143, 0.18),
0 0 12px rgba(221,184,92,0.10),
inset 0 1px 0 rgba(255,255,255,0.16);
}
.pu-selection-matrix__action--primary:hover {
background:
linear-gradient(135deg, #223783 0%, #1868aa 52%, #e5c766 155%);
box-shadow:
0 14px 26px rgba(38, 59, 143, 0.22),
0 0 18px rgba(221,184,92,0.22),
inset 0 1px 0 rgba(255,255,255,0.18);
}
.pu-selection-matrix__action {
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 900;
line-height: 1.66;
}
.pu-selection-matrix__action small {
display: block;
margin-top: 3px;
color: #4a5f79;
font-size: 0.69rem;
font-weight: 700;
line-height: 1.65;
}
.pu-selection-matrix__action--primary small {
color: rgba(255,255,255,0.90);
}
/* ================= Footer ================= */
.pu-selection-matrix__footer {
position: relative;
z-index: 1;
margin: 22px auto 0;
padding: 14px 18px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background:
linear-gradient(90deg, rgba(221,184,92,0.26), rgba(255,255,255,0.18), rgba(28,117,188,0.16));
border: 1px solid rgba(255,255,255,0.24);
box-shadow:
0 8px 16px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255,255,255,0.16);
}
.pu-selection-matrix__footer p {
margin: 0;
color: #17345f;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 800;
line-height: 1.76;
text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
.pu-selection-matrix__footer a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 18px;
border-radius: 999px;
color: #ffffff !important;
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 52%, #ddbb58 160%);
border: 1px solid rgba(255,255,255,0.22);
text-decoration: none;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 900;
box-shadow:
0 10px 18px rgba(38, 59, 143, 0.18),
0 0 12px rgba(221,184,92,0.10),
inset 0 1px 0 rgba(255,255,255,0.16);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease,
background 0.2s ease;
}
.pu-selection-matrix__footer a:hover {
transform: translateY(-2px);
filter: brightness(1.05);
background:
linear-gradient(135deg, #223783 0%, #1868aa 52%, #e5c766 155%);
box-shadow:
0 14px 24px rgba(38, 59, 143, 0.24),
0 0 18px rgba(221,184,92,0.24),
inset 0 1px 0 rgba(255,255,255,0.18);
}
/* ================= Responsive ================= */
@media (max-width: 1199.98px) {
.pu-selection-matrix__glass {
width: min(92%, 900px);
}
.pu-selection-matrix__stage {
min-height: 610px;
--foam-right: -86px;
--foam-bottom: -88px;
--foam-width: min(35vw, 430px);
}
}
@media (max-width: 991.98px) {
.pu-selection-matrix--glass {
padding: 42px 0;
}
.pu-selection-matrix__stage {
min-height: auto;
padding-bottom: 245px;
--foam-right: 50%;
--foam-bottom: -8px;
--foam-width: min(56vw, 350px);
}
.pu-selection-matrix__glass {
width: 100%;
margin: 0 auto;
padding: 20px 18px 22px;
}
.pu-selection-matrix__grid {
grid-template-columns: 1fr;
}
.pu-selection-matrix__foam-visual {
transform: translateX(50%);
}
.pu-selection-matrix__footer {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 575.98px) {
.pu-selection-matrix--glass {
padding: 34px 0;
}
.pu-selection-matrix__stage {
padding-bottom: 210px;
--foam-width: min(73vw, 280px);
--foam-bottom: -8px;
}
.pu-selection-matrix__scene {
border-radius: 20px;
}
.pu-selection-matrix__glass {
padding: 18px 14px 20px;
border-radius: 18px;
}
.pu-selection-matrix__header h2 {
font-size: 1rem !important;
line-height: 1.8;
}
.pu-selection-matrix__header p {
font-size: 0.82rem;
line-height: 1.9;
}
.pu-selection-matrix__column {
padding: 14px 12px;
border-radius: 15px;
}
.pu-selection-matrix__footer a {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.pu-selection-matrix__chips a,
.pu-selection-matrix__action,
.pu-selection-matrix__footer a {
transition: none;
}
.pu-selection-matrix__chips a:hover,
.pu-selection-matrix__action:hover,
.pu-selection-matrix__footer a:hover {
transform: none;
}
}
/* ============================================================
PU Industry Routes -
============================================================ */
.pu-industry-routes {
position: relative;
overflow: hidden;
direction: rtl;
text-align: right;
padding: 54px 0 58px;
background:
radial-gradient(circle at 12% 18%, rgba(38, 59, 143, 0.045), transparent 32%),
radial-gradient(circle at 88% 82%, rgba(245, 158, 11, 0.055), transparent 34%),
linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #ffffff 100%);
}
.pu-industry-routes .container {
position: relative;
z-index: 1;
}
/* ================= Header ================= */
.pu-industry-routes__header {
max-width: 860px;
margin: 0 auto 34px;
text-align: center;
}
.pu-industry-routes__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
padding: 4px 14px;
border-radius: 999px;
color: #263B8F;
background: rgba(38, 59, 143, 0.06);
border: 1px solid rgba(38, 59, 143, 0.12);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.76rem;
font-weight: 850;
line-height: 1.8;
}
.pu-industry-routes__header h2 {
margin: 0 0 10px;
color: #101828;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.18rem, 1.55vw, 1.60rem) !important;
font-weight: 950;
line-height: 1.8;
letter-spacing: -0.25px;
}
.pu-industry-routes__header p {
margin: 0 auto;
max-width: 720px;
color: #667085;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.88rem;
font-weight: 550;
line-height: 2;
text-align: center;
}
/* ================= Main List ================= */
.pu-industry-routes__list {
max-width: 1180px;
margin: 0 auto;
display: grid;
gap: 0;
border-top: 1px solid rgba(15, 23, 42, 0.10);
}
/* ================= Main Row ================= */
/* چپ = باکسها | راست = متن و شماره */
.pu-industry-route {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.42fr) minmax(290px, 0.78fr);
grid-template-areas: "links meta";
gap: 24px;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.pu-industry-route::before {
content: "";
position: absolute;
top: 18px;
right: 0;
bottom: 18px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #263B8F, #1C75BC, #F59E0B);
opacity: 0.92;
}
/* ================= Right Meta Column ================= */
.pu-industry-route__meta {
grid-area: meta;
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
align-items: center;
padding-right: 18px;
}
.pu-industry-route__number {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: linear-gradient(135deg, #263B8F 0%, #1C75BC 68%, #4ec1d8 100%);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.82rem;
font-weight: 950;
line-height: 1;
box-shadow:
0 10px 20px rgba(38, 59, 143, 0.18),
0 0 14px rgba(28, 117, 188, 0.10);
}
.pu-industry-route__meta h3 {
margin: 0 0 5px;
color: #172033;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(0.96rem, 1.1vw, 1.08rem) !important;
font-weight: 950;
line-height: 1.75;
letter-spacing: -0.15px;
}
.pu-industry-route__meta p {
margin: 0;
color: #667085;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.82rem;
font-weight: 550;
line-height: 1.9;
text-align: right;
}
/* ================= Left Boxes Grid ================= */
.pu-industry-route__links {
grid-area: links;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
padding: 8px 8px 8px 0;
}
/* ================= Banner Boxes ================= */
.pu-industry-route__links a {
position: relative;
isolation: isolate;
overflow: visible;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 78px;
padding: 9px 16px 9px 16px;
padding-right: 90px; /* فضا برای آیکن سمت راست */
text-decoration: none;
text-align: center;
background: transparent;
border: 0;
}
/* بدنه باکس با گرادیانت نرم و مینیمال */
.pu-industry-route__links a::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 64px; /* بدنه قبل از ناحیه آیکن تمام میشود */
bottom: 0;
z-index: 0;
border-radius: 16px;
background:
linear-gradient(
135deg,
#59d2e2 0%,
#7fcde8 34%,
#bce8ef 70%,
#d9f5ee 100%
);
border: 1px solid rgba(38, 59, 143, 0.14);
box-shadow:
0 7px 16px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255,255,255,0.38);
transition:
box-shadow 0.28s ease,
border-color 0.28s ease,
filter 0.28s ease,
background 0.28s ease;
}
/* برق/شاین روی باکس */
.pu-industry-route__links a::after {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
right: 66px;
left: 10px;
z-index: 1;
pointer-events: none;
border-radius: 14px;
opacity: 0;
background: linear-gradient(
115deg,
transparent 0%,
transparent 32%,
rgba(255,255,255,0.12) 42%,
rgba(255,255,255,0.52) 50%,
rgba(255,255,255,0.12) 58%,
transparent 70%,
transparent 100%
);
transform: translateX(-120%);
}
/* تصویر سمت راست */
.pu-industry-route__links a img {
position: absolute;
top: 50%;
right: 4px; /* کمی داخل باکس آمده */
transform: translateY(-50%);
z-index: 2;
width: 104px;
height: 86px;
object-fit: contain;
object-position: center right;
filter: drop-shadow(0 7px 10px rgba(15, 23, 42, 0.16));
transition:
transform 0.28s ease,
filter 0.28s ease;
}
/* متنهای باکس */
.pu-industry-route__links a span,
.pu-industry-route__links a small {
position: relative;
z-index: 3;
display: block;
width: 100%;
max-width: 130px;
margin-inline: auto;
text-align: center;
transition:
transform 0.28s ease,
color 0.28s ease,
text-shadow 0.28s ease;
}
.pu-industry-route__links a span {
color: #0f172a;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.82rem;
font-weight: 950;
line-height: 1.5;
text-shadow: 0 1px 0 rgba(255,255,255,0.20);
}
.pu-industry-route__links a small {
margin-top: 2px;
color: rgba(15, 23, 42, 0.66);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.67rem;
font-weight: 760;
line-height: 1.45;
}
/* Hover */
/* فقط تصویر و نوشتهها بزرگ شوند + برق روی باکس */
.pu-industry-route__links a:hover::before {
border-color: rgba(38, 59, 143, 0.22);
box-shadow:
0 12px 22px rgba(15, 23, 42, 0.10),
0 0 16px rgba(28, 117, 188, 0.10),
inset 0 1px 0 rgba(255,255,255,0.48);
filter: saturate(1.04);
}
.pu-industry-route__links a:hover::after {
opacity: 1;
animation: puBoxShine 0.95s ease forwards;
}
.pu-industry-route__links a:hover img {
transform: translateY(-50%) scale(1.08);
filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.22));
}
.pu-industry-route__links a:hover span {
transform: scale(1.06);
color: #17367f;
text-shadow: 0 0 10px rgba(255,255,255,0.40);
}
.pu-industry-route__links a:hover small {
transform: scale(1.03);
color: rgba(15, 23, 42, 0.82);
text-shadow: 0 0 8px rgba(255,255,255,0.26);
}
@keyframes puBoxShine {
0% {
opacity: 0;
transform: translateX(-120%);
}
15% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(125%);
}
}
/* ================= Footer ================= */
.pu-industry-routes__footer {
max-width: 1180px;
margin: 20px auto 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.pu-industry-routes__footer p {
margin: 0;
max-width: 720px;
color: #475569;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.84rem;
font-weight: 650;
line-height: 1.95;
text-align: right;
}
.pu-industry-routes__footer a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 8px 20px;
border-radius: 999px;
color: #ffffff !important;
background: linear-gradient(135deg, #263B8F 0%, #1C75BC 58%, #F59E0B 165%);
border: 1px solid rgba(38, 59, 143, 0.14);
text-decoration: none;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.82rem;
font-weight: 950;
box-shadow:
0 10px 22px rgba(38, 59, 143, 0.18),
0 0 14px rgba(245, 158, 11, 0.08);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
filter 0.22s ease;
}
.pu-industry-routes__footer a:hover {
transform: translateY(-2px);
filter: brightness(1.03);
box-shadow:
0 14px 28px rgba(38, 59, 143, 0.22),
0 0 18px rgba(245, 158, 11, 0.14);
}
/* ================= Responsive ================= */
@media (max-width: 1199.98px) {
.pu-industry-route {
grid-template-columns: minmax(0, 1.34fr) minmax(270px, 0.82fr);
gap: 20px;
}
.pu-industry-route__links a {
min-height: 76px;
padding-right: 84px;
}
.pu-industry-route__links a::before {
right: 60px;
}
.pu-industry-route__links a::after {
right: 62px;
}
.pu-industry-route__links a img {
width: 98px;
height: 82px;
}
.pu-industry-route__links a span {
font-size: 0.79rem;
}
.pu-industry-route__links a small {
font-size: 0.65rem;
}
}
@media (max-width: 991.98px) {
.pu-industry-routes {
padding: 48px 0 54px;
}
.pu-industry-routes__header {
margin-bottom: 28px;
}
.pu-industry-route {
grid-template-columns: 1fr;
grid-template-areas:
"meta"
"links";
gap: 14px;
padding: 18px 0;
}
.pu-industry-route::before {
top: 18px;
bottom: 18px;
}
.pu-industry-route__meta {
padding-right: 18px;
}
.pu-industry-route__links {
padding-right: 18px;
padding-left: 0;
}
.pu-industry-routes__footer {
flex-direction: column;
align-items: flex-start;
}
.pu-industry-routes__footer p {
max-width: 100%;
}
}
@media (max-width: 767.98px) {
.pu-industry-route__links {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
@media (max-width: 575.98px) {
.pu-industry-routes {
padding: 42px 0 46px;
}
.pu-industry-routes__header h2 {
font-size: 1.04rem !important;
line-height: 1.9;
}
.pu-industry-routes__header p {
font-size: 0.84rem;
line-height: 1.95;
}
.pu-industry-route {
padding: 16px 0;
}
.pu-industry-route::before {
top: 16px;
bottom: 16px;
}
.pu-industry-route__meta {
grid-template-columns: 50px 1fr;
gap: 10px;
padding-right: 16px;
}
.pu-industry-route__number {
width: 42px;
height: 42px;
font-size: 0.78rem;
}
.pu-industry-route__meta h3 {
font-size: 0.94rem !important;
}
.pu-industry-route__meta p {
font-size: 0.80rem;
line-height: 1.85;
}
.pu-industry-route__links {
grid-template-columns: 1fr;
padding-right: 16px;
}
.pu-industry-route__links a {
min-height: 74px;
padding-right: 82px;
}
.pu-industry-route__links a::before {
right: 58px;
border-radius: 14px;
}
.pu-industry-route__links a::after {
right: 60px;
left: 8px;
border-radius: 12px;
}
.pu-industry-route__links a img {
width: 96px;
height: 80px;
right: 2px;
}
.pu-industry-route__links a span,
.pu-industry-route__links a small {
max-width: 150px;
}
.pu-industry-route__links a span {
font-size: 0.81rem;
}
.pu-industry-route__links a small {
font-size: 0.65rem;
}
.pu-industry-routes__footer {
margin-top: 18px;
align-items: stretch;
}
.pu-industry-routes__footer p {
font-size: 0.82rem;
line-height: 1.9;
}
.pu-industry-routes__footer a {
width: 100%;
}
}
@media (max-width: 380px) {
.pu-industry-route__links a::before {
right: 54px;
}
.pu-industry-route__links a img {
width: 90px;
height: 76px;
}
.pu-industry-route__links a span {
font-size: 0.79rem;
}
.pu-industry-route__links a small {
font-size: 0.64rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pu-industry-route__links a::before,
.pu-industry-route__links a::after,
.pu-industry-route__links a img,
.pu-industry-route__links a span,
.pu-industry-route__links a small,
.pu-industry-routes__footer a {
transition: none;
animation: none;
}
}
/* ============================================================
Industry Presence / Events Section
حضور سپهردنیا در نمایشگاهها و رویدادهای صنعتی
============================================================ */
.industry-presence {
position: relative;
overflow: hidden;
direction: rtl;
text-align: right;
padding: 52px 0 56px;
background:
linear-gradient(
135deg,
rgba(6, 12, 28, 0.48) 0%,
rgba(10, 22, 48, 0.36) 46%,
rgba(6, 12, 28, 0.54) 100%
),
url("../img/15.jpeg") center center / cover no-repeat fixed;
}
/* لایه گلس تیره برای حفظ خوانایی و دیده شدن تصویر */
.industry-presence::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 14% 18%, rgba(28, 117, 188, 0.22), transparent 34%),
radial-gradient(circle at 88% 80%, rgba(245, 158, 11, 0.16), transparent 34%),
linear-gradient(
90deg,
rgba(6, 12, 28, 0.58),
rgba(10, 22, 48, 0.34),
rgba(6, 12, 28, 0.62)
);
backdrop-filter: blur(0px) saturate(105%);
-webkit-backdrop-filter: blur(0px) saturate(105%);
}
.industry-presence .container {
position: relative;
z-index: 1;
}
/* ================= Layout ================= */
.industry-presence__wrap {
max-width: 1120px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.25fr);
gap: 44px;
align-items: center;
}
/* ================= Intro ================= */
.industry-presence__intro {
position: relative;
}
.industry-presence__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
padding: 4px 14px;
border-radius: 999px;
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.24);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.76rem;
font-weight: 850;
line-height: 1.8;
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.industry-presence__intro h2 {
margin: 0 0 12px;
color: #ffffff;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.14rem, 1.48vw, 1.52rem) !important;
font-weight: 950;
line-height: 1.85;
letter-spacing: -0.25px;
text-shadow:
0 3px 14px rgba(0, 0, 0, 0.38),
0 1px 0 rgba(255, 255, 255, 0.06);
}
.industry-presence__intro p {
margin: 0;
color: rgba(255, 255, 255, 0.88);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.88rem;
font-weight: 540;
line-height: 2.05;
text-align: right;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
/* ================= Proof Chips ================= */
.industry-presence__proofs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.industry-presence__proofs span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 6px 12px;
border-radius: 999px;
color: #ffffff;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.22);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.76rem;
font-weight: 850;
line-height: 1.7;
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
background 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
.industry-presence__proofs span:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 196, 81, 0.34);
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.20),
0 0 18px rgba(245, 158, 11, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* ================= Timeline ================= */
.industry-presence__timeline {
position: relative;
display: grid;
gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.18);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.industry-presence__timeline::before {
content: "";
position: absolute;
top: 18px;
right: 22px;
bottom: 18px;
width: 2px;
border-radius: 999px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.78),
rgba(28, 117, 188, 0.92),
rgba(245, 158, 11, 0.92)
);
box-shadow:
0 0 14px rgba(28, 117, 188, 0.18),
0 0 18px rgba(245, 158, 11, 0.12);
}
.industry-presence__event {
position: relative;
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 18px 0 18px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.industry-presence__event:last-child {
border-bottom: 0;
}
/* هایلایت ردیف در هاور */
.industry-presence__event::before {
content: "";
position: absolute;
inset: 6px 0;
border-radius: 16px;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.11),
rgba(255, 255, 255, 0.03),
rgba(245, 158, 11, 0.10)
);
opacity: 0;
transform: scaleX(0.97);
transform-origin: right center;
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.industry-presence__event:hover::before {
opacity: 1;
transform: scaleX(1);
}
/* ================= Marker ================= */
.industry-presence__mark {
position: relative;
z-index: 2;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 58%, #F59E0B 145%);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.74rem;
font-weight: 950;
line-height: 1;
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.28),
0 0 18px rgba(28, 117, 188, 0.22);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
background 0.22s ease;
}
.industry-presence__event:hover .industry-presence__mark {
transform: translateX(-2px) scale(1.08);
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 45%, #ffc451 145%);
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.34),
0 0 22px rgba(28, 117, 188, 0.26),
0 0 22px rgba(245, 158, 11, 0.18);
}
/* ================= Timeline Text ================= */
.industry-presence__event h3 {
position: relative;
z-index: 2;
margin: 0 0 5px;
color: #ffffff;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.94rem !important;
font-weight: 950;
line-height: 1.75;
letter-spacing: -0.15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
transition:
color 0.22s ease,
transform 0.22s ease,
text-shadow 0.22s ease;
}
.industry-presence__event p {
position: relative;
z-index: 2;
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.80rem;
font-weight: 530;
line-height: 1.85;
text-align: right;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
.industry-presence__event:hover h3 {
color: #ffc451;
transform: translateX(-2px);
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.36),
0 0 14px rgba(255, 196, 81, 0.18);
}
/* ================= Footer ================= */
.industry-presence__footer {
max-width: 1120px;
margin: 22px auto 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.industry-presence__footer p {
margin: 0;
max-width: 760px;
color: rgba(255, 255, 255, 0.86);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.84rem;
font-weight: 650;
line-height: 2;
text-align: right;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
.industry-presence__footer a {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffffff;
text-decoration: none;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.82rem;
font-weight: 950;
line-height: 1.7;
transition:
color 0.22s ease,
transform 0.22s ease;
}
.industry-presence__footer a::after {
content: "←";
font-size: 0.95rem;
line-height: 1;
transition: transform 0.22s ease;
}
.industry-presence__footer a::before {
content: "";
position: absolute;
right: 0;
bottom: -2px;
width: 100%;
height: 1px;
border-radius: 999px;
background:
linear-gradient(90deg, #ffffff, #ffc451, #F59E0B);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.22s ease;
}
.industry-presence__footer a:hover {
color: #ffc451;
transform: translateX(-2px);
}
.industry-presence__footer a:hover::before {
transform: scaleX(1);
}
.industry-presence__footer a:hover::after {
transform: translateX(-3px);
}
/* ================= Responsive ================= */
@media (max-width: 991.98px) {
.industry-presence {
padding: 46px 0 50px;
background:
linear-gradient(
135deg,
rgba(6, 12, 28, 0.82) 0%,
rgba(10, 22, 48, 0.72) 48%,
rgba(6, 12, 28, 0.86) 100%
),
url("../img/15.jpeg") center center / cover no-repeat;
}
.industry-presence__wrap {
grid-template-columns: 1fr;
gap: 28px;
}
.industry-presence__intro {
max-width: 760px;
}
.industry-presence__footer {
flex-direction: column;
align-items: flex-start;
}
.industry-presence__footer p {
max-width: 100%;
}
}
@media (max-width: 575.98px) {
.industry-presence {
padding: 40px 0 44px;
}
.industry-presence__intro h2 {
font-size: 1.04rem !important;
line-height: 1.9;
}
.industry-presence__intro p {
font-size: 0.82rem;
line-height: 1.95;
}
.industry-presence__proofs {
gap: 7px;
}
.industry-presence__proofs span {
width: 100%;
justify-content: flex-start;
font-size: 0.76rem;
}
.industry-presence__timeline::before {
right: 20px;
}
.industry-presence__event {
grid-template-columns: 46px minmax(0, 1fr);
gap: 12px;
padding: 16px 0;
}
.industry-presence__mark {
width: 36px;
height: 36px;
font-size: 0.70rem;
}
.industry-presence__event h3 {
font-size: 0.88rem !important;
}
.industry-presence__event p {
font-size: 0.78rem;
line-height: 1.85;
}
.industry-presence__footer p {
font-size: 0.80rem;
line-height: 1.9;
}
}
/* ================= Reduced Motion ================= */
@media (prefers-reduced-motion: reduce) {
.industry-presence__proofs span,
.industry-presence__event::before,
.industry-presence__mark,
.industry-presence__event h3,
.industry-presence__footer a,
.industry-presence__footer a::before,
.industry-presence__footer a::after {
transition: none;
}
.industry-presence__proofs span:hover,
.industry-presence__event:hover .industry-presence__mark,
.industry-presence__event:hover h3,
.industry-presence__footer a:hover,
.industry-presence__footer a:hover::after {
transform: none;
}
}
/* ============================================================
End Industry Presence / Events Section
============================================================ */
/*--------------------------------------------------------------/*
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
margin-bottom: 30px;
}
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 20px auto;
list-style: none;
text-align: center;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 8px 15px 10px 15px;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
color: #444444;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
border-radius: 3px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
color: #151515;
background: #ffc451;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(21, 21, 21, 0.6);
}
.portfolio .portfolio-wrap::before {
content: "";
background: rgba(21, 21, 21, 0.6);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap img {
transition: all ease-in-out 0.3s;
}
.portfolio .portfolio-wrap .portfolio-info {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
}
.portfolio .portfolio-wrap .portfolio-info h4 {
font-size: 20px;
color: #fff;
font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
font-style: italic;
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #fff;
margin: 0 5px 0 0;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
color: #ffc451;
}
.portfolio .portfolio-wrap:hover::before {
opacity: 1;
}
.portfolio .portfolio-wrap:hover img {
transform: scale(1.2);
}
.portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 20px;
}
.portfolio-details .portfolio-details-slider img {
width: 100%;
height: 400px;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #ffc451;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #ffc451;
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(21, 21, 21, 0.08);
}
.portfolio-details .portfolio-info h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
margin-top: 20px;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 18px;
}
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
text-align: justify;
}
.dot {
height: 15px;
width: 15px;
margin: 3px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
border:1px solid #000;
}
/*--------------------------------------------------------------
# Counts-anjoman
--------------------------------------------------------------*/
.counts .content {
padding: 30px 0;
}
.counts .content h3 {
font-weight: 700;
font-size: 20px;
color: #151515;
}
.counts .content p {
margin-bottom: 0;
}
.counts .content .count-box {
padding: 20px 20px ;
width: 100%;
text-align: justify;
}
.count-box i {
/*display: block;*/
font-size: 30px;
color: #ffc451;
/* float: left;*/
}
.counts .content .count-box span {
font-size: 36px;
line-height: 30px;
display: block;
font-weight: 700;
color: #151515;
margin-left: 50px;
}
.counts .content .count-box p {
padding: 15px 0 0 0;
margin: 0 0 0 50px;
font-family: 'Vazirmatn-Regular',sans-serif;
font-size: 0.9em;
line-height: 1.4em;
color: #3b3b3b;
}
.counts .content .count-box a {
font-weight: 600;
display: block;
margin-top: 20px;
color: #3b3b3b;
font-size: 15px;
font-family: "Vazirmatn-Regular", sans-serif;
transition: ease-in-out 0.3s;
}
.counts .content .count-box a:hover {
color: #626262;
}
.counts .image {
background: url("../img/counts-img.jpg") center center no-repeat;
background-size: cover;
min-height: 300px;
border-top-left-radius:12px;
border-top-right-radius:12px;
box-shadow:0 0 3px #ccc;
}
@media (max-width: 991px) {
.counts .image {
text-align: center;
}
.counts .image img {
max-width: 80%;
}
}
@media (max-width: 667px) {
.counts .image img {
max-width: 100%;
}
}
/*--------------------------------------------------------------
# Testimonials fani & tolidtestimonials
--------------------------------------------------------------*/
.testimonials {
padding: 60px 0;
background: url("../img/testimonials-bg.jpg") no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.testimonials::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.testimonials .section-header {
margin-bottom: 40px;
}
.testimonials .testimonial-item {
text-align: center;
color: #fff;
}
.testimonials .testimonial-item .testimonial-img {
width: 100px;
border-radius: 50%;
border: 6px solid rgba(255, 255, 255, 0.10);
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #fff;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #ddd;
margin: 0 0 15px 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.6);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
color: #eee;
word-spacing: 0.5em;
line-height: 1.8em;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
روی بخش بالای این قسمت داره کار می شه height: 12px;
background-color: rgba(255, 255, 255, 0.4);
opacity: .5;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #ffc451;
opacity: 1;
}
@media (min-width: 1024px) {
.testimonials {
background-attachment: fixed;
}
}
@media (min-width: 992px) {
.testimonials .testimonial-item p {
width: 80%;
}
}
/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
background: #fff;
padding: 60px 0;
}
.team .member {
margin-bottom: 20px;
overflow: hidden;
border-radius: 5px;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
.team .member .member-img {
position: relative;
overflow: hidden;
}
.team .member .social {
position: absolute;
left: 0;
bottom: 30px;
right: 0;
opacity: 0;
transition: ease-in-out 0.3s;
text-align: center;
}
.team .member .social a {
transition: color 0.3s;
color: #151515;
margin: 0 3px;
border-radius: 4px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.8);
transition: ease-in-out 0.3s;
color: #484848;
display: inline-flex;
justify-content: center;
align-items: center;
}
.team .member .social a:hover {
color: #151515;
background: #ffc451;
}
.team .member .social i {
font-size: 18px;
line-height: 0;
}
.team .member .member-info {
padding: 25px 15px;
}
.team .member .member-info h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 18px;
color: #151515;
}
.team .member .member-info span {
display: block;
font-size: 13px;
font-weight: 400;
color: #aaaaaa;
}
.team .member .member-info p {
font-style: italic;
font-size: 14px;
line-height: 26px;
color: #777777;
}
.team .member:hover .social {
opacity: 1;
bottom: 15px;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------
/*--------------------------------------------------------------*
# Breadcrumbs - کادر زیر منو
--------------------------------------------------------------*/
.breadcrumbs {
padding: 35px 0;
background: whitesmoke;
min-height: 20px;
margin-top: 74px;
position: relative;
}
.breadcrumbs h2 {
font-size: 28px;
font-weight: 400;
padding-top: 13px;
}
.breadcrumbs h4{
position: relative;
bottom:-20px;
padding: 0;
margin: 0;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
padding-top: 13px;
}
.breadcrumbs ol li + li {
padding-left: 10px;
}
.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #2f2f2f;
content: "/";
}
@media (max-width: 992px) {
.breadcrumbs {
margin-top: 68px;
}
.breadcrumbs .d-flex {
display: block !important;
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
display: inline-block;
}
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.sepehr-donya-footer {
background: #0b0b0b!important;
color: #ccc;
font-size: 13px;
margin: 0!important;
padding:0 ;
letter-spacing: 2px;
}
.sepehr-heading {
color: #d4a55d;
font-weight: 700;
}
.sepehr-info p {
font-size: 13px;
color: #bbb;
line-height: 1.8;
}
.contact-details a,
.factory-info a {
color: #ccc;
text-decoration: none;
}
.footer-divider {
border-color: #333;
width: 50%;
margin: 10px auto;
}
.factory-info {
font-size: 13px;
color: #bbb;
line-height: 1.9;
}
.copyright-text {
font-size: 12px;
color: #999;
}
footer .d-flex {
justify-content: center !important;
gap: 20px;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links a {
color: #ccc;
text-decoration: none;
display: block;
margin: 3px 0;
transition: 0.3s;
}
.footer-links a:hover,
.social-links a:hover,
.factory-info a:hover {
color: #d4a55d;
transform: translateX(-3px);
}
.social-links a {
color: #ccc;
font-size: 18px;
transition: 0.3s;
}
@media (max-width: 991px) {
.footer-map img {
max-width: 80%;
margin: auto;
}
.sepehr-info,
.footer-links {
text-align: center;
}
}
/* حذف حاشیه پایین از آخرین سطر در فوتر */
.sepehr-donya-footer .d-flex {
/* ... استایلهای قبلی ... */
margin-bottom: 0 !important; /* اطمینان از حذف هر گونه حاشیه پایین ناخواسته */
padding-bottom: 0px; /* کمی پدینگ پایین برای زیبایی */
}
/* اطمینان از حذف حاشیه پایین از تگهای و
که معمولاً margin دارند */
.sepehr-donya-footer p:last-child,
.sepehr-donya-footer div:last-child {
margin-bottom: 0;
}
/*----------for exhibotion------------*/
ul.nav-pills {
top: 190px;
/* height: 350px;
*/ padding-top: 23px;
padding-bottom: 23px;
position: fixed;
border-radius: 18px;
border: 0.1px solid #099fff;
background-color: #212122;
box-shadow: 2px 4px 8px 0 #00ffff, 0 6px 20px 0
rgba(0,0,0,0.19);
}
.ovrflowtest{
padding: 22px;
width: 50%;
height:400px;
overflow: auto;
border: 1px solid #ccc;
box-shadow:5px 10px 10px #888888;
z-index: 1000;
}
@media only screen and (max-width: 600px) {
.ovrflowtest {
width: 400px;
background-color: rgba(228,226,226,0.6);
}
.img {
width: 80%;
}
}
*//*========= overflow ==========*/
@keyframes textShine {
to {
background-position: 200%;
}}
.carousel-caption{
padding: 10px 12px;
margin: 0;
background-color:rgba(31,60,111,0.80);
background-size:100%;
}
.carousel-caption p{
word-spacing:3px;
}
#carouselExampleDark .carousel-inner {
aspect-ratio: 900 / 520;
background: #f3f4f6;
}
#carouselExampleDark .carousel-inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pu-card__icon {
width: 72px;
height: 72px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pu-card__icon img {
width: 72px;
height: 72px;
object-fit: contain;
}
/*isocyanate------------------*/
#slideshow {
margin: 0 auto;
padding-top:10px;
height:250px;
width: 100%;
box-sizing: border-box;
}
.slideshow-title {
font-family: 'Vazirmatn-Regular';
font-size: 62px;
color: #fff;
margin: 0 auto;
text-align: center;
margin-top: 25%;
letter-spacing: 3px;
font-weight: 300;
}
.sub-heading {
padding-top: 50px;
font-size: 18px;
} .sub-heading-two {
font-size: 15px;
} .sub-heading-three {
font-size: 13px;
} .sub-heading-four {
font-size: 11px;
} .sub-heading-five {
font-size: 9px;
} .sub-heading-six {
font-size: 7px;
} .sub-heading-seven {
font-size: 5px;
} .sub-heading-eight {
font-size: 3px;
} .sub-heading-nine {
font-size: 1px;
}
.entire-content {
margin: auto;
width: 190px;
perspective: 1000px;
position: relative;
padding-top:20px;
}
.content-carrousel {
width: 100%;
position: absolute;
float: right;
animation: rotar 30s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel:hover {
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel figure {
width: 100%;
height: 120px;
border: 1px solid #6C6C6C;
overflow: hidden;
position: absolute;
}
.content-carrousel figure:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
} .content-carrousel figure:nth-child(2) {
transform: rotateY(40deg) translateZ(300px);
} .content-carrousel figure:nth-child(3) {
transform: rotateY(80deg) translateZ(300px);
} .content-carrousel figure:nth-child(4) {
transform: rotateY(120deg) translateZ(300px);
} .content-carrousel figure:nth-child(5) {
transform: rotateY(160deg) translateZ(300px);
} .content-carrousel figure:nth-child(6) {
transform: rotateY(200deg) translateZ(300px);
} .content-carrousel figure:nth-child(7) {
transform: rotateY(240deg) translateZ(300px);
} .content-carrousel figure:nth-child(8) {
transform: rotateY(280deg) translateZ(300px);
} .content-carrousel figure:nth-child(9) {
transform: rotateY(320deg) translateZ(300px);
} .content-carrousel figure:nth-child(10) {
transform: rotateY(360deg) translateZ(300px);
}
.shadow {
position: absolute;
box-shadow: 50px 50px 50px 0px #000;
border-radius: 1px;
}
.content-carrousel img {
image-rendering: auto;
transition: all 300ms;
width: 100%;
height: 100%;
}
.content-carrousel img:hover {
transform: scale(1.2);
transition: all 300ms;
}
@keyframes rotar {
from {
transform: rotateY(0deg);
} to {
transform: rotateY(360deg);
}
}
.portfolio-details-iso {
padding-right:40px;
}
.Iso{
font-size:14pt;
line-height:35px;
font-weight:bold;
}
/*end galery isocyanate*/
mark{
background-color:#CDF2F4;
border-radius: 8px;
}
.memory{
padding-top:45px;
}
.list{
color:#8B0004;
}
.txt-img{
text-align: center;
color: #010150;
}
.table-container {
max-width: 70%;
margin: 20px auto;
overflow-x: auto; /* اسکرول برای موبایل */
border-radius: 8px;
background: rgba(255, 255, 255, 0.5); /* پسزمینه نیمهشفاف */
border: 2px solid rgba(0, 0, 255, 0.3); /* کادر شفاف آبی */
box-shadow: 0 4px 8px rgba(0, 0, 255, 0.2);
}
.table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.table th, .table td {
padding: 10px;
border: 1px solid #ccc;
}
.table th {
background-color: #444;
color: #ffd700;
}
.table tbody tr:nth-child(even) {
background-color: #333;
}
.table tbody tr:hover {
background-color: #E06603;
transition: background-color 0.3s ease;
}
/* تصاویر و باکسها */
.content-box, .content-box2,.text-content {
max-width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px auto;
background: rgba(255, 255, 255, 0.5); /* پسزمینه نیمهشفاف */
border: 2px solid rgba(0, 0, 255, 0.1); /* کادر شفاف آبی */
box-shadow: 0 4px 8px rgba(0, 0, 255, 0.1);
border-radius: 8px;
}
.content-box .text-box, .content-box2 .text-box {
flex: 1 1 50%;
padding: 10px;
}
.content-box .image-box, .content-box2 .image-box {
flex: 1 1 10%;
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
}
/* ریسپانسیو */
@media (max-width: 768px) {
.content-box, .content-box2 {
flex-direction: column;
max-width: 100%;
font-size: 1rem;
text-align: justify;
}
.content-box .text-box, .content-box2 .text-box,
.content-box .image-box, .content-box2 .image-box {
flex: 1 1 100%;
text-align: justify;
font-size: 1rem;
max-width: 100%;
}
.table-container{
max-width: 100%;
font-size: 0.8rem;
padding: 0;
margin: 0;
}
}
.highlight-blue{
background-color: #f0f8ff;
padding-right: 10px;
}
.orange-icon{
color: chocolate;
padding-left: 5px;
}
.text-box ul li{
list-style: none;
}
.title,h2 ,h3{
color: #04049B;
}
/*کد مربوط به ویدئو*/
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*مربوط به کپش ویدئو*/
.video-caption {
margin-top: 6px;
font-size: 14px;
font-weight:700;
color: #555;
text-align: center;
line-height: 1.5;
}
.source{
text-align: center;
}
@media (max-width: 768px) {
.portfolio-info h3 {
margin-top: 1.8rem;
}
.pop2{
border: 1px solid #0121E3;
}
.popup-content{
border: 1px solid #EF0D10;
}}
/*اسلایدر درباره ما*/
#carouselExampleDark {
border-radius: 15px; /* گردی قاب اصلی */
overflow: hidden; /* برش تصویر بیرون از قاب */
}
#carouselExampleDark .carousel-inner img {
border-radius: 15px; /* گوشههای عکس هم با قاب هماهنگ میشه */
}
#carouselExampleDark {
background-color: #454444;
box-shadow: 5px 5px 8px #888888;/* رنگ کادر (مشکی/ذغالی) */
padding: 0.5mm; /* فاصله از تصویر */
border-radius: 15px; /* گوشههای بیرونی (20 + 2) برای هماهنگی کامل */
overflow: hidden; /* جلوگیری از بیرونزدگی */
}
#carouselExampleDark .carousel-inner img {
border-radius: 15px; /* گوشههای خود تصویر */
display: block;
}
#carouselExampleDark .carousel-caption {
color: #ffffff; /* رنگ متن سفید */
text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* اختیاری: کمی سایه برای خوانایی بهتر */
word-spacing:5 px; /* فاصله بین کلمات کمتر میشود */
}
.hero-section {
width: 100%;
position: relative;
overflow: hidden;
}
.img-about{
background: url("../img/team/sepehrdonya.jpg");
height: 300px;
width: 100%;
border-radius: 8px;
box-shadow: 5px 5px 8px #888888;
}
.bg-box{
border-radius:10px;
padding:16px 20px;
line-height:1.8;
max-width:100%;
margin:auto;
box-sizing:border-box;
}
p span {
font-family: 'Vazirmatn', sans-serif !important;
font-weight: normal;
}
/* ============================================================
Home Demand Solutions / Proof Strip
راهکارهای پرتقاضا برای تولیدکنندگان پلییورتان
============================================================ */
.home-demand-solutions {
padding: 48px 0 34px;
background:
radial-gradient(circle at 12% 16%, rgba(38, 59, 143, 0.045), transparent 30%),
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.proof-strip {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 32px 30px;
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96)),
radial-gradient(circle at 88% 8%, rgba(245, 158, 11, 0.055), transparent 34%);
border: 1px solid rgba(38, 59, 143, 0.10);
box-shadow:
0 18px 44px rgba(15, 23, 42, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.82);
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.proof-strip__header {
max-width: 850px;
margin: 0 auto;
text-align: center;
}
.proof-strip__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
padding: 4px 12px;
border-radius: 999px;
color: #263B8F;
background: rgba(38, 59, 143, 0.065);
border: 1px solid rgba(38, 59, 143, 0.13);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.8rem;
font-weight: 800;
line-height: 1.7;
}
.proof-strip__header h2 {
margin: 0 0 10px;
color: #263B8F;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.18rem, 1.55vw, 1.55rem) !important;
font-weight: 850;
line-height: 1.8;
letter-spacing: -0.25px;
}
.proof-strip__header p {
margin: 0 auto;
color: #475569;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.94rem;
font-weight: 400;
line-height: 2.05;
text-align: center;
}
/* کارتها */
.kpi-bar {
width: 100%;
max-width: 1040px;
margin: 4px auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
text-align: center;
}
.kpi-item.demand-card {
position: relative;
min-height: 250px;
padding: 22px 20px 20px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
background:
linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
border: 1px solid rgba(226, 232, 240, 0.95);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.055),
inset 0 3px 0 rgba(38, 59, 143, 0.42);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.kpi-item.demand-card:hover {
transform: translateY(-5px);
border-color: rgba(38, 59, 143, 0.22);
box-shadow:
0 18px 42px rgba(15, 23, 42, 0.095),
0 0 0 1px rgba(245, 158, 11, 0.08),
inset 0 3px 0 rgba(245, 158, 11, 0.72);
}
.demand-card__icon {
width: 46px;
height: 46px;
margin-bottom: 14px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #263B8F;
background: rgba(38, 59, 143, 0.075);
border: 1px solid rgba(38, 59, 143, 0.13);
}
.demand-card__icon i {
font-size: 1.25rem;
line-height: 1;
}
.kpi-number {
margin: 0 0 10px;
color: #0f172a;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 1rem !important;
font-weight: 850;
line-height: 1.75;
}
.kpi-label {
margin: 0;
color: #475569;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.88rem;
font-weight: 400;
line-height: 2;
}
.demand-card__link {
margin-top: auto;
padding-top: 16px;
color: #263B8F;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.88rem;
font-weight: 850;
text-decoration: none;
border-bottom: 1px solid rgba(38, 59, 143, 0.22);
transition:
color 0.2s ease,
border-color 0.2s ease;
}
.demand-card__link:hover {
color: #F59E0B;
border-bottom-color: rgba(245, 158, 11, 0.55);
}
/* Footer CTA */
.proof-footer {
width: 100%;
max-width: 1040px;
margin: 2px auto 0;
padding: 18px 20px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
background: rgba(38, 59, 143, 0.045);
border: 1px solid rgba(38, 59, 143, 0.10);
}
.microcopy {
margin: 0;
color: #334155;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.9;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 18px;
border-radius: 999px;
color: #111827 !important;
background: linear-gradient(90deg, #F59E0B, #ffc451);
border: 1px solid rgba(245, 158, 11, 0.26);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.9rem;
font-weight: 850;
text-decoration: none;
box-shadow: 0 12px 28px rgba(245, 158, 11, 0.22);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
.cta-button:hover {
color: #111827 !important;
transform: translateY(-2px);
filter: brightness(1.02);
box-shadow: 0 16px 34px rgba(245, 158, 11, 0.30);
}
/* Responsive */
@media (max-width: 991.98px) {
.home-demand-solutions {
padding: 42px 0 28px;
}
.proof-strip {
padding: 28px 22px;
}
.kpi-bar {
grid-template-columns: 1fr;
max-width: 620px;
}
.kpi-item.demand-card {
min-height: auto;
}
.proof-footer {
justify-content: center;
text-align: center;
}
}
@media (max-width: 575.98px) {
.proof-strip {
padding: 24px 16px;
border-radius: 20px;
}
.proof-strip__header h2 {
font-size: 1.12rem !important;
line-height: 1.9;
}
.proof-strip__header p {
font-size: 0.9rem;
line-height: 2;
}
.kpi-item.demand-card {
padding: 20px 16px 18px;
border-radius: 18px;
}
.kpi-number {
font-size: 0.96rem !important;
}
.kpi-label {
font-size: 0.84rem;
}
.cta-button {
width: 100%;
}
}
/**/
.card-photo{
/* size like the mock */
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0 14px 40px rgba(0,0,0,.18);
background-image: url("../img/team/hero.jpg");
background-size: cover;
background-position: center;
transition: transform .22s ease, box-shadow .22s ease;
}
.card-photo:hover{
transform: translateY(-6px);
box-shadow: 0 22px 60px rgba(0,0,0,.28);
}
/* dark overlay like the screenshot */
.card-photo__overlay{
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10,17,28,.25) 20%, rgba(10,17,28,.7) 70%, rgba(10,17,28,.85) 100%);
pointer-events: none;
}
.card-photo__content{
position: absolute; inset: 0;
display: flex; flex-direction: column;
justify-content: flex-end; gap: 10px;
padding: 22px;
color: #fff;
}
.card-photo__content h3{
margin: 0 0 2px; font: 700 20px/1.3 system-ui, sans-serif;
letter-spacing: .2px;
}
.card-photo__content p{
margin: 0 0 16px; font: 400 14px/1.8 system-ui, sans-serif;
color: rgba(255,255,255,.88);
}
/* white rounded button like mock */
.card-photo__btn{
display: inline-flex; align-items: center; justify-content: center;
width: 136px; height: 40px;
background: #fff; color: #111;
border-radius: 10px; text-decoration: none;
font: 600 14px/1 system-ui, sans-serif;
transition: transform .15s ease, box-shadow .2s ease, color .2s ease;
box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.card-photo__btn:hover{
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(0,0,0,.24);
color: #0b1320;
}
/* optional: make it responsive if container is narrow */
@media (max-width: 360px){
.card-photo{ width: 100%; height: 380px; }
}
.section-edu .link-primary{ text-decoration: none; }
.section-edu .link-primary:hover{ text-decoration: underline; }
.section-edu .link-body-emphasis{ text-decoration: none; }
.section-edu .link-body-emphasis:hover{ text-decoration: underline; }
.text-justify{ text-align: justify; text-justify: inter-word; }
/*applications*/
.custom-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
font-size: 0.93rem;
direction: rtl;
}
.custom-table thead {
background-color: #6559F9;
}
.custom-table th {
color: #003d7a;
font-weight: 600;
text-align: right;
padding: 0.5rem 0.8rem;
border-bottom: 1px solid #dbe6ff;
}
.custom-table td {
padding: 0.30rem 0.7rem; /* فاصله کمتر و ظریفتر */
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.custom-table tbody tr:nth-child(odd) {
background-color: #ccc;
}
.custom-table tbody tr:hover {
background-color: #f2f7ff;
transition: 0.2s;
}
.custom-table a {
color: #0045a3;
text-decoration: none;
font-weight: 500;
}
.custom-table a:hover {
text-decoration: underline;
color: #002f73;
}
/* واکنشگرا برای موبایل */
@media (max-width: 768px) {
.custom-table thead { display: none; }
.custom-table, .custom-table tbody, .custom-table tr, .custom-table td {
display: block;
width: 100%;
}
.custom-table tr {
margin-bottom: 0.8rem;
background-color: #fff;
border: 1px solid #eef3ff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
padding: 0.4rem 0.6rem;
}
.custom-table td {
border: none;
padding: 0.25rem 0;
}
.custom-table td::before {
content: attr(data-label);
font-weight: 600;
color: #003d7a;
display: block;
margin-bottom: 0.15rem;
}
}
/*proofwall*/
/* ===== Tokens (برند SITCO/Proofwall) ===== */
.pu-cats{
--brand:#263B8F;
--accent:#F59E0B;
--ink:#0b1320;
--muted:#6b7485;
--soft:#F5F7FB;
/* کارتهای ظریف */
--card-minh: 148px;
--card-pad: 12px;
--icon-box: 56px;
/* افکتها */
--bd: 1px solid rgba(230,234,242,1);
--shadow: 0 6px 18px rgba(16,24,40,.08);
--shadow-h: 0 12px 24px rgba(38,59,143,.18);
}
/* ===== Section ===== */
.pu-cats{
padding: 56px 0;
background: radial-gradient(520px 200px at 20% -10%, rgba(38,59,143,.10), transparent 65%),
linear-gradient(180deg, rgba(14,23,47,.02), rgba(14,23,47,.06)),
#f7f8fa;
color: var(--ink);
}
.pu-cats{ --icon-box: 65px; }
@media (max-width: 767.98px){ .pu-cats{ --icon-box: 64px; } }
.pu-cats__container{ max-width: 1140px; margin-inline:auto; padding: 0 16px; }
.pu-cats__subtitle{ margin:0 0 6px; text-align:center; color:var(--accent); font:600 .95rem/1.6 system-ui,sans-serif; }
.pu-cats__title{ margin:0 0 18px; text-align:center; color:var(--brand); font:800 1.2rem/1.4 system-ui,sans-serif; }
/* ===== Grid: دقیقا ۶ ستون دسکتاپ ===== */
.pu-cats__grid{
list-style:none; margin:0; padding:0;
display:grid; gap:10px;
grid-template-columns: repeat(6, 1fr);
}
/* ریسپانسیو جمعوجور */
@media (max-width: 1199.98px){ .pu-cats__grid{ grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 991.98px){ .pu-cats__grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px){ .pu-cats__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479.98px){ .pu-cats__grid{ grid-template-columns: repeat(2, 1fr); } }
/* ===== Card ===== */
.pu-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--card-minh);
padding: var(--card-pad);
text-decoration: none;
text-align: center;
border-radius: 14px;
background: #f5f5f5; /* طوسی روشن */
border: 1px solid #e0e0e0; /* مرز ظریف طوسی */
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
/* حالت برجسته */
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.6), /* سایه نرم اطراف */
0 2px 4px rgba(0, 0, 0, 0.06); /* عمق طبیعی */
}
/* افکت هاور برای طبیعیتر شدن برجستگی */
.pu-card:hover {
transform: translateY(-3px);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.12),
0 4px 6px rgba(0, 0, 0, 0.08);
border-color: #d0d0d0;
}
/* گرادیانت هاورِ سبک */
.pu-card::after{
content:""; position:absolute; inset:auto -40% -40% -40%; height:65%;
background: radial-gradient(closest-side, rgba(38,59,143,.18), transparent 70%);
transform: translateY(22%);
pointer-events:none;
}
/* خود تصویر: فیلتر حذف شد تا رنگ اصلی PNG حفظ شود */
.pu-card__icon img{
display:block;
width: 100% !important;
height: 100% !important;
max-width: none;
max-height: none;
object-fit: contain;
transition: transform .2s ease;
}
/* Title + Tag */
.pu-card__name{ font:800 .95rem/1.3 system-ui,sans-serif; color:var(--ink); }
.pu-card__tag{ font:500 .78rem/1.6 system-ui,sans-serif; color:var(--muted); }
/* Hover */
.pu-card:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-h);
border-color: rgba(38,59,143,.28);
}
.pu-card:hover .pu-card__icon img{ transform: scale(1.06); filter:none; }
.pu-card:hover .pu-card__name{ color: var(--brand); }
/* لمس موبایل (feedback نرم) */
@media (hover:none){
.pu-card:active{ transform: translateY(-2px); box-shadow: var(--shadow-h); }
}
.pu-card__icon{ background: var(--soft) center/90% no-repeat url('/fa/assets/icons/automotive.png'); }
.pu-cats-title {
font-weight: 400; /* یا 500 بسته به نیاز */
font-size: 18px; /* اندازه دلخواه */
line-height: 1.5;
}
/**/
/* ========== fixed 348px glass section ========== */
/* سکشن: ارتفاع منعطف + فاصلهی مساوی بالا/پایین */
.contact-glass{
--rad:18px;
--H:348px; /* حداقل ارتفاع مدنظر */
--pad:16px; /* فاصله از بالا/پایین */
min-height:var(--H);
padding-block:var(--pad);
color:#fff; overflow:hidden; isolation:isolate;
/* box-shadow:0 10px 28px rgba(16,24,40,.16) inset;
*/ display:grid; place-content:center; /* محتوا دقیقاً وسط */
/* background:
linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.15)),
url('assets/img/bg/contactus.png') center/cover no-repeat #0b1320;*/
}
.cg{
max-width:860px; width:100%;
margin:auto; padding-inline:14px;
display:grid; grid-template-columns:1fr 1fr; gap:14px;
align-items:stretch; /* کارتها همقد */
}
/* کارتها دقیقاً همارتفاع سکشن */
/* کارتها: ارتفاع = ارتفاع سکشن منهای پدینگهای بالا/پایین */
/* کارتها: ارتفاع خودکار + حداقل ارتفاع، بدون اسکرول */
.card{
height:auto;
min-height: calc(var(--H) - 2*var(--pad)); /* ~320px */
background:linear-gradient(135deg, rgba(5,0,0,.60), rgba(0,0,0,.60));
border:1px solid rgba(255,255,255,.40);
border-radius:var(--rad);
box-shadow:0 16px 40px rgba(0,0,0,.25);
/* backdrop-filter: blur(0px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);*/
display:flex; flex-direction:column;
}
/* فرم جمعوجور */
.form{ padding:10px 12px 12px }
.title{ margin:4px 0 6px; font:700 16px/1.2 system-ui; text-align:center }
.form-body{ display:grid; gap:6px; overflow:auto }
.form label{ display:grid; gap:4px; font-size:12px }
.form input,.form textarea{
width:100%; border-radius:12px; border:1px solid rgba(255,255,255,.45);
background:rgba(255,255,255,.16); color:#fff; outline:0;
padding:7px 9px; font-size:12.5px; height:34px;
}
.form textarea{ height:auto; min-height:70px; resize:vertical }
.form ::placeholder{ color:rgba(255,255,255,.86) }
.btn{
margin-top:auto; align-self:flex-start; border:0; cursor:pointer; border-radius:999px;
padding:8px 12px; font-weight:700; font-size:12.5px; letter-spacing:.2px;
background:linear-gradient(90deg, #263B8F, #3b59cc); color:#fff;
box-shadow:0 10px 24px rgba(38,59,143,.35); transition:.18s transform,.18s box-shadow;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(38,59,143,.45) }
/* نقشه */
.map{ padding:8px; box-sizing:border-box }
.map iframe{
width:100%; height:100%; border:0; border-radius:12px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
/* ریسپانسیو: یکستونه با همان وسطچینی و همان فاصله از بالا/پایین */
/* ریسپانسیو: یکستونه ولی همان وسطچینی و فاصلهی برابر */
@media (max-width:900px){
.cg{ grid-template-columns:1fr }
}
/* لیست تماس */
.cg-contact{ list-style:none; margin:10px 0 0; padding:0; font:700 15px/1.9 system-ui,sans-serif; color:#000; }
.cg-contact li{ margin:0; }
/* ===========================================================
INDUSTRY: AUTOMOTIVE
مسیر: /industry/automotive.html
این استایل فقط در صفحات دارای کلاس body = industry-automotive فعال میشود
=========================================================== */
/* ------------------ رنگها و تنظیمات ------------------ */
.industry-automotive {
--brand: #263B8F; /* آبی صنعتی سپهردنیا */
--accent: #F59E0B; /* طلایی برند */
--ink: #0b1320; /* رنگ متن اصلی */
--bg: #F5F7FB; /* پسزمینه نرم */
--radius: 18px; /* گردی المانها */
}
/* ------------------ HERO ------------------ */
.industry-automotive header.hero {
position: relative;
width: 100%;
height: 90vh;
background: linear-gradient(rgba(10,14,24,.45), rgba(10,14,24,.6)),
url("/assets/img/industry/automotive/پلی-یورتان-در-خودرو.png") center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.industry-automotive .hero-content {
color: #fff;
text-align: center;
max-width: 900px;
backdrop-filter: blur(10px);
background: rgba(255,255,255,.1);
border-radius: var(--radius);
padding: 2.5rem 2rem;
box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.industry-automotive .hero-content h1 {
font-weight: 800;
font-size: 2.8rem;
margin-bottom: 1rem;
}
.industry-automotive .hero-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.9;
}
/* ------------------ دکمهها ------------------ */
.industry-automotive .btn-brand {
background: var(--brand);
color: #fff;
border: none;
border-radius: 999px;
padding: .8rem 2rem;
font-weight: 600;
transition: .3s;
}
.industry-automotive .btn-brand:hover {
background: #1b2a6f;
transform: translateY(-2px);
}
.industry-automotive .btn-outline {
background: rgba(255,255,255,.2);
border: 1px solid rgba(255,255,255,.4);
color: #fff;
border-radius: 999px;
padding: .8rem 2rem;
transition: .3s;
}
.industry-automotive .btn-outline:hover {
background: rgba(255,255,255,.4);
}
/* ------------------ تیترها و متنها ------------------ */
.industry-automotive .section-title {
color: var(--brand);
font-weight: 700;
text-align: center;
margin-bottom: 2rem;
}
.industry-automotive .lead {
text-align: justify;
color: #333;
margin-bottom: 3rem;
line-height: 1.9;
}
/* ------------------ کارتهای محصول ------------------ */
.industry-automotive .auto-card {
background: #fff;
border: none;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,.05);
transition: .3s;
display: flex;
flex-direction: column;
height: 100%;
}
.industry-automotive .auto-card img {
height: 180px;
width: 100%;
object-fit: cover;
transition: transform .4s;
}
.industry-automotive .auto-card:hover img {
transform: scale(1.05);
}
.industry-automotive .auto-card h3 {
font-size: 1.05rem;
font-weight: 700;
margin: 1rem 1rem .5rem;
color: var(--ink);
}
.industry-automotive .auto-card p {
font-size: .9rem;
color: #4a4a4a;
margin: 0 1rem 1rem;
flex-grow: 1;
}
.industry-automotive .auto-card a {
display: inline-block;
margin: 0 1rem 1.5rem;
font-weight: 600;
color: var(--brand);
text-decoration: none;
transition: .3s;
}
.industry-automotive .auto-card a:hover {
color: var(--accent);
}
/* ------------------ جعبه CTA ------------------ */
.industry-automotive .cta-box {
background: #fff;
border-radius: var(--radius);
text-align: center;
padding: 3rem 2rem;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.industry-automotive .cta-box h3 {
color: var(--brand);
font-weight: 700;
margin-bottom: 1rem;
}
.industry-automotive .cta-box p {
color: #444;
margin-bottom: 2rem;
}
/* ------------------ واکنشگرا ------------------ */
@media (max-width: 768px) {
.industry-automotive header.hero { height: 70vh; }
.industry-automotive .hero-content h1 { font-size: 2rem; }
.industry-automotive .hero-content p { font-size: .95rem; }
.industry-automotive .btn-brand,
.industry-automotive .btn-outline {
width: 100%;
margin-bottom: 1rem;
}
.industry-automotive .auto-card img { height: 160px; }
}
/* ===========================================================
INDUSTRY: AUTOMOTIVE
=========================================================== */
:root.auto-theme {
--auto-brand: #263B8F;
--auto-accent: #F59E0B;
--auto-ink: #0B1320;
--auto-bg: #F5F7FB;
--auto-rad: 18px;
}
/* ---------------- HERO SECTION ---------------- */
header.auto-hero {
/* position: relative;
*/ width: 100%;
height: 82vh;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(rgba(10,14,24,.45), rgba(10,14,24,.6)),
url("../img/industry/automotive/poliuretan-car.png") center/cover no-repeat;
}
.auto-hero .auto-hero-content {
color: #fff;
text-align: center;
max-width: 1300px;
padding: 2.8rem 2.2rem;
border-radius: var(--auto-rad);
/* جلوه واقعی گلس مورفیسم */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.35);
/* سایه ملایم و عمق */
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
/* بهبود موقعیت و واکنشپذیری */
margin: 0 1rem;
transition: all 0.3s ease;
}
.auto-hero .auto-hero-content:hover {
background: rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
.auto-hero .auto-hero-content h1 {
font-weight: 800;
font-size: 2.8rem;
margin-bottom: 1rem;
line-height: 1.7;
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.auto-hero .auto-hero-content p {
font-size: 1.3rem;
margin-bottom: 2rem;
line-height: 1.9;
color: rgba(255, 255, 255, 0.9);
}
/* برای ریسپانسیو */
@media (max-width: 768px) {
.auto-hero .auto-hero-content {
width: 95%;
padding: 2rem 1.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px) saturate(140%);
}
.auto-hero .auto-hero-content h1 {
font-size: 2rem;
}
.auto-hero .auto-hero-content p {
font-size: 0.95rem;
}
}
.auto-hero .auto-hero-content .btn-brand,
.auto-hero .auto-hero-content .btn-outline {
font-size: 1rem; /* بزرگتر از قبل (قبلاً حدود 0.85rem بود) */
font-weight: 600;
padding: 1rem 2.6rem; /* ارتفاع و عرض بیشتر */
border-radius: 999px;
line-height: 1.4;
transition: all 0.3s ease;
}
/* دکمه اصلی */
.auto-hero .auto-hero-content .btn-brand {
background: var(--brand);
color: #fff;
border: none;
box-shadow: 0 6px 18px rgba(38,59,143,.35);
}
.auto-hero .auto-hero-content .btn-brand:hover {
background: #1b2a6f;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(38,59,143,.45);
}
/* دکمه دوم (outline) */
.auto-hero .auto-hero-content .btn-outline {
background: rgba(255,255,255,.25);
border: 1px solid rgba(255,255,255,.5);
color: #fff;
}
.auto-hero .auto-hero-content .btn-outline:hover {
background: rgba(255,255,255,.45);
color: var(--auto-brand);
}
.auto-hero .auto-hero-content .btn-brand + .btn-outline {
margin-right: 0.8rem; /* فاصله افقی بین دکمهها */
}
/* ---------------- MAIN CONTENT ---------------- */
main {
padding-top:4rem;
/* padding-bottom:4rem;*/
}
/* ====================== PRODUCT GRID ====================== */
.auto-card {
background: #fff;
border: 1px solid #C0C0C0;
border-radius: var(--rad);
overflow: hidden;
transition: all 0.35s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
height: 100%;
display: flex;
flex-direction: column;
}
/* هر کارت زوج دارای پسزمینهی طوسی روشنتر */
.auto-card:nth-child(2n) {
background: #D9D9D9;
}
/* تصویر داخل کارت */
.auto-card img {
height: 180px;
width: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* افکت hover روی کل کارت */
.auto-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
background: linear-gradient(180deg, #fff, #f9fbff);
}
/* افکت hover روی تصویر کارت */
.auto-card:hover img {
transform: scale(1.07);
filter: brightness(1.05);
}
/* نوشتههای داخلی کارت */
.auto-card h3,
.auto-card p {
padding: 12px 16px;
margin: 0;
color: #0b1320;
transition: color 0.3s ease;
}
/* رنگ تیتر در حالت hover */
.auto-card:hover h3 {
color: var(--brand, #263B8F);
}
.auto-card h3 {
font-size: 1rem;
font-weight: 700;
margin: 1rem 1rem 0.5rem;
color: var(--ink);
}
.auto-card p {
font-size: 0.9rem;
color: #4a4a4a;
margin: 0 1rem 1rem;
flex-grow: 1;
}
/* لینک “ادامه مطلب” یا مشابه */
.auto-card a {
display: inline-block;
margin: 0 1rem 1.5rem;
font-weight: 600;
color: var(--brand);
text-decoration: none;
transition: color 0.3s ease;
}
.auto-card a:hover {
color: var(--accent);
}
/* ====================== CTA SECTION ====================== */
.cta-glass {
position: relative;
background: linear-gradient(
180deg,
rgba(38, 59, 143, 0.15),
rgba(245, 247, 251, 1) 90%
),
url("../img/testimonial-index-bg.jpg") center/cover no-repeat;
border-radius: 20px;
margin: 3rem auto;
padding: 3rem 2rem;
max-width: 960px;
color: #fff;
text-align: right;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
isolation: isolate;
}
/* افکت گلس مورفیسم */
.cta-glass::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px) saturate(130%);
-webkit-backdrop-filter: blur(12px) saturate(130%);
border-radius: 20px;
z-index: -1;
}
.cta-glass-content {
color: #0b1320;
font-family: 'Vazirmatn', sans-serif;
}
/* تیتر اصلی CTA */
.cta-glass h3 {
font-size: 1.6rem;
font-weight: 800;
color: #263B8F;
margin-bottom: 1rem;
}
/* توضیح CTA */
.cta-glass p {
font-size: 1.2rem;
color: #111;
margin-bottom: 1.5rem;
line-height: 1.9;
}
/* لیست آیتمها (تیکها یا ویژگیها) */
.cta-glass .cta-list {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
.cta-glass .cta-list li {
margin-bottom: 0.4rem;
font-size: 0.95rem;
font-weight: bold;
color: #263B8F;
background: rgba(255, 255, 255, 0.4);
padding: 0.4rem 0.8rem;
border-radius: 12px;
display: inline-block;
}
/* دکمهها */
.cta-glass .cta-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* دکمه اصلی */
.cta-glass .btn-brand {
background: linear-gradient(90deg, #263B8F, #3b59cc);
color: #fff;
border: none;
border-radius: 999px;
padding: 0.8rem 2rem;
font-weight: 600;
transition: 0.3s;
box-shadow: 0 6px 20px rgba(38, 59, 143, 0.25);
}
.cta-glass .btn-brand:hover {
background: #1b2a6f;
transform: translateY(-2px);
}
/* دکمه دوم (Outline) */
.cta-glass .btn-outline {
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #0b1320;
border-radius: 999px;
padding: 0.8rem 2rem;
font-weight: 600;
transition: 0.3s;
}
.cta-glass .btn-outline:hover {
background: rgba(255, 255, 255, 0.6);
color: #263B8F;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 768px) {
.cta-glass {
padding: 2rem 1.5rem;
text-align: center;
}
.cta-glass h3 {
font-size: 1.3rem;
}
.cta-glass .cta-buttons {
justify-content: center;
}
}
/*-----------------Brif--------------------*/
/*----------------------------------------*/
:root {
--brand: #263B8F;
--accent: #F59E0B;
--bg: #F5F7FB;
--ink: #0b1320;
--rad: 18px;
}
/* ---------------- HERO ---------------- */
header.hero {
position: relative;
background: linear-gradient(rgba(10,14,24,.5), rgba(10,14,24,.6)),
url("../img/testimonial-index-bg.jpg") center/cover no-repeat;
color: #fff;
text-align: center;
height: 60vh;
padding: 80px ;
justify-content: center;
display: flex;
flex-direction: column; /* برای اینکه محتوا زیر هم قرار بگیرد */
justify-content: center; /* مرکزیت عمودی */
align-items: center; /* مرکزیت افقی */
}
header.hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.2);
}
.hero h1 {
font-size: 2.2rem;
padding-bottom: 20px;
}
.hero p {
font-size: 1rem;
line-height: 2;
max-width: 700px;
margin: 0 auto;
color: #e9e9e9;
}
/* ---------------- INTRO ---------------- */
section.brief-intro {
max-width: 1200px;
margin: 60px auto 20px;
background: #fff;
border-radius: var(--rad);
padding: 40px 30px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
text-align: center;
}
.brief-intro h2 {
color: var(--brand);
font-weight: 800;
margin-bottom: 16px;
font-size: 1.6rem;
}
.brief-intro ul {
list-style: none;
padding: 0;
margin: 20px auto;
max-width: 540px;
text-align: right;
font-size: 0.95rem;
line-height: 2;
}
.brief-intro li::before {
content: "✔";
color: var(--accent);
margin-left: 8px;
}
/* ---------------- FORM SECTION ---------------- */
/* کل فرم بریف با فونت وزیر */
.brief-form,
.brief-form label,
.brief-form input,
.brief-form select,
.brief-form textarea,
.brief-form button {
font-family: "Vazir", system-ui, sans-serif;
}
/* تیترهای فرم */
.brief-form h2,
.brief-form h3 {
font-family: "Vazir", system-ui, sans-serif;
font-weight: 700; /* از Vazir-Bold استفاده میشود */
}
/* متن توضیحات سبکتر */
.brief-form .helper-text,
.brief-form label {
font-weight: 400;
}
section.brief-section {
padding:20px 30px 30px;
}
.brief-container {
max-width: 1200px;
margin: auto;
display: grid;
gap: 10px;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 900px) {
.brief-container { grid-template-columns: 1fr; }
}
.brief-form {
background: rgba(255,255,255,0.96);
border: 1px solid rgba(230,230,230,0.9);
border-radius: var(--rad);
padding: 32px;
box-shadow: 0 8px 32px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 12px;
font-family: "Vazirmatn Medium", Vazirmatn;
}
.brief-title {
text-align: center;
font-weight: 800;
font-size: 20px;
color: var(--brand);
margin-bottom: 8px;
}
.brief-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 8px;
}
.brief-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.brief-field label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
font-family: "Vazirmatn Light", "Vazirmatn Thin";
}
.brief-field input,
.brief-field select,
.brief-field textarea {
border: 1px solid #ccc;
border-radius: 10px;
padding: 6px 12px;
font-size: 13px;
color: #0b1320;
background: #fff;
transition: 0.2s;
outline: none;
}
.brief-field input:focus,
.brief-field select:focus,
.brief-field textarea:focus {
border-color: var(--brand);
box-shadow: 0 0 0 2px rgba(38,59,143,0.1);
}
.brief-btn {
background: linear-gradient(90deg, var(--brand), #3b59cc);
color: #fff;
border: none;
border-radius: 999px;
padding: 12px 32px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
align-self: center;
transition: 0.25s ease;
margin-top: 10px;
font-family: "Vazirmatn Light", "Vazirmatn Thin";
}
.brief-btn:hover {
background: #1b2a6f;
transform: translateY(-2px);
}
/* فرم بریف – همه چیز با Vazirmatn */
.brief-form,
.brief-form input,
.brief-form select,
.brief-form textarea,
.brief-form label,
.brief-form h3 {
font-family: 'Vazirmatn', system-ui, sans-serif;
}
/* وزنها را با font-weight کنترل کن، نه با family الکی */
.brief-form { font-weight: 500; } /* چیزی شبیه Medium */
.brief-field label { font-weight: 300; } /* شبیه Light */
/* ---------------- SIDEBAR ---------------- */
.brief-side {
background: linear-gradient(160deg, var(--brand), #1b2a6f);
border-radius: var(--rad);
padding: 38px 26px;
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.brief-side h3 {
color: var(--accent);
font-weight: 700;
font-size: 1.2rem;
}
.brief-side p {
font-size: 14px;
line-height: 1.9;
color: #f4f4f4;
}
.brief-link {
border: 1px solid rgba(255,255,255,0.6);
color: #fff;
border-radius: 999px;
padding: 8px 20px;
display: inline-block;
text-decoration: none;
transition: 0.3s;
}
.brief-link:hover {
background: rgba(255,255,255,0.25);
color: #fff;
}
/* ---------------- POPUP ---------------- */
.popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
backdrop-filter: blur(8px);
}
.popup.active { display: flex; }
.popup-content {
background: #fff;
border-radius: 20px;
padding: 40px 50px;
max-width: 420px;
text-align: center;
box-shadow: 0 8px 28px rgba(0,0,0,0.25);
color: #0b1320;
}
.popup-content h4 {
color: var(--brand);
margin-bottom: 12px;
font-size: 1.2rem;
}
.popup-btn {
display: inline-block;
margin: 8px;
border-radius: 999px;
padding: 10px 24px;
text-decoration: none;
font-weight: 700;
}
.popup-btn.primary { background: var(--brand); color: #fff; }
.popup-btn.secondary { background: #ddd; color: #000; }
/* ==========================
BLOG PAGE GENERAL
========================== */
.blog-hero {
padding: 90px 0 70px;
background: linear-gradient(180deg,#f8f9fb,#ffffff);
text-align: center;
}
.blog-title {
font-size: 38px;
font-weight: 700;
color: #0b1320;
}
.blog-subtitle {
font-size: 18px;
color: #4b5563;
margin-top: 10px;
}
/* CONTAINER */
.blog-container {
padding: 60px 0;
}
/* SIDEBAR */
.sidebar-box {
background: #fff;
border-radius: 14px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
margin-bottom: 25px;
}
.sidebar-box h3 {
font-size: 18px;
margin-bottom: 12px;
font-weight: 700;
}
.sidebar-list li {
margin-bottom: 8px;
}
.sidebar-list li a {
color: #263B8F;
text-decoration: none;
font-weight: 500;
}
.sidebar-post {
display: flex;
gap: 12px;
margin-bottom: 15px;
}
.sidebar-post img {
width: 60px;
height: 60px;
border-radius: 10px;
object-fit: cover;
}
.sidebar-post a {
color: #0b1320;
font-weight: 600;
text-decoration: none;
}
/* ==========================
BLOG CARD
========================== */
.blog-card {
display: flex;
background: #fff;
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 4px 18px rgba(0,0,0,0.06);
transition: 0.3s;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.blog-thumb {
width: 260px;
object-fit: cover;
}
.blog-content {
padding: 25px;
}
.blog-content h2 {
font-size: 20px;
}
.blog-content h2 a {
text-decoration: none;
color: #0b1320;
}
.blog-meta {
font-size: 14px;
color: #6b7280;
margin-top: 10px;
}
.blog-meta i {
margin-left: 3px;
}
/* ==========================
SINGLE ARTICLE PAGE
========================== */
.single-hero {
padding: 90px 0 60px;
background: #f5f7fb;
text-align: center;
}
.single-container {
padding: 50px 0;
max-width: 900px;
}
.single-article h2 {
margin-top: 40px;
margin-bottom: 20px;
font-size: 26px;
font-weight: 700;
color: #0b1320;
}
.single-article p {
line-height: 1.9;
color: #374151;
}
/* Boxes */
.info-box,
.content-box,
.highlight-box,
.formula-box {
background: #fff;
padding: 20px;
border-radius: 14px;
box-shadow: 0 2px 14px rgba(0,0,0,0.05);
margin-bottom: 25px;
}
/* CTA */
.cta-box-single {
text-align: center;
padding: 35px;
background: #263B8F;
border-radius: 16px;
color: #fff;
}
.cta-box-single a {
background: #F59E0B;
padding: 10px 28px;
border-radius: 12px;
color: #fff;
text-decoration: none;
margin-top: 15px;
display: inline-block;
}
/**/
/* POLYURETHANE SECTION */
.polyurethane-wrapper {
direction: rtl;
font-family: inherit;
}
.poly-card {
background: #F4F7FB;
border-radius: 14px;
padding: 25px 30px;
margin-bottom: 25px;
box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}
.section-title,
.section-subtitle {
color: #2C3E4F;
font-weight: 700;
margin-bottom: 18px;
}
.section-text {
color: #4B5563;
line-height: 1.9;
}
.section-list {
padding-right: 20px;
margin-top: 10px;
}
.section-list-ordered {
padding-right: 20px;
line-height: 1.9;
}
.section-list-ordered li {
margin-bottom: 12px;
font-size: 15px;
}
.small-desc {
font-size: 13px;
color: #6B7280;
}
.formula-box {
background: #ffffff;
border-radius: 12px;
padding: 15px;
margin: 20px 0;
text-align: center;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
color: #2C3E4F;
}
.summary-box {
background: #E9F0F7;
border-right: 4px solid #2C3E4F;
padding: 20px;
}
.highlight-box {
background: #ffffff;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
border-right: 4px solid #F59E0B;
}
/************************/
/* تیترهای صفحه بریف با Vazirmatn */
header.hero h1,
.brief-intro h2 {
font-family: 'Vazirmatn', system-ui, sans-serif !important;
font-weight: 700;
}
.hero-brief h1,
.brief-intro h2
.hero-brief p {
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.85) !important;
padding-top: 8rem;
}
/*بریف*/
.hero {
text-align: center;
position: relative;
}
/* دکمه وسط زیر متن هیرو */
.hero-brief-cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.9rem;
border-radius: 999px;
text-decoration: none;
color: #fdfdfd;
font-weight: 600;
font-size: 0.95rem;
position: relative;
margin-top: 2rem;
overflow: hidden;
z-index: 1;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* نئون آبی/سرمهای دور دکمه */
.hero-brief-cta::before {
content: "";
position: absolute;
inset: -3px;
border-radius: inherit;
background: conic-gradient(
from 0deg,
#0f3b6f,
#1d4ed8,
#0ea5e9,
#1d4ed8,
#0f3b6f
);
animation: hero-neon-spin 3.2s linear infinite;
z-index: -2;
}
.hero-brief-cta::after {
content: "";
position: absolute;
inset: 2px;
border-radius: inherit;
background: rgba(10, 10, 18, 0.7);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: -1;
}
.hero-brief-cta span,
.hero-brief-cta i {
position: relative;
z-index: 1;
}
.hero-brief-cta i {
font-size: 1.1rem;
animation: hero-arrow-bounce 1.4s infinite;
}
@keyframes hero-neon-spin {
to { transform: rotate(360deg); }
}
@keyframes hero-arrow-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/*برای تاگل منو*/
#header { z-index: 2000; }
.navbar-mobile { z-index: 1999; }
.mobile-nav-toggle{
position: absolute;
left: 16px;
top: 18px;
z-index: 2001;
}
@media (max-width: 768px){
.mobile-nav-toggle{ display: inline-flex !important; }
}
/* ============================================================
PART 1: PARALLAX BACKGROUND (تصویر پسزمینه)
============================================================ */
.cta2 {
background: linear-gradient(rgba(2, 2, 2, 0.5), rgba(0, 0, 0, 0.5)), url("../img/bg/contactus.jpg") fixed center center;
background-size: cover;
padding: 30px 0;
color: #fff;
text-align: center;
}
.cta2 h2 {
color: #F5C600;
font-size: 18px;
font-weight: 700;
}
.cta2 p {
color: #fff;
font-size: 1.1rem;
}
.cta2 .cta-btn {
font-family: 'Vazirmatn-Regular', sans-serif;
font-weight: 600;
font-size: 1.5rem;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 4px;
transition: 0.5s;
margin: 10px 5px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
}
.cta2 .cta-btn:hover {
background: #ffc451;
border-color: #ffc451;
color: #151515;
}
/* ============================================================
PART 2: GLASS CARDS (باکسهای شیشهای)
============================================================ */
.contact-glass-card {
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 24px;
background: linear-gradient(145deg, rgba(15, 25, 45, 0.65), rgba(10, 18, 35, 0.55));
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-glass-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 196, 81, 0.55);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}
.contact-glass-card__title {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 22px;
color: #fff !important;
font-family: "Vazirmatn", sans-serif !important;
font-size: 1.08rem !important;
font-weight: 800;
line-height: 1.6;
text-align: center;
}
.contact-glass-card__title i,
.contact-info-list i {
color: #ffc451;
}
/* فرم تماس */
.contact-glass-form .form-floating {
margin-bottom: 10px !important;
}
.contact-glass-form .form-floating > .form-control {
min-height: 46px;
padding: 6px 12px;
color: #fff;
background: rgba(255, 255, 255, 0.13);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 14px;
box-shadow: none;
font-family: "Vazirmatn", sans-serif;
font-size: 0.9rem;
text-align: right;
}
.contact-glass-form textarea.form-control {
height: 100px;
min-height: 90px;
resize: vertical;
}
.contact-glass-form .form-floating > label {
right: 0;
left: auto;
width: 100%;
padding-right: 12px;
color: rgba(255, 255, 255, 0.78);
font-family: "Vazirmatn", sans-serif;
font-size: 0.85rem;
text-align: right;
}
.contact-glass-form .form-control:focus {
border-color: rgba(255, 196, 81, 0.78);
background: rgba(255, 255, 255, 0.18);
box-shadow: 0 0 0 0.2rem rgba(255, 196, 81, 0.12);
}
.contact-glass-form .form-floating > .form-control:focus ~ label,
.contact-glass-form .form-floating > .form-control:not(:placeholder-shown) ~ label {
color: #ffc451;
transform: scale(0.86) translateY(-0.75rem) translateX(-0.15rem);
}
/* دکمه ارسال */
.contact-submit-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 8px 16px;
margin-top: 4px;
border: 0;
border-radius: 999px;
background: linear-gradient(90deg, #ffc451, #f59e0b);
color: #151515;
font-family: "Vazirmatn", sans-serif;
font-size: 0.9rem;
font-weight: 800;
box-shadow: 0 14px 30px rgba(245, 158, 11, 0.28);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.contact-submit-btn:hover,
.contact-submit-btn:focus {
transform: translateY(-2px);
filter: brightness(1.03);
box-shadow: 0 18px 38px rgba(245, 158, 11, 0.36);
}
/* نقشه */
.contact-map {
min-height: 220px;
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.26);
background: rgba(255, 255, 255, 0.10);
}
.contact-map iframe {
display: block;
width: 100%;
height: 220px;
border: 0;
filter: grayscale(12%) contrast(1.02);
}
/* لیست اطلاعات تماس */
.contact-info-list {
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
color: rgba(255, 255, 255, 0.92);
font-family: "Vazirmatn", sans-serif;
font-size: 0.88rem;
line-height: 1.8;
text-align: right;
}
.contact-info-list li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.contact-info-list i {
flex: 0 0 auto;
margin-top: 4px;
}
/* ============================================================
PART 3: RESPONSIVE (موبایل و تبلت)
============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.contact-glass-card {
background: rgba(12, 18, 35, 0.78);
}
}
@media (max-width: 1199.98px) {
.contact-parallax {
min-height: auto;
background-attachment: scroll;
}
}
@media (max-width: 991.98px) {
.contact-parallax {
padding: 50px 0;
}
.contact-glass-card {
padding: 18px;
}
}
@media (max-width: 768px) {
.contact-parallax {
padding: 40px 0;
background-attachment: scroll;
background-position: 65% center;
background-size: cover;
}
.contact-parallax__header {
margin-bottom: 24px;
padding: 0 6px;
}
.contact-glass-card {
padding: 16px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.contact-map,
.contact-map iframe {
height: 200px;
min-height: 200px;
}
.contact-info-list {
gap: 8px;
font-size: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.contact-glass-card,
.contact-submit-btn {
transition: none;
}
}
/* ============================================================
Technical Fast Contact Bridge - Responsive Clean Version
پل ارتباط سریع قبل از پارالکس تماس
دکمهها و اکشن نئونی حفظ شده
متن راهنما اضافه شده و ریسپانسیو اصلاح شده
============================================================ */
.technical-fast-contact {
position: relative;
z-index: 3;
direction: rtl;
text-align: right;
overflow: hidden;
padding: 34px 0 30px;
background:
radial-gradient(circle at 12% 18%, rgba(38, 59, 143, 0.035), transparent 30%),
radial-gradient(circle at 88% 82%, rgba(245, 158, 11, 0.040), transparent 32%),
linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.technical-fast-contact::before,
.technical-fast-contact::after {
content: "";
position: absolute;
left: 50%;
width: min(960px, calc(100% - 48px));
height: 1px;
transform: translateX(-50%);
pointer-events: none;
background:
linear-gradient(
90deg,
transparent,
rgba(38, 59, 143, 0.11),
rgba(14, 165, 233, 0.15),
rgba(245, 158, 11, 0.10),
transparent
);
}
.technical-fast-contact::before {
top: 10px;
}
.technical-fast-contact::after {
bottom: 8px;
}
.technical-fast-contact .container {
position: relative;
z-index: 1;
}
/* ================= Layout ================= */
.technical-fast-contact__shell {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 250px);
gap: 34px;
align-items: center;
}
/* ================= Copy ================= */
.technical-fast-contact__copy {
position: relative;
padding-right: 18px;
}
.technical-fast-contact__copy::before {
content: "";
position: absolute;
top: 8px;
right: 0;
bottom: 8px;
width: 3px;
border-radius: 999px;
background:
linear-gradient(180deg, #263B8F 0%, #1C75BC 58%, #F59E0B 100%);
}
.technical-fast-contact__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
padding: 3px 12px;
border-radius: 999px;
color: #263B8F;
background: rgba(38, 59, 143, 0.058);
border: 1px solid rgba(38, 59, 143, 0.12);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.73rem;
font-weight: 850;
line-height: 1.75;
}
.technical-fast-contact__copy h2 {
margin: 0 0 8px;
color: #10284f;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.06rem, 1.32vw, 1.34rem) !important;
font-weight: 950;
line-height: 1.8;
letter-spacing: -0.2px;
}
.technical-fast-contact__copy p {
max-width: 760px;
margin: 0;
color: #526173;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.84rem;
font-weight: 540;
line-height: 1.95;
text-align: right;
}
/* ================= Mini Guide Items ================= */
.technical-fast-contact__guide {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
max-width: 820px;
}
.technical-fast-contact__guide-item {
position: relative;
overflow: hidden;
min-height: 74px;
padding: 11px 12px 10px;
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,251,255,0.72));
border: 1px solid rgba(38, 59, 143, 0.10);
box-shadow:
0 8px 18px rgba(15, 23, 42, 0.040),
inset 0 1px 0 rgba(255,255,255,0.76);
transition:
transform 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease,
background 0.22s ease;
}
.technical-fast-contact__guide-item::before {
content: "";
position: absolute;
top: 12px;
right: 0;
bottom: 12px;
width: 3px;
border-radius: 999px;
background:
linear-gradient(180deg, #263B8F 0%, #1C75BC 58%, #F59E0B 100%);
opacity: 0.82;
}
.technical-fast-contact__guide-item strong {
display: block;
margin-bottom: 4px;
color: #10284f;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 950;
line-height: 1.65;
}
.technical-fast-contact__guide-item span {
display: block;
color: #64748b;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.70rem;
font-weight: 560;
line-height: 1.75;
}
.technical-fast-contact__guide-item:hover {
transform: translateY(-2px);
border-color: rgba(38, 59, 143, 0.18);
background:
linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,251,255,0.84));
box-shadow:
0 12px 24px rgba(15, 23, 42, 0.070),
0 0 16px rgba(28, 117, 188, 0.070),
inset 0 1px 0 rgba(255,255,255,0.82);
}
.technical-fast-contact__guide-item:hover strong {
color: #263B8F;
}
/* ================= Actions ================= */
.technical-fast-contact__actions {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
width: 100%;
max-width: 250px;
justify-self: end;
}
/* ================= Buttons ================= */
.technical-fast-contact__btn {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
min-width: 0;
min-height: 38px;
padding: 7px 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
color: #f8fbff !important;
text-decoration: none;
white-space: nowrap;
border: 1px solid rgba(125, 211, 252, 0.30);
background: rgba(8, 14, 30, 0.70);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 900;
line-height: 1.55;
box-shadow:
0 8px 20px rgba(15, 23, 42, 0.14),
0 0 13px rgba(14, 165, 233, 0.09),
inset 0 1px 0 rgba(255,255,255,0.08);
backdrop-filter: blur(12px) saturate(145%);
-webkit-backdrop-filter: blur(12px) saturate(145%);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
color 0.22s ease;
}
/* رینگ نوری ظریف */
.technical-fast-contact__btn::before {
content: "";
position: absolute;
inset: -2px;
z-index: -2;
border-radius: inherit;
background:
conic-gradient(
from 0deg,
transparent 0deg,
rgba(14, 165, 233, 0.14) 48deg,
rgba(29, 78, 216, 0.82) 112deg,
rgba(56, 189, 248, 0.62) 160deg,
rgba(14, 165, 233, 0.12) 220deg,
transparent 360deg
);
animation: luxury-neon-spin 5.4s linear infinite;
}
/* لایه داخلی تیره و تمیز */
.technical-fast-contact__btn::after {
content: "";
position: absolute;
inset: 1.5px;
z-index: -1;
border-radius: inherit;
background:
linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.015)),
rgba(7, 13, 28, 0.88);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -1px 0 rgba(255,255,255,0.035);
}
.technical-fast-contact__btn span {
position: relative;
z-index: 2;
}
.technical-fast-contact__btn i {
position: relative;
z-index: 2;
flex: 0 0 auto;
font-size: 0.92rem;
color: #7dd3fc;
transition:
transform 0.22s ease,
color 0.22s ease;
}
/* شاین مورب */
.technical-fast-contact__btn .shine {
position: absolute;
top: -45%;
right: -55%;
width: 40%;
height: 190%;
z-index: 1;
background:
linear-gradient(
90deg,
transparent,
rgba(125, 211, 252, 0.24),
rgba(255, 255, 255, 0.20),
transparent
);
transform: rotate(22deg);
animation: luxury-blue-shine 4s ease-in-out infinite;
pointer-events: none;
}
/* Hover */
.technical-fast-contact__btn:hover {
transform: translateX(-3px);
color: #ffffff !important;
border-color: rgba(125, 211, 252, 0.58);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.20),
0 0 22px rgba(14, 165, 233, 0.20),
0 0 34px rgba(29, 78, 216, 0.14),
inset 0 1px 0 rgba(255,255,255,0.10);
}
.technical-fast-contact__btn:hover i {
color: #ffffff;
transform: translateX(-2px);
}
.technical-fast-contact__btn--whatsapp i {
color: #7cf7b5;
}
.technical-fast-contact__btn--whatsapp:hover {
border-color: rgba(124, 247, 181, 0.42);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.20),
0 0 20px rgba(34, 197, 94, 0.14),
0 0 34px rgba(14, 165, 233, 0.12);
}
/* ================= Animations ================= */
@keyframes luxury-neon-spin {
to {
transform: rotate(360deg);
}
}
@keyframes luxury-blue-shine {
0% {
right: -58%;
opacity: 0;
}
18% {
opacity: 1;
}
48% {
right: 116%;
opacity: 0;
}
100% {
right: 116%;
opacity: 0;
}
}
/* ================= Responsive ================= */
@media (max-width: 1199.98px) {
.technical-fast-contact__shell {
grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
gap: 26px;
}
.technical-fast-contact__guide {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.technical-fast-contact {
padding: 32px 0 30px;
}
.technical-fast-contact__shell {
grid-template-columns: 1fr;
gap: 22px;
align-items: stretch;
}
.technical-fast-contact__guide {
grid-template-columns: 1fr;
gap: 8px;
max-width: 100%;
}
.technical-fast-contact__guide-item {
min-height: auto;
}
.technical-fast-contact__actions {
max-width: 100%;
justify-self: stretch;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.technical-fast-contact__btn {
width: 100%;
min-width: 0;
padding-inline: 10px;
font-size: 0.76rem;
}
}
@media (max-width: 767.98px) {
.technical-fast-contact__actions {
grid-template-columns: 1fr;
gap: 9px;
}
.technical-fast-contact__btn {
width: 100%;
min-height: 42px;
padding: 8px 14px;
font-size: 0.82rem;
}
}
@media (max-width: 575.98px) {
.technical-fast-contact {
padding: 28px 0;
}
.technical-fast-contact::before,
.technical-fast-contact::after {
width: calc(100% - 28px);
}
.technical-fast-contact__shell {
gap: 18px;
}
.technical-fast-contact__copy {
padding-right: 14px;
}
.technical-fast-contact__copy h2 {
font-size: 1rem !important;
line-height: 1.85;
}
.technical-fast-contact__copy p {
font-size: 0.80rem;
line-height: 1.9;
}
.technical-fast-contact__guide {
margin-top: 14px;
}
.technical-fast-contact__guide-item {
padding: 10px 11px 9px;
border-radius: 13px;
}
.technical-fast-contact__guide-item strong {
font-size: 0.76rem;
}
.technical-fast-contact__guide-item span {
font-size: 0.68rem;
line-height: 1.7;
}
.technical-fast-contact__btn {
min-height: 44px;
font-size: 0.82rem;
}
.technical-fast-contact__btn i {
font-size: 0.96rem;
}
}
@media (max-width: 380px) {
.technical-fast-contact__btn {
font-size: 0.78rem;
padding-inline: 12px;
}
}
/* کاهش حرکت برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
.technical-fast-contact__btn,
.technical-fast-contact__btn::before,
.technical-fast-contact__btn .shine,
.technical-fast-contact__btn i,
.technical-fast-contact__guide-item {
animation: none;
transition: none;
}
.technical-fast-contact__btn:hover,
.technical-fast-contact__btn:hover i,
.technical-fast-contact__guide-item:hover {
transform: none;
}
}
/* ============================================================
End Technical Fast Contact Bridge
============================================================ */
/* ============================================================
PU Diagnostic Guide Section - Compact Premium Hover Version
راهنمای تشخیص مسئله در انتخاب و تولید فوم پلییورتان
طرح لیستی، غیرکارتی، جمعوجور، با هاور حرفهای
============================================================ */
.pu-diagnostic-guide {
position: relative;
overflow: hidden;
direction: rtl;
text-align: right;
padding: 38px 0 42px;
background:
radial-gradient(circle at 12% 18%, rgba(38, 59, 143, 0.035), transparent 30%),
radial-gradient(circle at 88% 82%, rgba(245, 158, 11, 0.045), transparent 32%),
linear-gradient(180deg, #ffffff 0%, #f8fafc 52%, #ffffff 100%);
}
.pu-diagnostic-guide .container {
position: relative;
z-index: 1;
}
/* ================= Header ================= */
.pu-diagnostic-guide__header {
max-width: 820px;
margin: 0 auto 22px;
text-align: center;
}
.pu-diagnostic-guide__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 7px;
padding: 3px 12px;
border-radius: 999px;
color: #263B8F;
background: rgba(38, 59, 143, 0.055);
border: 1px solid rgba(38, 59, 143, 0.11);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.72rem;
font-weight: 850;
line-height: 1.7;
}
.pu-diagnostic-guide__header h2 {
margin: 0 0 7px;
color: #101828;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: clamp(1.08rem, 1.35vw, 1.42rem) !important;
font-weight: 950;
line-height: 1.7;
letter-spacing: -0.2px;
}
.pu-diagnostic-guide__header p {
margin: 0 auto;
max-width: 720px;
color: #667085;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.84rem;
font-weight: 540;
line-height: 1.85;
text-align: center;
}
/* ================= List Wrapper ================= */
.pu-diagnostic-guide__list {
position: relative;
max-width: 1060px;
margin: 0 auto;
display: grid;
gap: 0;
border-top: 1px solid rgba(15, 23, 42, 0.09);
border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}
/* خط عمودی اصلی کنار شمارهها */
.pu-diagnostic-guide__list::before {
content: "";
position: absolute;
top: 14px;
right: 21px;
bottom: 14px;
width: 2px;
border-radius: 999px;
background:
linear-gradient(
180deg,
rgba(38, 59, 143, 0.90),
rgba(28, 117, 188, 0.62),
rgba(245, 158, 11, 0.62)
);
}
/* ================= List Item ================= */
.pu-diagnostic-guide__item {
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
min-height: 78px;
padding: 12px 0 12px 16px;
border-bottom: 1px solid rgba(15, 23, 42, 0.075);
transition:
background 0.24s ease,
box-shadow 0.24s ease;
}
.pu-diagnostic-guide__item:last-child {
border-bottom: 0;
}
/* هایلایت نرم ردیف */
.pu-diagnostic-guide__item::before {
content: "";
position: absolute;
inset: 5px 0;
border-radius: 14px;
background:
linear-gradient(
90deg,
rgba(38, 59, 143, 0.075) 0%,
rgba(255, 255, 255, 0.0) 52%,
rgba(245, 158, 11, 0.075) 100%
);
opacity: 0;
transform: scaleX(0.985);
transform-origin: right center;
transition:
opacity 0.24s ease,
transform 0.24s ease;
}
.pu-diagnostic-guide__item:hover::before {
opacity: 1;
transform: scaleX(1);
}
/* خط فعالشونده داخل ردیف */
.pu-diagnostic-guide__item::after {
content: "";
position: absolute;
top: 12px;
right: 0;
bottom: 12px;
width: 3px;
border-radius: 999px;
background:
linear-gradient(180deg, #263B8F 0%, #1C75BC 55%, #F59E0B 100%);
opacity: 0;
transform: scaleY(0.25);
transform-origin: center;
box-shadow:
0 0 0 rgba(38, 59, 143, 0),
0 0 0 rgba(245, 158, 11, 0);
transition:
opacity 0.24s ease,
transform 0.24s ease,
box-shadow 0.24s ease;
}
.pu-diagnostic-guide__item:hover::after {
opacity: 1;
transform: scaleY(1);
box-shadow:
0 0 14px rgba(38, 59, 143, 0.16),
0 0 18px rgba(245, 158, 11, 0.12);
}
/* ================= Marker ================= */
.pu-diagnostic-guide__marker {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.pu-diagnostic-guide__marker span {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 68%, #4ec1d8 100%);
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.68rem;
font-weight: 950;
line-height: 1;
box-shadow:
0 7px 14px rgba(38, 59, 143, 0.18),
0 0 10px rgba(28, 117, 188, 0.08);
transition:
transform 0.24s ease,
box-shadow 0.24s ease,
background 0.24s ease;
}
.pu-diagnostic-guide__item:hover .pu-diagnostic-guide__marker span {
transform: translateX(-2px) scale(1.08);
background:
linear-gradient(135deg, #263B8F 0%, #1C75BC 48%, #F59E0B 145%);
box-shadow:
0 12px 24px rgba(38, 59, 143, 0.26),
0 0 18px rgba(28, 117, 188, 0.16),
0 0 18px rgba(245, 158, 11, 0.14);
}
/* ================= Content ================= */
.pu-diagnostic-guide__content {
position: relative;
z-index: 2;
}
.pu-diagnostic-guide__content h3 {
margin: 0 0 3px;
color: #172033;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.88rem !important;
font-weight: 950;
line-height: 1.65;
letter-spacing: -0.12px;
transition:
color 0.24s ease,
transform 0.24s ease;
}
.pu-diagnostic-guide__item:hover .pu-diagnostic-guide__content h3 {
color: #263B8F;
transform: translateX(-2px);
}
.pu-diagnostic-guide__content p {
margin: 0;
color: #667085;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.76rem;
font-weight: 530;
line-height: 1.72;
text-align: right;
}
/* ================= Link ================= */
.pu-diagnostic-guide__link {
position: relative;
z-index: 2;
min-width: 190px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
color: #263B8F;
text-decoration: none;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.74rem;
font-weight: 900;
line-height: 1.6;
padding: 5px 0;
transition:
color 0.24s ease,
transform 0.24s ease;
}
/* underline متحرک */
.pu-diagnostic-guide__link::before {
content: "";
position: absolute;
right: 0;
bottom: 2px;
width: 100%;
height: 1px;
border-radius: 999px;
background:
linear-gradient(90deg, #263B8F, #1C75BC, #F59E0B);
transform: scaleX(0);
transform-origin: right center;
opacity: 0.85;
transition:
transform 0.24s ease,
opacity 0.24s ease;
}
.pu-diagnostic-guide__link:hover::before {
transform: scaleX(1);
}
.pu-diagnostic-guide__link::after {
content: "←";
font-size: 0.86rem;
line-height: 1;
transition:
transform 0.24s ease,
color 0.24s ease;
}
.pu-diagnostic-guide__link:hover {
color: #F59E0B;
transform: translateX(-3px);
}
.pu-diagnostic-guide__link:hover::after {
transform: translateX(-4px);
}
/* ================= Bottom Note ================= */
.pu-diagnostic-guide__note {
max-width: 1040px;
margin: 12px auto 0;
}
.pu-diagnostic-guide__note p {
margin: 0;
color: #475569;
font-family: "Vazirmatn", "Vazir", system-ui, sans-serif !important;
font-size: 0.78rem;
font-weight: 650;
line-height: 1.85;
text-align: center;
}
/* ================= Responsive ================= */
@media (max-width: 991.98px) {
.pu-diagnostic-guide {
padding: 36px 0 40px;
}
.pu-diagnostic-guide__header {
margin-bottom: 20px;
}
.pu-diagnostic-guide__item {
grid-template-columns: 48px minmax(0, 1fr);
gap: 12px;
align-items: start;
min-height: auto;
padding: 13px 0;
}
.pu-diagnostic-guide__link {
grid-column: 2 / 3;
min-width: 0;
padding-top: 0;
}
}
@media (max-width: 575.98px) {
.pu-diagnostic-guide {
padding: 34px 0 38px;
}
.pu-diagnostic-guide__header h2 {
font-size: 1rem !important;
line-height: 1.85;
}
.pu-diagnostic-guide__header p {
font-size: 0.80rem;
line-height: 1.85;
}
.pu-diagnostic-guide__list::before {
right: 19px;
}
.pu-diagnostic-guide__item {
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
padding: 12px 0;
}
.pu-diagnostic-guide__item::after {
top: 10px;
bottom: 10px;
width: 2px;
}
.pu-diagnostic-guide__marker span {
width: 34px;
height: 34px;
font-size: 0.68rem;
}
.pu-diagnostic-guide__item:hover .pu-diagnostic-guide__marker span {
transform: scale(1.06);
}
.pu-diagnostic-guide__content h3 {
font-size: 0.84rem !important;
line-height: 1.7;
}
.pu-diagnostic-guide__content p {
font-size: 0.74rem;
line-height: 1.75;
}
.pu-diagnostic-guide__link {
font-size: 0.74rem;
}
.pu-diagnostic-guide__note p {
font-size: 0.76rem;
line-height: 1.8;
}
}
/* ================= Reduced Motion ================= */
@media (prefers-reduced-motion: reduce) {
.pu-diagnostic-guide__item::before,
.pu-diagnostic-guide__item::after,
.pu-diagnostic-guide__marker span,
.pu-diagnostic-guide__content h3,
.pu-diagnostic-guide__link,
.pu-diagnostic-guide__link::before,
.pu-diagnostic-guide__link::after {
transition: none;
}
.pu-diagnostic-guide__item:hover .pu-diagnostic-guide__marker span,
.pu-diagnostic-guide__item:hover .pu-diagnostic-guide__content h3,
.pu-diagnostic-guide__link:hover,
.pu-diagnostic-guide__link:hover::after {
transform: none;
}
}
/* ============================================================
End PU Diagnostic Guide Section - Compact Premium Hover Version
============================================================ */
/* ============================================================
Page Specific: What Is Polyurethane / پلی یورتان چیست؟
مسیر صفحه: what-is-polyurethane.html
============================================================ */
:root {
--pu-brand: #263B8F;
--pu-brand-2: #1C75BC;
--pu-accent: #F59E0B;
--pu-ink: #0B1320;
--pu-muted: #667085;
--pu-soft: #F5F7FB;
--pu-line: rgba(38, 59, 143, .13);
--pu-radius: 24px;
--pu-shadow: 0 22px 58px rgba(15, 23, 42, .10);
}
body.polyurethane-page {
background: #fff;
color: var(--pu-ink);
text-align: right;
}
.pu-page-main {
overflow: hidden;
background:
radial-gradient(circle at 10% 6%, rgba(38, 59, 143, .055), transparent 28%),
radial-gradient(circle at 92% 14%, rgba(245, 158, 11, .055), transparent 24%),
linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
/* صفحه باید از زیر منوی fixed شروع شود؛ فاصله اضافه بالای هیرو حذف شده است */
.polyurethane-page #header {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, .82) 0%,
rgba(0, 0, 0, .58) 48%,
rgba(0, 0, 0, .20) 86%,
rgba(0, 0, 0, 0) 100%
);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.polyurethane-page #header.header-scrolled {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, .96) 0%,
rgba(0, 0, 0, .88) 55%,
rgba(0, 0, 0, .58) 84%,
rgba(0, 0, 0, .12) 100%
);
box-shadow: 0 10px 28px rgba(0,0,0,.20);
}
.pu-hero {
position: relative;
min-height: 66vh;
padding: 76px 0 38px;
margin-top: 0;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
background:
linear-gradient(115deg, rgba(5, 12, 30, .88) 0%, rgba(14, 28, 62, .72) 42%, rgba(38, 59, 143, .46) 100%),
url("../img/bg/پلی-یورتان--چیست.png") center center / cover no-repeat;
}
.pu-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 82% 20%, rgba(245, 158, 11, .18), transparent 26%),
radial-gradient(circle at 18% 82%, rgba(28, 117, 188, .20), transparent 32%),
linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34));
}
.pu-hero .container {
position: relative;
z-index: 2;
}
.pu-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(330px, .78fr);
gap: 28px;
align-items: center;
}
.pu-glass {
position: relative;
overflow: hidden;
border-radius: 26px;
padding: 28px 30px 26px;
background:
linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)),
radial-gradient(circle at 12% 10%, rgba(255, 196, 81, .13), transparent 30%);
border: 1px solid rgba(255,255,255,.28);
box-shadow:
0 28px 80px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.18);
backdrop-filter: blur(6px) saturate(122%);
-webkit-backdrop-filter: blur(6px) saturate(122%);
}
.pu-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.94);
font-size: .74rem;
font-weight: 800;
line-height: 1.7;
}
.pu-hero h1 {
margin: 18px 0 16px;
color: #fff;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: clamp(0.96rem, 1.80vw, 1.80rem) !important;
font-weight: 750;
line-height: 1.55;
letter-spacing: -.35px;
text-shadow: 0 6px 24px rgba(0,0,0,.36);
}
.pu-hero__lead {
max-width: 760px;
margin: 0;
color: rgba(255,255,255,.90);
font-size: .91rem;
font-weight: 520;
line-height: 2.02;
text-align: right;
}
.pu-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.pu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 8px 16px;
border-radius: 999px;
text-decoration: none;
font-size: .82rem;
font-weight: 850;
line-height: 1.6;
transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.pu-btn--gold {
color: #161616 !important;
background: linear-gradient(90deg, #F59E0B, #ffc451);
border: 1px solid rgba(255, 196, 81, .50);
box-shadow: 0 16px 34px rgba(245, 158, 11, .28);
}
.pu-btn--ghost {
color: #fff !important;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.28);
}
.pu-btn:hover {
transform: translateY(-2px);
box-shadow: 0 20px 44px rgba(0,0,0,.22);
}
.pu-hero__proofs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.pu-proof-chip {
padding: 9px 11px;
border-radius: 14px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.88);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.pu-proof-chip:hover {
transform: translateY(-2px);
background: rgba(255,255,255,.14);
border-color: rgba(255,196,81,.38);
}
.pu-proof-chip strong {
display: block;
margin-bottom: 3px;
color: #fff;
font-size: .86rem;
font-weight: 900;
}
.pu-proof-chip span {
display: block;
font-size: .72rem;
font-weight: 620;
line-height: 1.7;
color: rgba(255,255,255,.76);
}
.pu-media-card {
overflow: hidden;
border-radius: 24px;
background: rgba(9, 17, 35, .62);
border: 1px solid rgba(255,255,255,.24);
box-shadow: 0 30px 80px rgba(0,0,0,.30);
backdrop-filter: blur(8px) saturate(125%);
-webkit-backdrop-filter: blur(8px) saturate(125%);
transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.pu-media-card:hover {
transform: translateY(-5px);
border-color: rgba(255,196,81,.38);
box-shadow: 0 38px 92px rgba(0,0,0,.36);
}
.pu-media-card__visual {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #111827;
}
.pu-media-card__visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.04) contrast(1.03);
transition: transform .45s ease;
}
.pu-media-card:hover .pu-media-card__visual img {
transform: scale(1.045);
}
.pu-play-badge {
position: absolute;
inset-inline-start: 18px;
bottom: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 7px 13px;
border-radius: 999px;
color: #fff;
background: rgba(5, 12, 30, .72);
border: 1px solid rgba(255,255,255,.20);
font-size: .74rem;
font-weight: 800;
backdrop-filter: blur(8px);
}
.pu-media-card__body {
padding: 15px 18px 17px;
}
.pu-media-card__body h2 {
margin: 0 0 8px;
color: #fff;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: 1.02rem !important;
font-weight: 900;
line-height: 1.8;
}
.pu-media-card__body p {
margin: 0;
color: rgba(255,255,255,.78);
font-size: .82rem;
font-weight: 520;
line-height: 1.95;
text-align: right;
}
.pu-section {
padding: 58px 0;
}
.pu-section--soft {
background:
radial-gradient(circle at 15% 20%, rgba(38,59,143,.045), transparent 30%),
linear-gradient(180deg, #f8fbff 0%, #eef5fd 100%);
}
.pu-section__head {
max-width: 880px;
margin: 0 auto 34px;
text-align: center;
}
.pu-section__tag {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
padding: 4px 13px;
border-radius: 999px;
color: var(--pu-brand);
background: rgba(38, 59, 143, .065);
border: 1px solid rgba(38, 59, 143, .12);
font-size: .76rem;
font-weight: 850;
line-height: 1.8;
}
.pu-section__head h2,
.pu-split__copy h2,
.pu-final-cta h2 {
margin: 0 0 12px;
color: #10284f;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size:20px !important;
font-weight: 950;
line-height: 1.8;
letter-spacing: -.25px;
}
.pu-section__head p {
max-width: 760px;
margin: 0 auto;
color: var(--pu-muted);
font-size: .92rem;
font-weight: 520;
line-height: 2.05;
text-align: center;
}
.pu-split {
display: grid;
grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr);
gap: 42px;
align-items: center;
}
.pu-split__copy p {
margin: 0 0 14px;
color: #475569;
font-size: .94rem;
line-height: 2.08;
text-align: right;
}
.pu-definition-card {
position: relative;
overflow: hidden;
padding: 28px;
border-radius: var(--pu-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.94)),
radial-gradient(circle at 15% 0%, rgba(245, 158, 11, .08), transparent 32%);
border: 1px solid var(--pu-line);
box-shadow: var(--pu-shadow);
}
.pu-definition-card::before {
content: "";
position: absolute;
top: 26px;
right: 0;
width: 4px;
height: 76px;
border-radius: 999px;
background: linear-gradient(180deg, var(--pu-brand), var(--pu-accent));
}
.pu-formula {
display: grid;
gap: 10px;
margin-top: 18px;
}
.pu-formula__item {
padding: 13px 14px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(226, 232, 240, .95);
box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.pu-formula__item:hover {
transform: translateY(-2px);
border-color: rgba(245, 158, 11, .24);
box-shadow: 0 14px 28px rgba(15, 23, 42, .075);
}
.pu-formula__item strong {
color: #111827;
font-weight: 900;
}
.pu-formula__item span {
color: #64748b;
font-size: .84rem;
line-height: 1.85;
}
.pu-type-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.pu-type-card {
position: relative;
overflow: hidden;
padding: 20px 20px;
min-height: 236px;
border-radius: 22px;
background: #fff;
border: 1px solid rgba(226, 232, 240, .96);
box-shadow: 0 16px 42px rgba(15, 23, 42, .065);
transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease;
}
.pu-type-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
background: radial-gradient(circle at 82% 0%, rgba(245, 158, 11, .10), transparent 34%);
transition: opacity .23s ease;
}
.pu-type-card:hover {
transform: translateY(-5px);
border-color: rgba(38, 59, 143, .18);
box-shadow: 0 24px 56px rgba(15, 23, 42, .10);
}
.pu-type-card:hover::before {
opacity: 1;
}
.pu-type-card__icon {
width: 46px;
height: 46px;
margin-bottom: 14px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--pu-brand);
background: rgba(38, 59, 143, .075);
border: 1px solid rgba(38, 59, 143, .13);
font-size: 1.22rem;
}
.pu-type-card h3 {
position: relative;
margin: 0 0 10px;
color: #111827;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: 1rem !important;
font-weight: 950;
line-height: 1.8;
}
.pu-type-card p {
position: relative;
margin: 0 0 15px;
color: #5b6678;
font-size: .86rem;
line-height: 2;
text-align: right;
}
.pu-type-card a,
.pu-inline-link {
position: relative;
color: var(--pu-brand) !important;
font-weight: 850;
text-decoration: none;
border-bottom: 1px solid rgba(38, 59, 143, .20);
transition: color .2s ease, border-color .2s ease;
}
.pu-type-card a:hover,
.pu-inline-link:hover {
color: var(--pu-accent) !important;
border-bottom-color: rgba(245, 158, 11, .48);
}
.pu-route-wall {
display: grid;
grid-template-columns: minmax(280px, .78fr) minmax(0, 1fr);
gap: 30px;
align-items: stretch;
}
.pu-route-panel {
padding: 28px;
border-radius: 26px;
color: #fff;
background:
linear-gradient(135deg, rgba(38, 59, 143, .94), rgba(28, 117, 188, .82)),
radial-gradient(circle at 88% 12%, rgba(245, 158, 11, .24), transparent 30%);
box-shadow: 0 24px 58px rgba(38, 59, 143, .22);
}
.pu-route-panel h2 {
color: #fff;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size:20px !important;
font-weight: 950;
line-height: 1.85;
margin: 0 0 12px;
}
.pu-route-panel p {
margin: 0;
color: rgba(255,255,255,.86);
font-size: .9rem;
line-height: 2.05;
text-align: right;
}
.pu-route-list {
display: grid;
gap: 10px;
}
.pu-route-item {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(226, 232, 240, .98);
box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
text-decoration: none;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pu-route-item:hover {
transform: translateX(-3px);
border-color: rgba(245, 158, 11, .28);
box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
}
.pu-route-item__num {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(135deg, var(--pu-brand), var(--pu-brand-2));
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif;
font-size: .80rem;
font-weight: 900;
line-height: 1;
text-align: center;
direction: ltr;
padding: 0;
text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
transform: translateY(2px);
}
.pu-route-item strong {
display: block;
color: #162033;
font-size: .82rem;
font-weight: 950;
line-height: 1.7;
}
.pu-route-item span {
display: block;
color: #64748b;
font-size: .76rem;
font-weight: 560;
line-height: 1.75;
}
.pu-route-item i {
color: var(--pu-accent);
transition: transform .22s ease;
}
.pu-route-item:hover i {
transform: translateX(-3px);
}
.pu-avoid-box {
margin-top: 34px;
padding: 22px 24px;
border-radius: 22px;
background: rgba(245, 158, 11, .08);
border: 1px solid rgba(245, 158, 11, .18);
}
.pu-avoid-box h3 {
margin: 0 0 8px;
color: #7a4f00;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif !important;
font-size: 1rem !important;
font-weight: 950;
line-height: 1.8;
}
.pu-avoid-box p {
margin: 0;
color: #475569;
font-size: .9rem;
line-height: 2;
text-align: right;
}
.pu-blog-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.pu-blog-card {
display: block;
padding: 20px 20px 18px;
min-height: 160px;
border-radius: 22px;
background:
linear-gradient(180deg, #fff, #f8fbff);
border: 1px solid rgba(226, 232, 240, .96);
box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
text-decoration: none;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pu-blog-card:hover {
transform: translateY(-4px);
border-color: rgba(38, 59, 143, .18);
box-shadow: 0 22px 48px rgba(15, 23, 42, .09);
}
.pu-blog-card span {
display: inline-flex;
margin-bottom: 10px;
padding: 4px 10px;
border-radius: 999px;
color: var(--pu-brand);
background: rgba(38, 59, 143, .065);
font-size: .72rem;
font-weight: 850;
}
.pu-blog-card strong {
display: block;
margin-bottom: 8px;
color: #162033;
font-size: .92rem;
font-weight: 950;
line-height: 1.8;
}
.pu-blog-card small {
display: block;
color: #64748b;
font-size: .76rem;
line-height: 1.8;
}
.pu-faq {
display: grid;
gap: 10px;
max-width: 980px;
margin: 0 auto;
}
.pu-faq details {
padding: 15px 18px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(226, 232, 240, .95);
box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}
.pu-faq summary {
cursor: pointer;
color: #162033;
font-size: .92rem;
font-weight: 900;
line-height: 1.8;
}
.pu-faq p {
margin: 10px 0 0;
color: #64748b;
font-size: .86rem;
line-height: 2;
text-align: right;
}
.pu-final-cta {
position: relative;
padding: 0;
color: #fff;
background: linear-gradient(135deg, #1b2d76 0%, #1C75BC 64%, #263B8F 100%);
overflow: hidden;
}
.pu-final-cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 24%, rgba(255,255,255,.16), transparent 28%),
radial-gradient(circle at 78% 82%, rgba(245,158,11,.22), transparent 32%);
pointer-events: none;
}
.pu-final-cta__inner {
position: relative;
z-index: 1;
padding: 58px 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
}
.pu-final-cta h2 {
color: #fff;
margin-bottom: 10px;
}
.pu-final-cta p {
max-width: 820px;
margin: 0;
color: rgba(255,255,255,.86);
font-size: .92rem;
line-height: 2.05;
text-align: right;
}
.pu-formula__item--equation {
background:
linear-gradient(180deg, #ffffff, #fffaf0),
radial-gradient(circle at 90% 0%, rgba(245, 158, 11, .12), transparent 32%);
border-color: rgba(245, 158, 11, .22);
}
.pu-equation {
display: block;
margin: 8px 0 6px;
padding: 10px 12px;
direction: ltr;
text-align: center;
color: #10284f !important;
font-family: "Vazirmatn", "Vazir", Tahoma, sans-serif;
font-size: .96rem !important;
line-height: 1.9 !important;
background: rgba(38, 59, 143, .045);
border: 1px solid rgba(38, 59, 143, .10);
border-radius: 14px;
}
.pu-type-card h3 a {
color: inherit !important;
border-bottom: 0;
}
.pu-type-card h3 a:hover {
color: var(--pu-brand) !important;
}
@media (max-width: 1199.98px) {
.pu-hero__grid,
.pu-split,
.pu-route-wall {
grid-template-columns: 1fr;
}
.pu-media-card {
max-width: 680px;
}
}
@media (max-width: 991.98px) {
.pu-hero {
min-height: auto;
padding: 74px 0 38px;
}
.pu-glass {
padding: 26px 22px;
}
.pu-hero__proofs,
.pu-type-grid,
.pu-blog-strip {
grid-template-columns: 1fr;
}
.pu-section {
padding: 52px 0;
}
.pu-final-cta__inner {
grid-template-columns: 1fr;
text-align: center;
}
.pu-final-cta p {
text-align: center;
}
}
@media (max-width: 575.98px) {
.pu-hero__actions .pu-btn,
.pu-final-cta .pu-btn {
width: 100%;
}
.pu-route-item {
grid-template-columns: 40px minmax(0, 1fr);
}
.pu-route-item i {
display: none;
}
.pu-definition-card,
.pu-route-panel {
padding: 22px 18px;
}
}
/* =========================================================
GLOBAL TABLE STYLE | Sepehr Donya
========================================================= */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: #f4f8ff;
border: 1px solid rgba(56, 56, 56, 0.08);
border-radius: 18px;
box-shadow:
0 12px 34px rgba(15, 23, 42, 0.06),
0 2px 8px rgba(15, 23, 42, 0.03);
}
/* ================= THEAD ================= */
table thead {
background:
linear-gradient(
180deg,
rgba(56,56,56,0.96),
rgba(42,42,42,0.96)
);
}
table thead th {
padding: 16px 18px;
color: #ffffff;
font-family: "Vazirmatn","Vazir",Tahoma,sans-serif !important;
font-size: 0.82rem;
font-weight: 900;
line-height: 1.8;
text-align: right;
border-left: 1px solid rgba(255,255,255,0.06);
}
/* ================= TBODY ================= */
table tbody tr {
transition:
background 0.18s ease,
transform 0.18s ease;
}
table tbody td {
padding: 16px 18px;
color: #383838;
background: #f4f8ff;
font-family: "Vazirmatn","Vazir",Tahoma,sans-serif !important;
font-size: 0.80rem;
font-weight: 500;
line-height: 2;
text-align: right;
border-top: 1px solid rgba(56,56,56,0.06);
border-left: 1px solid rgba(56,56,56,0.04);
}
/* ================= ZEBRA ================= */
table tbody tr:nth-child(even) td {
background: #eef5ff;
}
/* ================= HOVER ================= */
table tbody tr:hover td {
background: rgba(255, 196, 81, 0.18);
color: #202020;
}
/* ================= STRONG ================= */
table tbody strong {
color: #202020;
font-weight: 900;
}
/* ================= RESPONSIVE ================= */
.table-responsive {
border-radius: 18px;
overflow: hidden;
}
/* ================= MOBILE ================= */
@media (max-width: 767.98px) {
table thead {
display: none;
}
table,
table tbody,
table tr,
table td {
display: block;
width: 100%;
}
table tr {
margin-bottom: 14px;
border-radius: 16px;
overflow: hidden;
background: #f4f8ff;
box-shadow:
0 10px 24px rgba(15,23,42,0.05);
}
table td {
position: relative;
padding:
12px 14px
12px 42%;
min-height: 48px;
border:
none;
border-bottom:
1px solid rgba(56,56,56,0.05);
}
table td:last-child {
border-bottom: none;
}
table td::before {
content: attr(data-label);
position: absolute;
top: 12px;
right: 14px;
width: 36%;
color: #383838;
font-size: 0.72rem;
font-weight: 900;
line-height: 1.8;
}
}
/**/
.sd-sim-intel{
direction:rtl;
padding:58px 18px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
font-family:"Vazirmatn","Vazir",Tahoma,sans-serif;
}
.sd-sim-intel,
.sd-sim-intel *{
font-family:"Vazirmatn","Vazir",Tahoma,sans-serif !important;
box-sizing:border-box;
}
.sd-sim-intel__box{
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:26px;
align-items:stretch;
padding:24px;
border-radius:28px;
background:
radial-gradient(circle at 12% 8%,rgba(38,59,143,.07),transparent 30%),
linear-gradient(135deg,rgba(255,255,255,.94),rgba(248,251,255,.88));
border:1px solid rgba(38,59,143,.10);
box-shadow:0 22px 58px rgba(15,23,42,.065);
}
.sd-sim-intel__head{
margin-bottom:18px;
}
.sd-sim-intel__head span{
display:inline-flex;
padding:5px 12px;
border-radius:999px;
color:#263B8F;
background:rgba(38,59,143,.07);
border:1px solid rgba(38,59,143,.12);
font-size:11px;
font-weight:800;
}
.sd-sim-intel__head h2{
margin:12px 0 8px;
color:#0f172a;
font-size:19px !important;
font-weight:900;
line-height:1.75;
}
.sd-sim-intel__head p{
margin:0;
max-width:620px;
color:#64748b;
font-size:13px;
font-weight:500;
line-height:2;
text-align:justify;
}
.sd-sim-intel__list{
position:relative;
}
.sd-sim-intel__list::before{
content:"";
position:absolute;
top:20px;
bottom:20px;
right:20px;
width:2px;
background:linear-gradient(180deg,rgba(38,59,143,.14),rgba(28,117,188,.12),rgba(255,196,81,.38));
}
.sd-sim-intel__row{
position:relative;
display:grid;
grid-template-columns:50px 1fr;
gap:14px;
align-items:center;
padding:11px 0;
text-decoration:none;
opacity:.52;
transform:translateY(8px);
transition:opacity .55s ease,transform .55s ease;
}
.sd-sim-intel__row::before{
content:"";
position:absolute;
inset:4px 36px 4px -4px;
border-radius:18px;
background:rgba(255,255,255,.68);
border:1px solid rgba(255,255,255,.8);
opacity:0;
transform:scale(.985);
transition:opacity .55s ease,transform .55s ease,box-shadow .55s ease;
z-index:0;
}
.sd-sim-intel__row > *{
position:relative;
z-index:1;
}
.sd-sim-intel__row.is-active,
.sd-sim-intel__row.active,
.sd-sim-intel__row:hover{
opacity:1;
transform:translateY(0);
}
.sd-sim-intel__row.is-active::before,
.sd-sim-intel__row.active::before,
.sd-sim-intel__row:hover::before{
opacity:1;
transform:scale(1);
box-shadow:0 12px 32px rgba(15,23,42,.045);
}
.sd-sim-intel__no{
width:40px;
height:40px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
color:#263B8F;
background:#eef5ff;
border:1px solid rgba(38,59,143,.14);
box-shadow:0 0 0 7px #fff;
font-size:11px;
font-weight:900;
transition:all .55s ease;
}
.sd-sim-intel__row.is-active .sd-sim-intel__no,
.sd-sim-intel__row.active .sd-sim-intel__no,
.sd-sim-intel__row:hover .sd-sim-intel__no{
color:#fff;
background:linear-gradient(135deg,#263B8F,#1C75BC);
border-color:rgba(255,196,81,.7);
box-shadow:
0 0 0 7px #fff,
0 0 22px rgba(28,117,188,.45),
0 0 44px rgba(255,196,81,.20);
}
.sd-sim-intel__row h3{
margin:0 0 3px;
color:#111827;
font-size:14px !important;
font-weight:900;
line-height:1.85;
transition:color .45s ease;
}
.sd-sim-intel__row p{
margin:0;
color:#64748b;
font-size:12px;
font-weight:500;
line-height:1.9;
}
.sd-sim-intel__row.is-active h3,
.sd-sim-intel__row.active h3,
.sd-sim-intel__row:hover h3{
color:#263B8F;
}
.sd-sim-intel__right{
min-height:100%;
}
.sd-sim-video{
position:relative;
height:100%;
min-height:430px;
border-radius:24px;
overflow:hidden;
background:#081127;
border:1px solid rgba(38,59,143,.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 46px rgba(15,23,42,.12);
}
.sd-sim-video video{
width:100%;
height:100%;
display:block;
object-fit:cover;
opacity:.92;
}
.sd-sim-video::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(8,17,39,.05),rgba(8,17,39,.36)),
radial-gradient(circle at 70% 22%,rgba(255,196,81,.12),transparent 28%);
pointer-events:none;
}
.sd-sim-video__overlay{
position:absolute;
right:18px;
bottom:18px;
z-index:2;
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 13px;
border-radius:999px;
color:#eaf2ff;
background:rgba(8,17,39,.62);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
font-size:11px;
font-weight:800;
}
.sd-sim-video__dot{
width:8px;
height:8px;
border-radius:999px;
background:#ffc451;
box-shadow:0 0 18px rgba(255,196,81,.85);
animation:sdSoftLive 2.4s ease-in-out infinite;
}
@keyframes sdSoftLive{
0%,100%{opacity:.55;transform:scale(.86);}
50%{opacity:1;transform:scale(1.08);}
}
@media(max-width:992px){
.sd-sim-intel__box{
grid-template-columns:1fr;
}
.sd-sim-video{
min-height:320px;
}
}
@media(max-width:640px){
.sd-sim-intel{
padding:42px 14px;
}
.sd-sim-intel__box{
padding:18px;
border-radius:22px;
}
.sd-sim-intel__row{
grid-template-columns:44px 1fr;
gap:12px;
}
.sd-sim-intel__no{
width:36px;
height:36px;
}
.sd-sim-video{
min-height:240px;
}
}
/*شبیه سازی*/
/* =========================================================
PREMIUM DIAGNOSTIC INTERACTION
========================================================= */
.sd-sim-intel{
padding:42px 18px 34px;
background:#fff;
}
.sd-sim-intel__box{
max-width:1180px;
padding:0;
border:none;
box-shadow:none;
background:transparent;
display:grid;
grid-template-columns:1fr 420px;
gap:44px;
align-items:center;
}
/* سمت چپ/راست همتراز با سکشن پایین */
.sd-sim-intel__left{
padding:0;
}
.sd-sim-intel__right{
display:flex;
align-items:center;
justify-content:center;
}
/* ویدئو شبیه پلیر کوچکتر */
.sd-sim-video{
width:100%;
max-width:420px;
height:auto;
min-height:0;
aspect-ratio:16 / 10;
border-radius:22px;
overflow:hidden;
background:#081127;
border:1px solid rgba(38,59,143,.14);
box-shadow:0 18px 44px rgba(15,23,42,.12);
}
.sd-sim-video video{
width:100%;
height:100%;
object-fit:cover;
}
/* لیست جمعوجورتر */
.sd-sim-intel__head{
margin-bottom:14px;
}
.sd-sim-intel__head h2{
font-size:19px !important;
margin:10px 0 6px;
}
.sd-sim-intel__head p{
font-size:12.5px;
line-height:1.9;
}
.sd-sim-intel__row{
padding:9px 12px 9px 0;
min-height:auto;
}
.sd-sim-intel__row h3{
font-size:13.5px !important;
margin-bottom:2px;
}
.sd-sim-intel__row p{
font-size:11.8px;
line-height:1.8;
}
.sd-sim-intel__no{
width:36px;
height:36px;
font-size:10.5px;
}
/* هماهنگی فاصله با سکشن بعدی */
.sd-sim-intel + section{
margin-top:0;
}
@media(max-width:992px){
.sd-sim-intel__box{
grid-template-columns:1fr;
gap:26px;
}
.sd-sim-video{
max-width:100%;
}
}
/* ============================================================
Final upload safeguards for isocyanate(10).html
Persian RTL, Vazirmatn typography, readable header/footer, controlled B2B UI
============================================================ */
body.iso-page,
body.iso-page :where(div,p,span,h1,h2,h3,h4,h5,h6,a,li,ul,ol,input,textarea,button,table,thead,tbody,tr,th,td,label,small,strong,b,nav,section,article,aside,footer,header){
font-family:"Vazirmatn","Vazir",Tahoma,sans-serif !important;
direction:rtl;
}
body.iso-page{font-size:15px !important;line-height:1.9;text-align:right;}
body.iso-page :where(h1,h2,h3,h4,h5,h6,.iso-hero h1,.iso-head h2,.iso-section h2,.iso-cta h2,.iso-compare-card h3,.iso-formula b){
font-size:20px !important;
line-height:1.75 !important;
letter-spacing:0 !important;
}
body.iso-page :where(p,li,td,th,.iso-card p,.iso-grade p,.iso-process p,.iso-faq p,.iso-head p,.iso-hero__lead,.iso-cta p,.iso-reaction span,.iso-mini-list span){
font-size:15px !important;
line-height:1.95 !important;
}
body.iso-page :where(.iso-pill,.iso-btn,.iso-micro a,.iso-chip-list span,.iso-formula strong,.iso-formula small){font-size:13px !important;line-height:1.8 !important;}
#header .navbar a,
#header .navbar a:focus,
#header .navbar .dropdown ul a{
color:#fff !important;
font-family:"Vazirmatn","Vazir",Tahoma,sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
text-shadow:0 1px 2px rgba(0,0,0,.45);
}
#header .navbar a:hover,
#header .navbar .active,
#header .navbar li:hover > a{color:#ffc451 !important;}
.sepehr-donya-footer,
.sepehr-donya-footer *:not(i){font-family:"Vazirmatn","Vazir",Tahoma,sans-serif !important;}
.sepehr-donya-footer{background:#07111f;color:rgba(255,255,255,.78);font-size:14px;line-height:1.9;}
.sepehr-donya-footer .sepehr-heading{color:#fff;font-size:16px !important;line-height:1.8;font-weight:700;margin-bottom:10px;}
.sepehr-donya-footer a{color:rgba(255,255,255,.88) !important;text-decoration:none;}
.sepehr-donya-footer a:hover{color:#f2c86a !important;}
.sepehr-donya-footer ul{padding:0;margin:0;list-style:none;display:grid;gap:7px;}
.sepehr-donya-footer p{font-size:14px !important;line-height:1.9;margin:0 0 10px;}
.sepehr-donya-footer .footer-divider{border-color:rgba(255,255,255,.12);opacity:1;}
.sepehr-donya-footer .social-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;}
.sepehr-donya-footer .social-links a{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);}
@media(max-width:575.98px){
body.iso-page :where(h1,h2,h3,h4,h5,h6,.iso-hero h1,.iso-head h2,.iso-section h2,.iso-cta h2){font-size:19px !important;}
body.iso-page :where(p,li,td,th,.iso-hero__lead){font-size:14px !important;}
}
/* ============================================================
Page Specific: Automotive / Transportation Seat Foam Product
Filename: portfolio-chair-outo-saft.html
Safe scoped overrides under .transport-foam-page
============================================================ */
.transport-foam-page,
.transport-foam-page *{
font-family:"Vazirmatn","Vazir",Tahoma,Arial,sans-serif !important;
box-sizing:border-box;
}
.transport-foam-page{
direction:rtl !important;
text-align:right !important;
margin:0 !important;
color:#475569;
background:#fff;
font-size:15px !important;
line-height:1.95 !important;
--tf-brand:#263B8F;
--tf-brand-2:#1C75BC;
--tf-gold:#ffc451;
--tf-accent:#F59E0B;
--tf-green:#20c46b;
--tf-ink:#101828;
--tf-muted:#64748b;
--tf-soft:#f6f8fc;
--tf-line:rgba(38,59,143,.12);
--tf-shadow:0 16px 42px rgba(15,23,42,.075);
}
.transport-foam-page h1,
.transport-foam-page h2,
.transport-foam-page h3,
.transport-foam-page h4,
.transport-foam-page h5,
.transport-foam-page h6{
font-family:"Vazirmatn","Vazir",Tahoma,Arial,sans-serif !important;
font-weight:850 !important;
letter-spacing:-.25px;
}
.transport-foam-page h1{font-size:clamp(1.12rem,1.65vw,1.24rem) !important;line-height:1.9 !important;}
.transport-foam-page h2{font-size:clamp(1.05rem,1.50vw,1.23rem) !important;line-height:1.85 !important;}
.transport-foam-page h3{font-size:.92rem !important;line-height:1.75 !important;}
.transport-foam-page p,
.transport-foam-page a,
.transport-foam-page li,
.transport-foam-page span,
.transport-foam-page td,
.transport-foam-page th,
.transport-foam-page button{font-size:min(.94rem,20px);}
.transport-foam-page a{text-decoration:none;}
.transport-foam-page img{max-width:100%;height:auto;}
.tf-main{overflow:hidden;background:#fff;}
/* Header readability */
.transport-foam-page #header{background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.68),rgba(0,0,0,.12)) !important;box-shadow:0 10px 26px rgba(0,0,0,.18) !important;}
.transport-foam-page #header .navbar a,
.transport-foam-page #header .navbar a:focus{color:#fff !important;font-size:13px !important;font-weight:600 !important;}
.transport-foam-page #header .navbar .active,
.transport-foam-page #header .navbar a:hover,
.transport-foam-page #header .navbar li:hover>a{color:#ffc451 !important;}
.transport-foam-page #header .navbar .dropdown ul{background:rgba(8,14,30,.94) !important;border:1px solid rgba(255,255,255,.15) !important;}
.transport-foam-page #header .navbar .dropdown ul a{color:#fff !important;background:transparent !important;}
/* Hero */
.tf-hero{position:relative;min-height:620px;display:flex;align-items:center;overflow:hidden;padding:104px 0 70px;isolation:isolate;background:#07111f;}
.tf-hero__bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,10,24,.90) 0%,rgba(9,23,54,.70) 48%,rgba(10,18,35,.25) 100%),radial-gradient(circle at 18% 24%,rgba(245,158,11,.18),transparent 30%),radial-gradient(circle at 80% 18%,rgba(28,117,188,.22),transparent 34%),url("../img/portfolio/portfolio-6-1.jpg") center center/cover no-repeat;transform:scale(1.01);}
.tf-hero::after{content:"";position:absolute;inset:auto 0 0;height:28%;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 94%);}
.tf-hero__container{position:relative;z-index:2;}
.tf-hero__glass{max-width:760px;padding:clamp(22px,3vw,36px);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.065)),radial-gradient(circle at 8% 0%,rgba(255,196,81,.12),transparent 34%);border:1px solid rgba(255,255,255,.26);box-shadow:0 24px 72px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);}
.tf-eyebrow,.tf-label{display:inline-flex;align-items:center;gap:7px;width:fit-content;padding:6px 14px;border-radius:999px;font-size:.72rem !important;font-weight:850;line-height:1.7;}
.tf-eyebrow{margin-bottom:10px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);}
.tf-hero h1{margin:0 0 13px;color:#fff !important;text-shadow:0 4px 22px rgba(0,0,0,.30);}
.tf-hero p{max-width:720px;margin:0;color:rgba(255,255,255,.86);font-size:.88rem !important;line-height:2.05;text-align:right;}
.tf-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.tf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:8px 17px;border-radius:999px;font-size:.79rem !important;font-weight:850;line-height:1.7;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;}
.tf-btn:hover{transform:translateY(-1px);}
.tf-btn--primary{color:#101828 !important;background:linear-gradient(90deg,#F59E0B,#ffc451);border:1px solid rgba(255,196,81,.38);box-shadow:0 12px 26px rgba(245,158,11,.20);}
.tf-btn--primary:hover{color:#101828 !important;background:#fff8e5;}
.tf-btn--ghost{color:#fff !important;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);}
.tf-btn--ghost:hover{color:#ffc451 !important;background:rgba(255,255,255,.13);}
.tf-btn--whatsapp{color:#fff !important;background:rgba(32,196,107,.17);border:1px solid rgba(32,196,107,.40);box-shadow:0 12px 28px rgba(32,196,107,.14);}
.tf-btn--whatsapp i{color:#62f0aa;font-size:.94rem !important;}
.tf-btn--whatsapp:hover{background:rgba(32,196,107,.25);border-color:rgba(32,196,107,.58);color:#fff !important;}
.tf-btn--dark{color:#fff !important;background:#172033;border:1px solid rgba(255,255,255,.12);}
.tf-btn--dark:hover{background:#24324a;color:#ffc451 !important;}
.tf-micro-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.tf-micro-nav a{color:rgba(255,255,255,.82);background:rgba(0,0,0,.58);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 11px;font-size:.70rem !important;font-weight:750;}
.tf-micro-nav a:hover{color:#ffc451;background:rgba(255,255,255,.10);}
.tf-hero-card{position:relative;max-width:560px;margin-inline:auto;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);box-shadow:0 24px 70px rgba(0,0,0,.27);}
.tf-hero-card img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;}
.tf-hero-card__caption{position:absolute;right:16px;left:16px;bottom:16px;padding:14px 16px;border-radius:18px;background:rgba(6,12,28,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.tf-hero-card__caption strong,.tf-hero-card__caption span{display:block;color:#fff;}
.tf-hero-card__caption strong{font-size:.84rem !important;margin-bottom:4px;}
.tf-hero-card__caption span{font-size:.74rem !important;color:rgba(255,255,255,.78);line-height:1.8;}
/* Sections */
.tf-section{position:relative;padding:50px 0;overflow:hidden;}
.tf-position{background:radial-gradient(circle at 10% 12%,rgba(38,59,143,.055),transparent 30%),linear-gradient(180deg,#fff 0%,#f8fbff 100%);}
.tf-label{margin-bottom:9px;color:var(--tf-brand);background:rgba(38,59,143,.065);border:1px solid rgba(38,59,143,.12);}
.tf-lead,.tf-muted,.tf-section-head p,.tf-cta-content p{margin:0;color:#475569;font-size:.84rem !important;font-weight:500;line-height:2;text-align:right;}
.tf-lead{color:#25324a;font-size:.90rem !important;font-weight:650;margin-bottom:10px;}
.tf-section-head{max-width:860px;margin:0 auto 25px;text-align:center;}
.tf-section-head .tf-label{margin-inline:auto;}
.tf-section-head h2{margin:0 0 12px;color:#101828;}
.tf-section-head p{max-width:760px;margin:0 auto;text-align:center;}
.tf-executive{background:linear-gradient(180deg,#f8fbff,#fff);}
.tf-executive-box{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;padding:22px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.58)),radial-gradient(circle at 8% 0%,rgba(255,196,81,.13),transparent 30%);border:1px solid rgba(38,59,143,.10);box-shadow:var(--tf-shadow);}
.tf-executive-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.tf-executive-flow article{min-height:84px;padding:13px;border-radius:17px;background:rgba(255,255,255,.78);border:1px solid rgba(38,59,143,.10);}
.tf-executive-flow strong{display:block;color:#101828;font-size:.82rem !important;font-weight:950;margin-bottom:5px;}
.tf-executive-flow span{display:block;color:#64748b;font-size:.76rem !important;line-height:1.8;}
.tf-decision{background:radial-gradient(circle at 84% 10%,rgba(28,117,188,.07),transparent 34%),linear-gradient(180deg,#fff 0%,#f7faff 100%);}
.tf-decision-tree{padding:20px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.54)),radial-gradient(circle at 10% 10%,rgba(255,196,81,.12),transparent 30%);border:1px solid rgba(38,59,143,.10);box-shadow:var(--tf-shadow);}
.tf-tree-root,.tf-tree-branches a,.tf-tree-flow span,.tf-tree-result{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:18px;padding:9px 12px;min-height:40px;font-size:.78rem !important;font-weight:900;line-height:1.65;transition:transform .18s ease,background .18s ease,border-color .18s ease;}
.tf-tree-root{width:min(100%,420px);margin:0 auto 18px;color:#fff;background:linear-gradient(135deg,var(--tf-brand),var(--tf-brand-2));box-shadow:0 12px 24px rgba(38,59,143,.16);}
.tf-tree-branches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;}
.tf-tree-branches a{color:#17325f;background:rgba(255,255,255,.78);border:1px solid rgba(38,59,143,.12);}
.tf-tree-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:10px;}
.tf-tree-flow span{color:#17325f;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.14);}
.tf-tree-result{margin-top:12px;color:#101828;background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(255,255,255,.70),rgba(28,117,188,.10));border:1px solid rgba(245,158,11,.16);}
.tf-tree-branches a:hover,.tf-tree-flow span:hover{transform:translateY(-1px);background:#f8fbff;border-color:rgba(245,158,11,.22);}
.tf-performance{background:linear-gradient(180deg,#f8fbff,#fff);}
.tf-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.tf-metric-grid article{min-height:176px;padding:18px 17px;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid rgba(38,59,143,.10);box-shadow:0 12px 26px rgba(15,23,42,.045);transition:transform .18s ease,border-color .18s ease;}
.tf-metric-grid article:hover{transform:translateY(-1px);border-color:rgba(245,158,11,.22);}
.tf-metric-grid span{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--tf-brand),var(--tf-brand-2));font-size:.80rem !important;font-weight:950;margin-bottom:10px;}
.tf-metric-grid h3{margin:0 0 8px;color:#101828;}
.tf-metric-grid p{margin:0;color:#64748b;font-size:.78rem !important;line-height:1.9;text-align:right;}
.tf-table-section{background:radial-gradient(circle at 12% 16%,rgba(38,59,143,.05),transparent 32%),linear-gradient(180deg,#fff 0%,#f8fbff 100%);}
.tf-table-wrap{overflow:hidden;border-radius:20px;border:1px solid rgba(38,59,143,.10);box-shadow:0 14px 34px rgba(15,23,42,.055);background:#fff;}
.tf-table{margin:0;}
.tf-table th{color:#17325f;background:#f7faff;border-color:rgba(38,59,143,.08) !important;font-size:.80rem !important;font-weight:900;line-height:1.8;padding:14px 16px;text-align:right;}
.tf-table td{color:#526174;border-color:rgba(38,59,143,.07) !important;font-size:.78rem !important;font-weight:500;line-height:1.9;padding:14px 16px;text-align:right;}
.tf-table strong{color:#101828;font-weight:950;}
.tf-table a{color:#263B8F !important;font-weight:850;}
.tf-table a:hover{color:#F59E0B !important;}
.tf-table tbody tr:hover td{background:#eef8ff;color:#233b57;}
.tf-table tbody tr:hover td:first-child{background:#fff7df;}
.tf-troubleshooting{background:#fff;}
.tf-problem-lines{position:relative;display:grid;gap:10px;padding-right:22px;}
.tf-problem-lines::before{content:"";position:absolute;top:10px;right:7px;bottom:10px;width:2px;border-radius:99px;background:linear-gradient(180deg,var(--tf-brand),rgba(255,196,81,.85));}
.tf-problem-lines a{position:relative;display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:center;min-height:56px;padding:11px 16px;border-radius:17px;color:#17325f;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid rgba(38,59,143,.10);transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.tf-problem-lines a::before{content:"";position:absolute;right:-21px;top:50%;width:12px;height:12px;border-radius:50%;transform:translateY(-50%);background:#ffc451;border:3px solid #fff;box-shadow:0 0 0 1px rgba(245,158,11,.34);}
.tf-problem-lines a:hover{transform:translateY(-1px);background:#f8fbff;border-color:rgba(245,158,11,.22);}
.tf-problem-lines strong{color:#101828;font-size:.82rem !important;font-weight:950;line-height:1.7;}
.tf-problem-lines span{color:#64748b;font-size:.76rem !important;font-weight:500;line-height:1.85;}
.tf-related{background:linear-gradient(180deg,#f8fbff,#fff);}
.tf-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.tf-related-grid a{min-height:94px;display:block;padding:16px 17px;border-radius:18px;color:#17325f;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid rgba(38,59,143,.10);box-shadow:0 10px 24px rgba(15,23,42,.04);transition:transform .18s ease,border-color .18s ease;background .18s ease;}
.tf-related-grid a:hover{transform:translateY(-1px);border-color:rgba(245,158,11,.22);background:#fff;}
.tf-related-grid strong{display:block;margin-bottom:7px;color:#101828;font-size:.83rem !important;font-weight:950;}
.tf-related-grid span{display:block;color:#64748b;font-size:.75rem !important;line-height:1.85;}
.tf-final-cta{padding:56px 0;background:radial-gradient(circle at 8% 24%,rgba(38,59,143,.06),transparent 28%),linear-gradient(180deg,#fff 0%,#f7faff 100%);border-top:1px solid rgba(38,59,143,.08);}
.tf-cta-box{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:center;padding:26px;border-radius:24px;background:linear-gradient(135deg,#fff,#f8fbff);border:1px solid rgba(38,59,143,.10);box-shadow:var(--tf-shadow);}
.tf-cta-content h2{margin:0 0 12px;color:#0f1f3d;}
.tf-cta-actions{display:grid;gap:10px;}
.tf-cta-actions .tf-btn{width:100%;}
/* Static footer */
.transport-foam-page .tf-footer{background:radial-gradient(circle at 10% 0%,rgba(255,196,81,.14),transparent 30%),linear-gradient(135deg,#07111f,#101828) !important;color:rgba(255,255,255,.80) !important;padding:46px 0 20px;border-top:1px solid rgba(255,255,255,.08);}
.tf-footer-grid{display:grid;grid-template-columns:1.35fr .9fr .9fr 1.05fr;gap:24px;align-items:start;}
.tf-footer-logo img{max-height:48px !important;width:auto !important;margin-bottom:13px;}
.tf-footer-brand p{margin:0 0 12px;color:rgba(255,255,255,.72);font-size:.82rem !important;line-height:2;text-align:right;}
.tf-footer-whatsapp{display:inline-flex;align-items:center;gap:7px;color:#fff !important;font-size:.82rem !important;font-weight:800;}
.tf-footer-links h3{margin:0 0 12px;color:#fff !important;font-size:.94rem !important;line-height:1.8;}
.tf-footer-links a{display:block;margin:7px 0;color:rgba(255,255,255,.80) !important;font-size:.80rem !important;font-weight:650;line-height:1.9;}
.tf-footer-links a:hover,.tf-footer-whatsapp:hover{color:#ffc451 !important;}
.tf-footer-map{display:flex;align-items:center;justify-content:center;min-height:160px;}
.transport-foam-page .tf-footer-map img{display:block !important;width:min(100%,420px) !important;max-width:420px !important;max-height:none !important;height:auto !important;opacity:.82;filter:drop-shadow(0 14px 28px rgba(0,0,0,.24));}
.tf-footer-contact{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.68);}
.tf-footer-contact span,.tf-footer-contact a{font-size:.78rem !important;color:rgba(255,255,255,.72) !important;}
.tf-footer-bottom{display:flex;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.56);}
.tf-footer-bottom span{font-size:.75rem !important;}
@media(max-width:1199.98px){.tf-metric-grid{grid-template-columns:repeat(2,1fr)}.tf-tree-flow{grid-template-columns:repeat(3,1fr)}.tf-executive-box,.tf-cta-box{grid-template-columns:1fr}.tf-footer-grid{grid-template-columns:1fr 1fr}.tf-footer-map{grid-column:1/-1;}}
@media(max-width:991.98px){.tf-hero{min-height:auto;padding:102px 0 54px}.tf-hero-card{max-width:460px}.tf-executive-flow{grid-template-columns:repeat(2,1fr)}.tf-tree-branches{grid-template-columns:repeat(2,1fr)}.tf-problem-lines a{grid-template-columns:1fr}.tf-related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:575.98px){.transport-foam-page{font-size:14px !important}.tf-hero__actions,.tf-cta-actions{display:grid}.tf-btn{width:100%;white-space:normal}.tf-metric-grid,.tf-related-grid,.tf-footer-grid,.tf-executive-flow{grid-template-columns:1fr}.tf-tree-branches,.tf-tree-flow{grid-template-columns:1fr}.tf-table thead{display:none}.tf-table,.tf-table tbody,.tf-table tr,.tf-table td{display:block;width:100%}.tf-table tbody tr{border-top:1px solid rgba(148,163,184,.22)}.tf-table tbody td{border-top:0;padding:10px 14px}.tf-table tbody td::before{content:attr(data-label);display:block;color:#111827;font-weight:850;margin-bottom:3px}.tf-footer-bottom{display:grid;text-align:center;justify-content:center}.tf-footer-map{min-height:120px}.transport-foam-page .tf-footer-map img{max-width:300px !important}}