@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@100..900&display=swap'); /* several sections use desktop-only fixed pixel widths (e.g. 1460px) with no mobile override, which pushes the whole page wider than the phone's viewport and clips content at the right edge instead of just that one element. Clip at the true viewport edge instead of letting it scroll. */ html, body{max-width:100vw; overflow-x:hidden;} /* third-party accessibility widget's trigger (.edit_icon) sits at a literal top:0;right:0 (its own accessibility-extra.css, loaded after this file - needs !important to win). On desktop that's empty space past the header icons, but on mobile the header's own icon row (.top_icon) shrinks and shifts toward that same corner, so the two visually collide/overlap. Push the trigger below the mobile header instead of touching the third-party file itself. */ @media only screen and (max-width:900px){ .edit_icon{top:64px !important; right:6px !important;} } /* ===== RTL ===== direction:rtl (not just text-align) on all real content, so Hebrew text with trailing punctuation/numbers gets correct bidi ordering everywhere (text-align alone doesn't fix that - e.g. a sentence-ending period rendering at the start of the line). Scoped to #main_cotainer rather than / so it doesn't touch the accessibility-widget markup that lives outside it. header keeps its own original left-to-right visual arrangement (icons/nav/logo, matching the delivered design) via an explicit opt-out, with the nav menu itself set back to rtl so it still reads right-to-left. */ #main_cotainer{direction:rtl;} header{direction:ltr;} .navbar ul{direction:rtl;} /* .slider_two and .testimonials_slider lay their slide content out with nested flex rows that Owl Carousel's own position math doesn't handle under direction:rtl (slides end up transformed off-screen - confirmed by comparing against the designer's own unmodified mockup, where these same carousels render fine). Opt them back out, and reassert rtl on the actual text inside so wording/punctuation still reads correctly. */ .slider_two, .testimonials_slider, .main_slider .owl-carousel{direction:ltr;} .slider_two .text_holder, .testimonials_slider .text_holder{direction:rtl;} /* .home-one (hero slider wrapper) is set direction:ltr by the designer's own style.css - needed to keep the slider-one carousel working, but it also meant the hero heading/paragraph had the same bidi punctuation bug as everywhere else did before #main_cotainer got direction:rtl. */ .slider-one .banner-text{direction:rtl;} /* translucent white "card" behind the hero heading/paragraph/buttons so the text stays clearly readable regardless of what's happening in the photo behind it, instead of relying only on the full-image dark overlay above. shrink-to-fit width (left:50%+translateX, no explicit width) so the card hugs the text instead of stretching a white bar across the whole image. */ .slider-one .item .banner-text{width:auto; max-width:90%; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.3); padding:30px 45px; border-radius:10px; color:#fff;} .slider-one .item .banner-text h1{color:#fff;} .slider-one .item .banner-text p{color:#fff;} .slider-one .item .banner-text a.button1{color:#fff; border-color:#fff;} @media only screen and (max-width:900px){ /* the slide's own height used to just be whatever the image's natural aspect ratio produced at the device width - fine for the plain overlay text before, but far too short to fit the white card (heading + paragraph + 2 buttons + padding) without it spilling past the slide and getting covered by the next section. Give the slide a floor height and make the photo cover it, independent of its native ratio. */ .slider-one .item .banner-img{height:460px;} .slider-one .item .banner-img img{width:100%; height:100%; object-fit:cover; display:block;} .slider-one .item .banner-text{padding:22px 26px; max-width:92%;} .slider-one .item .banner-text h1{font-size:22px !important;} } @media only screen and (max-width:500px){ .slider-one .item .banner-img{height:500px;} .slider-one .item .banner-text{padding:18px 20px;} } /* "why choose us" banner: text block must stay on the LEFT (that's where the background photo leaves room for it - the family photo occupies the right side), independent of the rtl cascade repositioning it. */ .home-content-four .main-content{direction:ltr;} .home-content-four .text_holder{direction:rtl;} /* on mobile the designer's own responsive.css switches .main-content from position:absolute to position:relative so the checklist sits below the photo instead of overlaid on it - but .home-content-four itself never gets a matching containment fix, so it doesn't expand for that content and the next section (home-content-five) renders overlapping it. */ @media only screen and (max-width:900px){ .home-content-four{overflow:hidden;} .home-content-four .main-content{position:relative !important; top:auto !important; bottom:auto !important; left:auto !important; padding:25px 0 !important; background:#c3afa3;} .home-content-four .main-content .wrapper{width:100% !important;} .home-content-four .main-content .text_holder{width:100% !important;} } header .logo{margin-right:50px; margin-left:45px;} header .navbar{justify-content:center;} .navbar ul li a, .navbar ul li span{white-space:nowrap;} .navbar ul li .sub-menu{width:max-content; min-width:200px; left:auto; right:0;} .navbar ul li .sub-menu li a{white-space:nowrap;} /* parent categories (e.g. "פרקטים", "פרויקטים") are now real links to their own page instead of a non-clickable label, so the dropdown still needs a separate tap target on mobile (where hover doesn't exist) to expand/collapse the submenu without navigating away. Desktop keeps using :hover on the

