.elementor-241 .elementor-element.elementor-element-0b88929{--display:flex;--min-height:275px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.16;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-241 .elementor-element.elementor-element-0b88929:not(.elementor-motion-effects-element-type-background), .elementor-241 .elementor-element.elementor-element-0b88929 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://lhl.vagas.co.il/wp-content/uploads/2026/10/לירן-הכל-לגן-2.jpg");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-241 .elementor-element.elementor-element-0b88929::before, .elementor-241 .elementor-element.elementor-element-0b88929 > .elementor-background-video-container::before, .elementor-241 .elementor-element.elementor-element-0b88929 > .e-con-inner > .elementor-background-video-container::before, .elementor-241 .elementor-element.elementor-element-0b88929 > .elementor-background-slideshow::before, .elementor-241 .elementor-element.elementor-element-0b88929 > .e-con-inner > .elementor-background-slideshow::before, .elementor-241 .elementor-element.elementor-element-0b88929 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#DAE3D9;--background-overlay:'';}.elementor-241 .elementor-element.elementor-element-0b88929 > .elementor-shape-bottom .elementor-shape-fill, .elementor-241 .elementor-element.elementor-element-0b88929 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill{fill:var( --e-global-color-8d50e17 );}.elementor-241 .elementor-element.elementor-element-0b88929 > .elementor-shape-bottom svg, .elementor-241 .elementor-element.elementor-element-0b88929 > .e-con-inner > .elementor-shape-bottom svg{height:54px;}.elementor-241 .elementor-element.elementor-element-d98be94{--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;}.elementor-241 .elementor-element.elementor-element-5cd268d{--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;--justify-content:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-241 .elementor-element.elementor-element-27287b6{padding:20px 0px 20px 0px;text-align:center;}.elementor-241 .elementor-element.elementor-element-27287b6 .elementor-heading-title{font-family:"Noto Sans Hebrew", Sans-serif;font-size:64px;font-weight:700;line-height:61px;}.elementor-241 .elementor-element.elementor-element-67e7edf{--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;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-241 .elementor-element.elementor-element-e78ba04{--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;}.elementor-241 .elementor-element.elementor-element-db1e5f0{--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-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-241 .elementor-element.elementor-element-c64255b .elementor-heading-title{font-family:"Noto Sans Hebrew", Sans-serif;font-size:28px;font-weight:600;}.elementor-241 .elementor-element.elementor-element-c26c474{--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-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-241 .elementor-element.elementor-element-b92fd39 img{height:700px;object-fit:cover;object-position:center center;border-radius:20px 20px 20px 20px;}.elementor-241 .elementor-element.elementor-element-b2db65e{--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-241 .elementor-element.elementor-element-d91ec8e{--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;}.elementor-241 .elementor-element.elementor-element-2f4f26b{--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-241 .elementor-element.elementor-element-3176f78 .elementor-heading-title{font-family:"Noto Sans Hebrew", Sans-serif;font-size:39px;font-weight:600;line-height:48px;}.elementor-241 .elementor-element.elementor-element-b07c2f9{font-family:"Noto Sans Hebrew", Sans-serif;font-weight:400;}.elementor-241 .elementor-element.elementor-element-62b64da{--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;}.elementor-241 .elementor-element.elementor-element-fd2df10{--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-241 .elementor-element.elementor-element-c16d289{--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-241 .elementor-element.elementor-element-a898098{--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-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-241 .elementor-element.elementor-element-18a1c4b{--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-241 .elementor-element.elementor-element-089a51e{--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-241 .elementor-element.elementor-element-b3caf40{--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-241 .elementor-element.elementor-element-eae7fac{--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-241 .elementor-element.elementor-element-e0f3df8{--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-241 .elementor-element.elementor-element-37bf979{--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-241 .elementor-element.elementor-element-becd4d0{--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-241 .elementor-element.elementor-element-6bea0e7{--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-241 .elementor-element.elementor-element-14c557a{--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-241 .elementor-element.elementor-element-115fdad{--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-241 .elementor-element.elementor-element-fb0b0a2{--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-241 .elementor-element.elementor-element-e86e501{--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-241 .elementor-element.elementor-element-f55f703{--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-241 .elementor-element.elementor-element-2b1aec2{--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-241 .elementor-element.elementor-element-11c1f8c{--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-241 .elementor-element.elementor-element-4a029c0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-241 .elementor-element.elementor-element-0dbbb7b{--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-241 .elementor-element.elementor-element-12568cc{--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-241 .elementor-element.elementor-element-c0036ca{font-family:"Noto Sans Hebrew", Sans-serif;font-size:36px;font-weight:400;line-height:43px;color:var( --e-global-color-primary );}.elementor-241 .elementor-element.elementor-element-a910272{--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-241 .elementor-element.elementor-element-45eac4e{--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;}.elementor-241 .elementor-element.elementor-element-318dd41{--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-241 .elementor-element.elementor-element-2f8cac0 .elementor-heading-title{font-family:"Noto Sans Hebrew", Sans-serif;font-size:50px;font-weight:600;}.elementor-241 .elementor-element.elementor-element-41f6bb6{--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-widget-global .elementor-field-group > label, .elementor-widget-global .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-global .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-global .elementor-field-group .elementor-field, .elementor-widget-global .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-global .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-global .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-global .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-global .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-global .e-form__indicators__indicator, .elementor-widget-global .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-global{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-global .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-241 .elementor-element.elementor-global-263 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-241 .elementor-element.elementor-global-263 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-241 .elementor-element.elementor-global-263 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-241 .elementor-element.elementor-global-263 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-241 .elementor-element.elementor-global-263 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-241 .elementor-element.elementor-global-263 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-241 .elementor-element.elementor-global-263 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-241 .elementor-element.elementor-global-263 .elementor-field-type-html{padding-bottom:0px;}.elementor-241 .elementor-element.elementor-global-263 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .elementor-button[type="submit"]{color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-241 .elementor-element.elementor-global-263 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-241 .elementor-element.elementor-global-263{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}@media(min-width:768px){.elementor-241 .elementor-element.elementor-element-0dbbb7b{--width:50%;}.elementor-241 .elementor-element.elementor-element-12568cc{--width:50%;}}@media(max-width:767px){.elementor-241 .elementor-element.elementor-element-0b88929{--min-height:156px;--overlay-opacity:0.58;}.elementor-241 .elementor-element.elementor-element-27287b6 .elementor-heading-title{font-size:31px;line-height:1.2em;}.elementor-241 .elementor-element.elementor-element-2f8cac0 .elementor-heading-title{font-size:22px;}}/* Start custom CSS for container, class: .elementor-element-0b88929 *//* ===================================================== LIRAN - HAKOL LAGAN VGS HERO SECTION Desktop / Tablet / Mobile Font: Noto Sans Hebrew ===================================================== */ /* ==================================== 01. HERO MAIN SECTION ==================================== */ .vgs_section_026_hero { --vgs-hero-green: #1C5936; --vgs-hero-dark: #123C2A; --vgs-hero-text: #27362D; --vgs-hero-muted: #6A746E; --vgs-hero-light: #EAF2E9; --vgs-hero-border: #DAE3D9; position: relative; isolation: isolate; width: 100%; overflow: hidden; direction: rtl; background: radial-gradient( circle at 9% 15%, rgba(28, 89, 54, 0.075), transparent 34% ), linear-gradient( 135deg, #FFFFFF 0%, #F6F7F3 100% ); padding: 105px 30px 110px; font-family: "Noto Sans Hebrew", sans-serif; } /* Decorative background circle */ .vgs_section_026_hero::before { content: ""; position: absolute; z-index: -1; width: 510px; height: 510px; left: -260px; bottom: -320px; border-radius: 50%; border: 1px solid rgba(28,89,54,.13); box-shadow: 0 0 0 60px rgba(28,89,54,.025), 0 0 0 120px rgba(28,89,54,.018); pointer-events: none; } /* ==================================== 02. HERO INNER CONTAINER ==================================== */ .vgs_container_025_hero_inner { width: 100%; max-width: 1320px; margin: 0 auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 75px; } /* ==================================== 03. HERO CONTENT COLUMN ==================================== */ .vgs_container_019_hero_content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 52%; min-width: 0; text-align: right; gap: 0; } /* ==================================== 04. SMALL TITLE / EYEBROW ==================================== */ .vgs_container_019_hero_content_smalltitle { display: inline-flex; width: auto !important; align-items: center; margin-bottom: 24px; padding: 9px 17px; border: 1px solid var(--vgs-hero-border); border-radius: 100px; background: #FFFFFF; box-shadow: 0 5px 20px rgba(18,60,42,.035); } .vgs_container_019_hero_content_smalltitle p { margin: 0; color: var(--vgs-hero-green); font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: .1px; } /* Green dot */ .vgs_container_019_hero_content_smalltitle::before { content: ""; display: block; flex: 0 0 7px; width: 7px; height: 7px; margin-left: 10px; background: #6A9F69; border-radius: 50%; } /* ==================================== 05. MAIN TITLE ==================================== */ .vgs_container_019_hero_content_title { width: 100%; margin-bottom: 23px; } .vgs_container_019_hero_content_title .elementor-heading-title { margin: 0; color: var(--vgs-hero-dark); font-family: "Noto Sans Hebrew", sans-serif; font-size: clamp(40px, 4.2vw, 68px); font-weight: 800; line-height: 1.19; letter-spacing: -1.6px; } /* ==================================== 06. DESCRIPTION ==================================== */ .vgs_container_019_hero_content_text { width: 100%; max-width: 550px; margin-bottom: 34px; } .vgs_container_019_hero_content_text p { margin: 0; color: var(--vgs-hero-muted); font-family: "Noto Sans Hebrew", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.95; } /* ==================================== 07. ACTION BUTTONS CONTAINER ==================================== */ .vgs_container_016_hero_actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 14px; width: 100%; margin-bottom: 40px; } /* ==================================== 08. PRIMARY BUTTON ==================================== */ .vgs_container_019_hero_content_botton_alltheprod { width: auto !important; } .vgs_container_019_hero_content_botton_alltheprod .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 17px 29px !important; background: var(--vgs-hero-green) !important; color: #FFFFFF !important; border: 1px solid var(--vgs-hero-green); border-radius: 13px; font-family: "Noto Sans Hebrew", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; box-shadow: 0 10px 25px rgba(28,89,54,.16); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .vgs_container_019_hero_content_botton_alltheprod .elementor-button:hover { background: var(--vgs-hero-dark) !important; color: #FFFFFF !important; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(18,60,42,.22); } /* ==================================== 09. SECONDARY BUTTON ==================================== */ .vgs_container_019_hero_content_botton_aboutus { width: auto !important; } .vgs_container_019_hero_content_botton_aboutus .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 17px 29px !important; background: transparent !important; color: var(--vgs-hero-dark) !important; border: 1px solid var(--vgs-hero-border); border-radius: 13px; font-family: "Noto Sans Hebrew", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; transition: background .3s ease, border-color .3s ease, transform .3s ease; } .vgs_container_019_hero_content_botton_aboutus .elementor-button:hover { background: var(--vgs-hero-light) !important; border-color: var(--vgs-hero-green); color: var(--vgs-hero-green) !important; transform: translateY(-3px); } /* ==================================== 10. HERO NOTE CONTAINER ==================================== */ .vgs_container_018_hero_note { display: flex !important; flex-direction: row !important; align-items: center !important; width: auto !important; padding-top: 19px; border-top: 1px solid var(--vgs-hero-border); } /* Text widget inside note */ .vgs_container_018_hero_note .elementor-widget-text-editor p { margin: 0; color: var(--vgs-hero-muted); font-size: 13px; font-weight: 500; line-height: 1.7; } /* ==================================== 11. HERO VISUAL CONTAINER ==================================== */ .vgs_container_024_hero_visual { position: relative; display: flex !important; flex: 1 1 48%; min-width: 0; align-items: stretch !important; justify-content: center !important; min-height: 530px; border-radius: 28px; background: #DBE7D9; box-shadow: 0 25px 65px rgba(18,60,42,.14); } /* Decorative outline */ .vgs_container_024_hero_visual::before { content: ""; position: absolute; z-index: -1; inset: -16px 20px 20px -16px; border: 1px solid rgba(28,89,54,.26); border-radius: 34px; pointer-events: none; } /* ==================================== 12. HERO IMAGE WIDGET ==================================== */ .vgs_container_024_hero_visual_image { position: absolute !important; inset: 0; width: 100% !important; height: 100%; overflow: hidden; border-radius: 28px; } .vgs_container_024_hero_visual_image .elementor-widget-container { width: 100%; height: 100%; } .vgs_container_024_hero_visual_image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 28px; transition: transform .8s ease; } .vgs_container_024_hero_visual:hover .vgs_container_024_hero_visual_image img { transform: scale(1.045); } /* ==================================== 13. IMAGE OVERLAY ==================================== */ .vgs_container_024_hero_visual::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 28px; background: linear-gradient( 180deg, transparent 55%, rgba(10,42,26,.30) 100% ); pointer-events: none; } /* ==================================== 14. FLOATING BRAND BADGE ==================================== */ .vgs_container_023_hero_photo_badge { position: absolute !important; z-index: 3; bottom: 28px; right: -24px; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: auto !important; min-width: 175px; padding: 22px 26px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: var(--vgs-hero-dark); box-shadow: 0 14px 32px rgba(18,60,42,.22); color: #FFFFFF; direction: rtl; } /* ==================================== 15. BADGE SMALL TEXT ==================================== */ .vgs_container_023_hero_photo_badge_smalltext { width: 100%; margin-bottom: 3px; } .vgs_container_023_hero_photo_badge_smalltext p { margin: 0; color: #C5DCCA; font-size: 13px; font-weight: 600; } /* ==================================== 16. BADGE BIG TEXT ==================================== */ .vgs_container_023_hero_photo_badge_bigtext { width: 100%; } .vgs_container_023_hero_photo_badge_bigtext .elementor-heading-title { margin: 0; color: #FFFFFF; font-family: "Noto Sans Hebrew", sans-serif; font-size: 24px; font-weight: 800; line-height: 1.3; } /* ==================================== 17. TABLET ==================================== */ @media (max-width: 1024px) { .vgs_section_026_hero { padding: 75px 25px 90px; } .vgs_container_025_hero_inner { gap: 40px; } .vgs_container_019_hero_content_title .elementor-heading-title { font-size: clamp(37px, 4.3vw, 54px); letter-spacing: -1px; } .vgs_container_019_hero_content_text p { font-size: 16px; line-height: 1.85; } .vgs_container_024_hero_visual { min-height: 440px; } .vgs_container_023_hero_photo_badge { right: -10px; bottom: 20px; min-width: 145px; padding: 16px 20px; } .vgs_container_023_hero_photo_badge_bigtext .elementor-heading-title { font-size: 21px; } .vgs_container_016_hero_actions { gap: 10px; } .vgs_container_019_hero_content_botton_alltheprod .elementor-button, .vgs_container_019_hero_content_botton_aboutus .elementor-button { min-height: 50px; padding: 13px 18px !important; font-size: 14px; } } /* ==================================== 18. MOBILE ==================================== */ @media (max-width: 767px) { .vgs_section_026_hero { padding: 55px 18px 65px; } .vgs_container_025_hero_inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 42px; } .vgs_container_019_hero_content { flex: 0 0 auto; width: 100%; align-items: flex-start !important; } .vgs_container_019_hero_content_smalltitle { margin-bottom: 18px; padding: 8px 13px; } .vgs_container_019_hero_content_smalltitle p { font-size: 12px; } .vgs_container_019_hero_content_title { margin-bottom: 17px; } .vgs_container_019_hero_content_title .elementor-heading-title { font-size: clamp(34px, 8vw, 45px); line-height: 1.25; letter-spacing: -.7px; } .vgs_container_019_hero_content_text { margin-bottom: 26px; } .vgs_container_019_hero_content_text p { font-size: 15px; line-height: 1.85; } .vgs_container_016_hero_actions { margin-bottom: 26px; gap: 10px; } .vgs_container_019_hero_content_botton_alltheprod .elementor-button, .vgs_container_019_hero_content_botton_aboutus .elementor-button { min-height: 46px; padding: 12px 16px !important; font-size: 13px; border-radius: 10px; } .vgs_container_018_hero_note { padding-top: 15px; } .vgs_container_018_hero_note .elementor-widget-text-editor p { font-size: 11px; } /* Mobile image */ .vgs_container_024_hero_visual { flex: 0 0 auto; width: 100%; min-height: 340px; border-radius: 20px; } .vgs_container_024_hero_visual::before { inset: -9px 11px 11px -9px; border-radius: 25px; } .vgs_container_024_hero_visual_image, .vgs_container_024_hero_visual_image img, .vgs_container_024_hero_visual::after { border-radius: 20px; } /* Brand badge */ .vgs_container_023_hero_photo_badge { right: 12px; bottom: 12px; min-width: 130px; padding: 13px 17px; border-radius: 12px; } .vgs_container_023_hero_photo_badge_smalltext p { font-size: 11px; } .vgs_container_023_hero_photo_badge_bigtext .elementor-heading-title { font-size: 19px; } } /* ==================================== 19. SMALL MOBILE ==================================== */ @media (max-width: 380px) { .vgs_section_026_hero { padding-left: 14px; padding-right: 14px; } .vgs_container_019_hero_content_title .elementor-heading-title { font-size: 32px; } .vgs_container_016_hero_actions { flex-direction: column !important; align-items: stretch !important; } .vgs_container_019_hero_content_botton_alltheprod, .vgs_container_019_hero_content_botton_aboutus { width: 100% !important; } .vgs_container_019_hero_content_botton_alltheprod .elementor-button, .vgs_container_019_hero_content_botton_aboutus .elementor-button { width: 100%; } .vgs_container_024_hero_visual { min-height: 290px; } } /* ==================================== 20. ACCESSIBILITY ==================================== */ .vgs_section_026_hero a:focus-visible { outline: 2px solid var(--vgs-hero-green); outline-offset: 4px; } /* ==================================== 21. REDUCED MOTION ==================================== */ @media (prefers-reduced-motion: reduce) { .vgs_section_026_hero *, .vgs_section_026_hero *::before, .vgs_section_026_hero *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67e7edf *//* ====================================================== LIRAN - HAKOL LAGAN VGS ABOUT SECTION 101 Elementor Flexbox | RTL | Responsive Font: Noto Sans Hebrew ====================================================== */ /* ====================================================== 01. SECTION BASE ====================================================== */ .vgs_section_101_about { --vgs-about-primary: #1C5936; --vgs-about-dark: #123C2A; --vgs-about-text: #27362D; --vgs-about-muted: #6A746E; --vgs-about-light: #EAF2E9; --vgs-about-border: #DAE3D9; position: relative; isolation: isolate; width: 100%; overflow: hidden; padding: 115px 25px !important; background: radial-gradient( ellipse at 95% 85%, rgba(112,158,109,.10), transparent 42% ), linear-gradient( 135deg, #FFFFFF 0%, #FBFCF8 100% ); direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; } /* Background decorative rings */ .vgs_section_101_about::before { content: ""; position: absolute; z-index: -1; width: 510px; height: 510px; top: -320px; left: -180px; border-radius: 50%; border: 1px solid rgba(28,89,54,.10); box-shadow: 0 0 0 65px rgba(28,89,54,.022), 0 0 0 125px rgba(28,89,54,.012); pointer-events: none; } /* Dotted decoration */ .vgs_section_101_about::after { content: ""; position: absolute; z-index: -1; right: 2%; bottom: 30px; width: 150px; height: 150px; background-image: radial-gradient( rgba(28,89,54,.16) 1.3px, transparent 1.3px ); background-size: 17px 17px; opacity: .45; pointer-events: none; } /* ====================================================== 02. ELEMENTOR BOXED WRAPPER ====================================================== */ .vgs_section_101_about > .e-con-inner { width: 100%; max-width: 1320px !important; margin-inline: auto; padding: 0 !important; } /* ====================================================== 03. MAIN TWO-COLUMN LAYOUT ====================================================== */ .vgs_container_100_about_inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: clamp(45px, 6vw, 100px) !important; } /* ====================================================== 04. VISUAL COLUMN ====================================================== */ .vgs_container_087_about_visual { position: relative; isolation: isolate; display: flex !important; align-items: stretch !important; justify-content: center !important; flex: 0 1 48%; min-width: 0; min-height: 550px; border-radius: 28px; background: #E0EBDD; box-shadow: 0 18px 40px rgba(18,60,42,.08), 0 35px 75px rgba(18,60,42,.07); } /* Decorative outline behind photo */ .vgs_container_087_about_visual::before { content: ""; position: absolute; z-index: -1; inset: 23px -19px -20px 23px; border: 1px solid rgba(28,89,54,.30); border-radius: 32px; pointer-events: none; } /* ====================================================== 05. ABOUT IMAGE WIDGET ====================================================== */ .vgs_container_087_about_visual_img { position: absolute !important; inset: 0; display: block !important; width: 100% !important; height: 100% !important; border-radius: 28px; overflow: hidden; } .vgs_container_087_about_visual_img .elementor-widget-container { width: 100%; height: 100%; } .vgs_container_087_about_visual_img img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; transition: transform .8s ease; } /* Gentle image zoom */ .vgs_container_087_about_visual:hover .vgs_container_087_about_visual_img img { transform: scale(1.045); } /* Soft photo overlay */ .vgs_container_087_about_visual::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 28px; background: linear-gradient( 180deg, transparent 45%, rgba(10,42,26,.25) 100% ); pointer-events: none; } /* ====================================================== 06. FLOATING CORNER BADGE ====================================================== */ .vgs_container_086_about_visual_corner { position: absolute !important; z-index: 3; bottom: 32px; left: -28px; display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 175px; min-height: 85px; padding: 20px 26px !important; border-radius: 17px; background: linear-gradient( 135deg, #1C5936, #123C2A ); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 15px 35px rgba(18,60,42,.22); transform: rotate(-3deg); transition: transform .3s ease, box-shadow .3s ease; } .vgs_container_087_about_visual:hover .vgs_container_086_about_visual_corner { transform: rotate(0deg) translateY(-5px); box-shadow: 0 20px 40px rgba(18,60,42,.26); } .vgs_container_086_about_visual_corner_text p { margin: 0 !important; color: #FFFFFF; font-family: "Noto Sans Hebrew", sans-serif; font-size: 22px; font-weight: 800; line-height: 1.4; white-space: nowrap; } /* ====================================================== 07. CONTENT COLUMN ====================================================== */ .vgs_container_099_about_copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 52%; min-width: 0; gap: 0 !important; text-align: right; } /* ====================================================== 08. SMALL TOP TITLE ====================================================== */ .vgs_container_099_about_smalltitle { display: inline-flex !important; align-items: center; width: auto !important; margin-bottom: 20px !important; padding: 9px 17px; border-radius: 100px; border: 1px solid rgba(28,89,54,.12); background: var(--vgs-about-light); } .vgs_container_099_about_smalltitle::before { content: ""; width: 8px; height: 8px; margin-left: 10px; flex: 0 0 8px; border-radius: 50%; background: #6FA36C; } .vgs_container_099_about_smalltitle p { margin: 0 !important; color: var(--vgs-about-primary); font-size: 14px; font-weight: 700; line-height: 1.5; } /* ====================================================== 09. MAIN HEADING ====================================================== */ .vgs_container_099_about_title { width: 100%; margin-bottom: 24px !important; } .vgs_container_099_about_title .elementor-heading-title { margin: 0; color: var(--vgs-about-dark); font-family: "Noto Sans Hebrew", sans-serif; font-size: clamp(36px, 3.5vw, 54px); font-weight: 800; line-height: 1.22; letter-spacing: -1px; } /* ====================================================== 10. DESCRIPTION ====================================================== */ .vgs_container_099_about_text { width: 100%; max-width: 600px; margin-bottom: 34px !important; } .vgs_container_099_about_text p { margin: 0 !important; color: var(--vgs-about-muted); font-size: 17px; font-weight: 400; line-height: 2; } /* ====================================================== 11. TWO FEATURE CARDS WRAPPER ====================================================== */ .vgs_container_097_about_points { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px !important; width: 100% !important; margin-bottom: 32px !important; padding: 0 !important; } /* ====================================================== 12. FEATURE CARDS ====================================================== */ .vgs_container_093_about_point_1, .vgs_container_096_about_point_2 { position: relative; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0; min-height: 137px; padding: 23px 23px 22px !important; background: #FFFFFF; border: 1px solid var(--vgs-about-border); border-radius: 15px; box-shadow: 0 8px 22px rgba(18,60,42,.035); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Top decorative accent */ .vgs_container_093_about_point_1::before, .vgs_container_096_about_point_2::before { content: ""; position: absolute; top: 0; right: 23px; width: 43px; height: 3px; background: var(--vgs-about-primary); border-radius: 0 0 8px 8px; } .vgs_container_093_about_point_1:hover, .vgs_container_096_about_point_2:hover { transform: translateY(-5px); border-color: rgba(28,89,54,.3); box-shadow: 0 15px 28px rgba(18,60,42,.075); } /* ====================================================== 13. FEATURE CARD HEADINGS ====================================================== */ .vgs_container_093_about_point_1_title, .vgs_container_096_about_point_2_title { width: 100%; margin-bottom: 7px !important; } .vgs_container_093_about_point_1_title .elementor-heading-title, .vgs_container_096_about_point_2_title .elementor-heading-title { color: var(--vgs-about-dark); font-family: "Noto Sans Hebrew", sans-serif; font-size: 19px; font-weight: 800; line-height: 1.45; } /* ====================================================== 14. FEATURE CARD DESCRIPTIONS ====================================================== */ .vgs_container_093_about_point_1_text p, .vgs_container_096_about_point_2_text p { margin: 0 !important; color: var(--vgs-about-muted); font-size: 13px; font-weight: 400; line-height: 1.75; } /* ====================================================== 15. CONTACT BUTTON WIDGET ====================================================== */ .vgs_container_099_about_botton { width: auto !important; align-self: flex-start !important; } /* ====================================================== 16. CONTACT BUTTON ====================================================== */ .vgs_container_099_about_botton .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 15px 29px !important; background: var(--vgs-about-primary) !important; border: 1px solid var(--vgs-about-primary); border-radius: 12px !important; color: #FFFFFF !important; font-family: "Noto Sans Hebrew", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.5; box-shadow: 0 9px 23px rgba(28,89,54,.15); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .vgs_container_099_about_botton .elementor-button:hover { background: var(--vgs-about-dark) !important; color: #FFFFFF !important; transform: translateY(-3px); box-shadow: 0 13px 28px rgba(18,60,42,.22); } .vgs_container_099_about_botton .elementor-button-text { color: inherit !important; } /* ====================================================== 17. TABLET ====================================================== */ @media (max-width: 1024px) { .vgs_section_101_about { padding: 85px 22px !important; } .vgs_container_100_about_inner { gap: 38px !important; } .vgs_container_087_about_visual { flex-basis: 46%; min-height: 455px; } .vgs_container_099_about_copy { flex-basis: 54%; } .vgs_container_099_about_title .elementor-heading-title { font-size: clamp(32px, 3.7vw, 43px); } .vgs_container_099_about_text p { font-size: 15px; line-height: 1.9; } .vgs_container_097_about_points { gap: 10px !important; } .vgs_container_093_about_point_1, .vgs_container_096_about_point_2 { min-height: 125px; padding: 18px !important; } .vgs_container_093_about_point_1_title .elementor-heading-title, .vgs_container_096_about_point_2_title .elementor-heading-title { font-size: 16px; } .vgs_container_086_about_visual_corner { left: -12px; bottom: 25px; min-width: 145px; min-height: 70px; padding: 16px 20px !important; } .vgs_container_086_about_visual_corner_text p { font-size: 19px; } } /* ====================================================== 18. MOBILE ====================================================== */ @media (max-width: 767px) { .vgs_section_101_about { padding: 70px 18px 75px !important; } .vgs_container_100_about_inner { flex-direction: column !important; align-items: stretch !important; gap: 45px !important; } /* Text first, photo second */ .vgs_container_099_about_copy { order: 1; flex: 0 0 auto; width: 100% !important; } .vgs_container_087_about_visual { order: 2; flex: 0 0 auto; width: 100% !important; min-height: 370px; border-radius: 22px; } .vgs_container_087_about_visual_img, .vgs_container_087_about_visual_img img, .vgs_container_087_about_visual::after { border-radius: 22px; } .vgs_container_087_about_visual::before { inset: 13px -9px -12px 15px; border-radius: 27px; } .vgs_container_099_about_smalltitle { margin-bottom: 16px !important; } .vgs_container_099_about_title { margin-bottom: 20px !important; } .vgs_container_099_about_title .elementor-heading-title { font-size: clamp(32px, 8vw, 42px); line-height: 1.28; letter-spacing: -.6px; } .vgs_container_099_about_text { margin-bottom: 25px !important; } .vgs_container_099_about_text p { font-size: 15px; line-height: 1.9; } .vgs_container_097_about_points { gap: 11px !important; margin-bottom: 27px !important; } .vgs_container_093_about_point_1, .vgs_container_096_about_point_2 { min-height: 115px; padding: 15px !important; border-radius: 12px; } .vgs_container_093_about_point_1_title .elementor-heading-title, .vgs_container_096_about_point_2_title .elementor-heading-title { font-size: 15px; } .vgs_container_093_about_point_1_text p, .vgs_container_096_about_point_2_text p { font-size: 12px; } .vgs_container_099_about_botton .elementor-button { min-height: 48px; padding: 12px 23px !important; font-size: 14px; } .vgs_container_086_about_visual_corner { left: 12px; bottom: 15px; min-width: 135px; min-height: 60px; padding: 13px 18px !important; border-radius: 12px; } .vgs_container_086_about_visual_corner_text p { font-size: 17px; } } /* ====================================================== 19. SMALL MOBILE ====================================================== */ @media (max-width: 380px) { .vgs_section_101_about { padding-left: 14px !important; padding-right: 14px !important; } .vgs_container_097_about_points { grid-template-columns: 1fr; } .vgs_container_093_about_point_1, .vgs_container_096_about_point_2 { min-height: 95px; padding: 17px !important; } .vgs_container_087_about_visual { min-height: 300px; } .vgs_container_099_about_title .elementor-heading-title { font-size: 30px; } } /* ====================================================== 20. ACCESSIBILITY ====================================================== */ .vgs_section_101_about a:focus-visible { outline: 2px solid var(--vgs-about-primary); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .vgs_section_101_about *, .vgs_section_101_about *::before, .vgs_section_101_about *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b2db65e *//* ====================================================== LIRAN - PRODUCT CATEGORIES VGS SECTION 083 Elementor Flex Containers | RTL Font: Noto Sans Hebrew ====================================================== */ /* ====================================================== 01. MAIN SECTION ====================================================== */ .vgs_section_083_products { --vgs-p-green: #1C5936; --vgs-p-dark: #123C2A; --vgs-p-text: #27362D; --vgs-p-muted: #6A746E; --vgs-p-soft: #EAF2E9; --vgs-p-border: #DAE3D9; --vgs-p-white: #FFFFFF; position: relative; isolation: isolate; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100%; padding: 105px 25px 115px !important; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; background: radial-gradient( ellipse at 100% 5%, rgba(112,158,109,.12), transparent 38% ), radial-gradient( ellipse at 0% 100%, rgba(28,89,54,.07), transparent 35% ), #F6F7F3; } /* Decorative circle */ .vgs_section_083_products::before { content: ""; position: absolute; z-index: -1; top: -240px; right: -230px; width: 570px; height: 570px; border: 1px solid rgba(28,89,54,.10); border-radius: 50%; box-shadow: 0 0 0 55px rgba(28,89,54,.018), 0 0 0 110px rgba(28,89,54,.012); pointer-events: none; } /* Small decorative dotted pattern */ .vgs_section_083_products::after { content: ""; position: absolute; z-index: -1; left: 3%; top: 95px; width: 155px; height: 155px; background-image: radial-gradient( rgba(28,89,54,.18) 1.4px, transparent 1.4px ); background-size: 16px 16px; opacity: .45; pointer-events: none; } /* ====================================================== 02. INTRO CONTAINER ====================================================== */ .vgs_container_081_products_intro { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-end !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 1320px !important; margin: 0 auto 42px !important; padding: 0 !important; gap: 45px; } /* ====================================================== 03. INTRO TEXT COLUMN ====================================================== */ .vgs_container_078_products_intro_text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 65%; min-width: 0; gap: 0 !important; text-align: right; } /* ====================================================== 04. SMALL EYEBROW TITLE ====================================================== */ .vgs_container_078_products_intro_text_toptext { display: inline-flex !important; width: auto !important; align-items: center; gap: 10px; margin-bottom: 18px !important; padding: 9px 16px; background: var(--vgs-p-soft); border: 1px solid rgba(28,89,54,.12); border-radius: 100px; } .vgs_container_078_products_intro_text_toptext::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #6FA36C; } .vgs_container_078_products_intro_text_toptext p { margin: 0 !important; color: var(--vgs-p-green); font-size: 14px; font-weight: 700; line-height: 1.5; } /* ====================================================== 05. INTRO MAIN HEADING ====================================================== */ .vgs_container_078_products_intro_text_title { width: 100%; margin-bottom: 17px !important; } .vgs_container_078_products_intro_text_title .elementor-heading-title { margin: 0; color: var(--vgs-p-dark); font-family: "Noto Sans Hebrew", sans-serif; font-size: clamp(34px, 3.3vw, 52px); font-weight: 800; line-height: 1.22; letter-spacing: -1px; } /* ====================================================== 06. INTRO DESCRIPTION ====================================================== */ .vgs_container_078_products_intro_text_text { width: 100%; } .vgs_container_078_products_intro_text_text p { margin: 0 !important; color: var(--vgs-p-muted); font-size: 17px; font-weight: 400; line-height: 1.85; } /* ====================================================== 07. INTRO ASIDE CARD ====================================================== */ .vgs_container_080_products_intro_aside { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 0 1 365px; min-width: 0; padding: 26px 29px !important; background: rgba(255,255,255,.85); border: 1px solid var(--vgs-p-border); border-right: 4px solid var(--vgs-p-green); border-radius: 15px; box-shadow: 0 10px 28px rgba(18,60,42,.035); } .vgs_container_080_products_intro_aside_text p { margin: 0 !important; color: var(--vgs-p-text); font-size: 15px; font-weight: 500; line-height: 1.9; } /* ====================================================== 08. PRODUCTS GRID ====================================================== */ .vgs_container_082_products_grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 26px !important; width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; align-items: stretch !important; } /* ====================================================== 09. ALL PRODUCT CARDS ====================================================== */ .vgs_section_083_products .vgs_container_082_products_grid > [class*="vgs_card_"] { position: relative; isolation: isolate; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 0; height: 100%; margin: 0 !important; padding: 0 !important; gap: 0 !important; background: var(--vgs-p-white); border: 1px solid #DFE8DE; border-radius: 22px; overflow: hidden; box-shadow: 0 6px 16px rgba(18,60,42,.035), 0 18px 42px rgba(18,60,42,.035); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .vgs_section_083_products .vgs_container_082_products_grid > [class*="vgs_card_"]:hover { transform: translateY(-9px); border-color: rgba(28,89,54,.28); box-shadow: 0 15px 35px rgba(18,60,42,.08), 0 30px 65px rgba(18,60,42,.065); } /* ====================================================== 10. IMAGE BOXES ====================================================== */ .vgs_section_083_products [class*="category_image_box_"] { position: relative; display: block !important; flex: 0 0 auto; width: 100% !important; height: 245px; min-height: 245px; padding: 0 !important; margin: 0 !important; overflow: hidden; background: radial-gradient( circle at 50% 35%, #FFFFFF 0%, #E9F0E6 100% ); } /* Decorative image corner */ .vgs_section_083_products [class*="category_image_box_"]::after { content: ""; position: absolute; right: -32px; bottom: -50px; width: 130px; height: 130px; border: 1px solid rgba(28,89,54,.13); border-radius: 50%; pointer-events: none; z-index: 1; } /* ====================================================== 11. IMAGE WIDGET ====================================================== */ .vgs_section_083_products .vgs_continer2_imag { display: block !important; width: 100% !important; height: 100% !important; } .vgs_section_083_products .vgs_continer2_imag .elementor-widget-container { width: 100%; height: 100%; overflow: hidden; } .vgs_section_083_products .vgs_continer2_imag img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; transition: transform .65s ease; } .vgs_section_083_products .vgs_container_082_products_grid > [class*="vgs_card_"]:hover .vgs_continer2_imag img { transform: scale(1.07); } /* ====================================================== 12. ALL CARD BODY CONTAINERS ====================================================== */ .vgs_section_083_products [class*="category_card_body_"]:not( [class*="category_card_body_number"] ):not( [class*="category_card_body_title"] ):not( [class*="category_card_body_text"] ):not( [class*="category_card_body_botton"] ) { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 auto; width: 100% !important; min-width: 0; gap: 0 !important; padding: 27px 27px 29px !important; text-align: right; } /* ====================================================== 13. CATEGORY NUMBER ====================================================== */ .vgs_section_083_products .vgs_container_033_category_card_body_number { width: auto !important; margin-bottom: 12px !important; } .vgs_section_083_products .vgs_container_033_category_card_body_number p { display: inline-flex; justify-content: center; align-items: center; min-width: 43px; height: 30px; margin: 0 !important; padding: 4px 11px; border-radius: 8px; background: var(--vgs-p-soft); color: var(--vgs-p-green); font-size: 12px; font-weight: 800; letter-spacing: 1px; line-height: 1; } /* ====================================================== 14. CATEGORY TITLE ====================================================== */ .vgs_section_083_products .vgs_container_033_category_card_body_title { width: 100%; margin-bottom: 9px !important; } .vgs_section_083_products .vgs_container_033_category_card_body_title .elementor-heading-title { margin: 0; color: var(--vgs-p-dark); font-family: "Noto Sans Hebrew", sans-serif; font-size: 22px; font-weight: 800; line-height: 1.45; transition: color .3s ease; } .vgs_section_083_products .vgs_container_082_products_grid > [class*="vgs_card_"]:hover .vgs_container_033_category_card_body_title .elementor-heading-title { color: var(--vgs-p-green); } /* ====================================================== 15. CATEGORY DESCRIPTION ====================================================== */ .vgs_section_083_products .vgs_container_033_category_card_body_text { width: 100%; margin-bottom: 23px !important; } .vgs_section_083_products .vgs_container_033_category_card_body_text p { margin: 0 !important; color: var(--vgs-p-muted); font-size: 14px; font-weight: 400; line-height: 1.8; } /* ====================================================== 16. PRODUCT CARD BUTTON WIDGET ====================================================== */ .vgs_section_083_products .vgs_container_033_category_card_body_botton { width: auto !important; margin-top: auto !important; } /* ====================================================== 17. PRODUCT CARD BUTTON ====================================================== */ .vgs_section_083_products .vgs_container_033_category_card_body_botton .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; padding: 11px 19px !important; border: 1px solid var(--vgs-p-border); border-radius: 10px !important; background: #F2F6F0 !important; color: var(--vgs-p-green) !important; font-family: "Noto Sans Hebrew", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } .vgs_section_083_products .vgs_container_033_category_card_body_botton .elementor-button:hover, .vgs_section_083_products .vgs_container_082_products_grid > [class*="vgs_card_"]:hover .vgs_container_033_category_card_body_botton .elementor-button { background: var(--vgs-p-green) !important; color: #FFFFFF !important; border-color: var(--vgs-p-green); box-shadow: 0 6px 15px rgba(28,89,54,.15); } .vgs_section_083_products .vgs_container_033_category_card_body_botton .elementor-button-text { color: inherit !important; } /* ====================================================== 18. INDIVIDUAL CARD SUPPORT Each card keeps its unique class. ====================================================== */ .vgs_card_034_category_card_1, .vgs_card_042_category_card_2, .vgs_card_050_category_card_3, .vgs_card_058_category_card_4, .vgs_card_066_category_card_5, .vgs_card_074_category_card_6 { --vgs-card-accent: #1C5936; } /* ====================================================== 19. TABLET ====================================================== */ @media (max-width: 1024px) { .vgs_section_083_products { padding: 80px 22px 90px !important; } .vgs_container_081_products_intro { gap: 25px; margin-bottom: 35px !important; } .vgs_container_078_products_intro_text_title .elementor-heading-title { font-size: 40px; } .vgs_container_080_products_intro_aside { flex-basis: 300px; padding: 20px !important; } .vgs_container_082_products_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important; } .vgs_section_083_products [class*="category_image_box_"] { height: 220px; min-height: 220px; } .vgs_section_083_products [class*="category_card_body_"]:not( [class*="category_card_body_number"] ):not( [class*="category_card_body_title"] ):not( [class*="category_card_body_text"] ):not( [class*="category_card_body_botton"] ) { padding: 23px !important; } } /* ====================================================== 20. MOBILE ====================================================== */ @media (max-width: 767px) { .vgs_section_083_products { padding: 65px 17px 75px !important; } .vgs_section_083_products::before { width: 350px; height: 350px; top: -190px; right: -190px; } .vgs_section_083_products::after { width: 100px; height: 100px; top: 25px; left: -15px; opacity: .2; } .vgs_container_081_products_intro { flex-direction: column !important; align-items: flex-start !important; gap: 22px; margin-bottom: 28px !important; } .vgs_container_078_products_intro_text { width: 100%; flex: 0 0 auto; } .vgs_container_078_products_intro_text_toptext { margin-bottom: 14px !important; } .vgs_container_078_products_intro_text_title .elementor-heading-title { font-size: clamp(32px, 8vw, 40px); line-height: 1.28; letter-spacing: -.6px; } .vgs_container_078_products_intro_text_text p { font-size: 15px; line-height: 1.8; } .vgs_container_080_products_intro_aside { flex: 0 0 auto; width: 100% !important; padding: 17px 20px !important; border-radius: 12px; } .vgs_container_080_products_intro_aside_text p { font-size: 13px; line-height: 1.85; } /* Two columns on mobile */ .vgs_container_082_products_grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; gap: 12px !important; } /* Cards */ .vgs_section_083_products .vgs_container_082_products_grid > [class*="vgs_card_"] { border-radius: 18px; } .vgs_section_083_products [class*="category_image_box_"] { height: 145px; min-height: 145px; } .vgs_section_083_products [class*="category_card_body_"]:not( [class*="category_card_body_number"] ):not( [class*="category_card_body_title"] ):not( [class*="category_card_body_text"] ):not( [class*="category_card_body_botton"] ) { padding: 14px !important; } .vgs_section_083_products .vgs_container_033_category_card_body_title .elementor-heading-title { font-size: 16px; } .vgs_section_083_products .vgs_container_033_category_card_body_text p { font-size: 12px; } .vgs_section_083_products .vgs_container_033_category_card_body_botton .elementor-button { min-height: 38px; padding: 8px 10px !important; font-size: 11px; } } /* ====================================================== 21. SMALL MOBILE ====================================================== */ @media (max-width: 380px) { .vgs_section_083_products { padding-left: 13px !important; padding-right: 13px !important; } .vgs_section_083_products [class*="category_image_box_"] { height: 120px; min-height: 120px; } .vgs_container_078_products_intro_text_title .elementor-heading-title { font-size: 30px; } } /* ====================================================== 22. ACCESSIBILITY ====================================================== */ .vgs_section_083_products a:focus-visible { outline: 2px solid var(--vgs-p-green); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .vgs_section_083_products *, .vgs_section_083_products *::before, .vgs_section_083_products *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a910272 *//* ===================================================== LIRAN - HAKOL LAGAN VGS CONTACT SECTION 129 LIGHT SAGE PREMIUM DESIGN Elementor Pro | RTL | Responsive Font: Noto Sans Hebrew ===================================================== */ /* ==================================== 01. MAIN SECTION ==================================== */ .vgs_section_129_contact { --vgs-contact-green: #1C5936; --vgs-contact-dark: #123C2A; --vgs-contact-text: #27362D; --vgs-contact-muted: #536759; --vgs-contact-light: #EAF2E9; --vgs-contact-border: #DAE3D9; position: relative; isolation: isolate; display: flex !important; flex-direction: column !important; align-items: center !important; width: 100%; overflow: hidden; margin: 0 !important; padding: 115px 25px 120px !important; direction: rtl; font-family: "Noto Sans Hebrew", sans-serif; background: radial-gradient( ellipse at 90% 10%, rgba(132,179,124,.22), transparent 48% ), radial-gradient( ellipse at 5% 90%, rgba(187,211,177,.26), transparent 45% ), linear-gradient( 135deg, #F6F9F3 0%, #EAF2E9 55%, #DFEBDA 100% ) !important; background-size: 100% 100% !important; background-position: center !important; animation: none !important; border: 0 !important; } /* ==================================== 02. BACKGROUND DECORATIONS ==================================== */ .vgs_section_129_contact::before { content: ""; display: block; position: absolute; z-index: -1; top: -340px; right: -170px; width: 570px; height: 570px; border: 1px solid rgba(28,89,54,.12); border-radius: 50%; box-shadow: 0 0 0 60px rgba(28,89,54,.025), 0 0 0 125px rgba(28,89,54,.015); pointer-events: none; } .vgs_section_129_contact::after { content: ""; display: block; position: absolute; z-index: -1; left: 4%; bottom: 45px; width: 165px; height: 165px; background-image: radial-gradient( rgba(28,89,54,.22) 1.3px, transparent 1.3px ); background-size: 17px 17px; opacity: .28; pointer-events: none; } /* ==================================== 03. INNER CONTAINER ==================================== */ .vgs_container_128_contact_inner { position: relative; z-index: 1; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center !important; gap: clamp(40px, 6vw, 100px) !important; width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; padding: 0 !important; } /* ==================================== 04. TEXT COLUMN ==================================== */ .vgs_container_123_contact_heading_col { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0; gap: 0 !important; text-align: right; } /* ==================================== 05. SMALL TITLE ==================================== */ .vgs_container_123_contact_heading_col_smalltitle { display: inline-flex !important; align-items: center; width: auto !important; padding: 9px 18px; margin-bottom: 25px !important; background: #FFFFFF !important; border: 1px solid var(--vgs-contact-border); border-radius: 100px; box-shadow: 0 5px 20px rgba(18,60,42,.045); } .vgs_container_123_contact_heading_col_smalltitle::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-left: 10px; background: #79A975; border-radius: 50%; } .vgs_container_123_contact_heading_col_smalltitle p { margin: 0 !important; color: var(--vgs-contact-green) !important; font-size: 14px; font-weight: 700; line-height: 1.6; } /* ==================================== 06. MAIN HEADING ==================================== */ .vgs_container_123_contact_heading_col_title { width: 100% !important; margin-bottom: 25px !important; } .vgs_container_123_contact_heading_col_title .elementor-heading-title { margin: 0; color: var(--vgs-contact-dark) !important; font-family: "Noto Sans Hebrew", sans-serif; font-size: clamp(36px, 3.6vw, 57px); font-weight: 800; line-height: 1.28; letter-spacing: -1px; } /* ==================================== 07. DESCRIPTION ==================================== */ .vgs_container_123_contact_heading_col_text { width: 100%; max-width: 510px; } .vgs_container_123_contact_heading_col_text p { margin: 0 !important; color: var(--vgs-contact-muted) !important; font-size: 18px; font-weight: 400; line-height: 2; } /* ==================================== 08. WHITE FORM CARD ==================================== */ .vgs_container_127_contact_form_col { position: relative; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 0; padding: 45px 43px !important; gap: 0 !important; background: #FFFFFF !important; border: 1px solid var(--vgs-contact-border); border-radius: 25px; box-shadow: 0 15px 40px rgba(18,60,42,.06), 0 30px 70px rgba(18,60,42,.06); } /* ==================================== 09. FORM CARD TOP ACCENT ==================================== */ .vgs_container_127_contact_form_col::before { content: ""; position: absolute; top: 0; right: 43px; width: 85px; height: 4px; background: var(--vgs-contact-green); border-radius: 0 0 9px 9px; } /* ==================================== 10. FORM TITLE ==================================== */ .vgs_container_127_contact_form_col_title { width: 100% !important; margin-bottom: 27px !important; } .vgs_container_127_contact_form_col_title .elementor-heading-title { margin: 0; color: var(--vgs-contact-dark) !important; font-family: "Noto Sans Hebrew", sans-serif; font-size: 27px; font-weight: 800; line-height: 1.4; text-align: right; } /* ==================================== 11. ELEMENTOR FORM WIDGET ==================================== */ .vgs_container_127_contact_form_col_form { width: 100% !important; margin: 0 !important; } .vgs_container_127_contact_form_col_form .elementor-form { width: 100%; } .vgs_container_127_contact_form_col_form .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; row-gap: 15px; } /* ==================================== 12. FORM FIELD GROUPS ==================================== */ .vgs_container_127_contact_form_col_form .elementor-field-group { margin: 0 !important; padding: 0 !important; min-width: 0; } /* ==================================== 13. INPUT FIELDS ==================================== */ .vgs_container_127_contact_form_col_form .elementor-field-textual { width: 100%; min-height: 56px; padding: 15px 19px !important; background: #F6F8F4 !important; color: #27362D !important; border: 1px solid #DEE7DD !important; border-radius: 11px !important; font-family: "Noto Sans Hebrew", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; text-align: right; direction: rtl; box-shadow: none !important; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } /* ==================================== 14. PLACEHOLDERS ==================================== */ .vgs_container_127_contact_form_col_form .elementor-field-textual::placeholder { color: #829087; opacity: 1; } /* ==================================== 15. INPUT FOCUS ==================================== */ .vgs_container_127_contact_form_col_form .elementor-field-textual:focus { outline: none !important; background: #FFFFFF !important; border-color: var(--vgs-contact-green) !important; box-shadow: 0 0 0 4px rgba(28,89,54,.09) !important; } /* ==================================== 16. EMAIL / PHONE INPUTS ==================================== */ .vgs_container_127_contact_form_col_form input[type="email"], .vgs_container_127_contact_form_col_form input[type="tel"] { direction: ltr; text-align: right; } /* ==================================== 17. SUBMIT GROUP ==================================== */ .vgs_container_127_contact_form_col_form .e-form__buttons { width: 100% !important; margin-top: 8px !important; } /* ==================================== 18. SUBMIT BUTTON ==================================== */ .vgs_container_127_contact_form_col_form .e-form__buttons .elementor-button { display: flex; align-items: center; justify-content: center; width: 100% !important; min-height: 56px; padding: 15px 28px !important; background: var(--vgs-contact-green) !important; color: #FFFFFF !important; border: 1px solid var(--vgs-contact-green); border-radius: 11px !important; font-family: "Noto Sans Hebrew", sans-serif; font-size: 16px; font-weight: 800; line-height: 1.5; cursor: pointer; box-shadow: 0 10px 22px rgba(28,89,54,.14); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .vgs_container_127_contact_form_col_form .e-form__buttons .elementor-button:hover { background: var(--vgs-contact-dark) !important; border-color: var(--vgs-contact-dark); color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(18,60,42,.20); } .vgs_container_127_contact_form_col_form .elementor-button-text { color: inherit !important; } /* ==================================== 19. FORM MESSAGES ==================================== */ .vgs_container_127_contact_form_col_form .elementor-message { margin-top: 15px; padding: 12px 15px; border-radius: 9px; font-size: 14px; line-height: 1.7; } .vgs_container_127_contact_form_col_form .elementor-message-success { background: #EAF6EA; color: #1C5936; } .vgs_container_127_contact_form_col_form .elementor-message-danger { background: #FFF0F0; color: #A12B2B; } /* ==================================== 20. TABLET ==================================== */ @media (max-width: 1024px) { .vgs_section_129_contact { padding: 90px 22px 95px !important; } .vgs_container_128_contact_inner { gap: 35px !important; } .vgs_container_123_contact_heading_col_title .elementor-heading-title { font-size: clamp(33px, 3.7vw, 44px); } .vgs_container_123_contact_heading_col_text p { font-size: 16px; line-height: 1.9; } .vgs_container_127_contact_form_col { padding: 34px 30px !important; border-radius: 20px; } .vgs_container_127_contact_form_col_title .elementor-heading-title { font-size: 24px; } .vgs_container_127_contact_form_col_form .elementor-field-textual { min-height: 52px; } } /* ==================================== 21. MOBILE ==================================== */ @media (max-width: 767px) { .vgs_section_129_contact { padding: 70px 18px 75px !important; } .vgs_section_129_contact::before { width: 350px; height: 350px; top: -210px; right: -190px; } .vgs_section_129_contact::after { width: 100px; height: 100px; opacity: .18; } .vgs_container_128_contact_inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 35px !important; } .vgs_container_123_contact_heading_col { width: 100% !important; } .vgs_container_123_contact_heading_col_smalltitle { margin-bottom: 19px !important; padding: 8px 15px; } .vgs_container_123_contact_heading_col_smalltitle p { font-size: 12px; } .vgs_container_123_contact_heading_col_title { margin-bottom: 18px !important; } .vgs_container_123_contact_heading_col_title .elementor-heading-title { font-size: clamp(32px, 8vw, 42px); line-height: 1.3; letter-spacing: -.5px; } .vgs_container_123_contact_heading_col_text p { font-size: 15px; line-height: 1.9; } /* Form card */ .vgs_container_127_contact_form_col { padding: 28px 22px !important; border-radius: 17px; } .vgs_container_127_contact_form_col::before { right: 22px; width: 65px; } .vgs_container_127_contact_form_col_title { margin-bottom: 21px !important; } .vgs_container_127_contact_form_col_title .elementor-heading-title { font-size: 23px; } .vgs_container_127_contact_form_col_form .elementor-form-fields-wrapper { row-gap: 12px; } .vgs_container_127_contact_form_col_form .elementor-field-textual { min-height: 50px; padding: 13px 15px !important; font-size: 15px; border-radius: 9px !important; } .vgs_container_127_contact_form_col_form .e-form__buttons .elementor-button { min-height: 51px; font-size: 15px; border-radius: 9px !important; } } /* ==================================== 22. SMALL MOBILE ==================================== */ @media (max-width: 380px) { .vgs_section_129_contact { padding-left: 14px !important; padding-right: 14px !important; } .vgs_container_127_contact_form_col { padding: 23px 17px !important; } .vgs_container_123_contact_heading_col_title .elementor-heading-title { font-size: 30px; } } /* ==================================== 23. ACCESSIBILITY ==================================== */ .vgs_section_129_contact a:focus-visible, .vgs_section_129_contact button:focus-visible { outline: 2px solid var(--vgs-contact-green); outline-offset: 4px; } /* ==================================== 24. REDUCED MOTION ==================================== */ @media (prefers-reduced-motion: reduce) { .vgs_section_129_contact *, .vgs_section_129_contact *::before, .vgs_section_129_contact *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }/* End custom CSS */