.elementor-33974 .elementor-element.elementor-element-5b099b0{--display:flex;}.elementor-33974 .elementor-element.elementor-element-acbc0f0{--display:flex;}.elementor-33974 .elementor-element.elementor-element-f226ff1{--display:flex;}.elementor-33974 .elementor-element.elementor-element-47b6b45{--display:flex;}.elementor-33974 .elementor-element.elementor-element-f08afa0{--display:flex;}.elementor-33974 .elementor-element.elementor-element-47332b0{--display:flex;}.elementor-33974 .elementor-element.elementor-element-9c19f0f{--display:flex;}.elementor-33974 .elementor-element.elementor-element-e68600f{--display:flex;}.elementor-33974 .elementor-element.elementor-element-488e7a3{--display:flex;}.elementor-33974 .elementor-element.elementor-element-abb8de7 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-073216e{--display:flex;}.elementor-33974 .elementor-element.elementor-element-0fc12e1 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-801761a{--display:flex;}.elementor-33974 .elementor-element.elementor-element-b632109 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-e49351e{--display:flex;}.elementor-33974 .elementor-element.elementor-element-bf446ff{--display:flex;}.elementor-33974 .elementor-element.elementor-element-743957c{--display:flex;}.elementor-33974 .elementor-element.elementor-element-3609cb4{--display:flex;}.elementor-33974 .elementor-element.elementor-element-161db9e{--display:flex;}.elementor-33974 .elementor-element.elementor-element-ab7bc43{--display:flex;}.elementor-33974 .elementor-element.elementor-element-02efdd1{--display:flex;}.elementor-33974 .elementor-element.elementor-element-84f7987{--display:flex;}.elementor-33974 .elementor-element.elementor-element-49e1823{--display:flex;}.elementor-33974 .elementor-element.elementor-element-7fe49ff{--display:flex;}.elementor-33974 .elementor-element.elementor-element-38abc52{--display:flex;}.elementor-33974 .elementor-element.elementor-element-c3d3274{--display:flex;}.elementor-33974 .elementor-element.elementor-element-aec1a60{--display:flex;}.elementor-33974 .elementor-element.elementor-element-76882db{--display:flex;}.elementor-33974 .elementor-element.elementor-element-900ad0e{--display:flex;}.elementor-33974 .elementor-element.elementor-element-9864949{--display:flex;}.elementor-33974 .elementor-element.elementor-element-c4f0ac2{--display:flex;}.elementor-33974 .elementor-element.elementor-element-c24107d{--display:flex;}.elementor-33974 .elementor-element.elementor-element-9b75060{--display:flex;}.elementor-33974 .elementor-element.elementor-element-d1f1014{--display:flex;}.elementor-33974 .elementor-element.elementor-element-cbb5ff4{--display:flex;}.elementor-33974 .elementor-element.elementor-element-0db4bf9{--display:flex;}.elementor-33974 .elementor-element.elementor-element-2ffc3f6{--display:flex;}.elementor-33974 .elementor-element.elementor-element-d80076e{--display:flex;}.elementor-33974 .elementor-element.elementor-element-af9972b{--display:flex;}.elementor-33974 .elementor-element.elementor-element-dcd1a14{--display:flex;}.elementor-33974 .elementor-element.elementor-element-bc4b476{--display:flex;}.elementor-33974 .elementor-element.elementor-element-bf806f3{--display:flex;}.elementor-33974 .elementor-element.elementor-element-8a9c3b4{--display:flex;}.elementor-33974 .elementor-element.elementor-element-906fbfe{--display:flex;}.elementor-33974 .elementor-element.elementor-element-c340515{--display:flex;}.elementor-33974 .elementor-element.elementor-element-fda35f2{--display:flex;}.elementor-33974 .elementor-element.elementor-element-e00d66c{--display:flex;}.elementor-33974 .elementor-element.elementor-element-98f984f{--display:flex;}.elementor-33974 .elementor-element.elementor-element-558dc07{--display:flex;}.elementor-33974 .elementor-element.elementor-element-2f0abc6{--display:flex;}.elementor-33974 .elementor-element.elementor-element-e089b04 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-d73c076{--display:flex;}.elementor-33974 .elementor-element.elementor-element-64fa006 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-adf5da8{--display:flex;}.elementor-33974 .elementor-element.elementor-element-daca593 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-6e3f748{--display:flex;}.elementor-33974 .elementor-element.elementor-element-f0cab48 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-9405507{--display:flex;}.elementor-33974 .elementor-element.elementor-element-d205787{--display:flex;}.elementor-33974 .elementor-element.elementor-element-779dcb8{--display:flex;}.elementor-33974 .elementor-element.elementor-element-953e1ae{--display:flex;}.elementor-33974 .elementor-element.elementor-element-30d1d2a{--display:flex;}.elementor-33974 .elementor-element.elementor-element-d85f343 .elementor-icon-wrapper{text-align:center;}.elementor-33974 .elementor-element.elementor-element-8875bc1{--display:flex;}.elementor-33974 .elementor-element.elementor-element-c0e4724{--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;--margin-top:60px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-33974 .elementor-element.elementor-element-1b5dd21{--divider-border-style:solid;--divider-color:#000;--divider-border-width:2px;}.elementor-33974 .elementor-element.elementor-element-1b5dd21 .elementor-divider-separator{width:12%;margin:0 auto;margin-left:0;}.elementor-33974 .elementor-element.elementor-element-1b5dd21 .elementor-divider{text-align:left;padding-block-start:15px;padding-block-end:15px;}.elementor-33974 .elementor-element.elementor-element-4ad27f3{--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;--overflow:hidden;}.elementor-33974 .elementor-element.elementor-element-bb765e3{--display:flex;}.elementor-33974 .elementor-element.elementor-element-4b23773 .elementor-icon-box-wrapper{text-align:end;gap:15px;}.elementor-33974 .elementor-element.elementor-element-4b23773 .elementor-icon{font-size:65px;}.elementor-33974 .elementor-element.elementor-element-4b23773 .elementor-icon-box-title, .elementor-33974 .elementor-element.elementor-element-4b23773 .elementor-icon-box-title a{font-size:23px;}.elementor-33974 .elementor-element.elementor-element-4b23773 .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-33974 .elementor-element.elementor-element-4b23773 .elementor-icon-box-description{color:#717171;}.elementor-33974 .elementor-element.elementor-element-ee92691{--display:flex;}.elementor-33974 .elementor-element.elementor-element-41411a6 .elementor-icon-box-wrapper{text-align:end;gap:15px;}.elementor-33974 .elementor-element.elementor-element-41411a6 .elementor-icon{font-size:65px;}.elementor-33974 .elementor-element.elementor-element-41411a6 .elementor-icon-box-title, .elementor-33974 .elementor-element.elementor-element-41411a6 .elementor-icon-box-title a{font-size:23px;}.elementor-33974 .elementor-element.elementor-element-41411a6 .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-33974 .elementor-element.elementor-element-41411a6 .elementor-icon-box-description{color:#717171;}.elementor-33974 .elementor-element.elementor-element-41cc6c2{--display:flex;}.elementor-33974 .elementor-element.elementor-element-5304b85 .elementor-icon-box-wrapper{text-align:end;gap:15px;}.elementor-33974 .elementor-element.elementor-element-5304b85 .elementor-icon{font-size:65px;}.elementor-33974 .elementor-element.elementor-element-5304b85 .elementor-icon-box-title, .elementor-33974 .elementor-element.elementor-element-5304b85 .elementor-icon-box-title a{font-size:23px;}.elementor-33974 .elementor-element.elementor-element-5304b85 .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-33974 .elementor-element.elementor-element-5304b85 .elementor-icon-box-description{color:#717171;}.elementor-33974 .elementor-element.elementor-element-e8cb590{--display:flex;}.elementor-33974 .elementor-element.elementor-element-65322a6 .elementor-icon-box-wrapper{text-align:end;gap:15px;}.elementor-33974 .elementor-element.elementor-element-65322a6 .elementor-icon{font-size:65px;}.elementor-33974 .elementor-element.elementor-element-65322a6 .elementor-icon-box-title, .elementor-33974 .elementor-element.elementor-element-65322a6 .elementor-icon-box-title a{font-size:23px;}.elementor-33974 .elementor-element.elementor-element-65322a6 .elementor-icon-box-title{color:var( --e-global-color-text );}.elementor-33974 .elementor-element.elementor-element-65322a6 .elementor-icon-box-description{color:#717171;}.elementor-33974 .elementor-element.elementor-element-56f5323{--display:flex;}.elementor-33974 .elementor-element.elementor-element-e1b7a6a{--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;--border-radius:18px 18px 18px 18px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-33974 .elementor-element.elementor-element-e1b7a6a:not(.elementor-motion-effects-element-type-background), .elementor-33974 .elementor-element.elementor-element-e1b7a6a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3F6FA;}.elementor-33974 .elementor-element.elementor-element-7099596{text-align:center;}.elementor-33974 .elementor-element.elementor-element-e050d06{--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-33974 .elementor-element.elementor-element-ba287b5{--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-33974 .elementor-element.elementor-element-ab9b13a{--display:flex;}.elementor-33974 .elementor-element.elementor-element-4facc63{color:#717171;}.elementor-33974 .elementor-element.elementor-element-8b20fde{--display:flex;}.elementor-33974 .elementor-element.elementor-element-6548f55{color:#717171;}.elementor-33974 .elementor-element.elementor-element-aa75abb{--display:flex;}.elementor-33974 .elementor-element.elementor-element-160e370{--display:flex;}.elementor-33974 .elementor-element.elementor-element-5608f97{color:#717171;}.elementor-33974 .elementor-element.elementor-element-8252f8e{--display:flex;}.elementor-33974 .elementor-element.elementor-element-36183d7{color:#717171;}.elementor-33974 .elementor-element.elementor-element-3541dea{--n-accordion-title-font-size:16px;--n-accordion-item-title-space-between:10px;--n-accordion-item-title-distance-from-content:-10px;--n-accordion-border-radius:15px 15px 15px 15px;--n-accordion-title-hover-color:var( --e-global-color-e768041 );--n-accordion-title-active-color:var( --e-global-color-e768041 );--n-accordion-icon-size:15px;--n-accordion-icon-normal-color:var( --e-global-color-secondary );--n-accordion-icon-hover-color:var( --e-global-color-secondary );--n-accordion-icon-active-color:var( --e-global-color-secondary );}.elementor-33974 .elementor-element.elementor-element-3541dea > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title:hover{background-color:#EDF4FF;border-style:solid;border-width:2px 2px 2px 2px;}.elementor-33974 .elementor-element.elementor-element-3541dea > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{background-color:#EDF4FF;border-style:solid;border-width:2px 2px 0px 2px;}:where( .elementor-33974 .elementor-element.elementor-element-3541dea > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con{background-color:#EDF4FF;border-style:solid;border-width:0px 2px 2px 2px;border-color:#D9D9D9;--border-radius:0px 0px 15px 15px;}.elementor-33974 .elementor-element.elementor-element-3541dea > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:2px 2px 2px 2px;border-color:#D9D9D9;}:where( .elementor-33974 .elementor-element.elementor-element-3541dea > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-weight:600;}.elementor-33974 .elementor-element.elementor-element-c3cc013{--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-33974 .elementor-element.elementor-element-152360c{--display:flex;}.elementor-33974 .elementor-element.elementor-element-87f390e{color:#717171;}.elementor-33974 .elementor-element.elementor-element-1fa1dfa{--display:flex;}.elementor-33974 .elementor-element.elementor-element-23baf2d{color:#717171;}.elementor-33974 .elementor-element.elementor-element-ed5e359{--display:flex;}.elementor-33974 .elementor-element.elementor-element-3310c58{color:#717171;}.elementor-33974 .elementor-element.elementor-element-fd933eb{--display:flex;}.elementor-33974 .elementor-element.elementor-element-0983160{color:#717171;}.elementor-33974 .elementor-element.elementor-element-6c3e520{--display:flex;}.elementor-33974 .elementor-element.elementor-element-68ffe71{color:#717171;}.elementor-33974 .elementor-element.elementor-element-3d2608d{--n-accordion-title-font-size:16px;--n-accordion-item-title-space-between:10px;--n-accordion-item-title-distance-from-content:-10px;--n-accordion-border-radius:15px 15px 15px 15px;--n-accordion-title-hover-color:var( --e-global-color-e768041 );--n-accordion-title-active-color:var( --e-global-color-e768041 );--n-accordion-icon-size:15px;--n-accordion-icon-normal-color:var( --e-global-color-secondary );--n-accordion-icon-hover-color:var( --e-global-color-secondary );--n-accordion-icon-active-color:var( --e-global-color-secondary );}.elementor-33974 .elementor-element.elementor-element-3d2608d > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title:hover{background-color:#EDF4FF;border-style:solid;border-width:2px 2px 2px 2px;}.elementor-33974 .elementor-element.elementor-element-3d2608d > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{background-color:#EDF4FF;border-style:solid;border-width:2px 2px 0px 2px;}:where( .elementor-33974 .elementor-element.elementor-element-3d2608d > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con{background-color:#EDF4FF;border-style:solid;border-width:0px 2px 2px 2px;border-color:#D9D9D9;--border-radius:0px 0px 15px 15px;}.elementor-33974 .elementor-element.elementor-element-3d2608d > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{border-style:solid;border-width:2px 2px 2px 2px;border-color:#D9D9D9;}:where( .elementor-33974 .elementor-element.elementor-element-3d2608d > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-weight:600;}@media(max-width:1024px){.elementor-33974 .elementor-element.elementor-element-1b5dd21 .elementor-divider-separator{width:25%;}.elementor-33974 .elementor-element.elementor-element-4ad27f3{--flex-wrap:wrap;}.elementor-33974 .elementor-element.elementor-element-3541dea{--n-accordion-title-font-size:14px;}.elementor-33974 .elementor-element.elementor-element-3d2608d{--n-accordion-title-font-size:14px;}}@media(max-width:767px){.elementor-33974 .elementor-element.elementor-element-1b5dd21 .elementor-divider-separator{width:50%;}}@media(min-width:768px){.elementor-33974 .elementor-element.elementor-element-bb765e3{--width:24%;}.elementor-33974 .elementor-element.elementor-element-ee92691{--width:24%;}.elementor-33974 .elementor-element.elementor-element-41cc6c2{--width:24%;}.elementor-33974 .elementor-element.elementor-element-e8cb590{--width:24%;}.elementor-33974 .elementor-element.elementor-element-ba287b5{--width:50%;}.elementor-33974 .elementor-element.elementor-element-c3cc013{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-33974 .elementor-element.elementor-element-bb765e3{--width:48%;}.elementor-33974 .elementor-element.elementor-element-ee92691{--width:48%;}.elementor-33974 .elementor-element.elementor-element-41cc6c2{--width:48%;}.elementor-33974 .elementor-element.elementor-element-e8cb590{--width:48%;}}/* Start custom CSS for container, class: .elementor-element-acbc0f0 *//* ========================================= CHANNEL LETTER MATERIALS — FINAL HERO ========================================= */ #clm-hero { --clm-dark: #062b60; --clm-mid: #0a4389; --clm-light: #1672dc; position: relative; isolation: isolate; width: 100vw !important; max-width: 100vw !important; margin-top: -36px !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 68px 32px 38px !important; overflow: hidden; background: radial-gradient( circle at 82% 24%, rgba(77, 163, 255, 0.32), transparent 29% ), linear-gradient( 112deg, #062b60 0%, #0a4389 53%, #1672dc 100% ); /* * ایجاد انحنای بالایی و پایینی * مشابه وایرفریم */ clip-path: polygon( 0 5%, 20% 5%, 55% 0, 100% 0, 100% 95%, 88% 97.5%, 68% 98.5%, 50% 99%, 30% 98.5%, 12% 97.5%, 0 95% ); } /* Soft blueprint circle */ #clm-hero::before { content: ""; position: absolute; z-index: -1; width: 530px; height: 530px; top: -320px; left: -170px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50%; pointer-events: none; } /* Decorative horizontal glow */ #clm-hero::after { content: ""; position: absolute; z-index: -1; width: 62%; height: 190px; right: -8%; bottom: 20px; border-radius: 50%; background: radial-gradient( ellipse, rgba(77, 166, 255, 0.16), transparent 67% ); pointer-events: none; } /* ========================================= MAIN LAYOUT ========================================= */ #clm-hero .clm-hero__inner { position: relative; z-index: 2; display: grid !important; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important; grid-template-areas: "content visual" !important; align-items: center !important; gap: clamp(35px, 4vw, 70px) !important; width: min(calc(100% - 60px), 1320px) !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; direction: ltr !important; } /* ========================================= LEFT CONTENT ========================================= */ #clm-hero .clm-hero__content { grid-area: content !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; max-width: 555px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; direction: ltr !important; text-align: left !important; gap: 0 !important; } /* Eyebrow */ #clm-hero .clm-hero__eyebrow { width: auto !important; margin: 0 0 22px !important; align-self: flex-start !important; } #clm-hero .clm-hero__eyebrow .elementor-heading-title { display: inline-block; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.90); font-size: 12px; font-weight: 750; line-height: 1.4; letter-spacing: 1.25px; text-align: left; } /* Main title */ #clm-hero .clm-hero__title { position: relative; width: 100% !important; margin: 0 0 30px !important; padding-bottom: 18px; text-align: left !important; } #clm-hero .clm-hero__title .elementor-heading-title { max-width: 560px; margin: 0; color: #ffffff; font-size: clamp(52px, 4.6vw, 72px); font-weight: 750; line-height: 0.98; letter-spacing: -2.6px; text-align: left; text-wrap: balance; } /* Small blue underline below title */ #clm-hero .clm-hero__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 999px; background: #27a3ff; box-shadow: 0 0 16px rgba(39, 163, 255, 0.55); } /* Description */ #clm-hero .clm-hero__description { width: 100% !important; max-width: 520px !important; margin: 0 !important; text-align: left !important; } #clm-hero .clm-hero__description, #clm-hero .clm-hero__description p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 17px; font-weight: 400; line-height: 1.65; text-align: left; } /* ========================================= BUTTONS ========================================= */ #clm-hero .clm-hero__actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; width: 100% !important; gap: 15px !important; margin: 28px 0 0 !important; padding: 0 !important; align-self: flex-start !important; } #clm-hero .clm-hero__actions .clm-btn { width: auto !important; margin: 0 !important; } #clm-hero .clm-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 53px; padding: 16px 25px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* Primary button */ #clm-hero .clm-btn--primary .elementor-button { background: #ffffff; color: #07346e; box-shadow: 0 13px 30px rgba(0, 17, 53, 0.24); } #clm-hero .clm-btn--primary .elementor-button:hover { color: #0a4389; transform: translateY(-2px); box-shadow: 0 17px 36px rgba(0, 17, 53, 0.30); } /* Secondary button */ #clm-hero .clm-btn--secondary .elementor-button { color: #ffffff; border-color: rgba(255, 255, 255, 0.48); background: rgba(255, 255, 255, 0.055); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #clm-hero .clm-btn--secondary .elementor-button:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); } /* ========================================= RIGHT VISUAL ========================================= */ #clm-hero .clm-hero__visual { grid-area: visual !important; position: relative; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; direction: ltr !important; } /* Handwritten decorative message */ #clm-hero .clm-hero__visual::after { content: "Better Signs\\A Start with\\A Better Materials"; position: absolute; z-index: 4; top: 1%; right: -1%; color: rgba(255, 255, 255, 0.38); font-family: "Comic Sans MS", "Segoe Print", cursive; font-size: 22px; font-weight: 400; line-height: 1.15; white-space: pre; transform: rotate(-6deg); pointer-events: none; } #clm-hero .clm-hero__media { position: relative; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 355px !important; min-height: 355px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Layered glass panels behind products */ #clm-hero .clm-hero__media::before { content: ""; position: absolute; z-index: 0; width: 66%; height: 82%; top: 5%; left: 18%; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 28px; background: rgba(255, 255, 255, 0.045); box-shadow: 42px 28px 0 -1px rgba(255, 255, 255, 0.025), 42px 28px 0 0 rgba(255, 255, 255, 0.11), -32px 50px 0 -1px rgba(255, 255, 255, 0.018), -32px 50px 0 0 rgba(255, 255, 255, 0.075); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; } /* Transparent product image */ #clm-hero .clm-hero__main-image { position: relative; z-index: 3; width: 112% !important; max-width: none !important; margin: 0 -6% !important; padding: 0 !important; filter: drop-shadow(0 25px 24px rgba(0, 20, 55, 0.32)); } #clm-hero .clm-hero__main-image img { display: block; width: 100% !important; max-width: none !important; max-height: 355px !important; height: auto !important; object-fit: contain !important; } /* Elliptical technical base */ #clm-hero .clm-hero__media::after { content: ""; position: absolute; z-index: 1; width: 92%; height: 43%; left: 4%; bottom: 0; border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 50%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025) ); transform: perspective(800px) rotateX(64deg); box-shadow: inset 0 0 35px rgba(62, 168, 255, 0.12), 0 14px 38px rgba(0, 25, 66, 0.18); pointer-events: none; } /* ========================================= TRUST BAR — INTEGRATED INTO HERO ========================================= */ #clm-hero .clm-hero__trust { position: relative; z-index: 5; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: min(calc(100% - 120px), 1180px) !important; max-width: 1180px !important; margin: 24px auto 0 !important; padding: 0 0 26px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; direction: ltr !important; } /* Trust item */ #clm-hero .clm-hero__trust-item { display: grid !important; grid-template-columns: 54px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 15px !important; row-gap: 3px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 5px 34px !important; border: 0 !important; background: transparent !important; direction: ltr !important; } /* No divider after last item */ #clm-hero .clm-hero__trust-item:not(:last-child) { border-right: 0 !important; } /* Trust icons: no colored square */ #clm-hero .clm-hero__trust-icon { grid-column: 1 !important; grid-row: 1 / 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 54px !important; height: 54px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #ffffff !important; } #clm-hero .clm-hero__trust-icon .elementor-icon { color: #ffffff !important; font-size: 37px !important; filter: drop-shadow(0 5px 10px rgba(0, 20, 60, 0.24)); } /* Trust titles */ #clm-hero .clm-hero__trust-title { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; text-align: left !important; } #clm-hero .clm-hero__trust-title .elementor-heading-title { margin: 0 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 750 !important; line-height: 1.25 !important; text-align: left !important; } /* Trust text */ #clm-hero .clm-hero__trust-text { grid-column: 2 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; text-align: left !important; } #clm-hero .clm-hero__trust-text, #clm-hero .clm-hero__trust-text p { margin: 0 !important; color: rgba(255, 255, 255, 0.68) !important; font-size: 11.5px !important; line-height: 1.45 !important; text-align: left !important; } /* ========================================= TABLET ========================================= */ @media (max-width: 1024px) { #clm-hero { padding: 70px 25px 38px !important; } #clm-hero .clm-hero__inner { width: calc(100% - 20px) !important; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; gap: 25px !important; } #clm-hero .clm-hero__title .elementor-heading-title { font-size: clamp(47px, 5.7vw, 60px); } #clm-hero .clm-hero__media { height: 320px !important; min-height: 320px !important; } #clm-hero .clm-hero__main-image img { max-height: 320px !important; } #clm-hero .clm-hero__visual::after { display: none; } #clm-hero .clm-hero__trust { width: calc(100% - 35px) !important; } #clm-hero .clm-hero__trust-item { padding: 5px 15px !important; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { #clm-hero { margin-top: -20px !important; padding: 65px 18px 60px !important; clip-path: polygon( 0 2%, 50% 0, 100% 0, 100% 98%, 50% 100%, 0 98% ); } #clm-hero .clm-hero__inner { width: 100% !important; grid-template-columns: 1fr !important; grid-template-areas: "content" "visual" !important; gap: 35px !important; } #clm-hero .clm-hero__content { max-width: 100% !important; } #clm-hero .clm-hero__title .elementor-heading-title { font-size: 44px; line-height: 1; letter-spacing: -1.5px; } #clm-hero .clm-hero__description, #clm-hero .clm-hero__description p { font-size: 15px; } #clm-hero .clm-hero__actions { flex-direction: column !important; align-items: stretch !important; } #clm-hero .clm-hero__actions .clm-btn { width: 100% !important; } #clm-hero .clm-btn .elementor-button { width: 100%; } #clm-hero .clm-hero__media { height: 270px !important; min-height: 270px !important; } #clm-hero .clm-hero__main-image { width: 115% !important; margin: 0 -7.5% !important; } #clm-hero .clm-hero__main-image img { max-height: 270px !important; } #clm-hero .clm-hero__trust { width: 100% !important; grid-template-columns: 1fr !important; margin-top: 12px !important; padding-bottom: 10px !important; } #clm-hero .clm-hero__trust-item { padding: 15px 0 !important; } #clm-hero .clm-hero__trust-item:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.13) !important; } } /* ========================================= HERO ALIGNMENT AND CURVE FIX ========================================= */ /* Attach hero to header and create a symmetrical bottom curve */ #clm-hero { margin-top: 0 !important; clip-path: polygon( 0 0, 100% 0, 100% 96%, 90% 97.2%, 75% 98.2%, 50% 98.8%, 25% 98.2%, 10% 97.2%, 0 96% ) !important; } /* Use the full available width instead of centering in 1320px */ #clm-hero .clm-hero__inner { width: calc(100% - 120px) !important; max-width: none !important; margin-left: 60px !important; margin-right: 60px !important; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important; } /* Move text toward the left edge */ #clm-hero .clm-hero__content { max-width: 555px !important; margin-left: 0 !important; margin-right: auto !important; transform: none !important; } /* Force every text widget to align left */ #clm-hero .clm-hero__content, #clm-hero .clm-hero__content *, #clm-hero .clm-hero__title, #clm-hero .clm-hero__title .elementor-heading-title, #clm-hero .clm-hero__description, #clm-hero .clm-hero__description p { text-align: left !important; } /* Keep title width similar to the wireframe */ #clm-hero .clm-hero__title .elementor-heading-title { max-width: 530px !important; } /* Align buttons with title and description */ #clm-hero .clm-hero__actions { justify-content: flex-start !important; align-items: center !important; margin-left: 0 !important; } /* Trust bar aligned with the wider hero content */ #clm-hero .clm-hero__trust { width: calc(100% - 240px) !important; max-width: none !important; } /* Make trust icons white, including SVG icons */ #clm-hero .clm-hero__trust-icon, #clm-hero .clm-hero__trust-icon .elementor-icon, #clm-hero .clm-hero__trust-icon svg { color: #ffffff !important; fill: #ffffff !important; } #clm-hero .clm-hero__trust-icon svg path { fill: #ffffff !important; } /* Fix the decorative sentence */ #clm-hero .clm-hero__visual::after { content: "Better Signs Start with Better Materials" !important; top: 1% !important; right: 1% !important; max-width: 300px; font-size: 20px !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; } /* Tablet */ @media (max-width: 1024px) { #clm-hero .clm-hero__inner { width: calc(100% - 50px) !important; margin-left: 25px !important; margin-right: 25px !important; } #clm-hero .clm-hero__trust { width: calc(100% - 70px) !important; } } /* Mobile */ @media (max-width: 767px) { #clm-hero { clip-path: polygon( 0 0, 100% 0, 100% 98%, 75% 99%, 50% 99.5%, 25% 99%, 0 98% ) !important; } #clm-hero .clm-hero__inner { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #clm-hero .clm-hero__trust { width: 100% !important; } } #clm-hero { margin-top: -48px !important; } /* Reduce overall hero height */ #clm-hero { min-height: 0 !important; padding-top: 44px !important; padding-bottom: 24px !important; } #clm-hero .clm-hero__inner { min-height: 0 !important; height: auto !important; } #clm-hero .clm-hero__content, #clm-hero .clm-hero__visual { min-height: 0 !important; height: auto !important; } /* Compact the product visual */ #clm-hero .clm-hero__media { height: 305px !important; min-height: 305px !important; } #clm-hero .clm-hero__main-image img { max-height: 300px !important; } /* Reduce vertical spaces */ #clm-hero .clm-hero__eyebrow { margin-bottom: 14px !important; } #clm-hero .clm-hero__title { margin-bottom: 20px !important; } #clm-hero .clm-hero__actions { margin-top: 20px !important; } /* Move trust row upward */ #clm-hero .clm-hero__trust { margin-top: 12px !important; padding-bottom: 18px !important; } /* Final hero polish */ /* Give the product image more breathing room */ #clm-hero .clm-hero__main-image { width: 104% !important; margin-left: -2% !important; margin-right: -2% !important; transform: translateX(-1%) !important; } #clm-hero .clm-hero__main-image img { max-height: 285px !important; } /* Make the glass composition slightly cleaner */ #clm-hero .clm-hero__media::before { width: 62% !important; height: 78% !important; left: 20% !important; top: 8% !important; } /* Refine the trust row */ #clm-hero .clm-hero__trust { width: calc(100% - 180px) !important; margin-top: 8px !important; padding-bottom: 22px !important; } #clm-hero .clm-hero__trust-item { padding-left: 22px !important; padding-right: 22px !important; } /* Protect trust descriptions from clipping */ #clm-hero .clm-hero__trust-text, #clm-hero .clm-hero__trust-text p { max-width: 270px !important; } /* Keep the final item away from the right edge */ #clm-hero .clm-hero__trust-item:last-child { padding-right: 35px !important; } /* Make the decorative sentence less dominant */ #clm-hero .clm-hero__visual::after { right: 4% !important; top: 0 !important; max-width: 250px !important; font-size: 18px !important; opacity: 0.75; } /* ======================================== TABLET RESPONSIVE ======================================== */ @media (max-width: 1024px) { #clm-categories { padding: 56px 26px 66px; } #clm-categories .clm-categories__inner { gap: 28px; } #clm-categories .clm-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } #clm-categories .clm-category-card { grid-column: auto; } #clm-categories .clm-categories__title .elementor-heading-title { font-size: 38px; letter-spacing: -1px; } #clm-categories .clm-category-card__image { height: 200px; } #clm-categories .clm-category-card__image img { max-height: 180px; } #clm-categories .clm-category-card__content { min-height: 195px; } } /* ========================================= FINAL HERO MOBILE OVERRIDE MUST REMAIN AT THE END OF THE CSS ========================================= */ @media screen and (max-width: 767px) { #clm-hero { width: 100vw !important; max-width: 100vw !important; min-height: 0 !important; margin-top: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 38px 18px 42px !important; clip-path: polygon( 0 0, 100% 0, 100% 98%, 75% 99%, 50% 99.5%, 25% 99%, 0 98% ) !important; } /* Override the desktop two-column grid */ #clm-hero .clm-hero__inner { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } /* Text block */ #clm-hero .clm-hero__content { order: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; flex: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; transform: none !important; } #clm-hero .clm-hero__eyebrow { width: 100% !important; margin: 0 0 11px !important; } #clm-hero .clm-hero__eyebrow .elementor-heading-title { font-size: 10.5px !important; line-height: 1.35 !important; letter-spacing: 0.9px !important; } #clm-hero .clm-hero__title { width: 100% !important; max-width: 100% !important; margin: 0 0 18px !important; padding-bottom: 15px !important; } #clm-hero .clm-hero__title .elementor-heading-title { width: 100% !important; max-width: 100% !important; font-size: clamp(36px, 10vw, 43px) !important; line-height: 1.02 !important; letter-spacing: -1.2px !important; text-align: left !important; text-wrap: normal !important; } #clm-hero .clm-hero__title::after { width: 48px !important; height: 3px !important; } #clm-hero .clm-hero__description { width: 100% !important; max-width: 100% !important; margin: 0 !important; } #clm-hero .clm-hero__description, #clm-hero .clm-hero__description p { font-size: 14px !important; line-height: 1.65 !important; text-align: left !important; } /* Buttons */ #clm-hero .clm-hero__actions { order: 2 !important; width: 100% !important; max-width: 100% !important; flex: none !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 23px 0 0 !important; padding: 0 !important; } #clm-hero .clm-hero__actions .clm-btn, #clm-hero .clm-hero__actions .elementor-widget-button { width: 100% !important; max-width: 100% !important; margin: 0 !important; } #clm-hero .clm-hero__actions .elementor-button { width: 100% !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 16px !important; font-size: 13px !important; line-height: 1.2 !important; } /* Product visual */ #clm-hero .clm-hero__visual { order: 3 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; flex: none !important; margin: 27px 0 16px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #clm-hero .clm-hero__visual::after { display: none !important; } #clm-hero .clm-hero__media { width: 100% !important; max-width: 360px !important; height: 245px !important; min-height: 245px !important; margin: 0 auto !important; padding: 0 !important; } #clm-hero .clm-hero__media::before { width: 66% !important; height: 75% !important; top: 9% !important; left: 17% !important; border-radius: 20px !important; } #clm-hero .clm-hero__media::after { width: 88% !important; height: 38% !important; left: 6% !important; bottom: 1% !important; } #clm-hero .clm-hero__main-image { width: 100% !important; max-width: 330px !important; margin: 0 auto !important; padding: 0 !important; transform: none !important; } #clm-hero .clm-hero__main-image img { display: block !important; width: 100% !important; max-width: 330px !important; height: 220px !important; max-height: 220px !important; margin: 0 auto !important; object-fit: contain !important; } /* Trust bar */ #clm-hero .clm-hero__trust { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 4px 0 0 !important; padding: 0 0 8px !important; } #clm-hero .clm-hero__trust-item { width: 100% !important; min-width: 0 !important; grid-template-columns: 45px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: 13px !important; row-gap: 2px !important; margin: 0 !important; padding: 13px 3px !important; } #clm-hero .clm-hero__trust-item:last-child { padding-right: 3px !important; } #clm-hero .clm-hero__trust-icon { width: 45px !important; height: 45px !important; } #clm-hero .clm-hero__trust-icon .elementor-icon { font-size: 30px !important; } #clm-hero .clm-hero__trust-title { width: 100% !important; } #clm-hero .clm-hero__trust-title .elementor-heading-title { font-size: 13px !important; line-height: 1.3 !important; } #clm-hero .clm-hero__trust-text, #clm-hero .clm-hero__trust-text p { width: 100% !important; max-width: none !important; font-size: 10.5px !important; line-height: 1.4 !important; } /* Remove Elementor fixed child widths */ #clm-hero .clm-hero__inner > .e-con, #clm-hero .clm-hero__content > .e-con { width: 100% !important; max-width: 100% !important; flex: none !important; flex-basis: auto !important; } } /* ================================================== FINAL CLEAN ARABIC RTL FIX CHANNEL LETTER MATERIALS HERO PUT THIS AT THE VERY END ================================================== */ /* ================================================== DESKTOP ================================================== */ @media (min-width: 768px) { /* ------------------------------------------ MIRROR THE ENGLISH LAYOUT English: Content | Visual Arabic : Visual | Content ------------------------------------------ */ html[lang^="ar"] #clm-hero .clm-hero__inner, html[dir="rtl"] #clm-hero .clm-hero__inner { direction: ltr !important; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) !important; grid-template-areas: "visual content" !important; } /* ================================================== RIGHT CONTENT COLUMN ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__content, html[dir="rtl"] #clm-hero .clm-hero__content { grid-area: content !important; width: 100% !important; max-width: 555px !important; min-width: 0 !important; justify-self: end !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; direction: rtl !important; text-align: right !important; transform: none !important; } /* ================================================== EYEBROW ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__eyebrow, html[dir="rtl"] #clm-hero .clm-hero__eyebrow { width: auto !important; align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; text-align: right !important; direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__eyebrow .elementor-heading-title, html[dir="rtl"] #clm-hero .clm-hero__eyebrow .elementor-heading-title { direction: rtl !important; text-align: right !important; letter-spacing: 0 !important; } /* ================================================== TITLE ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__title, html[dir="rtl"] #clm-hero .clm-hero__title { width: 100% !important; max-width: 530px !important; align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__title .elementor-widget-container, html[dir="rtl"] #clm-hero .clm-hero__title .elementor-widget-container { width: 100% !important; margin: 0 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__title .elementor-heading-title, html[dir="rtl"] #clm-hero .clm-hero__title .elementor-heading-title { display: block !important; width: 100% !important; max-width: 530px !important; margin-left: auto !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; letter-spacing: 0 !important; text-wrap: normal !important; unicode-bidi: plaintext; } /* Blue underline */ html[lang^="ar"] #clm-hero .clm-hero__title::after, html[dir="rtl"] #clm-hero .clm-hero__title::after { left: auto !important; right: 0 !important; } /* ================================================== DESCRIPTION ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__description, html[dir="rtl"] #clm-hero .clm-hero__description { width: 100% !important; max-width: 520px !important; align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__description .elementor-widget-container, html[dir="rtl"] #clm-hero .clm-hero__description .elementor-widget-container { width: 100% !important; margin: 0 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__description p, html[dir="rtl"] #clm-hero .clm-hero__description p { width: 100% !important; max-width: 520px !important; margin-left: auto !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; } /* ================================================== BUTTONS ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__actions, html[dir="rtl"] #clm-hero .clm-hero__actions { width: 100% !important; max-width: 555px !important; align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; margin-top: 20px !important; direction: rtl !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 15px !important; } html[lang^="ar"] #clm-hero .clm-hero__actions .clm-btn, html[lang^="ar"] #clm-hero .clm-hero__actions .elementor-widget-button, html[dir="rtl"] #clm-hero .clm-hero__actions .clm-btn, html[dir="rtl"] #clm-hero .clm-hero__actions .elementor-widget-button { width: auto !important; margin: 0 !important; } /* ================================================== VISUAL ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__visual, html[dir="rtl"] #clm-hero .clm-hero__visual { grid-area: visual !important; direction: ltr !important; } } /* ================================================== TRUST BAR RTL ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__trust, html[dir="rtl"] #clm-hero .clm-hero__trust { direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__trust-item, html[dir="rtl"] #clm-hero .clm-hero__trust-item { direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__trust-title, html[lang^="ar"] #clm-hero .clm-hero__trust-title .elementor-heading-title, html[lang^="ar"] #clm-hero .clm-hero__trust-text, html[lang^="ar"] #clm-hero .clm-hero__trust-text p, html[dir="rtl"] #clm-hero .clm-hero__trust-title, html[dir="rtl"] #clm-hero .clm-hero__trust-title .elementor-heading-title, html[dir="rtl"] #clm-hero .clm-hero__trust-text, html[dir="rtl"] #clm-hero .clm-hero__trust-text p { direction: rtl !important; text-align: right !important; } /* ================================================== TABLET ================================================== */ @media (min-width: 768px) and (max-width: 1024px) { html[lang^="ar"] #clm-hero .clm-hero__inner, html[dir="rtl"] #clm-hero .clm-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; grid-template-areas: "visual content" !important; } html[lang^="ar"] #clm-hero .clm-hero__content, html[dir="rtl"] #clm-hero .clm-hero__content { width: 100% !important; max-width: 100% !important; } } /* ================================================== MOBILE ================================================== */ @media (max-width: 767px) { html[lang^="ar"] #clm-hero .clm-hero__inner, html[dir="rtl"] #clm-hero .clm-hero__inner { display: flex !important; flex-direction: column !important; direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__content, html[dir="rtl"] #clm-hero .clm-hero__content { order: 1 !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__eyebrow, html[lang^="ar"] #clm-hero .clm-hero__title, html[lang^="ar"] #clm-hero .clm-hero__description, html[dir="rtl"] #clm-hero .clm-hero__eyebrow, html[dir="rtl"] #clm-hero .clm-hero__title, html[dir="rtl"] #clm-hero .clm-hero__description { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__title .elementor-heading-title, html[lang^="ar"] #clm-hero .clm-hero__description p, html[dir="rtl"] #clm-hero .clm-hero__title .elementor-heading-title, html[dir="rtl"] #clm-hero .clm-hero__description p { width: 100% !important; max-width: 100% !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__actions, html[dir="rtl"] #clm-hero .clm-hero__actions { order: 2 !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__visual, html[dir="rtl"] #clm-hero .clm-hero__visual { order: 3 !important; } } /* ================================================== ARABIC BUTTONS ONLY DO NOT CHANGE TITLE / DESCRIPTION POSITION ================================================== */ @media (min-width: 768px) { html[lang^="ar"] #clm-hero .clm-hero__actions, html[dir="rtl"] #clm-hero .clm-hero__actions { /* اگر Actions مستقیم داخل Grid باشد */ grid-column: 2 !important; /* قرارگیری در لبه راست ستون */ justify-self: end !important; align-self: flex-end !important; width: 100% !important; max-width: 555px !important; margin-top: 20px !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; /* RTL button order */ direction: rtl !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; gap: 15px !important; } /* Elementor button widgets */ html[lang^="ar"] #clm-hero .clm-hero__actions .clm-btn, html[lang^="ar"] #clm-hero .clm-hero__actions .elementor-widget-button, html[dir="rtl"] #clm-hero .clm-hero__actions .clm-btn, html[dir="rtl"] #clm-hero .clm-hero__actions .elementor-widget-button { width: auto !important; max-width: none !important; margin: 0 !important; } /* Arabic text inside buttons */ html[lang^="ar"] #clm-hero .clm-hero__actions .elementor-button, html[lang^="ar"] #clm-hero .clm-hero__actions .elementor-button-text, html[dir="rtl"] #clm-hero .clm-hero__actions .elementor-button, html[dir="rtl"] #clm-hero .clm-hero__actions .elementor-button-text { direction: rtl !important; } } /* ================================================== ARABIC HERO HEIGHT FIX Match English hero proportions ================================================== */ @media (min-width: 768px) { html[lang^="ar"] #clm-hero, html[dir="rtl"] #clm-hero { min-height: 610px !important; padding-top: 58px !important; padding-bottom: 34px !important; } /* Main upper section */ html[lang^="ar"] #clm-hero .clm-hero__inner, html[dir="rtl"] #clm-hero .clm-hero__inner { min-height: 360px !important; height: auto !important; align-items: center !important; } /* Visual column */ html[lang^="ar"] #clm-hero .clm-hero__visual, html[dir="rtl"] #clm-hero .clm-hero__visual { min-height: 350px !important; height: auto !important; } /* Product composition */ html[lang^="ar"] #clm-hero .clm-hero__media, html[dir="rtl"] #clm-hero .clm-hero__media { height: 345px !important; min-height: 345px !important; } html[lang^="ar"] #clm-hero .clm-hero__main-image img, html[dir="rtl"] #clm-hero .clm-hero__main-image img { max-height: 320px !important; } /* Give content a little more vertical breathing room */ html[lang^="ar"] #clm-hero .clm-hero__content, html[dir="rtl"] #clm-hero .clm-hero__content { padding-top: 8px !important; padding-bottom: 8px !important; } /* Keep buttons comfortably below description */ html[lang^="ar"] #clm-hero .clm-hero__actions, html[dir="rtl"] #clm-hero .clm-hero__actions { margin-top: 24px !important; } /* Restore spacing before the trust row */ html[lang^="ar"] #clm-hero .clm-hero__trust, html[dir="rtl"] #clm-hero .clm-hero__trust { margin-top: 20px !important; padding-bottom: 26px !important; } } /* ================================================== TABLET ================================================== */ @media (min-width: 768px) and (max-width: 1024px) { html[lang^="ar"] #clm-hero, html[dir="rtl"] #clm-hero { min-height: 560px !important; padding-top: 52px !important; padding-bottom: 32px !important; } html[lang^="ar"] #clm-hero .clm-hero__inner, html[dir="rtl"] #clm-hero .clm-hero__inner { min-height: 330px !important; } html[lang^="ar"] #clm-hero .clm-hero__media, html[dir="rtl"] #clm-hero .clm-hero__media { height: 320px !important; min-height: 320px !important; } } /* ================================================== MOBILE Do not force a fixed hero height ================================================== */ @media (max-width: 767px) { html[lang^="ar"] #clm-hero, html[dir="rtl"] #clm-hero { min-height: 0 !important; height: auto !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5b099b0 *//* ================================================== ARABIC RTL FIX — CHANNEL LETTER MATERIALS HERO MUST BE PLACED AT THE VERY END OF THE CSS ================================================== */ /* ================================================== 1. MAIN HERO LAYOUT Arabic: LEFT = Visual RIGHT = Content ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__inner { direction: ltr !important; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) !important; grid-template-areas: "visual content" !important; } /* ================================================== 2. CONTENT — RIGHT SIDE ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__content { grid-area: content !important; direction: rtl !important; align-items: flex-end !important; text-align: right !important; margin-left: auto !important; margin-right: 0 !important; } /* Force all Arabic text to RTL */ html[lang^="ar"] #clm-hero .clm-hero__content, html[lang^="ar"] #clm-hero .clm-hero__content *, html[lang^="ar"] #clm-hero .clm-hero__eyebrow, html[lang^="ar"] #clm-hero .clm-hero__eyebrow .elementor-heading-title, html[lang^="ar"] #clm-hero .clm-hero__title, html[lang^="ar"] #clm-hero .clm-hero__title .elementor-heading-title, html[lang^="ar"] #clm-hero .clm-hero__description, html[lang^="ar"] #clm-hero .clm-hero__description p { direction: rtl !important; text-align: right !important; } /* ================================================== 3. EYEBROW ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__eyebrow { align-self: flex-end !important; margin-left: 0 !important; margin-right: 0 !important; } html[lang^="ar"] #clm-hero .clm-hero__eyebrow .elementor-heading-title { letter-spacing: 0 !important; } /* ================================================== 4. MAIN TITLE ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__title { text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__title .elementor-heading-title { margin-left: auto !important; margin-right: 0 !important; text-align: right !important; /* Better typography for Arabic */ letter-spacing: 0 !important; unicode-bidi: plaintext; } /* Blue underline moves to right */ html[lang^="ar"] #clm-hero .clm-hero__title::after { left: auto !important; right: 0 !important; } /* ================================================== 5. DESCRIPTION ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__description { margin-left: auto !important; margin-right: 0 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__description p { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; } /* ================================================== 6. BUTTONS First button starts from RIGHT ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__actions { direction: rtl !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; align-self: flex-end !important; margin-left: 0 !important; margin-right: 0 !important; } html[lang^="ar"] #clm-hero .clm-hero__actions .elementor-button, html[lang^="ar"] #clm-hero .clm-hero__actions .elementor-button-text { direction: rtl !important; } /* ================================================== 7. VISUAL — LEFT SIDE ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__visual { grid-area: visual !important; direction: ltr !important; } /* ================================================== 8. TRUST BAR Items and icons become RTL ================================================== */ html[lang^="ar"] #clm-hero .clm-hero__trust { direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__trust-item { direction: rtl !important; grid-template-columns: 54px minmax(0, 1fr) !important; } /* Icon goes to the RIGHT */ html[lang^="ar"] #clm-hero .clm-hero__trust-icon { grid-column: 1 !important; grid-row: 1 / 3 !important; } /* Title */ html[lang^="ar"] #clm-hero .clm-hero__trust-title { grid-column: 2 !important; grid-row: 1 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__trust-title .elementor-heading-title { direction: rtl !important; text-align: right !important; } /* Description */ html[lang^="ar"] #clm-hero .clm-hero__trust-text { grid-column: 2 !important; grid-row: 2 !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__trust-text, html[lang^="ar"] #clm-hero .clm-hero__trust-text p { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; } /* Right-most Arabic trust item spacing */ html[lang^="ar"] #clm-hero .clm-hero__trust-item:first-child { padding-right: 35px !important; padding-left: 22px !important; } /* Undo English last-item right padding */ html[lang^="ar"] #clm-hero .clm-hero__trust-item:last-child { padding-right: 22px !important; padding-left: 35px !important; } /* ================================================== 9. TABLET ================================================== */ @media (max-width: 1024px) { html[lang^="ar"] #clm-hero .clm-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; grid-template-areas: "visual content" !important; } } /* ================================================== 10. MOBILE ================================================== */ @media (max-width: 767px) { /* On mobile keep: 1. Content 2. Visual 3. Trust */ html[lang^="ar"] #clm-hero .clm-hero__inner { display: flex !important; flex-direction: column !important; direction: rtl !important; } html[lang^="ar"] #clm-hero .clm-hero__content { order: 1 !important; align-items: flex-end !important; direction: rtl !important; text-align: right !important; } html[lang^="ar"] #clm-hero .clm-hero__visual { order: 3 !important; } /* Arabic mobile title */ html[lang^="ar"] #clm-hero .clm-hero__title .elementor-heading-title { text-align: right !important; letter-spacing: 0 !important; } /* Arabic mobile description */ html[lang^="ar"] #clm-hero .clm-hero__description, html[lang^="ar"] #clm-hero .clm-hero__description p { text-align: right !important; } /* Mobile buttons remain full width */ html[lang^="ar"] #clm-hero .clm-hero__actions { order: 2 !important; direction: rtl !important; align-self: stretch !important; width: 100% !important; } /* Trust items: icon on right, text after it */ html[lang^="ar"] #clm-hero .clm-hero__trust-item { direction: rtl !important; grid-template-columns: 45px minmax(0, 1fr) !important; } html[lang^="ar"] #clm-hero .clm-hero__trust-title, html[lang^="ar"] #clm-hero .clm-hero__trust-text, html[lang^="ar"] #clm-hero .clm-hero__trust-title .elementor-heading-title, html[lang^="ar"] #clm-hero .clm-hero__trust-text p { text-align: right !important; } /* Remove desktop edge spacing */ html[lang^="ar"] #clm-hero .clm-hero__trust-item:first-child, html[lang^="ar"] #clm-hero .clm-hero__trust-item:last-child { padding-left: 3px !important; padding-right: 3px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bf446ff *//* ======================================== CHANNEL LETTER MATERIAL CATEGORIES ======================================== */ #clm-categories { position: relative; width: 100%; padding: 90px 24px 105px; background: radial-gradient( circle at 8% 12%, rgba(30, 125, 235, 0.10) 0, rgba(30, 125, 235, 0) 28% ), #f6f8fc; overflow: hidden; box-sizing: border-box; } #clm-categories::before { content: ""; position: absolute; width: 320px; height: 320px; right: -160px; bottom: -170px; border: 1px solid rgba(21, 94, 170, 0.10); border-radius: 50%; pointer-events: none; } #clm-categories .clm-categories__inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 44px; box-sizing: border-box; } /* Categories section header */ #clm-categories .clm-categories__header { width: 100%; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } #clm-categories .clm-categories__heading-group { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 14px; } #clm-categories .clm-categories__title { margin: 0; } #clm-categories .clm-categories__title .elementor-heading-title { margin: 0; color: #0b3268; font-size: clamp(34px, 3.5vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -1.5px; } #clm-categories .clm-categories__description { margin: 0; } #clm-categories .clm-categories__description p { max-width: 650px; margin: 0; color: #56667a; font-size: 17px; line-height: 1.75; } #clm-categories .clm-categories__all-link { width: auto; flex: 0 0 auto; } #clm-categories .clm-categories__all-link .elementor-button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; color: #0b4f98; background: transparent; border: 1px solid rgba(11, 79, 152, 0.25); border-radius: 12px; font-size: 14px; font-weight: 700; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } #clm-categories .clm-categories__all-link .elementor-button:hover { color: #ffffff; background: #0b4f98; border-color: #0b4f98; transform: translateY(-2px); } /* Categories cards grid */ #clm-categories .clm-categories__grid { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: stretch; } #clm-categories .clm-category-card { width: 100%; min-width: 0; } /* First row */ #clm-categories .clm-category-card--featured { grid-column: span 8; } #clm-categories .clm-category-card--trim-caps { grid-column: span 4; } /* Second row */ #clm-categories .clm-category-card--extrusion-profiles, #clm-categories .clm-category-card--hand-use-coils, #clm-categories .clm-category-card--single-edge-coils, #clm-categories .clm-category-card--stainless-steel-coils { grid-column: span 3; } /* Base category card */ #clm-categories .clm-category-card { position: relative; isolation: isolate; height: 100%; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(15, 67, 125, 0.10); border-radius: 24px; box-shadow: 0 12px 30px rgba(18, 50, 86, 0.07), 0 2px 6px rgba(18, 50, 86, 0.03); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } #clm-categories .clm-category-card::before { content: ""; position: absolute; z-index: 3; top: 0; left: 24px; width: 54px; height: 4px; background: linear-gradient(90deg, #0e5aab, #25a9f0); border-radius: 0 0 8px 8px; transition: width 0.3s ease; } #clm-categories .clm-category-card:hover { transform: translateY(-6px); border-color: rgba(14, 90, 171, 0.20); box-shadow: 0 22px 48px rgba(18, 50, 86, 0.13), 0 4px 10px rgba(18, 50, 86, 0.05); } #clm-categories .clm-category-card:hover::before { width: 82px; } /* Compact layout correction */ #clm-categories { padding-top: 62px; padding-bottom: 72px; } #clm-categories .clm-categories__inner { gap: 32px; } #clm-categories .clm-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* Override previous card spans */ #clm-categories .clm-category-card--featured, #clm-categories .clm-category-card--trim-caps, #clm-categories .clm-category-card--extrusion-profiles, #clm-categories .clm-category-card--hand-use-coils, #clm-categories .clm-category-card--single-edge-coils, #clm-categories .clm-category-card--stainless-steel-coils { grid-column: auto; } /* Compact image area */ #clm-categories .clm-category-card__image { width: 100%; height: 190px; margin: 0; background: linear-gradient( 145deg, rgba(238, 245, 253, 0.9), rgba(255, 255, 255, 0.96) ); } #clm-categories .clm-category-card__image .elementor-widget-container { width: 100%; height: 100%; padding: 20px 24px 12px; display: flex; align-items: center; justify-content: center; } #clm-categories .clm-category-card__image img { width: 100%; height: 100%; max-height: 158px; object-fit: contain; object-position: center; } /* Compact content area */ #clm-categories .clm-category-card__content { flex: 1; padding: 18px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; } /* Keep first card distinguished without enlarging it */ #clm-categories .clm-category-card--featured { background: linear-gradient( 155deg, rgba(235, 245, 255, 0.9), #ffffff 58% ); border-color: rgba(14, 90, 171, 0.18); } /* Final card alignment and image corrections */ /* Header after removing the unnecessary button */ #clm-categories .clm-categories__header { align-items: flex-start; justify-content: flex-start; } #clm-categories .clm-categories__heading-group { max-width: 760px; } /* White and larger image area */ #clm-categories .clm-category-card__image { height: 215px; background: #ffffff; border-bottom: 1px solid rgba(15, 67, 125, 0.07); } #clm-categories .clm-category-card__image .elementor-widget-container { padding: 12px 18px 8px; background: #ffffff; } #clm-categories .clm-category-card__image img { width: 100%; height: 100%; max-height: 195px; object-fit: contain; object-position: center; } /* Keep every card white */ #clm-categories .clm-category-card, #clm-categories .clm-category-card--featured { background: #ffffff; } /* Smaller product titles */ #clm-categories .clm-category-card__title { margin: 0; } #clm-categories .clm-category-card__title .elementor-heading-title { margin: 0; color: #102d50; font-size: 19px; font-weight: 750; line-height: 1.32; letter-spacing: -0.25px; } /* Equal-height content structure */ #clm-categories .clm-category-card__content { flex: 1; min-height: 205px; padding: 18px 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* Description */ #clm-categories .clm-category-card__description { margin: 0; } #clm-categories .clm-category-card__description p { margin: 0; color: #58697c; font-size: 14px; line-height: 1.6; } /* Push every button to the bottom */ #clm-categories .clm-category-card__link { width: auto; margin-top: auto; padding-top: 8px; } /* ======================================== MODERN SECTION VISUAL UPGRADE ======================================== */ #clm-categories { background: radial-gradient( circle at 8% 15%, rgba(29, 142, 245, 0.15) 0, rgba(29, 142, 245, 0) 27% ), radial-gradient( circle at 92% 82%, rgba(14, 78, 154, 0.11) 0, rgba(14, 78, 154, 0) 30% ), linear-gradient( 135deg, #f1f6fc 0%, #fbfdff 46%, #eef5fc 100% ); border-top: 1px solid rgba(14, 78, 154, 0.06); border-bottom: 1px solid rgba(14, 78, 154, 0.08); } /* Large decorative blurred shape */ #clm-categories::before { content: ""; position: absolute; width: 430px; height: 430px; top: -270px; left: -170px; border: 70px solid rgba(35, 153, 245, 0.055); border-radius: 50%; filter: blur(1px); pointer-events: none; } /* Subtle dot pattern */ #clm-categories::after { content: ""; position: absolute; z-index: 0; width: 260px; height: 260px; right: 2.5%; top: 48px; opacity: 0.32; background-image: radial-gradient( circle, rgba(12, 76, 151, 0.24) 1.4px, transparent 1.5px ); background-size: 18px 18px; pointer-events: none; mask-image: linear-gradient( 135deg, transparent 5%, #000 48%, transparent 95% ); -webkit-mask-image: linear-gradient( 135deg, transparent 5%, #000 48%, transparent 95% ); } /* Heading accent */ #clm-categories .clm-categories__title .elementor-heading-title::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 16px; background: linear-gradient(90deg, #0d5eae, #27aaf1); border-radius: 20px; } /* More refined cards */ #clm-categories .clm-category-card { border-color: rgba(12, 66, 126, 0.11); box-shadow: 0 14px 34px rgba(20, 58, 100, 0.075), 0 2px 5px rgba(20, 58, 100, 0.03); } #clm-categories .clm-category-card:hover { transform: translateY(-7px); border-color: rgba(19, 105, 190, 0.23); box-shadow: 0 24px 52px rgba(20, 58, 100, 0.14), 0 5px 12px rgba(20, 58, 100, 0.05); } /* Individual accent colors */ #clm-categories .clm-category-card--featured::before { background: linear-gradient(90deg, #ff7a22, #ffb347); } #clm-categories .clm-category-card--trim-caps::before { background: linear-gradient(90deg, #172b4d, #d2ad45); } #clm-categories .clm-category-card--extrusion-profiles::before { background: linear-gradient(90deg, #7893ad, #c8d6e5); } #clm-categories .clm-category-card--hand-use-coils::before { background: linear-gradient(90deg, #0757b5, #2da9f0); } #clm-categories .clm-category-card--single-edge-coils::before { background: linear-gradient(90deg, #1b2634, #d5b77a); } #clm-categories .clm-category-card--stainless-steel-coils::before { background: linear-gradient(90deg, #b86c55, #e5b39e); } /* ======================================== TABLET RESPONSIVE — 1024px AND BELOW ======================================== */ @media (max-width: 1024px) { #clm-categories { padding: 60px 28px 70px; } #clm-categories .clm-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* Wide cards occupy the complete row */ #clm-categories .clm-category-card--featured, #clm-categories .clm-category-card--stainless-steel-coils { grid-column: span 2; } /* Standard cards occupy one column */ #clm-categories .clm-category-card--trim-caps, #clm-categories .clm-category-card--extrusion-profiles, #clm-categories .clm-category-card--hand-use-coils, #clm-categories .clm-category-card--single-edge-coils { grid-column: span 1; } #clm-categories .clm-categories__title .elementor-heading-title { font-size: 40px; } #clm-categories .clm-categories__description p { font-size: 16px; } } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media (max-width: 767px) { #clm-categories { padding: 48px 16px 58px; } #clm-categories .clm-categories__inner { gap: 26px; } #clm-categories .clm-categories__header { width: 100%; } #clm-categories .clm-categories__title .elementor-heading-title { font-size: 31px; line-height: 1.12; letter-spacing: -0.7px; } #clm-categories .clm-categories__title .elementor-heading-title::after { width: 58px; height: 3px; margin-top: 13px; } #clm-categories .clm-categories__description p { font-size: 15px; line-height: 1.65; } #clm-categories .clm-categories__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } #clm-categories .clm-category-card { grid-column: auto; min-height: 0; border-radius: 20px; } #clm-categories .clm-category-card__image { height: 200px; } #clm-categories .clm-category-card__image .elementor-widget-container { padding: 12px 20px 8px; } #clm-categories .clm-category-card__image img { max-height: 180px; } #clm-categories .clm-category-card__content { min-height: 190px; padding: 18px 20px 20px; } #clm-categories .clm-category-card__title .elementor-heading-title { font-size: 18px; } #clm-categories .clm-category-card__description p { font-size: 14px; } #clm-categories::after { width: 170px; height: 170px; right: -35px; top: 35px; opacity: 0.22; } } /* Arabic RTL Fix - Current Widget Only */ html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff .elementor-widget-container { direction: rtl !important; text-align: right !important; } html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff h1, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff h2, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff h3, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff h4, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff h5, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff h6, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff p, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff span, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff li, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-bf446ff .elementor-heading-title { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0db4bf9 *//* ======================================== MATERIAL SELECTION GUIDE ======================================== */ #clm-selection-guide { position: relative; width: 100%; padding: 82px 24px 92px; background: radial-gradient( circle at 50% 0%, rgba(34, 143, 235, 0.10), transparent 30% ), #ffffff; overflow: hidden; box-sizing: border-box; } #clm-selection-guide .clm-selection-guide__inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 36px; } #clm-selection-guide .clm-selection-guide__header { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; } #clm-selection-guide .clm-selection-guide__title { margin: 0; } #clm-selection-guide .clm-selection-guide__title .elementor-heading-title { margin: 0; color: #0a3267; font-size: clamp(34px, 3.5vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -1.4px; } #clm-selection-guide .clm-selection-guide__title .elementor-heading-title::after { content: ""; display: block; width: 68px; height: 4px; margin: 16px auto 0; background: linear-gradient(90deg, #0e5cac, #29aaf1); border-radius: 10px; } #clm-selection-guide .clm-selection-guide__description { margin: 0; } #clm-selection-guide .clm-selection-guide__description p { max-width: 700px; margin: 0; color: #5a6b7f; font-size: 16px; line-height: 1.7; } /* Application cards */ #clm-selection-guide .clm-selection-guide__applications { position: relative; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } #clm-selection-guide .clm-application-card { position: relative; width: 100%; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient( 155deg, #f5f9fe 0%, #eef5fc 100% ); border: 1px solid rgba(14, 83, 157, 0.10); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 28px rgba(18, 53, 91, 0.07), 0 2px 5px rgba(18, 53, 91, 0.03); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } #clm-selection-guide .clm-application-card:hover { transform: translateY(-6px); border-color: rgba(21, 105, 192, 0.22); box-shadow: 0 22px 42px rgba(18, 53, 91, 0.13), 0 4px 9px rgba(18, 53, 91, 0.05); } /* Image area */ #clm-selection-guide .clm-application-card__image { width: 100%; height: 190px; margin: 0; } #clm-selection-guide .clm-application-card__image .elementor-widget-container { width: 100%; height: 100%; padding: 16px 26px 4px; display: flex; align-items: center; justify-content: center; } #clm-selection-guide .clm-application-card__image img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; object-position: center; transition: transform 0.35s ease; } #clm-selection-guide .clm-application-card:hover .clm-application-card__image img { transform: translateY(-4px) scale(1.04); } /* Card title */ #clm-selection-guide .clm-application-card__title { margin: 0; padding: 13px 16px 17px; text-align: center; background: rgba(255, 255, 255, 0.84); border-top: 1px solid rgba(14, 83, 157, 0.07); } #clm-selection-guide .clm-application-card__title .elementor-heading-title { margin: 0; color: #0c376d; font-size: 17px; font-weight: 750; line-height: 1.3; } /* Material category chips */ #clm-selection-guide .clm-selection-guide__materials { position: relative; width: 100%; padding-top: 54px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; } #clm-selection-guide .clm-material-chip { position: relative; width: 100%; margin: 0; } #clm-selection-guide .clm-material-chip .elementor-widget-container { width: 100%; height: 100%; } #clm-selection-guide .clm-material-chip .elementor-button { width: 100%; min-height: 58px; height: 100%; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; color: #174577; background: #f4f8fd; border: 1px solid rgba(14, 83, 157, 0.11); border-radius: 16px; box-shadow: 0 7px 18px rgba(20, 60, 105, 0.055); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } #clm-selection-guide .clm-material-chip .elementor-button:hover { color: #ffffff; background: #0e5cac; border-color: #0e5cac; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(14, 92, 172, 0.20); } /* Connection point above every material */ #clm-selection-guide .clm-material-chip::before { content: ""; position: absolute; z-index: 3; top: -9px; left: 50%; width: 9px; height: 9px; background: #1689df; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(22, 137, 223, 0.18); transform: translateX(-50%); } /* ======================================== APPLICATION-TO-MATERIAL CONNECTIONS ======================================== */ /* Replace general gaps with controlled spacing */ #clm-selection-guide .clm-selection-guide__inner { gap: 0; } #clm-selection-guide .clm-selection-guide__header { margin-bottom: 36px; } #clm-selection-guide .clm-selection-guide__applications { margin: 0; } /* SVG connection area */ #clm-selection-guide .clm-selection-guide__connections { position: relative; z-index: 0; width: 100%; height: 100px; margin: 0; pointer-events: none; } #clm-selection-guide .clm-selection-guide__connections .elementor-widget-container { width: 100%; height: 100%; } #clm-selection-guide .clm-selection-lines { width: 100%; height: 100%; } #clm-selection-guide .clm-selection-lines svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Curved paths */ #clm-selection-guide .clm-selection-lines path { fill: none; stroke: url("#clm-line-gradient"); stroke: #71b9ee; stroke-width: 2; stroke-linecap: round; opacity: 0.62; vector-effect: non-scaling-stroke; } /* Starting points under application cards */ #clm-selection-guide .clm-selection-lines circle { fill: #1689df; stroke: #ffffff; stroke-width: 3; vector-effect: non-scaling-stroke; } /* Remove the earlier reserved space */ #clm-selection-guide .clm-selection-guide__materials { padding-top: 0; margin: 0; } /* Compact vertical spacing */ #clm-selection-guide { margin-top: 0 !important; padding-top: 34px; padding-bottom: 64px; } #clm-selection-guide .clm-selection-guide__header { gap: 9px; margin-bottom: 25px; } #clm-selection-guide .clm-selection-guide__title .elementor-heading-title::after { margin-top: 11px; } #clm-selection-guide .clm-selection-guide__description p { line-height: 1.55; } /* Remove section background effects */ #clm-selection-guide { background: #ffffff; } /* Tablet */ @media (max-width: 1024px) { .elementor-33974 .elementor-element.elementor-element-0db4bf9 { padding: 34px 26px 56px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__applications { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__connections { display: none; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__materials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-material-chip::before { display: none; } } /* Mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-0db4bf9 { padding: 28px 16px 44px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__header { margin-bottom: 22px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__title { font-size: 30px; line-height: 1.15; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__description { font-size: 15px; line-height: 1.65; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__applications { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-application-card__image { height: 145px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-application-card__title { min-height: 52px; padding: 12px 8px; font-size: 14px; line-height: 1.35; text-align: center; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__connections { display: none; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-selection-guide__materials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } .elementor-33974 .elementor-element.elementor-element-0db4bf9 .clm-material-chip .elementor-button { min-height: 54px; padding: 10px 8px; font-size: 12px; line-height: 1.3; } } /* Hide selection guide on mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-0db4bf9 { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fda35f2 *//* ============================== CHANNEL LETTER BUYING GUIDE ============================== */ .elementor-33974 .elementor-element.elementor-element-fda35f2 { position: relative; width: 100%; padding: 74px 24px 82px; overflow: hidden; background: radial-gradient( circle at 8% 15%, rgba(38, 144, 255, 0.10) 0, rgba(38, 144, 255, 0) 26% ), linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%); } /* Decorative background */ .elementor-33974 .elementor-element.elementor-element-fda35f2::before { content: ""; position: absolute; top: 40px; right: -95px; width: 260px; height: 260px; border: 1px solid rgba(19, 126, 224, 0.12); border-radius: 50%; pointer-events: none; } .elementor-33974 .elementor-element.elementor-element-fda35f2::after { content: ""; position: absolute; right: 40px; bottom: 30px; width: 120px; height: 120px; background-image: radial-gradient( rgba(15, 115, 210, 0.18) 1.5px, transparent 1.5px ); background-size: 14px 14px; opacity: 0.55; pointer-events: none; } /* Inner container */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__inner { position: relative; z-index: 2; width: min(1200px, 100%); margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; } /* Header */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__header { width: 100%; max-width: 760px; margin: 0 auto 42px; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title .elementor-heading-title { margin: 0; color: #073b78; font-size: clamp(32px, 3.2vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -1px; } /* Small blue line below title */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title::after { content: ""; display: block; width: 64px; height: 4px; margin: 18px auto 0; border-radius: 50px; background: linear-gradient(90deg, #0d75d8, #39b8ff); } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__description { max-width: 700px; margin-top: 18px; color: #4f6580; font-size: 16px; line-height: 1.75; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__description p { margin: 0; } /* Cards grid */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; padding: 0; } /* Individual card */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card { position: relative; min-width: 0; min-height: 310px; padding: 34px 25px 28px; display: flex; flex-direction: column; align-items: flex-start; background: rgba(255, 255, 255, 0.92); border: 1px solid #dce8f5; border-radius: 20px; box-shadow: 0 14px 35px rgba(5, 49, 99, 0.08); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Top accent */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card::before { content: ""; position: absolute; top: 0; left: 24px; width: 48px; height: 4px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #0879dc, #39baff); } /* Step numbers */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card::after { position: absolute; top: 23px; right: 22px; color: rgba(8, 61, 120, 0.08); font-size: 54px; font-weight: 800; line-height: 1; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card--application::after { content: "01"; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card--fabrication::after { content: "02"; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card--finish::after { content: "03"; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card--dimensions::after { content: "04"; } /* Icon */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon { position: relative; z-index: 2; width: 58px; height: 58px; margin: 0 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: #ffffff; background: linear-gradient(135deg, #073f80, #168de8); box-shadow: 0 10px 22px rgba(13, 117, 216, 0.22); } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon-wrapper { display: flex; align-items: center; justify-content: center; line-height: 0; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon { color: #ffffff; font-size: 24px; } /* Card title */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__title, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__title .elementor-heading-title { margin: 0; color: #073b78; font-size: 20px; font-weight: 700; line-height: 1.32; } /* Card text */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__text { margin-top: 14px; color: #536981; font-size: 14px; line-height: 1.7; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__text p { margin: 0; } /* Hover */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card:hover { transform: translateY(-7px); border-color: rgba(17, 135, 231, 0.42); box-shadow: 0 20px 44px rgba(5, 49, 99, 0.14); } /* Tablet */ @media (max-width: 1024px) { .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding: 60px 24px 68px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card { min-height: 285px; } } /* Mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding: 46px 16px 52px; } .elementor-33974 .elementor-element.elementor-element-fda35f2::before, .elementor-33974 .elementor-element.elementor-element-fda35f2::after { display: none; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__header { margin-bottom: 28px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title .elementor-heading-title { font-size: 29px; line-height: 1.18; letter-spacing: -0.4px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title::after { width: 52px; height: 3px; margin-top: 14px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__description { margin-top: 14px; font-size: 15px; line-height: 1.65; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__grid { grid-template-columns: 1fr; gap: 14px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card { min-height: 0; padding: 25px 22px; border-radius: 16px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon { width: 50px; height: 50px; margin-bottom: 18px; border-radius: 14px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon { font-size: 21px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__title, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__title .elementor-heading-title { font-size: 18px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__text { margin-top: 10px; font-size: 14px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card::after { top: 20px; right: 20px; font-size: 46px; } } /* ============================== COMPACT WHITE VERSION ============================== */ /* White background and reduced height */ .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding: 48px 24px 54px; background: #ffffff; } /* Remove background decorations */ .elementor-33974 .elementor-element.elementor-element-fda35f2::before, .elementor-33974 .elementor-element.elementor-element-fda35f2::after { display: none; } /* Compact header */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__header { margin-bottom: 30px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title .elementor-heading-title { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.14; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__title::after { width: 54px; height: 3px; margin-top: 14px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__description { margin-top: 13px; font-size: 15px; line-height: 1.65; } /* Reduce spacing between cards */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__grid { gap: 16px; } /* More compact cards */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card { min-height: 270px; padding: 25px 22px 24px; justify-content: flex-start; border-radius: 18px; box-shadow: 0 10px 28px rgba(5, 49, 99, 0.07); } /* Improved icon box */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon { width: 54px; height: 54px; min-width: 54px; margin: 0 0 18px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 50%; color: #ffffff !important; background: linear-gradient(145deg, #0b4c91 0%, #168fe8 100%); box-shadow: 0 9px 20px rgba(10, 107, 192, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* Force Elementor icons to white */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon { display: flex; align-items: center; justify-content: center; color: #ffffff !important; fill: #ffffff !important; font-size: 22px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon i { color: #ffffff !important; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon svg, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon svg path { fill: #ffffff !important; color: #ffffff !important; } /* Compact titles */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__title, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__title .elementor-heading-title { font-size: 18px; line-height: 1.28; } /* Remove unnecessary Elementor widget spacing */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card .elementor-widget { margin-bottom: 0; } /* Compact description */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__text { margin-top: 11px; font-size: 13.5px; line-height: 1.6; } /* Smaller decorative numbers */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card::after { top: 21px; right: 19px; font-size: 46px; } /* Smaller top accent */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card::before { left: 22px; width: 42px; height: 3px; } /* Tablet */ @media (max-width: 1024px) { .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding: 44px 22px 50px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card { min-height: 250px; } } /* Mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding: 38px 16px 44px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-buying-guide__header { margin-bottom: 24px; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card { min-height: 0; padding: 22px 20px; } } /* Perfectly center icons inside circles */ .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon > .elementor-widget-container, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon-wrapper, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon { display: flex !important; align-items: center !important; justify-content: center !important; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon > .elementor-widget-container, .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon-wrapper { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon .elementor-icon { width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon i { width: auto !important; height: auto !important; margin: 0 !important; line-height: 1 !important; text-align: center !important; } .elementor-33974 .elementor-element.elementor-element-fda35f2 .clm-guide-card__icon svg { display: block !important; width: 23px !important; height: 23px !important; margin: 0 !important; } /* Reduce top spacing */ .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding-top: 25px; } @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-fda35f2 { padding-top: 20px; } } /* Arabic RTL Fix - Current Widget Only */ html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 .elementor-widget-container { direction: rtl !important; text-align: right !important; } html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 h1, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 h2, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 h3, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 h4, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 h5, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 h6, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 p, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 span, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 li, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-fda35f2 .elementor-heading-title { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d205787 *//* ================================== CHANNEL LETTER CONSULTATION CTA ================================== */ .elementor-33974 .elementor-element.elementor-element-d205787 { position: relative; width: 100%; padding: 48px 24px; overflow: hidden; background: linear-gradient( 110deg, #073873 0%, #0b4f99 48%, #1686dc 100% ); } /* Decorative circles */ .elementor-33974 .elementor-element.elementor-element-d205787::before { content: ""; position: absolute; top: -170px; left: -90px; width: 340px; height: 340px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; pointer-events: none; } .elementor-33974 .elementor-element.elementor-element-d205787::after { content: ""; position: absolute; right: -120px; bottom: -210px; width: 410px; height: 410px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; pointer-events: none; } /* Inner layout */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { position: relative; z-index: 2; width: min(1200px, 100%); margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: center; gap: 70px; } /* Content column */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__content { display: flex; flex-direction: column; align-items: flex-start; padding: 0; } /* Eyebrow */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__eyebrow, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__eyebrow .elementor-heading-title { margin: 0; color: #8fd5ff; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1.7px; text-transform: uppercase; } /* Title */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__title { margin-top: 10px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__title, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__title .elementor-heading-title { max-width: 720px; margin-bottom: 0; color: #ffffff; font-size: clamp(29px, 3vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.6px; } /* Description */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__description { max-width: 680px; margin-top: 14px; color: rgba(255, 255, 255, 0.82); font-size: 15px; line-height: 1.7; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__description p { margin: 0; } /* Action panel */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__actions { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 22px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 20px; box-shadow: 0 18px 42px rgba(0, 30, 72, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Support icon */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon { width: 48px; height: 48px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon > .elementor-widget-container, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon .elementor-icon-wrapper, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon .elementor-icon { width: 100%; height: 100%; display: flex !important; align-items: center !important; justify-content: center !important; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon .elementor-icon { color: #ffffff !important; fill: #ffffff !important; font-size: 21px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon svg, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__icon svg path { fill: #ffffff !important; } /* Both buttons */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__primary, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__secondary { width: 100%; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__primary .elementor-button, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__secondary .elementor-button { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 9px; font-size: 14px; font-weight: 700; line-height: 1.3; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } /* Primary button */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__primary .elementor-button { color: #073b78; background: #ffffff; border: 1px solid #ffffff; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__primary .elementor-button:hover { color: #073b78; background: #eaf6ff; transform: translateY(-2px); } /* Secondary button */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__secondary .elementor-button { color: #ffffff; background: transparent; border: 1px solid rgba(255, 255, 255, 0.48); } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__secondary .elementor-button:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); border-color: #ffffff; transform: translateY(-2px); } /* Remove Elementor widget spacing */ .elementor-33974 .elementor-element.elementor-element-d205787 .elementor-widget { margin-bottom: 0; } /* Tablet */ @media (max-width: 1024px) { .elementor-33974 .elementor-element.elementor-element-d205787 { padding: 42px 24px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; } } /* Mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-d205787 { padding: 40px 16px; } .elementor-33974 .elementor-element.elementor-element-d205787::before, .elementor-33974 .elementor-element.elementor-element-d205787::after { opacity: 0.6; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { grid-template-columns: 1fr; gap: 26px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__content { align-items: center; text-align: center; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__title, .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__title .elementor-heading-title { font-size: 28px; line-height: 1.18; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__description { font-size: 14px; line-height: 1.65; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__actions { width: 100%; padding: 18px; } } /* Full-width CTA and reduced spacing */ .elementor-33974 .elementor-element.elementor-element-d205787 { width: 100vw !important; max-width: 100vw !important; margin-top: -24px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Compact single-button panel */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { grid-template-columns: minmax(0, 1fr) 290px; gap: 52px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__actions { padding: 20px; gap: 13px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__primary .elementor-button { min-height: 50px; } /* Tablet */ @media (max-width: 1024px) { .elementor-33974 .elementor-element.elementor-element-d205787 { margin-top: -16px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { grid-template-columns: minmax(0, 1fr) 270px; gap: 32px; } } /* Mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-d205787 { margin-top: -10px; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { grid-template-columns: 1fr; } } /* ================================== CURVED CTA DESIGN ================================== */ .elementor-33974 .elementor-element.elementor-element-d205787 { position: relative; padding-top: 60px; padding-bottom: 64px; background: radial-gradient( circle at 12% 30%, rgba(40, 164, 255, 0.30) 0, rgba(40, 164, 255, 0) 30% ), radial-gradient( circle at 88% 75%, rgba(78, 190, 255, 0.22) 0, rgba(78, 190, 255, 0) 32% ), linear-gradient( 110deg, #06356e 0%, #0a4f99 50%, #1686dc 100% ); } /* Curved top edge */ .elementor-33974 .elementor-element.elementor-element-d205787::before { content: ""; position: absolute; z-index: 3; top: -31px; left: -5%; width: 110%; height: 48px; background: #ffffff; border: 0; border-radius: 0 0 50% 50%; pointer-events: none; } /* Curved bottom edge */ .elementor-33974 .elementor-element.elementor-element-d205787::after { content: ""; position: absolute; z-index: 3; right: auto; bottom: -31px; left: -5%; width: 110%; height: 48px; background: #ffffff; border: 0; border-radius: 50% 50% 0 0; pointer-events: none; } /* Keep content above decorative background */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner { position: relative; z-index: 4; } /* Decorative curved lines behind content */ .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner::before { content: ""; position: absolute; z-index: -1; top: -95px; left: -170px; width: 330px; height: 190px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; transform: rotate(-12deg); pointer-events: none; } .elementor-33974 .elementor-element.elementor-element-d205787 .clm-consultation-cta__inner::after { content: ""; position: absolute; z-index: -1; right: -170px; bottom: -110px; width: 350px; height: 210px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; transform: rotate(14deg); pointer-events: none; } /* Mobile curve adjustment */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-d205787 { padding-top: 56px; padding-bottom: 58px; } .elementor-33974 .elementor-element.elementor-element-d205787::before { top: -25px; left: -15%; width: 130%; height: 38px; } .elementor-33974 .elementor-element.elementor-element-d205787::after { bottom: -25px; left: -15%; width: 130%; height: 38px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c0e4724 *//* Icon Box cards */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card { position: relative; min-width: 0; height: 100%; } .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card > .elementor-widget-container { position: relative; height: 100%; min-height: 270px; padding: 24px 21px 25px; background: #ffffff; border: 1px solid #dce8f4; border-radius: 17px; box-shadow: 0 11px 30px rgba(4, 49, 99, 0.07); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* Top accent */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card > .elementor-widget-container::before { content: ""; position: absolute; top: 0; left: 21px; width: 42px; height: 3px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #0877d6, #36b9ff); } /* Icon Box internal layout */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-wrapper { display: flex; flex-direction: column; align-items: flex-start; height: 100%; text-align: left; } /* Icon spacing */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-icon { margin: 0 0 19px !important; } /* Icon background */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon { width: 52px; height: 52px; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; color: #ffffff !important; fill: #ffffff !important; background: linear-gradient(145deg, #084682, #168fe6); border: 0 !important; border-radius: 15px; box-shadow: 0 9px 20px rgba(13, 112, 199, 0.20); } /* Center icon perfectly */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon i { color: #ffffff !important; font-size: 22px; line-height: 1 !important; } .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon svg { display: block; width: 23px; height: 23px; margin: 0; fill: #ffffff !important; } .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon svg path { fill: #ffffff !important; } /* Card content */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-content { width: 100%; } /* Card title */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-title { margin: 0 0 12px; color: #073b78; font-size: 18px; font-weight: 700; line-height: 1.32; } .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-title a { color: inherit; } /* Card description */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-description { margin: 0; color: #536981; font-size: 14px; line-height: 1.65; } /* Hover */ .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card:hover > .elementor-widget-container { transform: translateY(-6px); border-color: rgba(19, 132, 222, 0.42); box-shadow: 0 18px 40px rgba(4, 49, 99, 0.12); } /* Tablet */ @media (max-width: 1024px) { .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card > .elementor-widget-container { min-height: 245px; } } /* Mobile */ @media (max-width: 767px) { .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card > .elementor-widget-container { min-height: 0; padding: 22px 20px; } .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon { width: 48px; height: 48px; } .elementor-33974 .elementor-element.elementor-element-c0e4724 .clm-why-card .elementor-icon-box-title { font-size: 17px; } } /* Arabic RTL Fix - Current Widget Only */ html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 .elementor-widget-container { direction: rtl !important; text-align: right !important; } html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 h1, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 h2, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 h3, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 h4, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 h5, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 h6, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 p, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 span, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 li, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-c0e4724 .elementor-heading-title { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e1b7a6a *//* Arabic RTL Fix - Current Widget Only */ html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a .elementor-widget-container { direction: rtl !important; text-align: right !important; } html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a h1, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a h2, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a h3, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a h4, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a h5, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a h6, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a p, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a span, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a li, html[lang^="ar"] .elementor-33974 .elementor-element.elementor-element-e1b7a6a .elementor-heading-title { direction: rtl !important; text-align: right !important; unicode-bidi: plaintext; }/* End custom CSS */