.elementor-36 .elementor-element.elementor-element-27d578f{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-36 .elementor-element.elementor-element-0ece985{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-36 .elementor-element.elementor-element-d70cfe2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-36 .elementor-element.elementor-element-0337d03{--display:flex;--min-height:281px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-36 .elementor-element.elementor-element-5b8a1fb{text-align:justify;}.elementor-36 .elementor-element.elementor-element-5b8a1fb .elementor-heading-title{font-family:"Gilda Display", Sans-serif;font-size:22px;font-weight:600;line-height:26px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-36 .elementor-element.elementor-element-94bb043{text-align:justify;}.elementor-36 .elementor-element.elementor-element-9b943e9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-36 .elementor-element.elementor-element-28df27b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-28df27b:not(.elementor-motion-effects-element-type-background), .elementor-36 .elementor-element.elementor-element-28df27b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-f1905a0 );}.elementor-36 .elementor-element.elementor-element-93f1da0 .bdt-ep-product-grid{grid-template-columns:repeat(3, 1fr);grid-column-gap:20px;grid-row-gap:20px;}.elementor-36 .elementor-element.elementor-element-93f1da0 .bdt-ep-product-grid-rating{color:#FFCC00;}.elementor-36 .elementor-element.elementor-element-1dd501d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-button{background-color:var( --e-global-color-secondary );color:var( --e-global-color-c32bad7 );font-family:"Gilda Display", Sans-serif;font-size:14px;font-weight:600;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-thumbnail{padding-bottom:calc( 0.8 * 100% );top:0;left:0;right:0;bottom:0;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-thumbnail:after{content:"0.8";position:absolute;color:transparent;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-thumbnail img{height:100%;width:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.8;opacity:1;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-item, .elementor-36 .elementor-element.elementor-element-084f29f .swiper-carousel{border-radius:5px 5px 5px 5px;}.elementor-36 .elementor-element.elementor-element-084f29f .swiper-carousel{padding:10px;margin:0 -10px;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-item:hover .bdt-ep-carousel-thumbnail img{opacity:1;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-title{font-family:"Gilda Display", Sans-serif;font-size:19px;font-weight:600;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-excerpt{font-family:"Gilda Display", Sans-serif;font-size:14px;font-weight:600;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-ep-carousel-button svg{fill:var( --e-global-color-c32bad7 );}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-prev i, .elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-next i{font-size:24px;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-prev{left:-60px;}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-next{right:-60px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-36 .elementor-element.elementor-element-9b943e9{--width:50%;}}@media(max-width:1024px){.elementor-36 .elementor-element.elementor-element-93f1da0 .bdt-ep-product-grid{grid-template-columns:repeat(2, 1fr);}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-prev i, .elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-next i{font-size:24px;}}@media(max-width:767px){.elementor-36 .elementor-element.elementor-element-93f1da0 .bdt-ep-product-grid{grid-template-columns:repeat(1, 1fr);}.elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-prev i, .elementor-36 .elementor-element.elementor-element-084f29f .bdt-navigation-next i{font-size:24px;}}/* Start custom CSS for html, class: .elementor-element-0ece985 *//* ========================================================= DYARFOOD HERO — FINAL CONSOLIDATED VERSION Transparent Export Globe Image Background / Pattern preserved ========================================================= */ .dyar-home-hero, .dyar-home-hero * { box-sizing: border-box; } /* ========================================================= HERO BASE IMPORTANT: BACKGROUND KEPT UNCHANGED ========================================================= */ .dyar-home-hero { --dyar-green: #003332; --dyar-green-dark: #001c1b; --dyar-green-mid: #064744; --dyar-light: #f4f4f4; --dyar-gold: #b79159; --dyar-sand: #e5d1ab; --dyar-white: #ffffff; position: relative; isolation: isolate; width: 100%; min-height: min(900px, 100svh); margin: 0; overflow: hidden; display: flex; align-items: center; direction: ltr; text-align: left; color: var(--dyar-white); /* ORIGINAL BACKGROUND — DO NOT CHANGE */ background: radial-gradient( circle at 77% 43%, rgba(183,145,89,.16) 0%, rgba(183,145,89,.05) 24%, transparent 48% ), radial-gradient( circle at 12% 8%, rgba(229,209,171,.08) 0%, transparent 30% ), linear-gradient( 118deg, #001e1d 0%, #003332 52%, #002725 100% ); } /* ========================================================= ORIGINAL BRAND PATTERN ========================================================= */ .dyar-home-hero__ambient { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='%23E5D1AB'%3E%3Cpath d='M17 40 A23 23 0 0 1 63 40 L53 40 A13 13 0 0 0 27 40 Z'/%3E%3Cpath d='M17 56 A23 23 0 0 0 63 56 L53 56 A13 13 0 0 1 27 56 Z'/%3E%3Crect x='26' y='46' width='28' height='2.6'/%3E%3Crect x='26' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M107 40 A23 23 0 0 1 153 40 L143 40 A13 13 0 0 0 117 40 Z'/%3E%3Cpath d='M107 56 A23 23 0 0 0 153 56 L143 56 A13 13 0 0 1 117 56 Z'/%3E%3Crect x='116' y='46' width='28' height='2.6'/%3E%3Crect x='116' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M197 40 A23 23 0 0 1 243 40 L233 40 A13 13 0 0 0 207 40 Z'/%3E%3Cpath d='M197 56 A23 23 0 0 0 243 56 L233 56 A13 13 0 0 1 207 56 Z'/%3E%3Crect x='206' y='46' width='28' height='2.6'/%3E%3Crect x='206' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M287 40 A23 23 0 0 1 333 40 L323 40 A13 13 0 0 0 297 40 Z'/%3E%3Cpath d='M287 56 A23 23 0 0 0 333 56 L323 56 A13 13 0 0 1 297 56 Z'/%3E%3Crect x='296' y='46' width='28' height='2.6'/%3E%3Crect x='296' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M62 100 A23 23 0 0 1 108 100 L98 100 A13 13 0 0 0 72 100 Z'/%3E%3Cpath d='M62 116 A23 23 0 0 0 108 116 L98 116 A13 13 0 0 1 72 116 Z'/%3E%3Crect x='71' y='106' width='28' height='2.6'/%3E%3Crect x='71' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M152 100 A23 23 0 0 1 198 100 L188 100 A13 13 0 0 0 162 100 Z'/%3E%3Cpath d='M152 116 A23 23 0 0 0 198 116 L188 116 A13 13 0 0 1 162 116 Z'/%3E%3Crect x='161' y='106' width='28' height='2.6'/%3E%3Crect x='161' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M242 100 A23 23 0 0 1 288 100 L278 100 A13 13 0 0 0 252 100 Z'/%3E%3Cpath d='M242 116 A23 23 0 0 0 288 116 L278 116 A13 13 0 0 1 252 116 Z'/%3E%3Crect x='251' y='106' width='28' height='2.6'/%3E%3Crect x='251' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M332 100 A23 23 0 0 1 378 100 L368 100 A13 13 0 0 0 342 100 Z'/%3E%3Cpath d='M332 116 A23 23 0 0 0 378 116 L368 116 A13 13 0 0 1 342 116 Z'/%3E%3Crect x='341' y='106' width='28' height='2.6'/%3E%3Crect x='341' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M17 160 A23 23 0 0 1 63 160 L53 160 A13 13 0 0 0 27 160 Z'/%3E%3Cpath d='M17 176 A23 23 0 0 0 63 176 L53 176 A13 13 0 0 1 27 176 Z'/%3E%3Crect x='26' y='166' width='28' height='2.6'/%3E%3Crect x='26' y='170.5' width='28' height='2.6'/%3E%3Cpath d='M107 160 A23 23 0 0 1 153 160 L143 160 A13 13 0 0 0 117 160 Z'/%3E%3Cpath d='M107 176 A23 23 0 0 0 153 176 L143 176 A13 13 0 0 1 117 176 Z'/%3E%3Crect x='116' y='166' width='28' height='2.6'/%3E%3Crect x='116' y='170.5' width='28' height='2.6'/%3E%3Cpath d='M197 160 A23 23 0 0 1 243 160 L233 160 A13 13 0 0 0 207 160 Z'/%3E%3Cpath d='M197 176 A23 23 0 0 0 243 176 L233 176 A13 13 0 0 1 207 176 Z'/%3E%3Crect x='206' y='166' width='28' height='2.6'/%3E%3Crect x='206' y='170.5' width='28' height='2.6'/%3E%3Cpath d='M287 160 A23 23 0 0 1 333 160 L323 160 A13 13 0 0 0 297 160 Z'/%3E%3Cpath d='M287 176 A23 23 0 0 0 333 176 L323 176 A13 13 0 0 1 297 176 Z'/%3E%3Crect x='296' y='166' width='28' height='2.6'/%3E%3Crect x='296' y='170.5' width='28' height='2.6'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 520px auto; background-position: -40px 0; -webkit-mask-image: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.32) 65%, transparent 90% ); mask-image: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.32) 65%, transparent 90% ); } /* ========================================================= SUBTLE DOT TEXTURE ========================================================= */ .dyar-home-hero::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .18; background: radial-gradient( circle at 75% 50%, rgba(255,255,255,.04) 0 1px, transparent 1.5px ); background-size: 24px 24px; } /* ========================================================= LAYOUT ========================================================= */ .dyar-home-hero__inner { position: relative; z-index: 5; width: min(1380px, calc(100% - 80px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); gap: clamp(40px, 6vw, 100px); align-items: center; padding: 100px 0 120px; } /* ========================================================= CONTENT ========================================================= */ .dyar-home-hero__content { position: relative; z-index: 10; max-width: 760px; } .dyar-home-hero__eyebrow { margin: 0 0 25px; display: flex; align-items: center; gap: 14px; color: var(--dyar-sand); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 2.7px; text-transform: uppercase; } .dyar-home-hero__eyebrow > span { display: block; flex: 0 0 46px; width: 46px; height: 1px; background: linear-gradient( 90deg, var(--dyar-gold), var(--dyar-sand) ); } .dyar-home-hero h1 { max-width: 820px; margin: 0 0 28px; color: var(--dyar-white); font-size: clamp(48px, 5.4vw, 82px); font-weight: 600; line-height: 1.02; letter-spacing: -3.2px; } .dyar-home-hero h1 span { display: block; margin-top: 7px; color: var(--dyar-sand); font-weight: 400; } .dyar-home-hero__description { max-width: 650px; margin: 0 0 38px; color: rgba(255,255,255,.69); font-size: clamp(16px, 1.3vw, 19px); font-weight: 400; line-height: 1.9; } /* ========================================================= BUTTONS ========================================================= */ .dyar-home-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .dyar-home-hero__button { min-height: 56px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 2px; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: transform .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; } .dyar-home-hero__button--gold { color: var(--dyar-green); background: linear-gradient( 135deg, var(--dyar-sand) 0%, var(--dyar-gold) 100% ); box-shadow: 0 16px 45px rgba(183,145,89,.16); } .dyar-home-hero__button--gold:hover { color: var(--dyar-green); transform: translateY(-3px); box-shadow: 0 22px 60px rgba(183,145,89,.27); } .dyar-home-hero__button--gold span { font-size: 18px; } .dyar-home-hero__button--outline { border: 1px solid rgba(229,209,171,.26); color: rgba(255,255,255,.84); background: rgba(255,255,255,.025); } .dyar-home-hero__button--outline:hover { transform: translateY(-3px); border-color: rgba(183,145,89,.75); color: var(--dyar-white); background: rgba(255,255,255,.055); } /* ========================================================= META ========================================================= */ .dyar-home-hero__meta { margin-top: 58px; display: flex; flex-wrap: wrap; } .dyar-home-hero__meta > div { position: relative; padding: 0 25px; display: flex; flex-direction: column; gap: 5px; border-left: 1px solid rgba(255,255,255,.12); } .dyar-home-hero__meta > div:first-child { padding-left: 0; border-left: 0; } .dyar-home-hero__meta small { color: var(--dyar-gold); font-size: 10px; letter-spacing: 1.5px; } .dyar-home-hero__meta span { color: rgba(255,255,255,.65); font-size: 12px; letter-spacing: .4px; } /* ========================================================= VISUAL COLUMN ========================================================= */ .dyar-home-hero__visual { position: relative; min-height: 620px; display: flex; align-items: center; justify-content: center; perspective: 1400px; } /* ========================================================= NEW EXPORT GLOBE ========================================================= */ .dyar-home-globe { position: relative; width: min(610px, 44vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; perspective: 1200px; isolation: isolate; } /* ========================================================= GLOBE BACK GLOW ========================================================= */ .dyar-home-globe__halo { position: absolute; z-index: 0; width: 94%; height: 94%; border-radius: 50%; background: radial-gradient( circle, rgba(229,209,171,.18) 0%, rgba(183,145,89,.10) 27%, rgba(183,145,89,.035) 47%, transparent 72% ); filter: blur(38px); opacity: .85; animation: dyarGlobeHalo 5s ease-in-out infinite; } /* ========================================================= GLOBE SPHERE ========================================================= */ .dyar-home-globe__sphere { position: relative; z-index: 3; width: 84%; aspect-ratio: 1; border-radius: 50%; /* * IMPORTANT: * Transparent background image supplied by user */ background-image: url("https://www.dyarfood.com/wp-content/uploads/2026/09/3b948cc2-b3db-4a03-b9f2-762fe4cf35eb-Background-Removed.webp"); background-repeat: no-repeat; background-position: center center; background-size: 108% auto; /* * چون فایل Transparent است، * بک‌گراند اصلی Hero از پشت دیده می‌شود. */ background-color: transparent; border: 0; overflow: visible; filter: drop-shadow( 0 35px 45px rgba(0,0,0,.34) ) drop-shadow( 0 0 22px rgba(183,145,89,.11) ); transform-style: preserve-3d; will-change: transform, background-position; animation: dyarGlobeFloat 7s ease-in-out infinite, dyarGlobeVisualRotate 18s ease-in-out infinite; } /* ========================================================= OLD MAP IS DISABLED ========================================================= */ .dyar-home-globe__map { display: none !important; } /* Existing generated grid isn't needed */ .dyar-home-globe__latitudes, .dyar-home-globe__longitudes { display: none !important; } /* Existing Iran point isn't required */ .dyar-home-globe__location { display: none !important; } /* ========================================================= SHINE OVER GLOBE ========================================================= */ .dyar-home-globe__shine { position: absolute; z-index: 28; inset: 3%; border-radius: 50%; pointer-events: none; background: radial-gradient( circle at 25% 18%, rgba(255,255,255,.12) 0%, transparent 17% ), radial-gradient( circle at 22% 24%, rgba(229,209,171,.09) 0%, transparent 28% ); } /* ========================================================= EDGE SHADE ========================================================= */ .dyar-home-globe__shade { position: absolute; z-index: 29; inset: 3%; border-radius: 50%; pointer-events: none; background: radial-gradient( circle at center, transparent 58%, rgba(0,0,0,.025) 72%, rgba(0,0,0,.09) 90%, rgba(0,0,0,.17) 100% ); } /* ========================================================= ORBITS ========================================================= */ .dyar-home-globe__orbit { position: absolute; z-index: 4; border: 1px solid rgba(183,145,89,.22); border-radius: 50%; pointer-events: none; box-shadow: 0 0 18px rgba(183,145,89,.025); } /* first orbit */ .dyar-home-globe__orbit--1 { width: 105%; height: 46%; transform: rotate(-17deg); animation: dyarOrbitOne 17s linear infinite; } /* second orbit */ .dyar-home-globe__orbit--2 { width: 94%; height: 94%; opacity: .48; transform: rotate(28deg); animation: dyarOrbitTwo 23s linear infinite; } /* ========================================================= LABELS ========================================================= */ .dyar-home-globe__label { position: absolute; z-index: 55; padding: 10px 14px; border: 1px solid rgba(229,209,171,.20); background: rgba(0,40,38,.60); box-shadow: 0 12px 35px rgba(0,0,0,.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.80); font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 1.2px; text-transform: uppercase; } .dyar-home-globe__label--iran { top: 25%; left: -1%; display: flex; align-items: center; gap: 8px; animation: dyarLabelFloat 6s ease-in-out infinite; } .dyar-home-globe__label--iran span { width: 6px; height: 6px; border-radius: 50%; background: var(--dyar-gold); box-shadow: 0 0 14px var(--dyar-gold); } .dyar-home-globe__label--export { right: -1%; bottom: 22%; animation: dyarLabelFloat 7s ease-in-out infinite reverse; } /* ========================================================= BOTTOM DECORATIVE LINE ========================================================= */ .dyar-home-hero__bottom { position: absolute; z-index: 5; right: 40px; bottom: 27px; left: 40px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; color: rgba(255,255,255,.30); font-size: 9px; letter-spacing: 2.4px; } .dyar-home-hero__bottom div { height: 1px; background: linear-gradient( 90deg, rgba(183,145,89,.12), rgba(183,145,89,.48), rgba(183,145,89,.12) ); } /* ========================================================= ANIMATIONS ========================================================= */ /* * Globe floating */ @keyframes dyarGlobeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } /* * این افکت به‌جای چرخاندن تخت PNG، * حرکت افقی بسیار نرم + زاویه بسیار کم ایجاد می‌کند. */ @keyframes dyarGlobeVisualRotate { 0% { background-position: 46% center; rotate: y -1.5deg; } 25% { background-position: 50% center; rotate: y 0deg; } 50% { background-position: 54% center; rotate: y 1.5deg; } 75% { background-position: 50% center; rotate: y 0deg; } 100% { background-position: 46% center; rotate: y -1.5deg; } } /* breathing halo */ @keyframes dyarGlobeHalo { 0%, 100% { transform: scale(.95); opacity: .62; } 50% { transform: scale(1.055); opacity: .96; } } /* Orbit 1 */ @keyframes dyarOrbitOne { from { transform: rotate(-17deg); } to { transform: rotate(343deg); } } /* Orbit 2 */ @keyframes dyarOrbitTwo { from { transform: rotate(28deg); } to { transform: rotate(-332deg); } } /* floating labels */ @keyframes dyarLabelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .dyar-home-hero { min-height: auto; } .dyar-home-hero__inner { width: min(100% - 40px, 860px); grid-template-columns: 1fr; gap: 34px; padding: 76px 0 96px; } .dyar-home-hero__content { width: 100%; max-width: 760px; margin: 0 auto; } .dyar-home-hero__visual { width: 100%; min-height: 500px; } .dyar-home-globe { width: min(510px, 74vw); } .dyar-home-hero__ambient { opacity: .04; background-size: 460px auto; } } /* ========================================================= MOBILE GLOBE FIRST ========================================================= */ @media (max-width: 767px) { .dyar-home-hero { min-height: auto; align-items: flex-start; } /* * IMPORTANT: * Globe appears before text on mobile */ .dyar-home-hero__inner { width: calc(100% - 28px); display: flex !important; flex-direction: column !important; gap: 22px; padding: 28px 0 72px; } .dyar-home-hero__visual { order: 1; width: 100%; min-height: 310px; margin: 0; display: flex; align-items: center; justify-content: center; } .dyar-home-hero__content { order: 2; width: 100%; max-width: none; margin: 0; } /* Globe */ .dyar-home-globe { width: min(320px, 88vw); } .dyar-home-globe__sphere { width: 84%; background-size: 110% auto; animation: dyarGlobeFloat 8s ease-in-out infinite, dyarGlobeVisualRotate 21s ease-in-out infinite; } .dyar-home-globe__halo { width: 88%; height: 88%; filter: blur(25px); opacity: .74; } /* Orbit */ .dyar-home-globe__orbit--1 { width: 102%; height: 43%; } .dyar-home-globe__orbit--2 { width: 91%; height: 91%; } /* Labels */ .dyar-home-globe__label { padding: 7px 9px; font-size: 8px; letter-spacing: .75px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .dyar-home-globe__label--iran { top: 18%; left: 1%; } .dyar-home-globe__label--export { right: 1%; bottom: 15%; } /* Eyebrow */ .dyar-home-hero__eyebrow { margin: 0 0 14px; gap: 10px; font-size: 9.5px; line-height: 1.5; letter-spacing: 1.4px; } .dyar-home-hero__eyebrow > span { flex-basis: 24px; width: 24px; } /* Heading */ .dyar-home-hero h1 { max-width: 100%; margin: 0 0 18px; font-size: clamp(34px, 10.2vw, 46px); line-height: 1.05; letter-spacing: -1.4px; } .dyar-home-hero h1 span { margin-top: 5px; } /* Description */ .dyar-home-hero__description { max-width: 100%; margin-bottom: 25px; font-size: 14.5px; line-height: 1.78; } /* Buttons */ .dyar-home-hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; } .dyar-home-hero__button { width: 100%; min-height: 52px; padding: 0 18px; font-size: 13px; } /* Meta */ .dyar-home-hero__meta { margin-top: 34px; display: grid; grid-template-columns: 1fr; gap: 10px; } .dyar-home-hero__meta > div, .dyar-home-hero__meta > div:first-child { padding: 0 0 0 12px; border: 0; border-left: 1px solid rgba(183,145,89,.32); } .dyar-home-hero__meta small { font-size: 9px; } .dyar-home-hero__meta span { font-size: 11px; } /* Pattern remains same family */ .dyar-home-hero__ambient { opacity: .026; background-size: 350px auto; background-position: -60px 10px; -webkit-mask-image: linear-gradient( 180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.20) 72%, transparent 100% ); mask-image: linear-gradient( 180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.20) 72%, transparent 100% ); } /* Bottom label */ .dyar-home-hero__bottom { right: 14px; bottom: 12px; left: 14px; gap: 9px; font-size: 6.5px; letter-spacing: 1px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .dyar-home-hero__inner { width: calc(100% - 24px); gap: 17px; padding: 22px 0 64px; } .dyar-home-hero__visual { min-height: 270px; } .dyar-home-globe { width: min(280px, 85vw); } .dyar-home-hero h1 { font-size: clamp(32px, 10.8vw, 41px); line-height: 1.06; letter-spacing: -1.1px; } .dyar-home-hero__description { font-size: 14px; line-height: 1.75; } .dyar-home-hero__button { min-height: 50px; } .dyar-home-globe__label--iran { top: 16%; } .dyar-home-globe__label--export { bottom: 13%; } .dyar-home-hero__bottom span:last-child { display: none; } .dyar-home-hero__bottom { grid-template-columns: auto 1fr; } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .dyar-home-globe__sphere, .dyar-home-globe__halo, .dyar-home-globe__orbit, .dyar-home-globe__label { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d70cfe2 *//* ========================================================= DYARFOOD — ABOUT SECTION SEAMLESS HERO CONTINUATION FINAL CLEAN VERSION ========================================================= */ /* ========================================================= 01. HERO → ABOUT BRIDGE ========================================================= */ /* * Pattern هدر و Pattern این سکشن از یک مختصات استفاده می‌کنند. * روی دسکتاپ باعث می‌شود Pattern واقعاً پیوسته دیده شود. */ .dyar-home-hero__ambient { background-attachment: fixed !important; background-position: -40px 0 !important; } /* * حذف هر فاصله یا خط احتمالی پایین Hero */ .dyar-home-hero { margin-bottom: -2px !important; } /* ========================================================= 02. ABOUT MAIN CONTAINER ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2, .elementor-36 .elementor-element.elementor-element-d70cfe2 * { box-sizing: border-box; } .elementor-36 .elementor-element.elementor-element-d70cfe2 { --dyar-green: #003332; --dyar-green-deep: #002f2d; --dyar-gold: #b79159; --dyar-sand: #e5d1ab; --dyar-light: #f4f4f4; position: relative; isolation: isolate; overflow: hidden; width: 100%; /* * 2px overlap برای حذف خط اتصال */ margin: -2px 0 0 !important; /* * فضای خالی کمتر از نسخه‌های قبلی */ padding: clamp(52px, 4.5vw, 72px) 0 clamp(105px, 7vw, 125px); /* * مهم: * شروع About تقریباً همان رنگ انتهای Hero است. * هیچ Gradient روشن از بالا نداریم. */ background: linear-gradient( 180deg, #003130 0%, #003332 15%, #003332 70%, #043a37 100% ); border: 0 !important; box-shadow: none !important; color: #ffffff; } /* ========================================================= 03. SAME BRAND PATTERN AS HERO ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2::before { content: ""; position: absolute; z-index: 0; inset: 0 0 0 0; pointer-events: none; /* * همان SVG اصلی Pattern Hero */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'%3E%3Cg fill='%23E5D1AB'%3E%3Cpath d='M17 40 A23 23 0 0 1 63 40 L53 40 A13 13 0 0 0 27 40 Z'/%3E%3Cpath d='M17 56 A23 23 0 0 0 63 56 L53 56 A13 13 0 0 1 27 56 Z'/%3E%3Crect x='26' y='46' width='28' height='2.6'/%3E%3Crect x='26' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M107 40 A23 23 0 0 1 153 40 L143 40 A13 13 0 0 0 117 40 Z'/%3E%3Cpath d='M107 56 A23 23 0 0 0 153 56 L143 56 A13 13 0 0 1 117 56 Z'/%3E%3Crect x='116' y='46' width='28' height='2.6'/%3E%3Crect x='116' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M197 40 A23 23 0 0 1 243 40 L233 40 A13 13 0 0 0 207 40 Z'/%3E%3Cpath d='M197 56 A23 23 0 0 0 243 56 L233 56 A13 13 0 0 1 207 56 Z'/%3E%3Crect x='206' y='46' width='28' height='2.6'/%3E%3Crect x='206' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M287 40 A23 23 0 0 1 333 40 L323 40 A13 13 0 0 0 297 40 Z'/%3E%3Cpath d='M287 56 A23 23 0 0 0 333 56 L323 56 A13 13 0 0 1 297 56 Z'/%3E%3Crect x='296' y='46' width='28' height='2.6'/%3E%3Crect x='296' y='50.5' width='28' height='2.6'/%3E%3Cpath d='M62 100 A23 23 0 0 1 108 100 L98 100 A13 13 0 0 0 72 100 Z'/%3E%3Cpath d='M62 116 A23 23 0 0 0 108 116 L98 116 A13 13 0 0 1 72 116 Z'/%3E%3Crect x='71' y='106' width='28' height='2.6'/%3E%3Crect x='71' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M152 100 A23 23 0 0 1 198 100 L188 100 A13 13 0 0 0 162 100 Z'/%3E%3Cpath d='M152 116 A23 23 0 0 0 198 116 L188 116 A13 13 0 0 1 162 116 Z'/%3E%3Crect x='161' y='106' width='28' height='2.6'/%3E%3Crect x='161' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M242 100 A23 23 0 0 1 288 100 L278 100 A13 13 0 0 0 252 100 Z'/%3E%3Cpath d='M242 116 A23 23 0 0 0 288 116 L278 116 A13 13 0 0 1 252 116 Z'/%3E%3Crect x='251' y='106' width='28' height='2.6'/%3E%3Crect x='251' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M332 100 A23 23 0 0 1 378 100 L368 100 A13 13 0 0 0 342 100 Z'/%3E%3Cpath d='M332 116 A23 23 0 0 0 378 116 L368 116 A13 13 0 0 1 342 116 Z'/%3E%3Crect x='341' y='106' width='28' height='2.6'/%3E%3Crect x='341' y='110.5' width='28' height='2.6'/%3E%3Cpath d='M17 160 A23 23 0 0 1 63 160 L53 160 A13 13 0 0 0 27 160 Z'/%3E%3Cpath d='M17 176 A23 23 0 0 0 63 176 L53 176 A13 13 0 0 1 27 176 Z'/%3E%3Crect x='26' y='166' width='28' height='2.6'/%3E%3Crect x='26' y='170.5' width='28' height='2.6'/%3E%3Cpath d='M107 160 A23 23 0 0 1 153 160 L143 160 A13 13 0 0 0 117 160 Z'/%3E%3Cpath d='M107 176 A23 23 0 0 0 153 176 L143 176 A13 13 0 0 1 117 176 Z'/%3E%3Crect x='116' y='166' width='28' height='2.6'/%3E%3Crect x='116' y='170.5' width='28' height='2.6'/%3E%3Cpath d='M197 160 A23 23 0 0 1 243 160 L233 160 A13 13 0 0 0 207 160 Z'/%3E%3Cpath d='M197 176 A23 23 0 0 0 243 176 L233 176 A13 13 0 0 1 207 176 Z'/%3E%3Crect x='206' y='166' width='28' height='2.6'/%3E%3Crect x='206' y='170.5' width='28' height='2.6'/%3E%3Cpath d='M287 160 A23 23 0 0 1 333 160 L323 160 A13 13 0 0 0 297 160 Z'/%3E%3Cpath d='M287 176 A23 23 0 0 0 333 176 L323 176 A13 13 0 0 1 297 176 Z'/%3E%3Crect x='296' y='166' width='28' height='2.6'/%3E%3Crect x='296' y='170.5' width='28' height='2.6'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; /* * دقیقاً Scale Hero */ background-size: 520px auto; /* * چون fixed است، Hero و About یک شبکه مشترک دارند. */ background-position: -40px 0; background-attachment: fixed; opacity: .055; /* * Pattern در نیمه پایین About آرام ناپدید می‌شود. */ -webkit-mask-image: linear-gradient( 180deg, #000 0%, #000 32%, rgba(0,0,0,.88) 48%, rgba(0,0,0,.58) 65%, rgba(0,0,0,.26) 79%, rgba(0,0,0,.06) 91%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 0%, #000 32%, rgba(0,0,0,.88) 48%, rgba(0,0,0,.58) 65%, rgba(0,0,0,.26) 79%, rgba(0,0,0,.06) 91%, transparent 100% ); } /* ========================================================= 04. LIGHT EXIT ONLY AT THE VERY END ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: clamp(95px, 7vw, 125px); pointer-events: none; /* * شروع Fade بسیار دیر انجام می‌شود. * بنابراین پشت متن و تصویر سبز می‌ماند. */ background: linear-gradient( 180deg, rgba(244,244,244,0) 0%, rgba(244,244,244,0) 12%, rgba(244,244,244,.025) 25%, rgba(244,244,244,.08) 38%, rgba(244,244,244,.20) 52%, rgba(244,244,244,.40) 66%, rgba(244,244,244,.64) 79%, rgba(244,244,244,.84) 90%, #f4f4f4 100% ); } /* ========================================================= 05. CONTENT LAYOUT ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2 > .e-con-inner { position: relative; z-index: 4; width: min(1280px, calc(100% - 60px)); margin: 0 auto; display: grid !important; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center !important; gap: clamp(32px, 4vw, 58px); } /* Elementor width reset */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03, .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9 { width: 100% !important; max-width: none !important; min-width: 0; } /* ========================================================= 06. LEFT CONTENT ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03 { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 560px !important; padding: 0; } /* About label */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03::before { content: "ABOUT DYARFOOD"; display: block; margin-bottom: 13px; color: var(--dyar-sand); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 2.4px; text-transform: uppercase; } /* very subtle vertical accent */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03::after { content: ""; position: absolute; left: -17px; top: 0; width: 1px; height: 35px; background: linear-gradient( 180deg, var(--dyar-gold), transparent ); } /* ========================================================= 07. HEADING SIZE/TYPOGRAPHY = ELEMENTOR ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-5b8a1fb { width: 100%; margin: 0 !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-5b8a1fb .elementor-heading-title { margin: 0 !important; color: #ffffff !important; text-align: left !important; word-spacing: normal !important; } /* ========================================================= 08. BODY TEXT SIZE/TYPOGRAPHY = ELEMENTOR ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-94bb043 { max-width: 530px; margin-top: 17px !important; color: rgba(255,255,255,.76) !important; text-align: left !important; word-spacing: normal !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-94bb043, .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-94bb043 p, .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-94bb043 .elementor-widget-container { color: rgba(255,255,255,.76) !important; text-align: left !important; word-spacing: normal !important; } /* ========================================================= 09. IMAGE COLUMN ========================================================= */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9 { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 0 17px 9px; } /* upper gold frame */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9::before { content: ""; position: absolute; z-index: 0; top: -8px; right: 7%; width: 59%; height: 58%; border: 1px solid rgba(183,145,89,.44); pointer-events: none; } /* lower glass square */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9::after { content: ""; position: absolute; z-index: 0; left: 1%; bottom: 0; width: 33%; height: 27%; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.022); pointer-events: none; } /* Image widget */ .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-d38efd1 { position: relative; z-index: 2; width: 100%; margin: 0 !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-d38efd1 .elementor-widget-container { position: relative; overflow: hidden; border: 1px solid rgba(229,209,171,.12); box-shadow: 0 20px 56px rgba(0,0,0,.22); } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-d38efd1 img { display: block; width: 100% !important; height: auto; object-fit: cover; transition: transform .7s ease; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-d38efd1:hover img { transform: scale(1.015); } /* ========================================================= 10. TABLET ========================================================= */ @media (max-width: 1024px) { /* * background-attachment: fixed * روی بعضی تبلت‌ها خوب Render نمی‌شود. */ .dyar-home-hero__ambient { background-attachment: scroll !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2::before { background-attachment: scroll; background-size: 460px auto; } .elementor-36 .elementor-element.elementor-element-d70cfe2 { padding: 50px 0 98px; } .elementor-36 .elementor-element.elementor-element-d70cfe2 > .e-con-inner { width: min(100% - 40px, 880px); grid-template-columns: 1fr; gap: 31px; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03 { max-width: 650px !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9 { width: min(100%, 720px) !important; margin: 0 auto; } } /* ========================================================= 11. MOBILE ========================================================= */ @media (max-width: 767px) { .dyar-home-hero { margin-bottom: -1px !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 { margin-top: -1px !important; padding: 40px 0 82px; } .elementor-36 .elementor-element.elementor-element-d70cfe2 > .e-con-inner { width: calc(100% - 26px); grid-template-columns: 1fr; gap: 23px; } /* * موبایل: Pattern سبک‌تر برای Performance */ .elementor-36 .elementor-element.elementor-element-d70cfe2::before { background-attachment: scroll; background-size: 350px auto; background-position: -60px 0; opacity: .038; } .elementor-36 .elementor-element.elementor-element-d70cfe2::after { height: 88px; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03 { max-width: none !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03::before { margin-bottom: 9px; font-size: 9px; letter-spacing: 1.8px; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-0337d03::after { display: none; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-94bb043 { max-width: none; margin-top: 13px !important; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9 { padding: 5px 0 9px 4px; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9::before { top: -5px; right: 1%; width: 56%; height: 52%; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-9b943e9::after { width: 29%; height: 23%; } .elementor-36 .elementor-element.elementor-element-d70cfe2 .elementor-element-d38efd1 .elementor-widget-container { box-shadow: 0 16px 40px rgba(0,0,0,.18); } }/* End custom CSS */ /* Start custom CSS for bdt-product-grid, class: .elementor-element-93f1da0 *//* ===================================== DYAR FOOD PRODUCT GRID FINAL PREMIUM VERSION ===================================== */ /* CARD */ .bdt-ep-product-grid-item { background:#ffffff; border-radius:22px; overflow:hidden; border:1px solid rgba(0,51,50,0.08); box-shadow:0 12px 35px rgba(0,51,50,0.06); transition:all .35s ease; display:flex !important; flex-direction:column !important; } .bdt-ep-product-grid-item:hover { transform:translateY(-6px); box-shadow:0 20px 45px rgba(0,51,50,0.14); border-color:rgba(183,145,89,.45); } /* ===================================== CONTENT ===================================== */ .bdt-ep-product-grid-content { padding:20px 26px 28px !important; display:flex !important; flex-direction:column !important; flex:1 !important; height:auto !important; min-height:0 !important; } /* GOLD LINE */ .bdt-ep-product-grid-content:before { content:""; display:block; width:45px; height:3px; background:#B79159; border-radius:20px; margin-bottom:16px; } /* TITLE */ .bdt-ep-product-grid-title { color:#003332 !important; font-size:23px !important; font-weight:700 !important; line-height:1.4 !important; margin:0 0 14px !important; } /* DESCRIPTION */ .bdt-ep-product-grid-text { flex-grow:1 !important; } .bdt-ep-product-grid-text p { color:#66716f !important; font-size:15px !important; line-height:1.75 !important; margin:0 0 20px !important; } /* READ MORE BUTTON */ .bdt-ep-product-grid-readmore { margin-top:auto !important; display:inline-flex !important; align-items:center; justify-content:center; width:max-content; padding:12px 28px !important; background:#003332 !important; color:#ffffff !important; border-radius:50px; font-size:14px; font-weight:600; transition:.3s ease; } .bdt-ep-product-grid-readmore:hover { background:#B79159 !important; color:#ffffff !important; } /* REMOVE RATING */ .bdt-ep-product-grid-rating-time { display:none !important; } /* GRID */ .bdt-ep-product-grid { gap:32px !important; } /* ===================================== MOBILE ===================================== */ @media(max-width:767px){ .bdt-ep-product-grid-content { padding:18px 20px 24px !important; } .bdt-ep-product-grid-title { font-size:20px !important; } .bdt-ep-product-grid-text p { font-size:14px !important; } .bdt-ep-product-grid-readmore { padding:11px 24px !important; } } /* ===================================== FINAL IMAGE ALIGNMENT FIX ===================================== */ /* Image wrapper */ .bdt-ep-product-grid-image, .bdt-ep-product-grid-img { width:100% !important; overflow:hidden !important; display:flex !important; justify-content:center !important; align-items:center !important; background:#f4f4f4; } /* Product image */ .bdt-ep-product-grid-image img, .bdt-ep-product-grid-img img { width:100% !important; height:260px !important; object-fit:cover !important; object-position:center center !important; display:block !important; } /* Remove inner spacing */ .bdt-ep-product-grid-image a, .bdt-ep-product-grid-img a { width:100% !important; display:block !important; } /* Mobile */ @media(max-width:767px){ .bdt-ep-product-grid-image img, .bdt-ep-product-grid-img img { height:220px !important; } }/* End custom CSS */