as before, so the arrow is mobile-only. */ .navbar ul li .menu-arrow{display:none;} @media only screen and (max-width:999px){ .navbar ul li .menu-arrow{display:block; position:absolute; top:0; right:0; width:50px; height:45px; cursor:pointer; z-index:2;} .navbar ul li .menu-arrow::after{content:""; position:absolute; top:16px; right:20px; width:10px; height:10px; border-bottom:3px solid #333; border-right:3px solid #333; transform:rotate(45deg); transition:0.3s;} .navbar ul li.active .menu-arrow::after{transform:rotate(225deg); top:20px;} } /* the designer's own breakpoints gave .navbar a fixed, narrow width (51% at the base, only widening below 1299px) - with nowrap forcing every category to its full width, ~12 real categories don't fit in that and overflow/collide with the logo on very common laptop widths (1366-1440px in particular, before the next breakpoint kicks in). Let the nav flex to fill whatever space is actually left over instead of a fixed percentage. */ @media only screen and (min-width:901px){ .navbar{width:auto; flex:1 1 auto; min-width:0;} .top_icon{flex:0 0 auto;} .logo{flex:0 0 auto;} } @media only screen and (min-width:901px) and (max-width:1650px){ .navbar ul li a, .navbar ul li span{padding:0 6px; font-size:14px;} } @media only screen and (min-width:901px) and (max-width:1400px){ .navbar ul li a, .navbar ul li span{padding:0 4px; font-size:13px;} header .logo{margin-right:20px;} .logo{width:120px;} } /* ===== generic reusable button ===== */ .btn-gold, a.btn-gold{display:inline-block; padding:0 28px; height:44px; line-height:44px; background:#B2934E; color:#fff; text-align:center; border:1px solid #B2934E; font-weight:500; font-size:15px; cursor:pointer;} .btn-gold:hover{background:#96773a; border-color:#96773a;} /* ===== mobile utility bar (phone / whatsapp / waze) ===== */ .mobile_footer{display:none;} @media only screen and (max-width:999px){ .mobile_footer{display:block; float:left; width:100%; color:#fff; font-size:15px; text-align:center; bottom:0; left:0; position:fixed; z-index:150;} .mobile_footer ul{display:flex;} .mobile_footer ul li{width:33.33%; list-style:none;} .mobile_footer a{display:block; width:100%; padding:12px 0; color:#fff; background:#1a1a1a;} .mobile_footer ul li:not(:last-child) a{border-left:1px solid rgba(255,255,255,.25);} .mobile_footer a:hover{background:#B2934E;} body{padding-bottom:44px;} } /* ===== newsletter form (footer) ===== */ .footer_newsletter{width:100%; text-align:right;} .footer_newsletter .textbox{display:inline-block; width:100%; max-width:230px; border:1px solid #c1c1c1; background:#fff;} .footer_newsletter .textbox input{height:42px; font-size:14px;} .footer_newsletter .btn_holder{display:inline-block; margin-top:10px;} .footer_newsletter .form_message{width:100%; font-size:13px; color:#B2934E; margin-top:8px;} /* ===== brand / client logos carousel (homepage + category pages) ===== */ .main_slider{padding:80px 0; background:#F5F5F5; text-align:center;} .main_slider .title_text{text-align:center; font-size:28px; font-weight:600; padding:0 0 40px 0;} .main_slider .owl-carousel{padding:0 35px;} .main_slider .owl-carousel .item{padding:0 15px; display:flex; align-items:center; justify-content:center; height:80px;} .main_slider .owl-carousel .item img{width:auto; max-width:100%; max-height:80px; margin:0 auto; filter:grayscale(100%); opacity:.7; transition:.3s ease;} .main_slider .owl-carousel .item img:hover{filter:grayscale(0%); opacity:1;} /* ===== inner pages (content-design.asp) ===== */ .innerpage-title{background:#F5F5F5; padding:45px 0; text-align:center;} .innerpage-title .breadcrumb{font-size:14px; color:#777; padding-bottom:10px;} .innerpage-title .breadcrumb a{color:#777;} .innerpage-title h1{font-size:32px; font-weight:600; color:#000;} .innerpage-content{padding:70px 0;} .innerpage-flex{align-items:flex-start; justify-content:space-between; gap:50px;} .innerpage-main{width:100%; max-width:calc(100% - 320px);} .full_text{font-size:16px; line-height:30px; color:#333;} .full_text h2{font-size:24px; font-weight:600; padding:25px 0 15px 0; color:#000;} .full_text img{border-radius:4px;} /* contact page (צור קשר) - structured info rows + responsive map, instead of a plain label
value
text wall with a fixed-600px iframe. */ .contact-info{padding:20px 0 10px; display:flex; flex-direction:column; gap:14px;} .contact-info-row{display:flex; gap:8px; flex-wrap:wrap;} .contact-info-row strong{color:#000; white-space:nowrap;} .contact-info-row a{color:#B2934E;} .contact-info-row a:hover{text-decoration:underline;} .contact-map{margin-top:15px; border-radius:8px; overflow:hidden; box-shadow:0px 3px 15px #00000019;} .contact-map iframe{width:100%; height:450px; display:block; border:0;} /* offers page (מבצעים) - a card grid instead of inline text+image+
run-on flow. */ .offers-grid{display:flex; flex-wrap:wrap; gap:20px; padding-top:15px;} .offer-card{width:calc((100% - 40px) / 3); background:#F5F5F5; border-radius:8px; overflow:hidden; box-shadow:0px 3px 15px #00000019;} .offer-card-img{aspect-ratio:4/3; overflow:hidden;} .offer-card-img img{width:100%; height:100%; object-fit:cover; display:block; margin:0 !important;} .offer-card-text{padding:18px;} .offer-card-text p{margin:0 0 6px 0; font-size:15px; line-height:24px;} .offer-card-text p:last-child{margin-bottom:0; font-weight:600; color:#B2934E;} .offers-disclaimer{padding-top:15px; font-size:13px; color:#999;} @media only screen and (max-width:900px){ .offer-card{width:calc((100% - 20px) / 2);} } @media only screen and (max-width:600px){ .offer-card{width:100%;} } .gallery ul{display:flex; flex-wrap:wrap; gap:15px; padding-top:25px;} .gallery ul li{list-style:none; width:calc((100% - 45px) / 4); box-shadow:0px 3px 15px #00000019;} .gallery ul li .img_holder{aspect-ratio:1/1; overflow:hidden;} .gallery ul li .img_holder img{width:100%; height:100%; object-fit:cover; display:block;} .gallery ul li .text_holder{padding:10px; font-size:14px; text-align:center;} .gallery ul li .text_holder a{color:#333;} .sidebar_form{width:270px; background:#F5F5F5; padding:30px 25px; border-top:3px solid #B2934E; box-shadow:0px 3px 15px #00000019;} .sidebar_form h3{font-weight:400; padding-bottom:20px; line-height:normal;} .sidebar_form h3 .l1{display:block; font-size:21px; font-weight:700; margin-bottom:8px;} .sidebar_form h3 .l2{display:block; font-size:17px; font-weight:600; margin-bottom:6px;} .sidebar_form h3 .l3{display:block; font-size:15px; font-weight:400; margin-bottom:4px; color:#444;} .sidebar_form .textbox{margin-bottom:5px;} .sidebar_form .textbox li{list-style:none; margin-bottom:10px;} .sidebar_form .textbox input, .sidebar_form .textbox select{height:44px; border:1px solid #c1c1c1; background:#fff; font-size:14px;} .sidebar_form .textbox select{width:100%; text-align:right; direction:rtl; padding:0 12px;} .sidebar_form .btn_holder{padding-top:10px;} .sidebar_form .btn_holder .btn-gold{width:100%;} .flooring-banner-row{display:flex; align-items:stretch; gap:20px; margin-bottom:25px;} .flooring-banner-row .flooring-banner{flex:1 1 auto; min-width:0; margin-bottom:0;} .flooring-banner-row .quick-contact{flex:0 0 auto; margin-top:0; display:flex; flex-direction:column; justify-content:center;} .flooring-banner{margin-bottom:25px; box-shadow:0px 3px 15px #00000019;} .flooring-banner img{width:100%; height:100%; display:block; border-radius:4px; object-fit:cover;} /* subcategory tiles (parent category pages, e.g. "פרקטים") - a photo (the subcategory's own first product image, from getchildtiles()) with a short label strip attached directly beneath it. child-tile-noimg is the fallback for a subcategory with no product image yet - keeps the old plain dark-box look. */ .child-tiles{display:flex; flex-wrap:wrap; gap:15px; margin-bottom:35px;} .child-tiles .child-tile{width:calc((100% - 30px) / 3); background:#333; box-shadow:0px 3px 15px #00000019; overflow:hidden;} .child-tiles .child-tile a{display:block; color:#fff; text-decoration:none;} .child-tiles .child-tile-img{aspect-ratio:4/3; overflow:hidden;} .child-tiles .child-tile-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;} .child-tiles .child-tile:hover .child-tile-img img{transform:scale(1.08);} .child-tiles .child-tile span{display:flex; align-items:center; justify-content:center; height:38px; font-size:13px; font-weight:600; text-align:center; padding:0 6px;} .child-tiles .child-tile:hover span{background:#B2934E;} .child-tiles .child-tile.child-tile-noimg a{display:flex; align-items:center; justify-content:center; height:100px; font-size:15px; padding:10px;} .child-tiles .child-tile.child-tile-noimg span{height:auto; padding:0;} .child-tiles .child-tile.child-tile-noimg:hover a{background:#B2934E;} /* quick contact box (product pages) */ .quick-contact{width:270px; text-align:center; margin-top:20px;} .quick-contact span{display:block; font-weight:600; padding-bottom:12px;} .quick-contact .btn-gold{width:100%; margin-bottom:10px; background:#25d366; border-color:#25d366;} .quick-contact .btn-gold:hover{background:#1ebe5a; border-color:#1ebe5a;} .quick-contact a:not(.btn-gold){font-size:14px; color:#777; text-decoration:underline;} @media only screen and (max-width:900px){ .innerpage-flex{flex-direction:column;} .innerpage-main{max-width:100%;} .sidebar_form{width:100%;} .gallery ul li{width:calc((100% - 15px) / 2);} .child-tiles .child-tile{width:calc((100% - 15px) / 2);} .quick-contact{width:100%;} .flooring-banner-row{flex-direction:column;} .flooring-banner-row .quick-contact{width:100%;} } /* ===== "כל פתרונות עיצוב הבית" category tiles ===== the tile's height was just whatever the image's own natural aspect ratio produced - fine as long as every source photo happened to share the same ratio, but broke (tile looked "too small") the moment one photo (e.g. a wider room shot) didn't match the others. Force a consistent tile shape with object-fit:cover regardless of the source image's own proportions, plus a smooth hover zoom. */ .home-content-three .box-content{aspect-ratio:4/3; overflow:hidden;} .home-content-three .box-content img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;} .home-content-three .box-content:hover img{transform:scale(1.12);} /* the shared box-content::before gradient (style.css) darkens almost the whole tile so the centered white label stays legible - too heavy for these photo tiles. Lighten it, and brighten further on hover (on top of the zoom above) so more of the actual photo shows through. */ .home-content-three .box-content::before{height:55%; background:transparent linear-gradient(180deg, #00000000 0%, rgba(0,0,0,.55) 100%) 0% 0% no-repeat; transition:opacity .4s ease;} .home-content-three .box-content:hover::before{opacity:.5;} /* hero slider: lighten the dark overlay over the banner images (style.css used a flatter, darker one) while keeping the white heading/buttons readable. */ .slider-one .item .banner-img::before{background:#00000045;} /* ===== "פרויקטים שעיצבנו" ===== was a 2-slide carousel of a single duplicated caption - not a real slideshow, so per the user it's now one static, properly designed showcase card instead: photo + copy + CTA, sitting on a tinted section background (matching the rest of the site's alternating sections) instead of a bare white gap. */ .home-content-six{background:#F5F5F5; padding:90px 0;} .project-showcase{display:flex; align-items:center; gap:60px; max-width:1300px; margin:0 auto; padding:0 35px;} .project-showcase .img_holder{width:52%; aspect-ratio:4/3; overflow:hidden; border-radius:6px; box-shadow:0px 8px 25px #00000026;} .project-showcase .img_holder img{width:100%; height:100%; object-fit:cover;} .project-showcase .text_holder{width:48%; text-align:right;} .project-showcase .tag{display:inline-block; color:#B2934E; font-weight:600; font-size:14px; letter-spacing:.5px; padding-bottom:12px;} .project-showcase .title_text{text-align:right; padding-bottom:25px;} .project-showcase .title_text span{font-size:32px; font-weight:600; padding-bottom:12px;} .project-showcase .title_text p{font-size:16px; line-height:26px; color:#555;} .project-showcase .btn-gold{display:inline-block;} @media only screen and (max-width:900px){ .home-content-six{padding:50px 0;} .project-showcase{flex-direction:column; gap:25px; padding:0 20px;} .project-showcase .img_holder, .project-showcase .text_holder{width:100%;} .project-showcase .title_text, .project-showcase .tag{text-align:center;} .project-showcase .text_holder{text-align:center;} } /* ===== homepage slogan + tiktok ===== */ .home-slogan{padding:50px 0; text-align:center; background:#1a1a1a;} .home-slogan span{font-size:32px; font-weight:600; color:#fff;} .home-tiktok{padding:70px 35px; text-align:center;} .home-tiktok p{padding:10px 0 25px 0; color:#555;} /* illustrative video-style cards - placeholders until real TikTok clips are swapped in; reuses existing on-brand interior photos rather than stock/fabricated TikTok branding. */ .home-tiktok .tiktok-grid{display:flex; justify-content:center; align-items:flex-start; gap:18px; flex-wrap:wrap; max-width:1000px; margin:0 auto 35px;} .home-tiktok .tiktok-card{position:relative; width:180px; aspect-ratio:1/1; border-radius:14px; overflow:hidden; box-shadow:0 6px 20px #00000026;} .home-tiktok .tiktok-card img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;} .home-tiktok .tiktok-card:hover img{transform:scale(1.08);} .home-tiktok .tiktok-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);} .home-tiktok .tiktok-card .play-ico{position:absolute; z-index:2; bottom:14px; left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;} .home-tiktok .tiktok-card .play-ico svg{width:13px; height:13px; fill:#1a1a1a; margin-right:-2px;} @media only screen and (max-width:700px){ .home-tiktok .tiktok-card{width:130px;} } @media only screen and (max-width:420px){ .home-tiktok .tiktok-card{width:100px;} .home-tiktok .tiktok-grid{gap:10px;} } @media only screen and (max-width:600px){ .home-slogan span{font-size:24px;} } /* ===== footer copyright line ===== */ .copyright a{text-decoration:underline; text-decoration-color:#000;} @media only screen and (max-width:420px){ .copyright{padding-left:80px; padding-right:15px; line-height:22px;} } /* ===== floating WhatsApp button ===== */ .whatsapp_link{width:70px; height:70px; float:left; background:#25d366; color:#fff; position:fixed; bottom:20px; left:20px; border-radius:50%; animation-name:pulse; animation-duration:1.5s; animation-timing-function:ease-out; animation-iteration-count:infinite; z-index:10000; display:flex; align-items:center; justify-content:center;} .whatsapp_link a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;} .whatsapp_link svg{width:38px; height:38px;} @keyframes pulse { 0% {box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);} 80% {box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);} } @media only screen and (max-width:999px){ .whatsapp_link{bottom:64px; width:56px; height:56px;} .whatsapp_link svg{width:30px; height:30px;} } /* ===== image lightbox (click a gallery image to enlarge + browse) ===== */ .site-lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:99999; display:none; align-items:center; justify-content:center;} .site-lightbox.open{display:flex;} .site-lightbox .lb-imgwrap{max-width:90vw; max-height:85vh; text-align:center;} .site-lightbox .lb-imgwrap img{max-width:90vw; max-height:85vh; width:auto; height:auto; display:inline-block; box-shadow:0 0 40px rgba(0,0,0,.5);} .site-lightbox .lb-close{position:absolute; top:15px; right:25px; font-size:38px; color:#fff; cursor:pointer; line-height:1; width:auto;} .site-lightbox .lb-prev, .site-lightbox .lb-next{position:absolute; top:50%; transform:translateY(-50%); font-size:32px; color:#fff; cursor:pointer; padding:14px 18px; user-select:none; background:rgba(255,255,255,.15); border-radius:50%; width:auto; line-height:1;} .site-lightbox .lb-prev:hover, .site-lightbox .lb-next:hover, .site-lightbox .lb-close:hover{background:rgba(255,255,255,.3);} .site-lightbox .lb-prev{left:20px;} .site-lightbox .lb-next{right:20px;} .site-lightbox .lb-counter{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; font-size:14px;} .site-lightbox .lb-contact{position:absolute; bottom:50px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.95); padding:10px 20px; border-radius:30px; box-shadow:0 4px 20px rgba(0,0,0,.3); direction:rtl;} .site-lightbox .lb-contact span{font-size:13px; font-weight:600; color:#1a1a1a; white-space:nowrap;} .site-lightbox .lb-contact .btn-gold{background:#25d366; border-color:#25d366; height:34px; line-height:34px; padding:0 18px; font-size:13px; white-space:nowrap;} .site-lightbox .lb-contact .btn-gold:hover{background:#1ebe5a; border-color:#1ebe5a;} .site-lightbox .lb-contact a:not(.btn-gold){font-size:13px; color:#555; text-decoration:underline; white-space:nowrap;} @media only screen and (max-width:600px){ .site-lightbox .lb-contact{flex-wrap:wrap; justify-content:center; bottom:70px; padding:10px 16px; max-width:90vw;} } @media only screen and (max-width:600px){ .site-lightbox .lb-prev, .site-lightbox .lb-next{font-size:24px; padding:10px 14px;} } /* ===== WhatsApp lead-capture modal ===== */ .wa-lead-modal{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:99999; display:none; align-items:center; justify-content:center; padding:15px;} .wa-lead-modal.open{display:flex;} .wa-lead-box{position:relative; background:#fff; width:100%; max-width:380px; border-radius:8px; padding:35px 30px 30px; text-align:center; direction:rtl; box-shadow:0 10px 40px rgba(0,0,0,.3);} .wa-lead-box h3{font-size:22px; font-weight:600; margin:0 0 10px; color:#1a1a1a;} .wa-lead-box p{font-size:14px; color:#666; margin:0 0 20px;} .wa-lead-box input{width:100%; box-sizing:border-box; padding:12px 14px; margin-bottom:12px; border:1px solid #ddd; border-radius:5px; font-size:15px; text-align:right; direction:rtl;} .wa-lead-box input:focus{outline:none; border-color:#25d366;} .wa-lead-error{color:#c0392b; font-size:13px; min-height:18px; margin-bottom:8px;} .wa-lead-submit{display:block; width:100%; box-sizing:border-box; background:#25d366; color:#fff; border:none; border-radius:5px; padding:13px; font-size:16px; font-weight:600; cursor:pointer; text-decoration:none;} .wa-lead-submit:hover{background:#1ebe5a; color:#fff;} .wa-lead-close{position:absolute; top:10px; left:15px; font-size:26px; color:#999; cursor:pointer; line-height:1;} .wa-lead-close:hover{color:#333;}