@font-face {
font-weight: normal;
font-style: normal;
font-family: "woodmart-font";
src: url("//fooladarand.com/wp-content/themes/arandf/fonts/woodmart-font-1-400.woff2?v=8.3.2") format("woff2");
}
@font-face {
font-family: "star";
font-weight: 400;
font-style: normal;
src: url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}
@font-face {
font-family: "WooCommerce";
font-weight: 400;
font-style: normal;
src: url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//fooladarand.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}
:root {
--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
--wd-text-font-weight: 400;
--wd-text-color: #767676;
--wd-text-font-size: 14px;
--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
--wd-title-font-weight: 600;
--wd-title-color: #242424;
--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight: 500;
--wd-entities-title-color: #333333;
--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight: 600;
--wd-widget-title-transform: uppercase;
--wd-widget-title-color: #333;
--wd-widget-title-font-size: 16px;
--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight: 700;
--wd-header-el-transform: uppercase;
--wd-header-el-font-size: 13px;
--wd-otl-style: dotted;
--wd-otl-width: 2px;
--wd-primary-color: rgb(105,13,172);
--wd-alternative-color: rgb(234,224,255);
--btn-default-bgcolor: #f7f7f7;
--btn-default-bgcolor-hover: #efefef;
--btn-accented-bgcolor: rgb(105,13,172);
--btn-accented-bgcolor-hover: rgb(105,13,172);
--wd-form-brd-width: 2px;
--notices-success-bg: #459647;
--notices-success-color: #fff;
--notices-warning-bg: #E0B252;
--notices-warning-color: #fff;
--wd-link-color: #333333;
--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
background-color: #111111;
background-image: none;
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
}
.wd-promo-popup-wrap {
--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
object-fit: cover;
object-position: center center;
}
.wd-footer {
background-color: rgb(41,41,41);
background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}
.wd-page-title {
background-color: #0a0a0a;
}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: 100;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakhLahzeh-FamilyVF.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-Thin.woff') format('woff');}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: 200;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakh-UltraLight.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-UltraLight.woff') format('woff');}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: 300;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakh-Light.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-Light.woff') format('woff');}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: 500;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakh-Medium.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-Medium.woff') format('woff');}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: 800;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakh-ExtraBold.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-ExtraBold.woff') format('woff');}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: 900;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakh-Black.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-Black.woff') format('woff');}
@font-face {font-family: YekanBakh;font-style: normal;font-weight: bold;font-display: swap;
src: url('/wp-content/uploads/assets/fonts/woff2/YekanBakh-Bold.woff2') format('woff2'),
url('/wp-content/uploads/assets/fonts/woff/YekanBakh-Bold.woff') format('woff');}
@font-face {font-family: 'YekanBakhVF';font-display: swap;
src: url('/wp-content/uploads/assets/fonts/variable/Lahzeh-FamilyVF.woff2') format('woff2-variations');
src: url('/wp-content/uploads/assets/fonts/variable/Lahzeh-FamilyVF.woff2') format('woff2') tech('variations');
font-weight: 100 900;}
@font-face {
font-family: "Roboto";
src: local("Roboto");
ascent-override: 100%;
descent-override: 55%;
}
@font-face {
font-family: "Times New Roman";
src: local("Times New Roman");
ascent-override: 100%;
descent-override: 55%;
line-gap-override: 0%;
}
@font-face {
font-family: "Ubuntu";
src: local("Ubuntu");
ascent-override: 100%;
descent-override: 55%;
line-gap-override: 0%;
}
:root {
--oxy-primary: #690dac;
--oxy-secondary: #eae0ff;
--oxy-darker-purple: #362343;
--oxy-purple: #b652ff;
--oxy-dark-dark-gray: #1f1f1f;
--oxy-dark-gray: #292929;
--oxy-gray: #595959;
--oxy-light-gray: #e0e0e0;
--oxy-light-light-gray: #f3f3f3;
--oxy-white: #ffffff;
--oxy-font-size10: 10px;
--oxy-font-size12: 12px;
--oxy-font-size13: 13px;
--oxy-font-size14: 14px;
--oxy-font-size16: 16px;
--oxy-font-size18: 18px;
--oxy-font-size20: 20px;
--oxy-font-size22: 22px;
--oxy-font-size24: 24px;
--oxy-font-size26: 26px;
--oxy-font-size28: 28px;
--oxy-font-size30: 30px;
--oxy-font-size32: 32px;
--oxy-font-size34: 34px;
--oxy-font-size36: 36px;
--oxy-font-size38: 38px;
--oxy-font-size40: 40px;
--oxy-font-size42: 42px;
--oxy-font-size44: 44px;
--oxy-font-size48: 48px;
--oxy-font-size58: 58px;
--oxy-font-weight300: 300;
--oxy-font-weight400: 400;
--oxy-font-weight500: 500;
--oxy-font-weight600: 600;
--oxy-font-weight700: 700;
--oxy-font-weight800: 800;
--oxy-font-weight900: 900;
--oxy-border-radius4: 4px;
--oxy-border-radius8: 8px;
--oxy-border-radius12: 12px;
--oxy-border-radius16: 16px;
--oxy-border-radius18: 18px;
--oxy-border-radius24: 24px;
--oxy-border-radius26: 26px;
--oxy-border-radius28: 28px;
--oxy-border-radius38: 38px;
--oxy-border-radius40: 40px;
--oxy-border-radius48: 48px;
--oxy-padding-5: 5px;
--oxy-padding-10: 10px;
--oxy-padding-15: 15px;
--oxy-padding-20: 20px;
--oxy-padding-25: 25px;
--oxy-padding-30: 30px;
--oxy-padding-35: 35px;
--oxy-padding-40: 40px;
--oxy-padding-50: 50px;
--oxy-padding-70: 70px;
--oxy-margin-0: 0;
--oxy-margin-5: 5px;
--oxy-margin-10: 10px;
--oxy-margin-15: 15px;
--oxy-margin-20: 20px;
--oxy-margin-30: 30px;
--oxy-margin-40: 40px;
--oxy-margin-50: 50px;
--oxy-margin-70: 70px;
--oxy-yekanbakh: 'YekanBakhVF',YekanBakh, "Times New Roman", Roboto, Ubuntu, sans-serif;
--oxy-morabba: 'MorabbaVF', "Times New Roman", Roboto, Ubuntu, sans-serif;
}
/* Start of color classes */
.oxy-primary {color: var(--oxy-primary);}
.oxy-secondary {color: var(--oxy-secondary);}
.oxy-d-purple {color: var(--oxy-darker-purple);}
.oxy-purple {color: var(--oxy-purple);}
.oxy-dd-gray {color: var(--oxy-dark-dark-grey);}
.oxy-d-gray {color: var(--oxy-dark-gray);}
.oxy-l-gray {color: var(--oxy-light-gray);}
.oxy-ll-gray {color: var(--oxy-light-light-gray);}
.oxy-gray {color: var(--oxy-gray);}
.oxy-white {color: var(--oxy-white);}
/* End of color classes */
/* Start of background color classes */
.oxy-primary-bg {background-color: var(--oxy-primary);}
.oxy-secondary-bg {background-color: var(--oxy-secondary);}
.oxy-d-purple-bg {background-color: var(--oxy-darker-purple);}
.oxy-purple-bg {background-color: var(--oxy-purple);}
.oxy-dd-gray-bg {background-color: var(--oxy-dark-dark-grey);}
.oxy-d-gray-bg {background-color: var(--oxy-dark-gray);}
.oxy-l-gray-bg {background-color: var(--oxy-light-gray);}
.oxy-ll-gray-bg {background-color: var(--oxy-light-light-gray);}
.oxy-gray-bg {background-color: var(--oxy-gray);}
.oxy-white-bg {background-color: var(--oxy-white);}
/* End of background color classes */
/* Start of font size classes */
.oxy-font10 {font-size: var(--oxy-font-size10);}
.oxy-font12 {font-size: var(--oxy-font-size12);}
.oxy-font14 {font-size: var(--oxy-font-size14);}
.oxy-font16 {font-size: var(--oxy-font-size16);}
.oxy-font18 {font-size: var(--oxy-font-size18);}
/* End of font size classes */
/* Start of margin classes */
.oxy-mar-top10 {margin-top: var(--oxy-margin-10);}
.oxy-mar-top15 {margin-top: var(--oxy-margin-15);}
.oxy-mar-top20 {margin-top: var(--oxy-margin-20);}
.oxy-mar-top30 {margin-top: var(--oxy-margin-30);}
.oxy-mar-top50 {margin-top: var(--oxy-margin-50);}
.oxy-mar-bot10 {margin-bottom: var(--oxy-margin-10);}
.oxy-mar-bot15 {margin-bottom: var(--oxy-margin-15);}
.oxy-mar-bot30 {margin-bottom: var(--oxy-margin-30);}
.oxy-mar-bot50 {margin-bottom: var(--oxy-margin-50);}
.oxy-mar-l5 {margin-left: var(--oxy-margin-5);}
.oxy-mar-l10 {margin-left: var(--oxy-margin-10);}
.oxy-mar-l20 {margin-left: var(--oxy-margin-20);}
.oxy-mar-r5 {margin-right: var(--oxy-margin-5);}
.oxy-mar-r10 {margin-right: var(--oxy-margin-10);}
.oxy-mar-r20 {margin-right: var(--oxy-margin-20);}
/* End of margin classes */
/* Start of padding classes */
.oxy-pad10 {padding: var(--oxy-padding-10);}
.oxy-pad15 {padding: var(--oxy-padding-15);}
.oxy-pad20 {padding: var(--oxy-padding-20);}
.oxy-pad30 {padding: var(--oxy-padding-30);}
.oxy-pad50 {padding: var(--oxy-padding-50);}
.oxy-pad-top10 {padding-top: var(--oxy-padding-10);}
.oxy-pad-top15 {padding-top: var(--oxy-padding-15);}
.oxy-pad-top30 {padding-top: var(--oxy-padding-30);}
.oxy-pad-top50 {padding-top: var(--oxy-padding-50);}
.oxy-pad-bot10 {padding-bottom: var(--oxy-padding-10);}
.oxy-pad-bot15 {padding-bottom: var(--oxy-padding-15);}
.oxy-pad-bot30 {padding-bottom: var(--oxy-padding-30);}
.oxy-pad-bot50 {padding-bottom: var(--oxy-padding-50);}
.oxy-pad-l5 {padding-left: var(--oxy-padding-5);}
.oxy-pad-l10 {padding-left: var(--oxy-padding-10);}
.oxy-pad-l20 {padding-left: var(--oxy-padding-20);}
.oxy-pad-r5 {padding-right: var(--oxy-padding-5);}
.oxy-pad-r10 {padding-right: var(--oxy-padding-10);}
.oxy-pad-r20 {padding-right: var(--oxy-padding-20);}
/* End of padding classes */
/* Start of font weights */
.oxy-fw300 {font-weight: var(--oxy-font-weight300);}
.oxy-fw400 {font-weight: var(--oxy-font-weight400);}
.oxy-fw500 {font-weight: var(--oxy-font-weight500);}
.oxy-fw600 {font-weight: var(--oxy-font-weight600);}
.oxy-fw700 {font-weight: var(--oxy-font-weight700);}
.oxy-fw800 {font-weight: var(--oxy-font-weight800);}
.oxy-fw900 {font-weight: var(--oxy-font-weight900);}
/* End of font weights */
/* Start of common classes */
.oxy-aligncenter {text-align: center;}
.oxy-title {
display: flex;
justify-content: center;
position: relative;
font-weight: var(--oxy-font-weight400);
color: var(--oxy-primary);}
.oxy-title::before {
content: url('/wp-content/uploads/2025/11/right-line.svg');
padding-left: var(--oxy-padding-5);
}
.oxy-title::after{
content: url('/wp-content/uploads/2025/11/left-line.svg');
padding-right: var(--oxy-padding-5);
}
.oxy-subtitle {
font-weight: var(--oxy-font-weight700);
color: var(--oxy-dark-gray);}
.wy-br4 {
border-radius: var(--oxy-border-radius4);}
/* End of common classes */
/* Start of footer */
.footer-column.footer-column-1.wd-grid-col {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(182 82 255 / 40%);
border-radius: var(--oxy-border-radius4);
}
.footer-column.footer-column-1.wd-grid-col .widget {
padding-bottom: 0;
margin-bottom: 0;
}
.oxy-f-socials {
display: flex;
gap: 16px;
background-color: var(--oxy-dark-gray);
padding: 8px;
border-radius: var(--oxy-border-radius4);
margin: var(--oxy-padding-20);
}
.oxy-f-socials a:hover {
opacity: 0.5;
}
.oxy-f-logo {
margin-right: var(--oxy-padding-20);
/* the footer logo is dark artwork; it needs a light plate on the purple strip */
background-color: var(--oxy-white);
border-radius: var(--oxy-border-radius8);
padding: 12px 20px;
}
.oxy-f-logo img {
display: block;
height: 136px !important;
width: 157px !important;
}
.oxy-f-contact {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
.widget-title {
font-size: var(--oxy-font-size14);
color: var(--oxy-light-gray);
font-weight: var(--oxy-font-weight300);
}
.textwidget.custom-html-widget a, .textwidget.custom-html-widget div {
color: var(--oxy-white);
font-size: var(--oxy-font-size12);
}
.wd-footer {
background-image: url('/wp-content/uploads/2025/12/footer-bg.svg');
background-position: top center;
background-repeat: no-repeat;
}
.wd-copyrights {
background-color: var(--oxy-white);
color: var(--oxy-gray);
}
/* End of footer */
/* mobile-weight hero backgrounds */
@media (max-width: 768px) {
#wd-711a9740 { background-image: url('/wp-content/uploads/2026/09/contact-us-hero-768.webp'); }
}
/*By Mehran*/
/* ===============================
WHY US – FIGMA MATCH
================================ */
/*By Mehran*/
/* ===============================
HERO SECTION
================================ */
/*By Mehran*/
/* PRODUCTS SLIDER */
.oxy-products-slider {
display: flex;
gap: 24px;
justify-content: center;
align-items: stretch;
}
/* Card */
.oxy-product-card {
width: 180px;
height: 320px;
background: var(--oxy-white);
border-radius: var(--oxy-border-radius16);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding-bottom: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.oxy-product-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
/* Color Area */
.oxy-product-color {
width: 100%;
height: 100%;
border-radius: var(--oxy-border-radius16);
}
/* Color Styles (replace or fine-tune anytime) */
.oxy-bg-gloss {
background: linear-gradient(135deg, #2c2c2c, #9b9b9b);
}
.oxy-bg-laminated {
background: linear-gradient(135deg, #0f3d6e, #3fa9f5);
}
.oxy-bg-ceramic {
background: linear-gradient(135deg, #b94a2f, #f1a07b);
}
.oxy-bg-sand {
background: linear-gradient(135deg, #7a5c3e, #cbb08a);
}
.oxy-bg-custom {
background: linear-gradient(135deg, #ffce00, #ff6f00);
}
.oxy-bg-pattern {
background: repeating-linear-gradient(
45deg,
#222,
#222 10px,
#444 10px,
#444 20px
);
}
/*By Mehran*/
.oxy-product-color {
width: 100%;
height: 100%;
border-radius: var(--oxy-border-radius16);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/*By Mehran*/
/* Slider layout */
.oxy-products-slider {
display: flex;
gap: 24px;
justify-content: center;
}
/* Card wrapper */
.oxy-product-card {
width: 190px;
height: 340px;
border-radius: 18px;
overflow: hidden;
}
/* Background image */
.oxy-product-bg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
}
/* Dark gradient overlay (like screenshot) */
.oxy-product-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.65),
rgba(0,0,0,0)
);
}
/* Bottom text */
.oxy-product-title {
position: relative;
z-index: 2;
color: #fff;
font-size: 15px;
font-weight: 600;
padding: 16px;
width: 100%;
text-align: center;
}
/*By Mehran*/
/* CARD */
.figma-card {
width: 190px;
height: 360px;
position: relative;
}
/* IMAGE AREA */
.oxy-product-image {
height: 300px;
border-radius: 26px 26px 20px 20px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
}
/* SUBTLE OVERLAY (matches image) */
.oxy-product-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.35),
rgba(0,0,0,0)
);
}
/* TEXT */
.oxy-product-title {
position: relative;
z-index: 2;
color: #fff;
font-size: 15px;
font-weight: 600;
padding: 0 16px 22px;
width: 100%;
text-align: center;
}
/* WHITE BASE */
.oxy-product-base {
height: 60px;
background: #fff;
border-radius: 0 0 26px 26px;
margin-top: -20px;
}
/*By Mehran*/
/* Styling for the Export Map Section */
.oxy-map-wrapper {
position: relative;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.oxy-map-bg {
width: 100%;
max-width: 1000px;
opacity: 0.2; /* Light background map */
}
.oxy-map-overlay {
position: absolute;
width: 85%; /* Adjust based on export focus area */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* mobile: show the map slightly larger (85% -> 100% of the wrapper) */
@media (max-width: 768px) {
.oxy-map-overlay {
width: 100%;
}
}
/* Country Bar Layout */
.oxy-country-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
background-color: var(--oxy-secondary);
padding: 15px 30px;
border-radius: var(--oxy-border-radius12);
direction: rtl;
}
.oxy-country-item {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight600);
color: var(--oxy-dark-dark-gray);
}
.oxy-country-item img {
width: 24px;
height: auto;
border-radius: 2px;
}
@media (max-width: 768px) {
.oxy-country-bar {
gap: 15px;
padding: 15px;
}
}
/*By Mehran*/
/* ===============================
PROJECTS – DARK SECTION
================================ */
.oxy-projects {
--gal-w: clamp(55px, 7vw, 105px);
--gal-gap: 24px;
--gal-speed: 70s;
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
background-color: #2e2e2e;
padding: 100px 0;
direction: rtl;
font-family: var(--oxy-yekanbakh);
}
.oxy-projects-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
pointer-events: none;
}
.oxy-projects-inner {
position: relative;
z-index: 1;
max-width: 1440px;
margin: 0 auto;
padding: 0 20px;
}
/* ---------- HEADER ---------- */
.oxy-projects-subtitle-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 14px;
}
.oxy-projects-subtitle-wrap .text {
font-size: var(--oxy-font-size16);
font-weight: var(--oxy-font-weight500);
color: var(--oxy-purple);
white-space: nowrap;
}
.oxy-projects-subtitle-wrap .line {
position: relative;
flex: 1 1 auto;
max-width: 240px;
height: 1px;
background-color: rgba(255, 255, 255, 0.25);
}
.oxy-projects-subtitle-wrap .line::after {
content: "";
position: absolute;
top: 50%;
width: 5px;
height: 5px;
background-color: rgba(255, 255, 255, 0.35);
transform: translateY(-50%) rotate(45deg);
}
.oxy-projects-subtitle-wrap .line:first-child::after { right: -2px; }
.oxy-projects-subtitle-wrap .line:last-child::after { left: -2px; }
.oxy-projects-title {
margin: 0 0 60px;
text-align: center;
font-size: clamp(28px, 3vw, 40px);
font-weight: var(--oxy-font-weight800);
line-height: 1.5;
color: var(--oxy-white);
}
.oxy-projects-title span { color: var(--oxy-purple); }
/* ---------- GALLERY MARQUEE ---------- */
.oxy-projects-gallery {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--gal-gap);
}
.oxy-projects-row {
display: flex;
width: max-content;
will-change: transform;
animation: oxy-marquee var(--gal-speed) linear infinite;
}
/* opposite directions; the delay also staggers them when paused */
.oxy-projects-row.row-2 {
animation-direction: reverse;
animation-delay: calc(var(--gal-speed) * -0.3);
}
/* pause so images can actually be clicked */
.oxy-projects-row:hover,
.oxy-projects-row:focus-within { animation-play-state: paused; }
@keyframes oxy-marquee {
from { transform: translateX(0); }
to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) {
.oxy-projects-row { animation-play-state: paused; }
}
.oxy-projects-track {
display: flex;
flex-wrap: nowrap;
gap: var(--gal-gap);
padding-inline-end: var(--gal-gap);
}
.oxy-projects-track a {
flex: 0 0 auto;
display: block;
width: var(--gal-w);
border-radius: var(--oxy-border-radius8);
overflow: hidden;
cursor: zoom-in;
transition: transform 0.3s ease;
}
.oxy-projects-track a:hover,
.oxy-projects-track a:focus-visible { transform: scale(1.04); }
.oxy-projects-track a:focus-visible { outline: 2px solid var(--oxy-purple); outline-offset: 3px; }
.oxy-projects-track img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
}
/* the live markup puts ![]()
straight inside the row (no /track wrapper),
so size those directly Figma: 284x160 desktop, 142x80 mobile, radius 4px */
.oxy-projects-row {
gap: var(--gal-gap);
padding-inline-end: var(--gal-gap); /* makes translateX(50%) land on the duplicate */
}
.oxy-projects-row > img {
flex: 0 0 auto;
display: block;
width: 199px;
height: 112px;
object-fit: cover;
border-radius: 4px;
cursor: zoom-in;
}
.oxy-projects-row > img:focus-visible {
outline: 2px solid var(--oxy-purple);
outline-offset: 3px;
}
@media (max-width: 768px) {
.oxy-projects-row > img {
width: 99px;
height: 56px;
}
}
/* ---------- LIGHTBOX ---------- */
.oxy-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.92);
}
.oxy-lightbox:target { display: flex; }
.oxy-lightbox.is-open { display: flex; }
.oxy-lightbox-bg {
position: absolute;
inset: 0;
cursor: zoom-out;
}
.oxy-lightbox img {
position: relative;
max-width: min(1200px, 100%);
max-height: 88vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--oxy-border-radius8);
}
.oxy-lightbox-close {
position: absolute;
top: 20px;
left: 20px;
width: 44px;
height: 44px;
border-radius: var(--oxy-border-radius8);
background: rgba(255, 255, 255, 0.12);
transition: background-color 0.2s ease;
}
.oxy-lightbox-close:hover,
.oxy-lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.22); }
.oxy-lightbox-close::before,
.oxy-lightbox-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: #fff;
}
.oxy-lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.oxy-lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* ---------- BUTTON ---------- */
.oxy-projects-btn-wrap {
margin-top: 60px;
text-align: center;
}
.oxy-projects-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 141px;
min-height: 46px;
padding: 12px 36px;
background-color: var(--oxy-primary);
color: var(--oxy-white);
border-radius: var(--oxy-border-radius12);
font-size: var(--oxy-font-size16);
font-weight: var(--oxy-font-weight600);
text-decoration: none;
transition: background-color 0.3s ease;
}
.oxy-projects-btn:hover,
.oxy-projects-btn:focus-visible {
background-color: var(--oxy-purple);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
.oxy-projects {
--gal-gap: 12px;
--gal-speed: 50s;
padding: 60px 0;
}
.oxy-projects-subtitle-wrap .line { max-width: 60px; }
.oxy-projects-title { margin-bottom: 40px; }
.oxy-projects-btn-wrap { margin-top: 40px; }
.oxy-lightbox { padding: 16px; }
.oxy-lightbox-close { top: 12px; left: 12px; }
}
/* ===============================
AFTER SALE SERVICE
================================ */
.oxy-after-sale {
background-color: #ffffff;
padding: 100px 0;
direction: rtl;
font-family: var(--oxy-yekanbakh);
position: relative;
}
.oxy-after-sale-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
/* ===============================
HEADER
================================ */
.oxy-after-sale-header {
text-align: center;
margin-bottom: 50px;
}
.oxy-after-sale-subtitle {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 12px;
}
.oxy-after-sale-subtitle .text {
font-size: 14px;
font-weight: 500;
color: var(--oxy-purple);
}
.oxy-after-sale-subtitle .line {
width: 90px;
height: 1px;
background-color: #d9d9d9;
}
.oxy-after-sale-title {
font-size: 36px;
font-weight: 800;
color: #222;
}
.oxy-after-sale-title span {
color: var(--oxy-purple);
}
/* ===============================
CONTENT
================================ */
.oxy-after-sale-content {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 2;
}
/* Text */
.oxy-after-sale-text p {
font-size: 15px;
line-height: 2.2;
color: #555;
margin-bottom: 30px;
}
.oxy-after-sale-list {
list-style: none;
padding: 0;
margin-bottom: 40px;
}
.oxy-after-sale-list li {
position: relative;
padding-right: 32px;
margin-bottom: 16px;
font-size: 15px;
color: #333;
}
.oxy-after-sale-list li::before {
content: "✔";
position: absolute;
right: 0;
color: var(--oxy-purple);
font-weight: 700;
}
/* Button */
.oxy-after-sale-btn {
display: inline-block;
padding: 12px 36px;
background-color: var(--oxy-primary);
color: #fff;
border-radius: 12px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.oxy-after-sale-btn:hover {
background-color: var(--oxy-purple);
}
/* ===============================
MEDIA
================================ */
.oxy-after-sale-media .media-wrapper {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.oxy-after-sale-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Play button */
.play-btn {
position: absolute;
inset: 0;
margin: auto;
width: 64px;
height: 64px;
background-color: rgba(128, 0, 128, 0.9);
border-radius: 50%;
}
.play-btn::after {
content: "";
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent #fff;
}
/* ===============================
DECORATIVE SHAPE
================================ */
.oxy-after-sale-shape {
position: absolute;
inset: 0;
background: radial-gradient(circle at 40% 60%,
rgba(142, 68, 173, 0.15),
transparent 60%);
z-index: 1;
pointer-events: none;
}
/* ===============================
RESPONSIVE
================================ */
@media (max-width: 992px) {
.oxy-after-sale-content {
grid-template-columns: 1fr;
}
.oxy-after-sale-media {
order: -1;
}
}
.whb-general-header {
border-radius: 12px;
}
/*By Mehran*/
/* News Section Specific Styles */
.oxy-news-section {
direction: rtl;
font-family: var(--oxy-yekanbakh);
padding: 60px 0;
}
.oxy-news-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Featured Card */
.oxy-featured-card {
position: relative;
width: 100%;
height: 400px;
border-radius: var(--oxy-border-radius24);
overflow: hidden;
margin-top: 30px;
}
.oxy-featured-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.oxy-featured-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.oxy-news-badge {
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
margin-bottom: 10px;
display: inline-block;
}
/* Dots */
.oxy-news-dots {
display: flex;
justify-content: center;
gap: 8px;
margin: 20px 0 40px;
}
.oxy-news-dots .dot {
width: 8px;
height: 8px;
background: #e0e0e0;
border-radius: 50%;
}
.oxy-news-dots .dot.active {
background: var(--oxy-primary);
width: 20px;
border-radius: 10px;
}
/* Grid Layout */
.oxy-news-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.oxy-news-item {
background: var(--oxy-white);
border-radius: var(--oxy-border-radius16);
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.oxy-news-img {
height: 180px;
}
.oxy-news-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.oxy-news-content {
padding: 20px;
text-align: right;
}
.oxy-news-tag {
font-size: 12px;
display: block;
margin-bottom: 8px;
}
/* View All Button */
.oxy-news-btn {
display: inline-block;
background-color: var(--oxy-primary);
color: var(--oxy-white);
padding: 10px 40px;
border-radius: var(--oxy-border-radius8);
font-weight: 600;
transition: 0.3s;
}
.oxy-news-btn:hover {
background-color: var(--oxy-purple);
color: white;
}
/* Responsive */
@media (max-width: 992px) {
.oxy-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.oxy-news-grid { grid-template-columns: 1fr; }
.oxy-featured-card { height: 250px; }
}
/*second section by Mehran*/
/* Precise Figma Why-Us Section */
.oxy-whyus-section {
direction: rtl;
padding: 80px 0;
background-color: #ffffff;
}
.oxy-whyus-staggered-grid {
display: grid !important;
/* We use 6 columns to allow 3-2 staggering */
grid-template-columns: repeat(6, 1fr) !important;
gap: 25px !important;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.oxy-whyus-card {
grid-column: span 2 !important;
display: flex !important;
flex-direction: row !important; /* Icon left, Text right */
align-items: center !important;
justify-content: flex-start !important;
padding: 25px 30px !important;
min-height: 160px;
background: var(--oxy-secondary);
border-radius: 35px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
min-width: 0; /* Prevents text from forcing card to overflow */
}
/* THE FIGMA CENTER FIX */
/* In a 6-column grid, we skip the first column to center two cards */
.row-2-start {
grid-column: 2 / span 2 !important;
}
.oxy-whyus-card .card-icon {
width: 135px !important;
height: auto !important;
order: 1 !important; /* Forces left in RTL */
margin-left: 0 !important;
margin-right: 20px !important; /* Space between icon and text */
}
.oxy-whyus-card .card-text {
order: 2 !important; /* Forces right in RTL */
text-align: right !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #292929 !important;
line-height: 1.4 !important;
white-space: normal !important; /* Prevents vertical text */
flex: 1;
}
/* Responsive - Tablet */
@media (max-width: 1024px) {
.oxy-whyus-staggered-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.oxy-whyus-card, .row-2-start {
grid-column: span 1 !important;
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
.oxy-whyus-staggered-grid {
grid-template-columns: 1fr !important;
}
.oxy-whyus-card {
padding: 20px !important;
}
}
/*Mehran ; mobile "محصولات ما صفحه اصلی"*/
/* =========================================
MOBILE CAROUSEL FOR PRODUCTS SECTION
========================================= */
@media (max-width: 768px) {
/* 1. Make the container a horizontal scroll */
.oxy-products-slider {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory; /* Enables the "snap" effect */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* Smooth momentum scrolling for iOS */
/* Spacing adjustments */
gap: 15px !important;
padding: 20px 20px 40px 20px !important; /* Extra bottom padding for shadow */
justify-content: flex-start !important; /* Ensure it starts from the right (RTL) */
}
/* 2. Style the cards to fit the mobile screen width */
.oxy-products-slider .oxy-product-card {
flex: 0 0 75%; /* Each card takes up 75% of screen width so the next is visible */
scroll-snap-align: center; /* Snap card to the middle of the screen */
height: 380px; /* Slightly taller for mobile readability */
margin: 0 auto;
}
/* 3. Hide the scrollbar for a cleaner "app-like" look */
.oxy-products-slider::-webkit-scrollbar {
display: none;
}
.oxy-products-slider {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* 4. Optional: Adjust title size for mobile */
.oxy-subtitle {
font-size: 24px !important;
padding: 0 15px;
}
}
/*By Mehran*/
/* Precise Figma Match */
.oxy-whyus-section {
padding: 100px 0;
background: #fff;
text-align: center;
}
.oxy-whyus-staggered-grid {
display: grid;
/* We use a 6-column grid to perfectly center the 2 cards on the bottom row */
grid-template-columns: repeat(6, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.oxy-whyus-card {
grid-column: span 2; /* Top row cards take 2 units each (3 cards total) */
background: linear-gradient(145deg, #f8f5ff 0%, #ffffff 100%);
/* AUDIT: Extreme Border Radius for that "Pill" look */
border-radius: 60px;
border: 1px solid rgba(105, 13, 172, 0.08);
box-shadow: 0 15px 35px rgba(105, 13, 172, 0.04);
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
padding: 20px 30px;
}
.card-content {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
justify-content: space-around;
}
.oxy-whyus-card .card-text {
font-size: 18px;
font-weight: 700;
color: #292929;
text-align: right;
line-height: 1.6;
max-width: 160px;
}
.oxy-whyus-card .card-icon {
width: 100px; /* Size to match Figma icons */
height: auto;
object-fit: contain;
}
/* Bottom Row Logic: Centering 2 cards in a 6-column grid */
.first-bottom {
grid-column: 2 / span 2; /* Card 4 starts at col 2 */
}
/* Adjustments for Title */
.oxy-subtitle {
font-size: 38px !important;
line-height: 1.3 !important;
}
/* Responsive Fixes */
@media (max-width: 1024px) {
.oxy-whyus-staggered-grid { grid-template-columns: repeat(2, 1fr); }
.oxy-whyus-card, .first-bottom { grid-column: span 1 !important; }
}
@media (max-width: 768px) {
.oxy-whyus-staggered-grid { grid-template-columns: 1fr; }
.oxy-whyus-card { border-radius: 40px; min-height: 140px; }
.oxy-whyus-card .card-icon { width: 80px; }
}
/*تماس با ما - Mehran*/
/*hiring*/
/* === Career Single Image Section === */
.oxy-career-single {
background-color: var(--oxy-secondary);
direction: rtl;
font-family: var(--oxy-yekanbakh);
}
.oxy-career-single-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--oxy-padding-20);
display: flex;
flex-direction: column;
gap: 40px;
}
/* Image */
.oxy-career-image {
width: 100%;
}
.oxy-career-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--oxy-border-radius38);
object-fit: cover;
}
/* Content */
.oxy-career-content {
display: flex;
flex-direction: column;
}
/* Button */
.oxy-career-btn {
align-self: flex-start;
background-color: var(--oxy-primary);
color: var(--oxy-white);
padding: 12px 30px;
border-radius: var(--oxy-border-radius38);
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight500);
text-decoration: none;
transition: all 0.3s ease;
}
.oxy-career-btn:hover {
background-color: var(--oxy-purple);
}
/* === Desktop Layout === */
@media (min-width: 992px) {
.oxy-career-single-inner {
flex-direction: row;
align-items: center;
}
/* IMAGE ON LEFT (visually) */
.oxy-career-image {
width: 45%;
order: 1;
}
/* TEXT ON RIGHT */
.oxy-career-content {
width: 55%;
order: 2;
padding-right: var(--oxy-padding-40);
}
}
.fs {
font-size: 16px;
}
/*راهنمای متقاضیان*/
/* === Job Notice Section === */
.oxy-job-notice {
background-color: var(--oxy-white);
direction: rtl;
font-family: var(--oxy-yekanbakh);
}
.oxy-job-notice-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--oxy-padding-20);
text-align: center;
}
/* Text */
.oxy-job-text {
line-height: 1.9;
}
/* CTA Wrapper */
.oxy-job-cta-wrap {
display: flex;
justify-content: center;
margin-inline: auto;
}
/* CTA Button */
.oxy-job-cta {
background-color: var(--oxy-primary);
color: var(--oxy-white);
padding: 14px 42px;
border-radius: var(--oxy-border-radius48);
font-size: var(--oxy-font-size16);
font-weight: var(--oxy-font-weight600);
text-decoration: none;
box-shadow: 0 12px 30px rgba(105, 13, 172, 0.25);
transition: all 0.3s ease;
position: relative;
margin-inline: auto; !important
}
/* Hover / Focus */
.oxy-job-cta:hover {
background-color: var(--oxy-purple);
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(182, 82, 255, 0.35);
}
/* Subtle attention pulse (optional but effective) */
.oxy-job-cta::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(182, 82, 255, 0.4);
animation: oxyPulse 2.5s infinite;
}
@keyframes oxyPulse {
0% { box-shadow: 0 0 0 0 rgba(182, 82, 255, 0.4); }
70% { box-shadow: 0 0 0 18px rgba(182, 82, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(182, 82, 255, 0); }
}
/* Mobile fine-tune */
@media (max-width: 576px) {
.oxy-job-text {
font-size: var(--oxy-font-size14);
}
.oxy-job-cta {
/* width: 100%; */
max-width: 280px;
}
}
/*pop-up on cta submit*/
/* =========================
JOB NOTICE POPUP
========================= */
.oxy-job-popup {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.oxy-job-popup.active {
display: block;
}
/* Background */
.oxy-job-popup-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(4px);
}
/* Box */
.oxy-job-popup-box {
position: relative;
max-width: 420px;
margin: auto;
top: 50%;
transform: translateY(-50%);
background: #fff;
border-radius: 24px;
padding: 30px 28px;
text-align: center;
box-shadow: 0 30px 80px rgba(0,0,0,0.25);
animation: popupFade 0.35s ease;
}
.oxy-job-popup-box h3 {
font-size: 20px;
font-weight: 800;
margin-bottom: 15px;
color: var(--oxy-purple);
}
.oxy-job-popup-box p {
font-size: 15px;
line-height: 1.9;
color: #444;
margin-bottom: 25px;
}
/* Close Button */
.oxy-job-popup-close {
background: var(--oxy-primary);
color: #fff;
border: none;
padding: 12px 36px;
border-radius: 40px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
}
.oxy-job-popup-close:hover {
background: var(--oxy-purple);
}
/* Animation */
@keyframes popupFade {
from {
opacity: 0;
transform: translateY(-55%);
}
to {
opacity: 1;
transform: translateY(-50%);
}
}
/*معرفی شرکت درصفحه استخدام*/
/* === About Factory Section (Updated) === */
.oxy-about-factory {
background-color: var(--oxy-secondary);
direction: rtl;
font-family: var(--oxy-yekanbakh);
border-radius: 15px; /* ✅ whole section radius */
/*margin: var(--oxy-margin-30);*/ /* breathing space around section */
}
.oxy-about-factory-inner {
max-width: 1200px;
margin: 0 auto;
padding: var(--oxy-padding-40);
display: flex;
flex-direction: column;
gap: 40px;
}
/* Images wrapper */
.oxy-about-images {
display: flex;
flex-direction: column;
gap: 20px;
}
.oxy-about-img img {
width: 100%;
height: auto;
display: block;
border-radius: var(--oxy-border-radius24);
object-fit: cover;
}
/* Content */
.oxy-about-content {
display: flex;
flex-direction: column;
}
.oxy-about-content p {
line-height: 2;
}
/* Desktop */
@media (min-width: 992px) {
.oxy-about-factory-inner {
flex-direction: row;
align-items: center;
}
/* Images on RIGHT */
.oxy-about-images {
width: 45%;
order: 2;
}
/* Text on LEFT */
.oxy-about-content {
width: 55%;
order: 1;
padding-left: var(--oxy-padding-40);
}
}
/*nfdf*/
/* :is(.wd-entry-content,.entry-content,.is-layout-flow,.is-layout-constrained,.is-layout-constrained>.wp-block-group__inner-container)>* {
border-radius: 15px;
} */
/*فرصت های شغلی*/
/* Container using Grid for responsiveness */
.oxy-job-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--oxy-margin-20);
direction: rtl; /* Matches the Persian context */
font-family: var(--oxy-yekanbakh);
padding: var(--oxy-padding-20);
}
/* Individual Card Styling */
.oxy-job-card {
background-color: var(--oxy-white); /* Change to oxy-ll-gray-bg if preferred */
border-radius: var(--oxy-border-radius16);
padding: var(--oxy-padding-30);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
/* subtle shadow to mimic figma design */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.17);
}
.oxy-job-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(105, 13, 172, 0.1); /* Subtle primary color glow */
}
/* Badge (e.g., IT, Finance) */
.oxy-job-badge {
font-size: var(--oxy-font-size12);
font-weight: var(--oxy-font-weight500);
padding: 6px 16px;
border-radius: var(--oxy-border-radius40);
margin-bottom: var(--oxy-margin-15);
}
/* Job Title */
.oxy-job-title {
font-size: var(--oxy-font-size20);
font-weight: var(--oxy-font-weight700);
margin-bottom: var(--oxy-margin-10);
}
/* Location and Time Info */
.oxy-job-meta {
font-size: var(--oxy-font-size14);
display: flex;
gap: 15px;
margin-bottom: var(--oxy-margin-30);
}
/* Bottom Link */
.oxy-job-link {
text-decoration: none;
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight600);
margin-top: auto; /* Keeps link at bottom if title is long */
display: flex;
align-items: center;
gap: 5px;
}
.oxy-job-link span {
font-size: 1.2rem;
line-height: 0;
}
/*مراحل استخدام تایم لاین*/
/* ================================
TIMELINE – DESKTOP ONLY
================================ */
.oxy-timeline-section {
direction: rtl;
font-family: var(--oxy-yekanbakh);
padding: var(--oxy-padding-50) 0;
max-width: 1200px;
margin: 0 auto;
}
.oxy-timeline-container {
position: relative;
padding: 40px 0;
}
/* خط وسط خطچین */
.oxy-timeline-container::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
background-image: linear-gradient(
to bottom,
var(--oxy-light-gray) 50%,
transparent 50%
);
background-size: 2px 10px;
}
/* هر آیتم تایملاین */
.oxy-timeline-item {
position: relative;
display: flex;
justify-content: center; /* مهم */
align-items: center;
gap: 40px; /* فاصله کنترلشده */
width: 100%;
margin-bottom: var(--oxy-margin-50);
}
/* جابهجایی چپ و راست */
.oxy-timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
/* ستون متن و تصویر */
.oxy-timeline-content,
.oxy-timeline-image {
width: 42%;
}
/* متن نزدیک به خط وسط */
.oxy-timeline-content {
line-height: 1.9;
}
/* تراز متن */
.oxy-timeline-item:nth-child(odd) .oxy-timeline-content {
text-align: left;
}
.oxy-timeline-item:nth-child(even) .oxy-timeline-content {
text-align: right;
}
/* تصویر */
.oxy-timeline-image {
display: flex;
align-items: center;
justify-content: center;
}
.oxy-timeline-image img {
max-width: 260px;
height: auto;
}
/* نقطه الماسی وسط */
.oxy-timeline-dot {
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background-color: var(--oxy-purple);
border: 2px solid #fff;
z-index: 2;
}
/* تاریخ */
.oxy-timeline-date {
display: block;
font-size: var(--oxy-font-size12);
margin-bottom: var(--oxy-margin-10);
}
/*
.oxy-timeline-section {
direction: rtl;
font-family: var(--oxy-yekanbakh);
padding: var(--oxy-padding-50) 0;
max-width: 1200px;
margin: 0 auto;
}
.oxy-timeline-container {
position: relative;
padding: 20px 0;
}
/* Central Dashed Line */
.oxy-timeline-container::after {
content: '';
position: absolute;
width: 2px;
background-image: linear-gradient(to bottom, var(--oxy-light-gray) 50%, transparent 50%);
background-size: 2px 10px; /* Creates dashed effect */
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.oxy-timeline-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: var(--oxy-margin-50);
position: relative;
}
/* Alternate sides */
.oxy-timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.oxy-timeline-content, .oxy-timeline-image {
width: 45%;
}
.oxy-timeline-content {
text-align: left; /* Align text toward the center line */
}
.oxy-timeline-item:nth-child(odd) .oxy-timeline-content {
text-align: left;
}
.oxy-timeline-item:nth-child(even) .oxy-timeline-content {
text-align: right;
}
.oxy-timeline-image img {
/*width: 100%;
border-radius: var(--oxy-border-radius12);
box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
}
/* The Purple Diamond Dot */
.oxy-timeline-dot {
width: 12px;
height: 12px;
background-color: var(--oxy-purple);
transform: rotate(45deg);
position: absolute;
left: 50%;
margin-left: -6px;
z-index: 1;
border: 2px solid var(--oxy-white);
}
.oxy-timeline-date {
display: block;
font-size: var(--oxy-font-size12);
margin-bottom: var(--oxy-margin-10);
}
/*navbar background*/
.wd-tools-element {
background-color: aliceblue;
}
*/
/*تایم لاین موبایل*/
@media (max-width: 768px) {
.oxy-timeline-container::after {
display: none; /* حذف خط وسط */
}
.oxy-timeline-item {
flex-direction: column !important;
align-items: center;
gap: 20px;
text-align: center;
}
.oxy-timeline-content,
.oxy-timeline-image {
width: 100%;
}
.oxy-timeline-dot {
display: none;
}
.oxy-timeline-content {
text-align: center !important;
}
.oxy-timeline-image img {
max-width: 220px;
margin: 0 auto;
display: block;
}
}
.oxy-timeline-image img {
display: none; !important;
}
/*ویدئو کنترل کیفیت*/
.oxy-after-sale-media {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.media-wrapper {
position: relative;
width: 100%;
max-width: 420px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(128, 0, 128, 0.15);
}
.oxy-after-sale-video {
width: 100%;
height: auto;
display: block;
border-radius: 24px;
}
/*FAQ hiring page*/
/* =========================
FAQ SECTION
========================= */
.oxy-faq {
direction: rtl;
font-family: var(--oxy-yekanbakh);
padding: 80px 20px;
background: #fafafa;
}
.oxy-faq-inner {
max-width: 900px;
margin: 0 auto;
}
.oxy-faq-header {
text-align: center;
margin-bottom: 50px;
}
.oxy-faq-subtitle {
font-size: 14px;
color: var(--oxy-purple);
display: block;
margin-bottom: 10px;
}
.oxy-faq-title {
font-size: 32px;
font-weight: 900;
}
/* Accordion */
.oxy-faq-item {
background: #fff;
border-radius: 16px;
margin-bottom: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.oxy-faq-question {
width: 100%;
background: none;
border: none;
padding: 22px 24px;
font-size: 16px;
font-weight: 700;
text-align: right;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.oxy-faq-question .icon {
width: 18px;
height: 18px;
position: relative;
}
.oxy-faq-question .icon::before,
.oxy-faq-question .icon::after {
content: '';
position: absolute;
background: var(--oxy-purple);
transition: 0.3s;
}
.oxy-faq-question .icon::before {
width: 100%;
height: 2px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.oxy-faq-question .icon::after {
width: 2px;
height: 100%;
top: 0;
right: 50%;
transform: translateX(50%);
}
/* Answer */
.oxy-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.oxy-faq-answer p {
padding: 0 24px 24px;
color: #555;
line-height: 1.9;
font-size: 15px;
}
/* Active State */
.oxy-faq-item.active .oxy-faq-answer {
max-height: 300px;
}
.oxy-faq-item.active .icon::after {
opacity: 0;
}
/*مزایا استخدام*/
/* BENEFITS SECTION - PREMIUM VERSION */
/*نیو مزایا*/
/* CONTAINER & BACKGROUND */
/* SECTION */
.oxy-benefits-premium {
background-color: #12141d;
padding: 60px 0;
color: #fff;
font-family: 'Yekan Bakh', sans-serif;
border-radius: 15px;
}
/* CONTAINER */
.oxy-benefits-container {
max-width: 1100px;
margin: auto;
padding: 0 20px;
}
/* HEADER */
.oxy-benefits-header {
text-align: right;
margin-bottom: 50px;
}
.oxy-main-title {
font-size: 36px;
color: #fff;
}
.oxy-purple-glow {
color: #b652ff;
text-shadow: 0 0 15px rgba(182,82,255,.6);
}
.oxy-sub-text {
opacity: .7;
}
/* GRID */
.oxy-benefits-compact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
/* CARD BASE */
.oxy-benefit-card-compact {
position: relative;
overflow: hidden;
height: 220px;
padding: 30px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.04);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: .4s;
backdrop-filter: blur(10px);
}
/* IMAGE LAYER */
.oxy-benefit-card-compact::before {
content: "";
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
/*opacity: .18; */
transition: .4s;
z-index: 0;
}
/* OVERLAY */
.oxy-benefit-card-compact::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(18,20,29,.9),
rgba(18,20,29,.4)
);
z-index: 1;
}
/* CONTENT */
.oxy-benefit-card-compact > * {
position: relative;
z-index: 2;
}
/* HOVER */
.oxy-benefit-card-compact:hover,
.active-glow {
border-color: #b652ff;
box-shadow: 0 0 30px rgba(182,82,255,.25);
transform: translateY(-5px);
}
.oxy-benefit-card-compact:hover::before,
.active-glow::before {
opacity: 1;
transform: scale(1.05);
}
/* CARD TEXT */
.benefit-card-title {
font-size: 20px;
line-height: 1.6;
color: white;
}
/* ICON */
.check-icon {
width: 28px;
height: 28px;
background: rgba(255,255,255,.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.oxy-benefit-card-compact:hover .check-icon,
.active-glow .check-icon {
background: #b652ff;
box-shadow: 0 0 10px #b652ff;
}
/* IMAGE SOURCES */
.bg-growth::before { background-image: url('/wp-content/uploads/2025/12/specialized-training.webp'); }
.bg-salary::before { background-image: url('/wp-content/uploads/2025/12/salary1.webp'); }
.bg-insurance::before { background-image: url('/wp-content/uploads/2025/12/insurance.webp'); }
.bg-loan::before { background-image: url('/wp-content/uploads/2025/12/personal-loan.webp'); }
.bg-gift::before { background-image: url('/wp-content/uploads/2025/12/occasional-gift.webp'); }
.bg-education::before { background-image: url('/wp-content/uploads/2025/12/education.webp'); }
/* MOBILE */
@media (max-width: 768px) {
.oxy-benefits-compact-grid {
grid-template-columns: 1fr;
}
}
/*ناوبار موبایل*/
/* ===============================
MOBILE TOOLBAR CTA – IMPROVED
================================ */
@media (max-width: 768px) {
/* کل نوار پایین */
.wd-toolbar {
height: 64px;
padding: 0 12px;
background: #ffffff;
box-shadow: 0 -6px 24px rgba(0,0,0,0.08);
}
/* هر آیتم */
.wd-toolbar-item {
flex: 1;
display: flex;
justify-content: center;
}
/* لینک CTA */
.wd-toolbar-item a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
max-width: 170px;
height: 44px;
border-radius: 14px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: 0.25s ease;
}
/* CTA اصلی – دفترچه استخدامی */
.wd-toolbar-item:first-child a {
background: linear-gradient(135deg, #7b2cff8a, #b85cff);
color: #fff;
box-shadow: 0 10px 25px rgba(123,44,255,0.35);
}
.wd-toolbar-item:first-child a:hover {
transform: translateY(-2px);
}
/* CTA ثانویه – تماس */
.wd-toolbar-item:last-child a {
background: linear-gradient(135deg, #7b2cff8a, #b85cff);
color: #333;
border: 1px solid #e5e7eb;
}
/*آیتم وسط ناوبار*/
.wd-toolbar>a, .wd-toolbar>div {
flex: 1 0 20%;
color: crimson;
border-radius: 12px;
}
/* آیکن */
.wd-toolbar-icon {
font-size: 18px;
display: flex;
align-items: center;
}
}
/*کنترل کیفیت*/
/* --- Hero Section Main Container --- */
.qc-hero-section {
/* Layout & Dimensions */
position: relative;
height: 600px;
display: flex;
align-items: center;
justify-content: flex-start; /* Aligns container to the right in RTL */
padding: 0 10%;
direction: rtl;
/* Background & Typography */
background-image: linear-gradient(to left, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.28) 100%),
url('/wp-content/uploads/2026/09/quality-control-hero-1920.webp');
background-size: cover;
background-position: center;
font-family: var(--oxy-yekanbakh);
/* Full-Width "Break-out" Logic */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* --- Content Elements --- */
.qc-container {
max-width: 1200px;
z-index: 2;
}
.qc-label-wrapper {
display: flex;
align-items: center;
gap: var(--oxy-padding-10);
margin-bottom: var(--oxy-margin-20);
}
.qc-dot {
width: 40px;
height: 2px;
display: inline-block;
background-color: var(--oxy-purple);
}
.qc-main-title {
font-size: var(--oxy-font-size58);
line-height: 1.2;
margin-bottom: var(--oxy-margin-30);
color: var(--oxy-white);
font-weight: var(--oxy-font-weight800);
}
/* `.qc-main-title` is reused later for a light-background panel heading, and that
later rule (color: var(--oxy-dark-dark-gray)) wins on source order — which left
the hero's first line «استانداردهای» dark grey on a dark photo. Scope it here. */
.qc-hero-section .qc-main-title {
color: var(--oxy-white);
}
.qc-description {
color: var(--oxy-white);
font-size: var(--oxy-font-size18);
font-weight: var(--oxy-font-weight400);
border-right: 4px solid var(--oxy-purple);
padding-right: var(--oxy-padding-15);
max-width: 500px;
line-height: 1.8;
}
/* --- Responsive Fixes --- */
@media (max-width: 1024px) {
.qc-hero-section {
height: 500px;
padding: 0 5%;
}
.qc-main-title {
font-size: var(--oxy-font-size44);
}
}
@media (max-width: 768px) {
.qc-hero-section {
height: 450px;
justify-content: center;
text-align: center;
/* centred text no longer sits under the side scrim, so darken the whole frame */
background-image: linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.62)),
url('/wp-content/uploads/2026/09/quality-control-hero-768.webp');
}
.qc-description {
border-right: none;
padding-right: 0;
margin: 0 auto;
}
.qc-label-wrapper {
justify-content: center;
}
}
/*بخش دوم صفحه کنترل کیفیت*/
.quality-card img {
width: 100%;
max-width: 260px;
height: auto;
display: block;
margin: 0 auto;
}
/* Optional: subtle glow like Figma */
.quality-card img {
filter: drop-shadow(0 0 10px rgba(182, 82, 255, 0.15));
}
/*Blog page*/
/* Container Layout */
.news-archive-grid {
direction: rtl; /* Ensures Persian text/RTL flow */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--oxy-margin-20);
padding: var(--oxy-padding-20);
}
/* Card Styles */
.news-card {
border-radius: var(--oxy-border-radius12);
overflow: hidden;
position: relative;
transition: 0.3s ease;
border: 1px solid var(--oxy-light-gray);
}
.news-card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* Featured (Large) Cards */
.news-card.featured {
grid-column: span 2; /* Takes 50% width on desktop */
height: 350px;
}
.news-card.featured img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content {
position: absolute;
bottom: 0;
right: 0;
padding: var(--oxy-padding-20);
color: var(--oxy-white);
background: linear-gradient(transparent, rgba(0,0,0,0.7));
width: 100%;
}
/* Standard (Small) Cards */
.news-card.standard {
grid-column: span 1;
}
.news-card.standard img {
width: 100%;
height: 180px;
object-fit: cover;
}
/* Mobile Responsive */
@media (max-width: 992px) {
.news-archive-grid {
grid-template-columns: repeat(2, 1fr);
}
.news-card.featured {
grid-column: span 2;
}
}
@media (max-width: 600px) {
.news-archive-grid {
grid-template-columns: 1fr;
}
.news-card.featured {
grid-column: span 1;
height: 200px;
}
}
/*Image Gallery*/
/* Container Layout */
/*Header Menu*/
.wd-tools-element {
background-color: inherit;
}
/*مراحل کنترل کیفیت*/
/* ================================================
/* ── Wrap ───────────────────────────────────── */
.qc-wrap {
font-family: var(--oxy-yekanbakh);
direction: ltr;
padding: var(--oxy-padding-70) var(--oxy-padding-20);
max-width: 1200px;
margin: 0 auto;
}
/* ── Header ─────────────────────────────────── */
.qc-header {
text-align: center;
margin-bottom: var(--oxy-margin-40);
}
.qc-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--oxy-padding-10);
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight500);
color: var(--oxy-primary);
margin: 0 0 var(--oxy-margin-15);
}
.qc-eyebrow__line {
display: block;
flex: 1;
max-width: 160px;
height: 1px;
background: var(--oxy-light-gray);
}
.qc-main-title {
font-size: var(--oxy-font-size36);
font-weight: var(--oxy-font-weight800);
/* color: var(--oxy-dark-dark-gray); */
margin: 0;
line-height: 1.5;
}
.qc-main-title__highlight {
color: var(--oxy-primary);
font-weight: var(--oxy-font-weight800);
}
/* ── Tabs ───────────────────────────────────── */
.qc-tabs {
display: flex;
flex-direction: row-reverse; /* RTL: tab 1 on right */
border-bottom: none;
gap: 0;
margin-top: var(--oxy-margin-30);
}
.qc-tab {
flex: 1;
padding: 14px var(--oxy-padding-10);
font-family: var(--oxy-yekanbakh);
font-size: var(--oxy-font-size16);
font-weight: var(--oxy-font-weight500);
color: var(--oxy-gray);
background: var(--oxy-white);
border: 1px solid var(--oxy-light-gray);
border-bottom: none;
cursor: pointer;
text-align: center;
transition: background 0.2s, color 0.2s;
position: relative;
}
.qc-tab:first-child {
border-radius: 0 var(--oxy-border-radius8) 0 0;
}
.qc-tab:last-child {
border-radius: var(--oxy-border-radius8) 0 0 0;
}
.qc-tab + .qc-tab {
border-right: none;
}
.qc-tab--active {
background: var(--oxy-secondary);
color: var(--oxy-primary);
font-weight: var(--oxy-font-weight700);
border-color: var(--oxy-light-gray);
border-bottom: 2px solid var(--oxy-secondary);
z-index: 1;
}
.qc-tab:hover:not(.qc-tab--active) {
background: var(--oxy-light-light-gray);
color: var(--oxy-darker-purple);
}
.qc-tabs__underline {
width: 100%;
height: 2px;
background: var(--oxy-light-gray);
margin-bottom: var(--oxy-margin-40);
}
/* ── Panels ─────────────────────────────────── */
.qc-panels {
position: relative;
}
.qc-panel {
display: none;
}
.qc-panel--active {
display: block;
animation: qcFadeIn 0.35s ease;
}
@keyframes qcFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.qc-panel__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--oxy-padding-50);
align-items: center;
}
/* ── Panel Image ────────────────────────────── */
.qc-panel__image {
border-radius: var(--oxy-border-radius16);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.qc-panel__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.qc-panel--active .qc-panel__image img {
transform: scale(1.02);
}
/* ── Panel Content ──────────────────────────── */
.qc-panel__content {
display: flex;
flex-direction: column;
gap: var(--oxy-padding-15);
text-align: right;
}
.qc-panel__step-label {
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight500);
color: var(--oxy-gray);
display: block;
}
.qc-panel__title {
font-size: var(--oxy-font-size32);
font-weight: var(--oxy-font-weight800);
color: var(--oxy-dark-dark-gray);
margin: 0;
line-height: 1.4;
}
.qc-panel__desc {
font-size: var(--oxy-font-size16);
font-weight: var(--oxy-font-weight400);
color: var(--oxy-gray);
line-height: 2;
margin: 0;
text-align: justify;
}
/* ── Panel Nav Buttons ──────────────────────── */
.qc-panel__nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--oxy-margin-10);
flex-direction: row-reverse;
}
.qc-nav-btn {
background: var(--oxy-secondary);
color: var(--oxy-primary);
border: none;
border-radius: var(--oxy-border-radius8);
padding: 10px 22px;
font-family: var(--oxy-yekanbakh);
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight600);
cursor: pointer;
transition: background 0.2s, color 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.qc-nav-btn:hover {
background: var(--oxy-primary);
color: var(--oxy-white);
}
.qc-nav-btn--next {
background: transparent;
color: var(--oxy-gray);
padding-right: 0;
}
.qc-nav-btn--next:hover {
background: transparent;
color: var(--oxy-primary);
}
/* ════════════════════════════════════════════
RESPONSIVE — TABLET (max-width: 900px)
════════════════════════════════════════════ */
@media (max-width: 900px) {
.qc-main-title {
font-size: var(--oxy-font-size28);
}
.qc-panel__inner {
grid-template-columns: 1fr;
gap: var(--oxy-padding-25);
}
.qc-panel__title {
font-size: var(--oxy-font-size24);
}
.qc-tab {
font-size: var(--oxy-font-size13);
padding: 12px var(--oxy-padding-5);
}
}
/* ════════════════════════════════════════════
RESPONSIVE — MOBILE (max-width: 600px)
════════════════════════════════════════════ */
@media (max-width: 600px) {
.qc-wrap {
padding: var(--oxy-padding-40) var(--oxy-padding-15);
}
.qc-main-title {
font-size: var(--oxy-font-size22);
}
.qc-eyebrow__line {
max-width: 60px;
}
.qc-tabs {
flex-wrap: wrap;
}
.qc-tab {
flex: 1 1 calc(50% - 1px);
font-size: var(--oxy-font-size12);
padding: 10px var(--oxy-padding-5);
border-radius: 0 !important;
}
.qc-panel__title {
font-size: var(--oxy-font-size20);
}
.qc-panel__desc {
font-size: var(--oxy-font-size14);
}
.qc-panel__nav {
flex-direction: column;
gap: var(--oxy-padding-10);
align-items: stretch;
}
.qc-nav-btn {
justify-content: center;
width: 100%;
}
.qc-nav-btn--next {
text-align: center;
padding: 10px 22px;
background: var(--oxy-light-light-gray);
}
}
.wd-tools-element .wd-tools-text {
font-family: inherit; !important
}
/*By Mehran*/
/* ===============================
MEDIA — IMAGE GALLERY
pages: گالری تصاویر (index) + album pages (تصاویر کارخانه …)
================================ */
.wdx-gal {
--wdx-gal-bg: #2b2b2b;
--wdx-gal-maxw: 1320px; /* 1320 - 2*20 padding = the 1280 Figma content column */
--wdx-gal-pad: 20px;
--wdx-gal-tile-gap: 8px;
position: relative;
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
padding-block: 32px 72px;
overflow: hidden;
background-color: var(--wdx-gal-bg);
direction: rtl;
font-family: var(--oxy-yekanbakh);
}
/* every direct child is the constrained content column */
.wdx-gal > * {
box-sizing: border-box;
max-width: var(--wdx-gal-maxw);
margin-inline: auto;
padding-inline: var(--wdx-gal-pad);
}
/* ---------- head: breadcrumb + title ---------- */
.wdx-gal__head { margin-block-end: 28px; }
.wdx-gal__crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-block-end: 14px;
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight400);
}
.wdx-gal__crumbs a { color: var(--oxy-purple); text-decoration: none; transition: color .2s ease; }
.wdx-gal__crumbs a:hover,
.wdx-gal__crumbs a:focus-visible { color: var(--oxy-white); text-decoration: underline; }
.wdx-gal__crumbs > span { color: #bdbdbd; }
.wdx-gal__crumbs [aria-current="page"] { color: var(--oxy-white); font-weight: var(--oxy-font-weight600); }
.wdx-gal__sep { color: #6f6f6f; font-size: var(--oxy-font-size12); }
.wdx-gal__title {
margin: 0;
color: var(--oxy-white);
font-size: clamp(24px, 3vw, 36px);
font-weight: var(--oxy-font-weight800);
line-height: 1.6;
}
/* ---------- index: album cards ---------- */
.wdx-gal__albums {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 0;
list-style: none;
}
.wdx-gal__album { margin: 0; }
.wdx-gal__album-in {
position: relative;
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--oxy-border-radius8);
overflow: hidden;
background-color: #1f1f1f;
text-decoration: none;
}
.wdx-gal__album-in > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.wdx-gal__album-in::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 62%);
}
.wdx-gal__album-cap {
position: absolute;
z-index: 1;
inset-inline: 20px;
inset-block-end: 16px;
}
.wdx-gal__album-cap h2 {
margin: 0 0 4px;
color: var(--oxy-white);
font-size: clamp(17px, 1.7vw, 24px);
font-weight: var(--oxy-font-weight700);
line-height: 1.5;
}
.wdx-gal__album-cap span {
color: #d6d6d6;
font-size: var(--oxy-font-size14);
font-weight: var(--oxy-font-weight400);
}
a.wdx-gal__album-in { transition: transform .3s ease; }
a.wdx-gal__album-in:focus-visible { outline: 2px solid var(--oxy-purple); outline-offset: 3px; }
@media (hover: hover) {
a.wdx-gal__album-in:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
a.wdx-gal__album-in { transition: none; }
a.wdx-gal__album-in:hover { transform: none; }
}
/* ---------- album: skin the native core/gallery block ---------- */
.wdx-gal--album .wp-block-gallery.has-nested-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--wdx-gal-tile-gap);
align-items: stretch;
}
.wdx-gal--album .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
width: auto;
max-width: none;
margin: 0;
aspect-ratio: 4 / 3;
border-radius: var(--oxy-border-radius4);
overflow: hidden;
background-color: #1f1f1f;
}
.wdx-gal--album .wp-block-gallery.has-nested-images figure.wp-block-image img {
display: block;
width: 100%;
height: 100%;
max-width: 100% !important;
object-fit: cover;
}
/* ---------- desktop ---------- */
@media (min-width: 768px) {
.wdx-gal { padding-block: 40px 88px; }
.wdx-gal__albums { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.wdx-gal__album-in { aspect-ratio: 4 / 3; }
.wdx-gal__album--wide { grid-column: 1 / -1; }
.wdx-gal__album--wide .wdx-gal__album-in { aspect-ratio: 68 / 25; }
.wdx-gal__album-cap { inset-inline: 28px; inset-block-end: 22px; }
.wdx-gal--album .wp-block-gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); }
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
HERO LEGIBILITY FIXES (round 3)
================================ */
/* --- Contact hero -------------------------------------------------------
The wd/row is saved with "overlay":false, so white text sat on bare sunlit
sand (worst case 1.06:1). Scrim it with a ::before layer instead of touching
background-image, so the photo keeps its own cover/position and a block
re-save cannot wipe this out. RTL: the copy sits on the right, so the
gradient is heaviest there. */
#wd-711a9740 {
position: relative;
}
#wd-711a9740::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(to left,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.80) 50%,
rgba(0, 0, 0, 0.25) 100%);
}
#wd-711a9740 > * {
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
/* copy is centred and full-width on mobile, so scrim the whole frame evenly */
#wd-711a9740::before {
background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72));
}
}
/* --- Quality-control hero title -----------------------------------------
.qc-main-title is declared a second time further down for a light panel
heading; that later rule wins on source order and was shrinking the hero
h1 to 36px (28/22px in its media queries) with margin-bottom:0. Re-assert
the hero's own typography at higher specificity. */
.qc-hero-section .qc-main-title {
font-size: var(--oxy-font-size58);
line-height: 1.2;
margin-bottom: var(--oxy-margin-30);
}
@media (max-width: 1024px) {
.qc-hero-section .qc-main-title {
font-size: var(--oxy-font-size44);
}
}
@media (max-width: 768px) {
.qc-hero-section .qc-main-title {
font-size: var(--oxy-font-size32);
}
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
GALLERY PAGE LAYOUT FIXES (round 4)
================================ */
/* --- A. centre the album grid ------------------------------------------
.wdx-gal > * centres every child with margin-inline:auto, but the list
reset on .wdx-gal__albums re-declared `margin: 0` afterwards and won on
source order. In RTL that parked the 1320px grid against the right edge
and left the gap on the left. Keep the list reset, restore the centring. */
.wdx-gal__albums {
margin-block: 0;
margin-inline: auto;
}
/* --- B. clear the overlapping header ------------------------------------
The header is configured to overlap (whb overlap = on), so the theme sets
.wd-content-layout:first-child { padding-top: 0 } and compensates only on
.wd-page-title which these pages disable. Push the section down by the
real header height so the breadcrumb and title are never underneath it. */
.wd-header-overlap .wdx-gal {
padding-block-start: calc(var(--wd-header-sm-h, 65px) + 32px);
}
@media (min-width: 1025px) {
.wd-header-overlap .wdx-gal {
padding-block-start: calc(var(--wd-header-h, 81px) + var(--wd-header-boxed-sp, 0px) + 40px);
}
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
FOOTER LOGO light container, no plate (round 5)
================================ */
/* The logo is transparent but its wordmark is dark purple ink, so it needs a
light backdrop. Relight the strip itself with the existing light-purple brand
token instead of putting a white plate under the logo.
Measured: wordmark 6.3:1 on #eae0ff, vs 1.09:1 on the old ~#61397f strip. */
.footer-column.footer-column-1.wd-grid-col {
/* background-color: var(--oxy-secondary); */
}
/* plate no longer needed keep the padding so the logo keeps its position */
.oxy-f-logo {
background-color: transparent;
border-radius: 0;
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
PROJECTS MARQUEE larger tiles, half speed (round 6)
================================ */
/* One cycle travels half the row (12 images + 12 gaps). Bigger tiles mean a
longer travel, so the duration has to grow more than proportionally to
actually slow the motion down:
desktop 5076px / 266s = 19.1 px/s (was 2676px / 70s = 38.2 px/s)
mobile 2532px / 190s = 13.3 px/s (was 1332px / 50s = 26.6 px/s) */
.oxy-projects {
--gal-speed: 266s;
}
.oxy-projects-row > img {
width: 399px;
height: 212px;
}
@media (max-width: 768px) {
.oxy-projects {
--gal-speed: 190s;
}
.oxy-projects-row > img {
width: 199px;
height: 112px;
}
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
SECTION SPACING + FOOTER MAP (round 7)
================================ */
/* The theme spaces every top-level block by 20px via its own block-spacing
custom property, applied as :is(.entry-content, &) > * in style.css.
Tighten that to 1px, but only for the layout containers top-level headings
and paragraphs (pages 11, 665, 189) keep their normal rhythm so they do not
collide with the content beneath them. Each section keeps its inner padding. */
/* the class is repeated on purpose: the theme's :is(&) selector carries the
specificity of its most specific argument (two classes), so a single
.entry-content would lose the cascade even though it is more specific in spirit */
article.entry-content.entry-content > section,
article.entry-content.entry-content > div {
margin-block-end: 1px;
}
/* footer map keeps the 272x156 footprint the old PNG occupied */
.oxy-f-map {
inline-size: 272px;
max-inline-size: 100%;
aspect-ratio: 272 / 156;
border-radius: var(--oxy-border-radius4);
overflow: hidden;
display: block;
}
.oxy-f-map iframe {
inline-size: 100%;
block-size: 100%;
border: 0;
display: block;
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
MOBILE — KEEP SECTION LABELS ON ONE LINE (round 10)
================================ */
@media (max-width: 575.98px) {
/* «چرا فولاد آرند» / «محصولات ما» — the ::before/::after rules are 136px SVGs
each, which leaves almost nothing for the label on a phone. Let them shrink
and stop the label from breaking. */
.oxy-title {
white-space: nowrap;
}
/* «خدمات پس از فروش» — rules were a fixed 90px each */
.oxy-after-sale-subtitle {
gap: 10px;
}
.oxy-after-sale-subtitle .line {
flex: 0 1 40px;
width: auto;
min-width: 8px;
}
.oxy-after-sale-subtitle .text {
flex: 0 0 auto;
white-space: nowrap;
}
/* «پروژهها» already fits; pin it so it cannot break on a narrower phone */
.oxy-projects-subtitle-wrap .text {
flex: 0 0 auto;
white-space: nowrap;
}
}
/* «کیفیت، تنوع، نوآوری» — the slide's children are shrink-to-fit, so the title was
breaking even though it needs only ~223px. Give it the full slide width and keep
Figma's 34px, stepping down only on phones narrower than ~358px. */
@media (max-width: 768px) {
.wd-slide-container .oxy-slide-subtitle1 {
inline-size: 100%;
white-space: nowrap;
font-size: min(34px, 9.5vw);
}
.wd-slide-container .oxy-slide-subtitle2 {
inline-size: 100%;
}
}
/*By Mehran*/
/*By Mehran*/
/* ===============================
MOBILE — SECTION LABEL LINES, EVEN ON BOTH SIDES
The lines were content:url(svg) images: a replaced image keeps its 136px
size whatever the box width, so shrinking the box made them spill over and
pushed the label off-centre. Drawn as backgrounds, both sides crop to the
same width and keep their diamond on the outer end.
================================ */
@media (max-width: 767.98px) {
.oxy-title {
align-items: center;
gap: 8px;
white-space: nowrap;
}
.oxy-title::before,
.oxy-title::after {
content: "";
flex: 0 1 56px;
min-width: 16px;
height: 6px;
padding: 0;
background-repeat: no-repeat;
background-size: 136px 6px;
}
.oxy-title::before {
background-image: url('/wp-content/uploads/2025/11/right-line.svg');
background-position: right center;
}
.oxy-title::after {
background-image: url('/wp-content/uploads/2025/11/left-line.svg');
background-position: left center;
}
}@media (min-width: 1025px) {
/* Start of common classes */
.oxy-title {
font-size: var(--oxy-font-size18);}
.oxy-subtitle {
font-size: var(--oxy-font-size32);}
}
@media (max-width: 576px) {
/* Start of common classes */
.oxy-title {font-size: var(--oxy-font-size14);}
.oxy-subtitle {font-size: var(--oxy-font-size26);}
/*Start of footer */
.wd-footer ul {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
position: relative;
}
.wd-footer ul li {
list-style-type: disc;
margin-right: 15px;
}
.wd-footer ul li::marker {
color: var(--oxy-gray);
}
.wd-footer {
background-position: top left;
}
}