.elementor-11 .elementor-element.elementor-element-68ab2a4{--display:flex;--min-height:0px;--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.4;}.elementor-11 .elementor-element.elementor-element-68ab2a4:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-68ab2a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}.elementor-11 .elementor-element.elementor-element-68ab2a4::before, .elementor-11 .elementor-element.elementor-element-68ab2a4 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-68ab2a4 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-68ab2a4 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-68ab2a4 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-68ab2a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://mdroofing.lk/wp-content/uploads/2026/03/Trowel-Features-to-Consider-When-Buying-a-Trowel-Sky-Roofing-Construction-Remodeling.jpg");--background-overlay:'';background-repeat:no-repeat;background-size:cover;}.elementor-11 .elementor-element.elementor-element-42e2058c{--spacer-size:20px;}.elementor-11 .elementor-element.elementor-element-2e94a63a{--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;}.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-11 .elementor-element.elementor-element-436475ef{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-11 .elementor-element.elementor-element-436475ef .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:90px;font-weight:700;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-45efa99{margin:-45px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 10px;text-align:center;}.elementor-11 .elementor-element.elementor-element-45efa99 .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-weight:400;line-height:21px;letter-spacing:1.1px;color:#FFFFFF;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-11 .elementor-element.elementor-element-5602033{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:1px;width:var( --container-widget-width, 56.83% );max-width:56.83%;margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 05px;--container-widget-width:56.83%;--container-widget-flex-grow:0;}.elementor-11 .elementor-element.elementor-element-5602033.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-11 .elementor-element.elementor-element-5602033 .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-11 .elementor-element.elementor-element-5602033 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-11 .elementor-element.elementor-element-a2957ec{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 10px;text-align:center;}.elementor-11 .elementor-element.elementor-element-a2957ec .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-size:15px;font-weight:400;line-height:21px;letter-spacing:1.1px;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-e6bd2cd{--display:flex;}.elementor-11 .elementor-element.elementor-element-af4d9cc{--spacer-size:20px;}.elementor-11 .elementor-element.elementor-element-4f47b91{--display:flex;--min-height:0px;--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-11 .elementor-element.elementor-element-4f47b91:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-4f47b91 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);}.elementor-11 .elementor-element.elementor-element-6e138503{--display:flex;--justify-content:center;}.elementor-11 .elementor-element.elementor-element-781da37{padding:0px 0px 0px 5px;}.elementor-11 .elementor-element.elementor-element-781da37 .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-size:13px;font-weight:600;letter-spacing:1.1px;color:#F59C00;}.elementor-11 .elementor-element.elementor-element-46ccad29 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:50px;font-weight:700;color:#070707;}.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-11 .elementor-element.elementor-element-937a322{font-family:"Inter Tight", Sans-serif;font-weight:400;line-height:20px;letter-spacing:1.2px;}.elementor-11 .elementor-element.elementor-element-3c13906{--display:flex;}.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-11 .elementor-element.elementor-element-4e1e32bc img{border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-3c78ddc{--display:flex;}.elementor-11 .elementor-element.elementor-element-dcb7a53{--spacer-size:20px;}.elementor-11 .elementor-element.elementor-element-496d1f5{--display:flex;--min-height:500px;--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-11 .elementor-element.elementor-element-496d1f5:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-496d1f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-kadence8 ) 0%, var( --e-global-color-kadence8 ) 100%);}.elementor-11 .elementor-element.elementor-element-e34c9d7{padding:0px 0px 0px 5px;text-align:center;}.elementor-11 .elementor-element.elementor-element-e34c9d7 .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-size:13px;font-weight:600;letter-spacing:1.1px;color:#F59C00;}.elementor-11 .elementor-element.elementor-element-86e9aa5{text-align:center;}.elementor-11 .elementor-element.elementor-element-86e9aa5 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:35px;font-weight:700;color:#000000;}.elementor-11 .elementor-element.elementor-element-6c6112e{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Inter Tight", Sans-serif;font-weight:400;}.elementor-11 .elementor-element.elementor-element-96eab42{--display:flex;--min-height:280px;--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-11 .elementor-element.elementor-element-0bb1d53{--display:flex;}.elementor-11 .elementor-element.elementor-element-8a9d62e img{width:100%;height:500px;border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-e305502{--display:flex;--justify-content:center;}.elementor-11 .elementor-element.elementor-element-e305502.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-11 .elementor-element.elementor-element-17b9aaf{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-4a9b161 img{width:100%;height:260px;border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-37ff97f{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-19062dc img{border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-1a93cba img{border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-9d3ec88{--display:flex;}.elementor-11 .elementor-element.elementor-element-be8e45d{--spacer-size:20px;}.elementor-11 .elementor-element.elementor-element-363443c9{--display:flex;}.elementor-11 .elementor-element.elementor-element-195cad52{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-image-box .elementor-image-box-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-widget-image-box:has(:hover) .elementor-image-box-title, .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{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-11 .elementor-element.elementor-element-40d70f88{background-color:transparent;padding:10px 10px 10px 10px;background-image:linear-gradient(180deg, var( --e-global-color-kadence8 ) 0%, var( --e-global-color-kadence8 ) 100%);}.elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-wrapper{text-align:start;}.elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-title{font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-40d70f88:has(:hover) .elementor-image-box-title, .elementor-11 .elementor-element.elementor-element-40d70f88:has(:focus) .elementor-image-box-title{color:#000000;}.elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-description{font-family:"Inter Tight", Sans-serif;font-weight:400;}.elementor-11 .elementor-element.elementor-element-e6910bf{background-color:transparent;padding:10px 10px 10px 10px;background-image:linear-gradient(180deg, var( --e-global-color-kadence8 ) 0%, var( --e-global-color-kadence8 ) 100%);}.elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-wrapper{text-align:start;}.elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-title{font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-e6910bf:has(:hover) .elementor-image-box-title, .elementor-11 .elementor-element.elementor-element-e6910bf:has(:focus) .elementor-image-box-title{color:#000000;}.elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-description{font-family:"Inter Tight", Sans-serif;font-weight:400;}.elementor-11 .elementor-element.elementor-element-6cee493a{background-color:transparent;padding:10px 10px 10px 10px;background-image:linear-gradient(180deg, var( --e-global-color-kadence8 ) 0%, var( --e-global-color-kadence8 ) 100%);}.elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-wrapper{text-align:start;}.elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-title{font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-6cee493a:has(:hover) .elementor-image-box-title, .elementor-11 .elementor-element.elementor-element-6cee493a:has(:focus) .elementor-image-box-title{color:#000000;}.elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-description{font-family:"Inter Tight", Sans-serif;font-weight:400;}.elementor-11 .elementor-element.elementor-element-c0dc54d{--display:flex;}.elementor-11 .elementor-element.elementor-element-e6846d8{--spacer-size:20px;}.elementor-11 .elementor-element.elementor-element-63244792{--display:flex;--min-height:0px;--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-11 .elementor-element.elementor-element-63244792:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-63244792 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #000000 0%, #000000 100%);}.elementor-11 .elementor-element.elementor-element-cba3165{--display:flex;--justify-content:center;}.elementor-11 .elementor-element.elementor-element-96d5aa4{padding:0px 0px 0px 5px;}.elementor-11 .elementor-element.elementor-element-96d5aa4 .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-size:13px;font-weight:600;letter-spacing:1.1px;color:#F59C00;}.elementor-11 .elementor-element.elementor-element-264b90a5 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:45px;font-weight:700;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-d17d0b1{font-family:"Inter Tight", Sans-serif;font-weight:400;}.elementor-11 .elementor-element.elementor-element-7cf56eec{--display:flex;}.elementor-11 .elementor-element.elementor-element-1ce415c8 img{width:43%;}.elementor-11 .elementor-element.elementor-element-f7f54c8{--display:flex;}.elementor-11 .elementor-element.elementor-element-6acd710{--spacer-size:20px;}.elementor-11 .elementor-element.elementor-element-491c8704{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-11 .elementor-element.elementor-element-491c8704:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-491c8704 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #0B1120 0%, #0B1120 100%);}.elementor-11 .elementor-element.elementor-element-b3831ec{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-11 .elementor-element.elementor-element-b3831ec.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(max-width:1024px){.elementor-11 .elementor-element.elementor-element-17b9aaf{--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-37ff97f{--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-195cad52{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-11 .elementor-element.elementor-element-68ab2a4{--min-height:0px;}.elementor-11 .elementor-element.elementor-element-42e2058c{--spacer-size:30px;}.elementor-11 .elementor-element.elementor-element-436475ef{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-11 .elementor-element.elementor-element-436475ef .elementor-heading-title{font-size:40px;line-height:1.1em;}.elementor-11 .elementor-element.elementor-element-45efa99{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 10px 10px 10px;text-align:center;}.elementor-11 .elementor-element.elementor-element-5602033.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-a2957ec{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 10px 10px 10px;text-align:center;}.elementor-11 .elementor-element.elementor-element-a2957ec .elementor-heading-title{font-size:13px;}.elementor-11 .elementor-element.elementor-element-46ccad29 .elementor-heading-title{font-size:30px;line-height:1.2em;}.elementor-11 .elementor-element.elementor-element-17b9aaf{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-37ff97f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-195cad52{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-264b90a5 .elementor-heading-title{font-size:35px;line-height:1.2em;}.elementor-11 .elementor-element.elementor-element-1ce415c8 img{width:60%;}}@media(min-width:768px){.elementor-11 .elementor-element.elementor-element-e305502{--width:33.762%;}}/* Start custom CSS for image-box, class: .elementor-element-40d70f88 *//* ---- Start Custom CSS ---- */ /* widget එකේ මුළු content එකම වටේට border එක (තැඹිලි පාට ඉර) දැමීම */ .elementor-11 .elementor-element.elementor-element-40d70f88 { border-left: 4px solid #ff7a1c; /* තැඹිලි පාට ඉරේ පළල සහ පාට */ padding-left: 15px !important; /* ඉර සහ content එක අතර පරතරය */ } /* අයිකනය style කිරීම */ .elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-wrapper .elementor-image-box-img i { font-size: 35px; /* අයිකනයේ ප්‍රමාණය */ color: #ff7a1c; /* අයිකනයේ තැඹිලි පාට */ margin-bottom: 20px; /* අයිකනය සහ මාතෘකාව අතර පරතරය */ display: block; /* අයිකනය අලුත් පේළියකින් පටන්ගැනීමට */ } /* SVG අයිකනයක් නම් */ .elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-wrapper .elementor-image-box-img svg { width: 35px; /* අයිකනයේ පළල */ height: auto; /* උස ස්වයංක්‍රීයව සකසා ගැනීම */ fill: #ff7a1c; /* අයිකනයේ තැඹිලි පාට */ margin-bottom: 20px; /* පරතරය */ } /* ප්‍රධාන මාතෘකාව (Heading) style කිරීම */ .elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-title { color: #1a1a1a; /* මාතෘකාවේ කළු පාටට හුරු අඳුරු පාට */ font-size: 20px; /* මාතෘකාවේ ප්‍රමාණය */ font-weight: 700; /* අකුරු වල ඝනකම (Bold) */ margin-bottom: 10px; /* මාතෘකාව සහ විස්තරය අතර පරතරය */ } /* විස්තරය (Description) style කිරීම */ .elementor-11 .elementor-element.elementor-element-40d70f88 .elementor-image-box-description { color: #555555; /* විස්තරයේ ලා අළු පාට */ font-size: 16px; /* විස්තරයේ ප්‍රමාණය */ line-height: 1.6; /* පේළි අතර පරතරය (readable look එකක් සඳහා) */ font-weight: 400; /* සාමාන්‍ය අකුරු ඝනකම */ } /* ---- End Custom CSS ---- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-e6910bf *//* ---- Start Custom CSS ---- */ /* widget එකේ මුළු content එකම වටේට border එක (තැඹිලි පාට ඉර) දැමීම */ .elementor-11 .elementor-element.elementor-element-e6910bf { border-left: 4px solid #ff7a1c; /* තැඹිලි පාට ඉරේ පළල සහ පාට */ padding-left: 15px !important; /* ඉර සහ content එක අතර පරතරය */ } /* අයිකනය style කිරීම */ .elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-wrapper .elementor-image-box-img i { font-size: 35px; /* අයිකනයේ ප්‍රමාණය */ color: #ff7a1c; /* අයිකනයේ තැඹිලි පාට */ margin-bottom: 20px; /* අයිකනය සහ මාතෘකාව අතර පරතරය */ display: block; /* අයිකනය අලුත් පේළියකින් පටන්ගැනීමට */ } /* SVG අයිකනයක් නම් */ .elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-wrapper .elementor-image-box-img svg { width: 35px; /* අයිකනයේ පළල */ height: auto; /* උස ස්වයංක්‍රීයව සකසා ගැනීම */ fill: #ff7a1c; /* අයිකනයේ තැඹිලි පාට */ margin-bottom: 20px; /* පරතරය */ } /* ප්‍රධාන මාතෘකාව (Heading) style කිරීම */ .elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-title { color: #1a1a1a; /* මාතෘකාවේ කළු පාටට හුරු අඳුරු පාට */ font-size: 20px; /* මාතෘකාවේ ප්‍රමාණය */ font-weight: 700; /* අකුරු වල ඝනකම (Bold) */ margin-bottom: 10px; /* මාතෘකාව සහ විස්තරය අතර පරතරය */ } /* විස්තරය (Description) style කිරීම */ .elementor-11 .elementor-element.elementor-element-e6910bf .elementor-image-box-description { color: #555555; /* විස්තරයේ ලා අළු පාට */ font-size: 16px; /* විස්තරයේ ප්‍රමාණය */ line-height: 1.6; /* පේළි අතර පරතරය (readable look එකක් සඳහා) */ font-weight: 400; /* සාමාන්‍ය අකුරු ඝනකම */ } /* ---- End Custom CSS ---- *//* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-6cee493a *//* ---- Start Custom CSS ---- */ /* widget එකේ මුළු content එකම වටේට border එක (තැඹිලි පාට ඉර) දැමීම */ .elementor-11 .elementor-element.elementor-element-6cee493a { border-left: 4px solid #ff7a1c; /* තැඹිලි පාට ඉරේ පළල සහ පාට */ padding-left: 15px !important; /* ඉර සහ content එක අතර පරතරය */ } /* අයිකනය style කිරීම */ .elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-wrapper .elementor-image-box-img i { font-size: 35px; /* අයිකනයේ ප්‍රමාණය */ color: #ff7a1c; /* අයිකනයේ තැඹිලි පාට */ margin-bottom: 20px; /* අයිකනය සහ මාතෘකාව අතර පරතරය */ display: block; /* අයිකනය අලුත් පේළියකින් පටන්ගැනීමට */ } /* SVG අයිකනයක් නම් */ .elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-wrapper .elementor-image-box-img svg { width: 35px; /* අයිකනයේ පළල */ height: auto; /* උස ස්වයංක්‍රීයව සකසා ගැනීම */ fill: #ff7a1c; /* අයිකනයේ තැඹිලි පාට */ margin-bottom: 20px; /* පරතරය */ } /* ප්‍රධාන මාතෘකාව (Heading) style කිරීම */ .elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-title { color: #1a1a1a; /* මාතෘකාවේ කළු පාටට හුරු අඳුරු පාට */ font-size: 20px; /* මාතෘකාවේ ප්‍රමාණය */ font-weight: 700; /* අකුරු වල ඝනකම (Bold) */ margin-bottom: 10px; /* මාතෘකාව සහ විස්තරය අතර පරතරය */ } /* විස්තරය (Description) style කිරීම */ .elementor-11 .elementor-element.elementor-element-6cee493a .elementor-image-box-description { color: #555555; /* විස්තරයේ ලා අළු පාට */ font-size: 16px; /* විස්තරයේ ප්‍රමාණය */ line-height: 1.6; /* පේළි අතර පරතරය (readable look එකක් සඳහා) */ font-weight: 400; /* සාමාන්‍ය අකුරු ඝනකම */ } /* ---- End Custom CSS ---- *//* End custom CSS */ /* Start custom CSS *//* ============================================================ PREMIUM PRODUCT CARD — Elementor Custom CSS Target: .e-prod-card (add this class to your container) Tested: Elementor Pro 3.x, WordPress 6.x, no WooCommerce ============================================================ */ /* ───────────────────────────────────────────────────────────── 1. CONTAINER FOUNDATION Sets up the card shell: layered shadow for depth, smooth border, and the overflow:hidden that lets image effects work. ───────────────────────────────────────────────────────────── */ .e-prod-card { /* Off-white surface — avoids the harshness of pure white */ background: #FFFFFF; border-radius: 16px; /* Three-layer shadow: proximity ambient + mid throw + broad haze */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.04); /* Hairline border — just enough to define the card edge */ border: 1px solid rgba(0, 0, 0, 0.06); /* Critical: clips the image zoom and rounded corners */ overflow: hidden; /* GPU hint — promotes to its own compositor layer for smooth animation */ will-change: transform, box-shadow; /* Smooth all transitions from a single declaration */ transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease; /* Relative positioning anchors any badge overlays you add */ position: relative; } /* ───────────────────────────────────────────────────────────── 2. CONTAINER HOVER — The Lift A spring-eased upward float + expanded shadow creates a physical "picking it up" sensation. The accent ring communicates focus without needing a focus outline. ───────────────────────────────────────────────────────────── */ .e-prod-card:hover { /* 5px lift + 1.2% scale feels physical without being theatrical */ transform: translateY(-5px) scale(1.012); /* Shadow deepens and the ambient haze expands on hover */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 36px rgba(0, 0, 0, 0.11), 0 0 0 1.5px rgba(110, 95, 190, 0.2); /* Border shifts toward the brand accent colour */ border-color: rgba(110, 95, 190, 0.22); } /* ───────────────────────────────────────────────────────────── 3. IMAGE REFINEMENTS The :first-child body.elementor-page-11 targets the Elementor image widget at the top of your container without needing extra classes. The zoom-on-hover gives the card visual "life." ───────────────────────────────────────────────────────────── */ /* The Elementor image wrapper */ .e-prod-card .elementor-widget-image { overflow: hidden; /* Optional: force 4:3 ratio for consistent grid layouts */ aspect-ratio: 4 / 3; display: block; } /* The actual element */ .e-prod-card .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; display: block; /* Smooth zoom — slightly longer duration than container transition */ transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1); /* Ensures sharp rendering at all scales */ image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; } /* Zoom triggers when the container (not the image) is hovered */ .e-prod-card:hover .elementor-widget-image img { transform: scale(1.065); } /* ───────────────────────────────────────────────────────────── 4. TYPOGRAPHY SYSTEM Targets Elementor's heading and text widget wrappers. Establishes a tight hierarchy: heading > body text, with micro-details (letter-spacing, font smoothing) that separate amateur from professional at close reading. ───────────────────────────────────────────────────────────── */ /* All text inside the card */ .e-prod-card .elementor-widget-text-editor, .e-prod-card .elementor-widget-heading { /* Sub-pixel rendering — smoother on high-DPI displays */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Heading / product title */ .e-prod-card .elementor-widget-heading .elementor-heading-title { font-size: clamp(15px, 1.5vw, 18px); font-weight: 650; /* Semibold — heavier than 600 where supported */ line-height: 1.3; letter-spacing: -0.02em; /* Tight tracking reads as editorial quality */ color: #1A1825; } /* Body / description text */ .e-prod-card .elementor-widget-text-editor p { font-size: 13.5px; line-height: 1.6; color: #6E6C7A; letter-spacing: 0.005em; margin-bottom: 0; } /* ───────────────────────────────────────────────────────────── 5. INTERNAL SPACING & LAYOUT RHYTHM Elementor containers carry their own padding — these rules fine-tune the inner widget gaps for a composed, editorial feel. ───────────────────────────────────────────────────────────── */ /* Gap between widgets inside the card body (image excluded) */ .e-prod-card > .e-con-inner > .elementor-widget:not(.elementor-widget-image) { margin-bottom: 8px; } /* Remove bottom margin from the last element — padding handles it */ .e-prod-card > .e-con-inner > .elementor-widget:last-child { margin-bottom: 0; } /* Content area below the image gets breathing room */ .e-prod-card > .e-con-inner { padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } /* ───────────────────────────────────────────────────────────── 6. LINKED TEXT / CTA ELEMENT Targets Elementor's Button widget AND any text widget containing an tag. The pill-style treatment signals interactivity. The fill-on-hover feels decisive. ───────────────────────────────────────────────────────────── */ /* ── Elementor Button Widget ── */ .e-prod-card .elementor-widget-button .elementor-button { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #5A4FB0; background: transparent; border: 1.5px solid rgba(90, 79, 176, 0.3); border-radius: 30px; padding: 9px 18px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease; } .e-prod-card .elementor-widget-button .elementor-button:hover { background: #5A4FB0; color: #FFFFFF; border-color: #5A4FB0; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(90, 79, 176, 0.38); } .e-prod-card .elementor-widget-button .elementor-button:active { transform: translateY(0px); box-shadow: 0 2px 8px rgba(90, 79, 176, 0.28); } /* ── Plain tags inside any text widget ── */ .e-prod-card .elementor-widget-text-editor a { color: #5A4FB0; text-decoration: none; font-weight: 600; border-bottom: 1.5px solid rgba(90, 79, 176, 0.25); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; } .e-prod-card .elementor-widget-text-editor a:hover { color: #3D3490; border-color: rgba(90, 79, 176, 0.7); } /* ───────────────────────────────────────────────────────────── 7. OPTIONAL SHIMMER HIGHLIGHT ON HOVER A pseudo-element casts a soft specular gloss across the card face on hover — like light catching a physical surface. Remove this block if you prefer a flatter aesthetic. ───────────────────────────────────────────────────────────── */ .e-prod-card::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.0) 55% ); pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.35s ease; } .e-prod-card:hover::before { opacity: 1; } /* ───────────────────────────────────────────────────────────── 8. ACCESSIBILITY & REDUCED MOTION Respects the OS "reduce motion" preference — all animations collapse to instant transitions. Zero extra effort for users; good practice for WCAG 2.1 AA compliance. ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .e-prod-card, .e-prod-card *, .e-prod-card::before, .e-prod-card::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────── 9. RESPONSIVE GUARD On very small screens, disable the lift to prevent cards feeling jittery on touch devices where hover lingers. ───────────────────────────────────────────────────────────── */ @media (hover: none) and (pointer: coarse) { .e-prod-card:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.06); } .e-prod-card:hover::before { opacity: 0; } .e-prod-card:hover .elementor-widget-image img { transform: none; } }/* End custom CSS */