.elementor-11 .elementor-element.elementor-element-eec882f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-13396bf{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-animated-headline .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-animated-headline{--dynamic-text-color:var( --e-global-color-secondary );}.elementor-widget-animated-headline .elementor-headline-dynamic-text{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-accent );}.elementor-11 .elementor-element.elementor-element-0699a1a{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#0064A7;}.elementor-11 .elementor-element.elementor-element-0699a1a .elementor-headline{text-align:center;font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-0699a1a .elementor-headline-plain-text{color:#1D293D;}.elementor-11 .elementor-element.elementor-element-0699a1a .elementor-headline-dynamic-text{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-0699a1a .elementor-headline-dynamic-wrapper path{stroke:#FF000000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;}.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-a8d08ba{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-38e2028{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 32px;--row-gap:0px;--column-gap:32px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-def0fc2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-15ace99{--display:flex;--min-height:84vh;--border-radius:20px 20px 20px 20px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);}.elementor-11 .elementor-element.elementor-element-15ace99:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-15ace99 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://drishtipath.in/wp-content/uploads/2026/09/converted-87.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-11 .elementor-element.elementor-element-2bf4e8d{--display:flex;--position:absolute;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:15px 15px 15px 15px;--padding-top:18px;--padding-bottom:18px;--padding-left:18px;--padding-right:18px;bottom:-13px;}.elementor-11 .elementor-element.elementor-element-2bf4e8d:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-2bf4e8d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#3498DB;}body:not(.rtl) .elementor-11 .elementor-element.elementor-element-2bf4e8d{right:-21px;}body.rtl .elementor-11 .elementor-element.elementor-element-2bf4e8d{left:-21px;}.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-51d84e9 .elementor-heading-title{font-family:"Anton", Sans-serif;font-weight:500;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-d668549 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:19px;font-weight:600;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-83a564b{--display:flex;--min-height:0px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-45bfc9c{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#0064A7;}.elementor-11 .elementor-element.elementor-element-45bfc9c .elementor-headline{text-align:start;font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-45bfc9c .elementor-headline-plain-text{color:#1D293D;}.elementor-11 .elementor-element.elementor-element-45bfc9c .elementor-headline-dynamic-text{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-45bfc9c .elementor-headline-dynamic-wrapper path{stroke:#FF000000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;}.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-f560c29{--divider-border-style:solid;--divider-color:#0064A7;--divider-border-width:6px;border-radius:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-f560c29 .elementor-divider-separator{width:15%;}.elementor-11 .elementor-element.elementor-element-f560c29 .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-11 .elementor-element.elementor-element-4e45d6d{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-a5f3c00{margin:-13px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-a5f3c00 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;color:#1D293D;}.elementor-11 .elementor-element.elementor-element-cd24e80{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-deadede{--divider-border-style:solid;--divider-color:#E6E6E6;--divider-border-width:1px;}.elementor-11 .elementor-element.elementor-element-deadede .elementor-divider-separator{width:100%;}.elementor-11 .elementor-element.elementor-element-deadede .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-11 .elementor-element.elementor-element-7192a7d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:13px;font-weight:500;font-style:italic;color:#707070;}.elementor-11 .elementor-element.elementor-element-8a95065{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:75px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-8a95065:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-8a95065 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F5F9;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-11 .elementor-element.elementor-element-ed8ce85 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-ed8ce85 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-ed8ce85{--e-icon-list-icon-size:24px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-ed8ce85 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-ed8ce85 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-ed8ce85 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-ed8ce85 .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-a4ac7da{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#0064A7;}.elementor-11 .elementor-element.elementor-element-a4ac7da .elementor-headline{text-align:center;font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-a4ac7da .elementor-headline-plain-text{color:#1D293D;}.elementor-11 .elementor-element.elementor-element-a4ac7da .elementor-headline-dynamic-text{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-a4ac7da .elementor-headline-dynamic-wrapper path{stroke:#FF000000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;}.elementor-11 .elementor-element.elementor-element-dd81d9b{text-align:center;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-2676513{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-be72fe2{--display:flex;}.elementor-11 .elementor-element.elementor-element-be72fe2:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-be72fe2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-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-462601a{padding:25px 25px 25px 25px;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-title{margin-block-end:7px;color:#000000;}.elementor-11 .elementor-element.elementor-element-462601a.elementor-view-stacked .elementor-icon{background-color:#EFF6FF;fill:#D02D3B;color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-462601a.elementor-view-framed .elementor-icon, .elementor-11 .elementor-element.elementor-element-462601a.elementor-view-default .elementor-icon{fill:#EFF6FF;color:#EFF6FF;border-color:#EFF6FF;}.elementor-11 .elementor-element.elementor-element-462601a.elementor-view-framed .elementor-icon{background-color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-462601a.elementor-view-framed:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-462601a.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-462601a.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-462601a.elementor-view-stacked:has(:focus) .elementor-icon{fill:#FFFFFF;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon{font-size:25px;padding:14px;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-462601a:has(:hover) .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-462601a:has(:focus) .elementor-icon-box-title{color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-weight:400;color:#3A3A3A;}.elementor-11 .elementor-element.elementor-element-fef7464{--display:flex;}.elementor-11 .elementor-element.elementor-element-fef7464:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-fef7464 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-7bb23cf{padding:25px 25px 25px 25px;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-title{margin-block-end:7px;color:#000000;}.elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-stacked .elementor-icon{background-color:#EFF6FF;fill:#D02D3B;color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-framed .elementor-icon, .elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-default .elementor-icon{fill:#EFF6FF;color:#EFF6FF;border-color:#EFF6FF;}.elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-framed .elementor-icon{background-color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-framed:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-7bb23cf.elementor-view-stacked:has(:focus) .elementor-icon{fill:#FFFFFF;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon{font-size:25px;padding:14px;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-7bb23cf:has(:hover) .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-7bb23cf:has(:focus) .elementor-icon-box-title{color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-weight:400;color:#3A3A3A;}.elementor-11 .elementor-element.elementor-element-3db11d6{--display:flex;}.elementor-11 .elementor-element.elementor-element-3db11d6:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-3db11d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-916c0c3{padding:25px 25px 25px 25px;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-title{margin-block-end:7px;color:#000000;}.elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-stacked .elementor-icon{background-color:#EFF6FF;fill:#D02D3B;color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-framed .elementor-icon, .elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-default .elementor-icon{fill:#EFF6FF;color:#EFF6FF;border-color:#EFF6FF;}.elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-framed .elementor-icon{background-color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-framed:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-916c0c3.elementor-view-stacked:has(:focus) .elementor-icon{fill:#FFFFFF;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon{font-size:25px;padding:14px;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-916c0c3:has(:hover) .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-916c0c3:has(:focus) .elementor-icon-box-title{color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-weight:400;color:#3A3A3A;}.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-11 .elementor-element.elementor-element-dc1db2a .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:15px 15px 15px 15px;}.elementor-11 .elementor-element.elementor-element-dc1db2a{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-7cc89c2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 32px;--row-gap:0px;--column-gap:32px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-2fb2456{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-c0cd1d7{--display:flex;--min-height:100vh;--border-radius:20px 20px 20px 20px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);}.elementor-11 .elementor-element.elementor-element-c0cd1d7:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-c0cd1d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://drishtipath.in/wp-content/uploads/2026/09/converted-88.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-11 .elementor-element.elementor-element-ccab124{--display:flex;--min-height:0px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-3470d35 .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-3470d35 .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-3470d35{--e-icon-list-icon-size:18px;--icon-vertical-offset:-1px;}.elementor-11 .elementor-element.elementor-element-3470d35 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-3470d35 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-3470d35 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-3470d35 .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-1e2c1bc{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#0064A7;}.elementor-11 .elementor-element.elementor-element-1e2c1bc .elementor-headline{text-align:start;font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-1e2c1bc .elementor-headline-plain-text{color:#1D293D;}.elementor-11 .elementor-element.elementor-element-1e2c1bc .elementor-headline-dynamic-text{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-1e2c1bc .elementor-headline-dynamic-wrapper path{stroke:#FF000000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;}.elementor-11 .elementor-element.elementor-element-6531aaf{--divider-border-style:solid;--divider-color:#0064A7;--divider-border-width:6px;border-radius:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-6531aaf .elementor-divider-separator{width:15%;}.elementor-11 .elementor-element.elementor-element-6531aaf .elementor-divider{padding-block-start:2px;padding-block-end:2px;}.elementor-11 .elementor-element.elementor-element-0b18ac2{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-24571ef{margin:-13px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-24571ef .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;color:#1D293D;}.elementor-11 .elementor-element.elementor-element-e63dbf7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-18fb0f3{--divider-border-style:solid;--divider-color:#E6E6E6;--divider-border-width:1px;}.elementor-11 .elementor-element.elementor-element-18fb0f3 .elementor-divider-separator{width:100%;}.elementor-11 .elementor-element.elementor-element-18fb0f3 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-11 .elementor-element.elementor-element-b9b7eb7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:13px;font-weight:500;font-style:italic;color:#707070;}.elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-6e70d9a{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-bbe53eb{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:75px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-bbe53eb:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-bbe53eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F5F9;}.elementor-11 .elementor-element.elementor-element-d906ffa .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-d906ffa .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-d906ffa{--e-icon-list-icon-size:24px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-d906ffa .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-d906ffa .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-d906ffa .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-d906ffa .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-80a0b62{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#0064A7;}.elementor-11 .elementor-element.elementor-element-80a0b62 .elementor-headline{text-align:center;font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-80a0b62 .elementor-headline-plain-text{color:#1D293D;}.elementor-11 .elementor-element.elementor-element-80a0b62 .elementor-headline-dynamic-text{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-80a0b62 .elementor-headline-dynamic-wrapper path{stroke:#FF000000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;}.elementor-11 .elementor-element.elementor-element-d5c42bf{text-align:center;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-a6819e8{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-d33dcef{--display:flex;}.elementor-11 .elementor-element.elementor-element-d33dcef:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-d33dcef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-807234a{padding:25px 25px 25px 25px;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-title{margin-block-end:7px;color:#000000;}.elementor-11 .elementor-element.elementor-element-807234a.elementor-view-stacked .elementor-icon{background-color:#EFF6FF;fill:#D02D3B;color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-807234a.elementor-view-framed .elementor-icon, .elementor-11 .elementor-element.elementor-element-807234a.elementor-view-default .elementor-icon{fill:#EFF6FF;color:#EFF6FF;border-color:#EFF6FF;}.elementor-11 .elementor-element.elementor-element-807234a.elementor-view-framed .elementor-icon{background-color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-807234a.elementor-view-framed:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-807234a.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-807234a.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-807234a.elementor-view-stacked:has(:focus) .elementor-icon{fill:#FFFFFF;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon{font-size:25px;padding:14px;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-807234a:has(:hover) .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-807234a:has(:focus) .elementor-icon-box-title{color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-weight:400;color:#3A3A3A;}.elementor-11 .elementor-element.elementor-element-2e7120e{--display:flex;}.elementor-11 .elementor-element.elementor-element-2e7120e:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-2e7120e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-fd8cc37{padding:25px 25px 25px 25px;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-title{margin-block-end:7px;color:#000000;}.elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-stacked .elementor-icon{background-color:#EFF6FF;fill:#D02D3B;color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-framed .elementor-icon, .elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-default .elementor-icon{fill:#EFF6FF;color:#EFF6FF;border-color:#EFF6FF;}.elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-framed .elementor-icon{background-color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-framed:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-fd8cc37.elementor-view-stacked:has(:focus) .elementor-icon{fill:#FFFFFF;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon{font-size:25px;padding:14px;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-fd8cc37:has(:hover) .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-fd8cc37:has(:focus) .elementor-icon-box-title{color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-weight:400;color:#3A3A3A;}.elementor-11 .elementor-element.elementor-element-5340981{--display:flex;}.elementor-11 .elementor-element.elementor-element-5340981:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-5340981 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-1101823{padding:25px 25px 25px 25px;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-title{margin-block-end:7px;color:#000000;}.elementor-11 .elementor-element.elementor-element-1101823.elementor-view-stacked .elementor-icon{background-color:#EFF6FF;fill:#D02D3B;color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-1101823.elementor-view-framed .elementor-icon, .elementor-11 .elementor-element.elementor-element-1101823.elementor-view-default .elementor-icon{fill:#EFF6FF;color:#EFF6FF;border-color:#EFF6FF;}.elementor-11 .elementor-element.elementor-element-1101823.elementor-view-framed .elementor-icon{background-color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-1101823.elementor-view-framed:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-1101823.elementor-view-framed:has(:focus) .elementor-icon{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-1101823.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-11 .elementor-element.elementor-element-1101823.elementor-view-stacked:has(:focus) .elementor-icon{fill:#FFFFFF;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon{font-size:25px;padding:14px;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-title a{font-family:"Montserrat", Sans-serif;font-size:23px;font-weight:600;}.elementor-11 .elementor-element.elementor-element-1101823:has(:hover) .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-1101823:has(:focus) .elementor-icon-box-title{color:#D02D3B;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-description{font-family:"Poppins", Sans-serif;font-weight:400;color:#3A3A3A;}.elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-ca7232f{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-d4eab6e{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-282428f{background-color:#EFF6FF;padding:2px 10px 2px 0px;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-282428f.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-282428f .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-282428f .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-282428f .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-282428f .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-282428f .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-282428f .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-dce5d8d{--iteration-count:infinite;--animation-duration:1200ms;--dynamic-text-color:#0064A7;}.elementor-11 .elementor-element.elementor-element-dce5d8d .elementor-headline{text-align:center;font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-dce5d8d .elementor-headline-plain-text{color:#1D293D;}.elementor-11 .elementor-element.elementor-element-dce5d8d .elementor-headline-dynamic-text{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-11 .elementor-element.elementor-element-dce5d8d .elementor-headline-dynamic-wrapper path{stroke:#FF000000;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;}.elementor-11 .elementor-element.elementor-element-c0eed17{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-a8f5c41{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-e04e630{--display:flex;--overlay-opacity:0.5;--border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-e04e630:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-e04e630 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(90deg, #0F172B 0%, #0F172B 100%);}.elementor-11 .elementor-element.elementor-element-e04e630::before, .elementor-11 .elementor-element.elementor-element-e04e630 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-e04e630 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-e04e630 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-e04e630 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-e04e630 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-11 .elementor-element.elementor-element-95f386c{padding:25px 25px 25px 25px;text-align:center;}.elementor-11 .elementor-element.elementor-element-95f386c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;font-style:italic;color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-0268788{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:75px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-0268788:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-0268788 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F1F5F9;}.elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-content-wrapper{flex-direction:row;}.elementor-11 .elementor-element.elementor-element-cfc2ca6{margin:9px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-9183eca{text-align:center;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-f36977c{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-4a6d360{--display:flex;--justify-content:space-between;--padding-top:0px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-4a6d360:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-4a6d360 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.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-e79a997{text-align:center;}.elementor-11 .elementor-element.elementor-element-e79a997 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-73ba6ca{padding:0px 25px 0px 25px;text-align:center;}.elementor-11 .elementor-element.elementor-element-73ba6ca .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#303030;}.elementor-11 .elementor-element.elementor-element-3a21727{--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;--justify-content:center;--gap:0px 15px;--row-gap:0px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-986d817 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-986d817{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-30cf00c{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-4a0b359{--display:flex;--justify-content:space-between;--padding-top:0px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-4a0b359:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-4a0b359 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-46b2373{text-align:center;}.elementor-11 .elementor-element.elementor-element-46b2373 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-b20276b{padding:0px 25px 0px 25px;text-align:center;}.elementor-11 .elementor-element.elementor-element-b20276b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#303030;}.elementor-11 .elementor-element.elementor-element-4c06bab{--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;--justify-content:center;--gap:0px 15px;--row-gap:0px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-3772463 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-3772463{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-4d39e93{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-6d3cc1f{--display:flex;--justify-content:space-between;--padding-top:0px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-6d3cc1f:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-6d3cc1f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-4a0e4aa{text-align:center;}.elementor-11 .elementor-element.elementor-element-4a0e4aa .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-eef4bba{padding:0px 25px 0px 25px;text-align:center;}.elementor-11 .elementor-element.elementor-element-eef4bba .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#303030;}.elementor-11 .elementor-element.elementor-element-2ed2f95{--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;--justify-content:center;--gap:0px 15px;--row-gap:0px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-49b31a2{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-b4cb5d7{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-6b81d25{--display:flex;--justify-content:space-between;--padding-top:0px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-6b81d25:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-6b81d25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-23e84d4{text-align:center;}.elementor-11 .elementor-element.elementor-element-23e84d4 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-81a2aea{padding:0px 0px 0px 0px;text-align:center;}.elementor-11 .elementor-element.elementor-element-81a2aea .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#303030;}.elementor-11 .elementor-element.elementor-element-bedcb1a{--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;--justify-content:center;--gap:0px 15px;--row-gap:0px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-6c68891{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-02a35e1{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-fd5128c{--display:flex;--justify-content:space-between;--padding-top:0px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-fd5128c:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-fd5128c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-e76adbe{text-align:center;}.elementor-11 .elementor-element.elementor-element-e76adbe .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-90d6b06{text-align:center;}.elementor-11 .elementor-element.elementor-element-90d6b06 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#303030;}.elementor-11 .elementor-element.elementor-element-95a7a7e{--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;--justify-content:center;--gap:0px 15px;--row-gap:0px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-192e9a6{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-7a6de2d{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-a65b167{--display:flex;--justify-content:space-between;--padding-top:0px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-a65b167:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-a65b167 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-73d8acb{text-align:center;}.elementor-11 .elementor-element.elementor-element-73d8acb .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:600;color:#000000;}.elementor-11 .elementor-element.elementor-element-8ad6b22{text-align:center;}.elementor-11 .elementor-element.elementor-element-8ad6b22 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#303030;}.elementor-11 .elementor-element.elementor-element-f324df8{--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;--justify-content:center;--gap:0px 15px;--row-gap:0px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-7734215 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-7734215{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-c215b72{padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-a01d44c{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-2c6ced3{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-345547e{background-color:#EFF6FF;padding:2px 10px 2px 0px;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-345547e.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-345547e .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-345547e .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-345547e .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-345547e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-345547e .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-345547e .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-766af69{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-8c0879d{text-align:center;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-6b0e844{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-6b0e844:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-6b0e844 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-2307257{--display:flex;--overlay-opacity:0.5;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-2307257:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-2307257 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-2307257::before, .elementor-11 .elementor-element.elementor-element-2307257 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-2307257 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-2307257 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-2307257 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-2307257 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-11 .elementor-element.elementor-element-ddb6f5b{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-25f6d51{--display:flex;--overlay-opacity:0.5;--border-radius:20px 20px 20px 20px;}.elementor-11 .elementor-element.elementor-element-25f6d51:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-25f6d51 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-25f6d51::before, .elementor-11 .elementor-element.elementor-element-25f6d51 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-25f6d51 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-25f6d51 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-25f6d51 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-25f6d51 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-11 .elementor-element.elementor-element-269458f{text-align:center;}.elementor-11 .elementor-element.elementor-element-269458f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;font-style:italic;color:#494949;}.elementor-11 .elementor-element.elementor-element-d780c05{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.68;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:75px;--padding-bottom:75px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-d780c05:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-d780c05 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://drishtipath.in/wp-content/uploads/2026/09/converted-96.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-11 .elementor-element.elementor-element-d780c05::before, .elementor-11 .elementor-element.elementor-element-d780c05 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-d780c05 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-d780c05 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-d780c05 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-d780c05 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-11 .elementor-element.elementor-element-69602cf{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-8455e95{background-color:#2F3B56;padding:2px 10px 2px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#00D2E0;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-8455e95.elementor-element{--align-self:flex-start;}.elementor-11 .elementor-element.elementor-element-8455e95 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-8455e95 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-8455e95 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-8455e95 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-8455e95 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-8455e95 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-d66215d{margin:9px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-9bbcda6{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-11 .elementor-element.elementor-element-9bbcda6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;color:#DDDDDD;}.elementor-11 .elementor-element.elementor-element-511e975{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:2px 10px 2px 0px;border-style:none;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-511e975.elementor-element{--align-self:flex-start;}.elementor-11 .elementor-element.elementor-element-511e975 .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-511e975 .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-511e975 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-511e975 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-511e975 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-511e975 .elementor-icon-list-text{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-c5c011b{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-2a284e8{--display:flex;}.elementor-11 .elementor-element.elementor-element-b883ba1{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-b883ba1:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-b883ba1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFF6FE;}.elementor-11 .elementor-element.elementor-element-ec16cc1{background-color:#EFF6FF;padding:2px 10px 2px 0px;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-ec16cc1.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-ec16cc1 .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-ec16cc1 .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-ec16cc1 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-ec16cc1 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-ec16cc1 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-ec16cc1 .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-452014e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-bf874ea{margin:35px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-5838d2f{--display:flex;--margin-top:25px;--margin-bottom:25px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-d87e323{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-d87e323:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-d87e323 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFF6FE;}.elementor-11 .elementor-element.elementor-element-5e181af{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-11 .elementor-element.elementor-element-9108810{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-38d7bee{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-e798098{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-f9992aa{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-01f50cc{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:0px 0px 0px 0px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-d6243a0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-e70f5e8{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-36d7e29{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-76aa95d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-fc17df1{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-f57bbd2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-6ad18de{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:0px 0px 0px 0px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-5430f02{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-f2a5c97{--n-tabs-direction:row;--n-tabs-heading-direction:column;--n-tabs-heading-width:240px;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:initial;--n-tabs-heading-justify-content:flex-start;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:initial;--n-tabs-heading-wrap:wrap;}.elementor-11 .elementor-element.elementor-element-da6dee8{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-376b193 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-376b193{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-0e58e10{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-6b18a0c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-13bc7a8{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:0px 0px 0px 0px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-54ca034{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-73b8f6a{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-006a392 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 20px 10px 20px;}.elementor-11 .elementor-element.elementor-element-006a392{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-11 .elementor-element.elementor-element-26baee6{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-cbc5055{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-6e8e328{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:0px 0px 0px 0px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-34bdeb1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-4ae69a7{--n-tabs-direction:row;--n-tabs-heading-direction:column;--n-tabs-heading-width:240px;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:initial;--n-tabs-heading-justify-content:flex-start;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:initial;--n-tabs-heading-wrap:wrap;}.elementor-11 .elementor-element.elementor-element-572af5e{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-8d91361{background-color:#EFF6FF;padding:2px 10px 2px 0px;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-8d91361.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-8d91361 .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-8d91361 .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-8d91361 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-8d91361 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-8d91361 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-8d91361 .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-1c90c85{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button{background-color:#FFFFFFEB;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;fill:#14396F;color:#14396F;border-style:solid;border-width:1px 1px 1px 1px;border-color:#14396F;border-radius:10px 10px 10px 10px;padding:10px 25px 10px 25px;}.elementor-11 .elementor-element.elementor-element-686b4e4{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11 .elementor-element.elementor-element-8b3e7e3{--display:flex;--gap:15px 0px;--row-gap:15px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-8b3e7e3:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-8b3e7e3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFF6FE;}.elementor-11 .elementor-element.elementor-element-d8efed7{background-color:#EFF6FF;padding:2px 10px 2px 0px;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-d8efed7.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-d8efed7 .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-d8efed7 .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-d8efed7 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-d8efed7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-d8efed7 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-d8efed7 .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-ef3c69a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-fb3efee{text-align:center;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:400;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-3f081e9{text-align:center;font-family:"Poppins", Sans-serif;font-size:12px;font-weight:400;font-style:italic;color:#3D3D3D;}.elementor-11 .elementor-element.elementor-element-13227b4{background-color:#DBEAFE;padding:2px 10px 2px 0px;border-radius:30px 30px 30px 30px;--e-icon-list-icon-size:20px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-offset:1px;}.elementor-11 .elementor-element.elementor-element-13227b4.elementor-element{--align-self:center;}.elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-icon i{color:var( --e-global-color-astglobalcolor0 );transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-icon svg{fill:var( --e-global-color-astglobalcolor0 );transition:fill 0.3s;}.elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-icon{padding-inline-end:0px;}.elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;}.elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-text{color:#0064A7;transition:color 0.3s;}.elementor-11 .elementor-element.elementor-element-b684c2b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-782d9ad{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-05f28b5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.3;--border-radius:50px 0px 0px 50px;box-shadow:0px 0px 10px 0px #000000;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-05f28b5:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-05f28b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://drishtipath.in/wp-content/uploads/2026/09/converted-97.webp");background-position:center center;background-size:cover;}.elementor-11 .elementor-element.elementor-element-05f28b5::before, .elementor-11 .elementor-element.elementor-element-05f28b5 > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-05f28b5 > .e-con-inner > .elementor-background-video-container::before, .elementor-11 .elementor-element.elementor-element-05f28b5 > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-05f28b5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-11 .elementor-element.elementor-element-05f28b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(145deg, #00FF06 0%, #29BBF2 38%);}.elementor-11 .elementor-element.elementor-element-62e41b2{padding:0px 0px 0px 0px;border-radius:50px 0px 0px 50px;}.elementor-11 .elementor-element.elementor-element-62e41b2 iframe{height:750px;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-11 .elementor-element.elementor-element-e9d6a0d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 50px 50px 0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);--padding-top:41px;--padding-bottom:41px;--padding-left:41px;--padding-right:41px;}.elementor-11 .elementor-element.elementor-element-e9d6a0d:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-e9d6a0d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11 .elementor-element.elementor-element-00ad84a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .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-form .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-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .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-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .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-form{--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-form .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-11 .elementor-element.elementor-element-492137b{margin:15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--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;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group.recaptcha_v3-bottomleft, .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-11 .elementor-element.elementor-element-492137b .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-11 .elementor-element.elementor-element-492137b .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-11 .elementor-element.elementor-element-492137b .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-field-type-html{padding-bottom:0px;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-button[type="submit"]{color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-11 .elementor-element.elementor-element-492137b .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}@media(max-width:1024px){.elementor-11 .elementor-element.elementor-element-15ace99{--min-height:100vh;}.elementor-11 .elementor-element.elementor-element-45bfc9c .elementor-headline{font-size:21px;}.elementor-11 .elementor-element.elementor-element-4e45d6d{font-size:10px;}.elementor-11 .elementor-element.elementor-element-a5f3c00 .elementor-heading-title{font-size:14px;}.elementor-11 .elementor-element.elementor-element-2676513{--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-title a{font-size:14px;}.elementor-11 .elementor-element.elementor-element-462601a .elementor-icon-box-description{font-size:11px;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-title a{font-size:14px;}.elementor-11 .elementor-element.elementor-element-7bb23cf .elementor-icon-box-description{font-size:11px;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-title a{font-size:14px;}.elementor-11 .elementor-element.elementor-element-916c0c3 .elementor-icon-box-description{font-size:11px;}.elementor-11 .elementor-element.elementor-element-c0cd1d7{--min-height:100vh;}.elementor-11 .elementor-element.elementor-element-1e2c1bc .elementor-headline{font-size:21px;}.elementor-11 .elementor-element.elementor-element-0b18ac2{font-size:10px;}.elementor-11 .elementor-element.elementor-element-24571ef .elementor-heading-title{font-size:14px;}.elementor-11 .elementor-element.elementor-element-18fb0f3{margin:-22px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-11 .elementor-element.elementor-element-a6819e8{--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-title a{font-size:14px;}.elementor-11 .elementor-element.elementor-element-807234a .elementor-icon-box-description{font-size:11px;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-title a{font-size:14px;}.elementor-11 .elementor-element.elementor-element-fd8cc37 .elementor-icon-box-description{font-size:11px;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-title, .elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-title a{font-size:14px;}.elementor-11 .elementor-element.elementor-element-1101823 .elementor-icon-box-description{font-size:11px;}.elementor-11 .elementor-element.elementor-element-f36977c{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}}@media(max-width:767px){.elementor-11 .elementor-element.elementor-element-13396bf{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-11 .elementor-element.elementor-element-0699a1a .elementor-headline{font-size:22px;}.elementor-11 .elementor-element.elementor-element-a8d08ba{font-size:11px;}.elementor-11 .elementor-element.elementor-element-38e2028{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-15ace99{--min-height:44vh;}body:not(.rtl) .elementor-11 .elementor-element.elementor-element-2bf4e8d{right:-4px;}body.rtl .elementor-11 .elementor-element.elementor-element-2bf4e8d{left:-4px;}.elementor-11 .elementor-element.elementor-element-2bf4e8d{bottom:-9px;}.elementor-11 .elementor-element.elementor-element-83a564b{--margin-top:25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-11 .elementor-element.elementor-element-a4ac7da .elementor-headline{font-size:22px;}.elementor-11 .elementor-element.elementor-element-2676513{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-c0cd1d7{--min-height:52vh;}.elementor-11 .elementor-element.elementor-element-80a0b62 .elementor-headline{font-size:22px;}.elementor-11 .elementor-element.elementor-element-d5c42bf{text-align:center;font-size:11px;}.elementor-11 .elementor-element.elementor-element-a6819e8{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-dce5d8d .elementor-headline{text-align:start;font-size:22px;}.elementor-11 .elementor-element.elementor-element-c0eed17{font-size:11px;}.elementor-11 .elementor-element.elementor-element-f36977c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-11 .elementor-element.elementor-element-3a21727{--gap:0px 5px;--row-gap:0px;--column-gap:5px;}.elementor-11 .elementor-element.elementor-element-4c06bab{--gap:0px 5px;--row-gap:0px;--column-gap:5px;}.elementor-11 .elementor-element.elementor-element-2ed2f95{--gap:0px 5px;--row-gap:0px;--column-gap:5px;}.elementor-11 .elementor-element.elementor-element-bedcb1a{--gap:0px 5px;--row-gap:0px;--column-gap:5px;}.elementor-11 .elementor-element.elementor-element-95a7a7e{--gap:0px 5px;--row-gap:0px;--column-gap:5px;}.elementor-11 .elementor-element.elementor-element-f324df8{--gap:0px 5px;--row-gap:0px;--column-gap:5px;}.elementor-11 .elementor-element.elementor-element-8c0879d{font-size:10px;}.elementor-11 .elementor-element.elementor-element-fb3efee{font-size:10px;}.elementor-11 .elementor-element.elementor-element-13227b4{--e-icon-list-icon-size:14px;--e-icon-list-icon-align:right;--e-icon-list-icon-margin:0 0 0 calc(var(--e-icon-list-icon-size, 1em) * 0.25);--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11 .elementor-element.elementor-element-13227b4 .elementor-icon-list-item > a{font-size:9px;}.elementor-11 .elementor-element.elementor-element-05f28b5{--border-radius:50px 50px 0px 0px;}.elementor-11 .elementor-element.elementor-element-62e41b2{border-radius:50px 50px 0px 0px;}.elementor-11 .elementor-element.elementor-element-62e41b2 iframe{height:467px;}.elementor-11 .elementor-element.elementor-element-e9d6a0d{--border-radius:0px 0px 50px 50px;}}@media(min-width:768px){.elementor-11 .elementor-element.elementor-element-2bf4e8d{--width:40%;}}@media(min-width:1025px){.elementor-11 .elementor-element.elementor-element-d780c05:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-d780c05 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-2bf4e8d *//* ========================================================= DRISHTIPATH — PREMIUM 24/7 EMERGENCY CARE BADGE Paste into Container > Advanced > Custom CSS ========================================================= */ .elementor-11 .elementor-element.elementor-element-2bf4e8d { position: absolute; right: -18px; bottom: -18px; width: 220px; min-height: 96px; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient( 135deg, rgba(7, 119, 201, 0.98), rgba(17, 154, 221, 0.96) ); border: 1px solid rgba(255,255,255,0.35); border-radius: 20px; box-shadow: 0 20px 45px rgba(5, 63, 108, 0.28), 0 8px 20px rgba(5, 102, 167, 0.18), inset 0 1px 0 rgba(255,255,255,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; z-index: 20; transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease; } /* ========================================================= PREMIUM LIGHT GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-2bf4e8d::before { content: ""; position: absolute; width: 150px; height: 150px; top: -90px; right: -70px; background: rgba(255,255,255,0.18); border-radius: 50%; filter: blur(5px); pointer-events: none; } /* ========================================================= ANIMATED LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-2bf4e8d::after { content: ""; position: absolute; top: 0; left: -120%; width: 65%; height: 100%; background: linear-gradient( 110deg, transparent, rgba(255,255,255,0.28), transparent ); transform: skewX(-20deg); animation: dpEmergencyShine 5s ease-in-out infinite; pointer-events: none; } @keyframes dpEmergencyShine { 0% { left: -120%; } 35% { left: 140%; } 100% { left: 140%; } } /* ========================================================= HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-2bf4e8d:hover { transform: translateY(-6px); box-shadow: 0 28px 55px rgba(5, 63, 108, 0.32), 0 12px 25px rgba(5, 102, 167, 0.22), 0 0 30px rgba(27, 171, 236, 0.18), inset 0 1px 0 rgba(255,255,255,0.4); } /* ========================================================= TYPOGRAPHY ========================================================= */ .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container { position: relative; z-index: 5; color: #ffffff; } /* 24/7 */ .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container strong, .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container b { font-size: 31px; line-height: 1; font-weight: 800; letter-spacing: -0.8px; color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,0.12); } /* Emergency Care */ .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container { font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: 0.2px; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-2bf4e8d { right: -8px; bottom: -12px; width: 175px; min-height: 78px; padding: 15px 18px; border-radius: 16px; } .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container { font-size: 13px; } .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container strong, .elementor-11 .elementor-element.elementor-element-2bf4e8d .elementor-widget-container b { font-size: 25px; } }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-f560c29 */.elementor-11 .elementor-element.elementor-element-f560c29 .elementor-divider-separator { border-radius: 999px !important; overflow: hidden; box-sizing: border-box; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-be72fe2 *//* ========================================================= DRISHTIPATH FOUNDATION PREMIUM GLASS CARD + ANIMATED BORDER Elementor Container > Advanced > Custom CSS ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2 { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; /* Premium glass surface */ background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(248,252,255,0.97) 50%, rgba(239,248,255,0.96) 100% ); /* Transparent border — animated border appears above */ border: 1px solid rgba(9, 125, 193, 0.12); box-shadow: 0 14px 35px rgba(20,70,100,0.08), 0 4px 12px rgba(20,70,100,0.04), inset 0 1px 0 rgba(255,255,255,0.95); transform: translateY(0) scale(1); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease; z-index: 1; } /* ========================================================= ANIMATED PREMIUM BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(15,150,218,0.08) 80deg, rgba(15,150,218,0.75) 105deg, rgba(65,201,244,1) 125deg, rgba(15,150,218,0.15) 155deg, transparent 190deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transform: rotate(0deg); transition: opacity .45s ease; pointer-events: none; z-index: 20; } /* ========================================================= BORDER ANIMATION ON HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2:hover::before { opacity: 1; animation: dpPremiumBorder 2.8s linear infinite; } @keyframes dpPremiumBorder { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SOFT BLUE AURA ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(22,166,225,0.22) 0%, rgba(22,166,225,0.09) 35%, transparent 72% ); filter: blur(12px); opacity: .55; transform: scale(.8); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; pointer-events: none; z-index: -1; } /* ========================================================= MAIN HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2:hover { transform: translateY(-12px) scale(1.018); border-color: rgba(12,145,210,0.32); box-shadow: 0 30px 65px rgba(12,78,119,0.14), 0 15px 30px rgba(8,137,204,0.10), 0 0 45px rgba(20,165,225,0.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-be72fe2:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================================= CONTENT ABOVE EFFECTS ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2 > * { position: relative; z-index: 5; } /* ========================================================= ICON BOX ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2 .elementor-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; color: #0788ca; background: linear-gradient( 145deg, #f0f9ff, #e2f2ff ); border: 1px solid rgba(8,137,202,0.10); box-shadow: 0 7px 18px rgba(8,125,190,0.09); transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease, background .4s ease, box-shadow .45s ease, border-color .4s ease; } /* ICON HOVER */ .elementor-11 .elementor-element.elementor-element-be72fe2:hover .elementor-icon { color: #ffffff; background: linear-gradient( 135deg, #0679c4, #19b0e8 ); border-color: rgba(255,255,255,0.45); transform: translateY(-5px) rotate(-4deg) scale(1.1); box-shadow: 0 14px 28px rgba(7,125,196,0.28), 0 0 25px rgba(21,176,232,0.22); } /* ========================================================= ICON INNER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2 .elementor-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.25); opacity: 0; transition: opacity .4s ease; } .elementor-11 .elementor-element.elementor-element-be72fe2:hover .elementor-icon::after { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2 .elementor-heading-title { color: #172b47; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .elementor-11 .elementor-element.elementor-element-be72fe2:hover .elementor-heading-title { color: #0678bd; transform: translateX(4px); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2 .elementor-widget-text-editor { color: #536579; transition: color .4s ease; } .elementor-11 .elementor-element.elementor-element-be72fe2:hover .elementor-widget-text-editor { color: #354e67; } /* ========================================================= SUBTLE CONTENT LIFT ========================================================= */ .elementor-11 .elementor-element.elementor-element-be72fe2:hover .elementor-widget-heading { transform: translateY(-1px); } .elementor-11 .elementor-element.elementor-element-be72fe2:hover .elementor-widget-text-editor { transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-be72fe2 { border-radius: 20px; } .elementor-11 .elementor-element.elementor-element-be72fe2:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 20px 40px rgba(12,78,119,0.12), 0 10px 20px rgba(8,137,204,0.08); } .elementor-11 .elementor-element.elementor-element-be72fe2 .elementor-icon { width: 50px; height: 50px; border-radius: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-be72fe2, .elementor-11 .elementor-element.elementor-element-be72fe2 *, .elementor-11 .elementor-element.elementor-element-be72fe2::before, .elementor-11 .elementor-element.elementor-element-be72fe2::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fef7464 *//* ========================================================= DRISHTIPATH FOUNDATION — CARD 02 PREMIUM RED VARIANT ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464 { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(255,250,250,0.97) 50%, rgba(255,242,242,0.96) 100% ); border: 1px solid rgba(210, 45, 55, 0.12); box-shadow: 0 14px 35px rgba(100,35,40,0.08), 0 4px 12px rgba(100,35,40,0.04), inset 0 1px 0 rgba(255,255,255,0.95); transform: translateY(0) scale(1); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease; } /* ========================================================= ANIMATED RED PREMIUM BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(210,45,55,0.08) 80deg, rgba(218,45,55,0.75) 105deg, rgba(255,105,105,1) 125deg, rgba(218,45,55,0.15) 155deg, transparent 190deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; z-index: 20; } .elementor-11 .elementor-element.elementor-element-fef7464:hover::before { opacity: 1; animation: dpRedPremiumBorder 2.8s linear infinite; } @keyframes dpRedPremiumBorder { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SOFT RED AURA ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(225,55,65,0.20) 0%, rgba(225,55,65,0.08) 35%, transparent 72% ); filter: blur(12px); opacity: .55; transform: scale(.8); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; pointer-events: none; z-index: -1; } /* ========================================================= MAIN HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464:hover { transform: translateY(-12px) scale(1.018); border-color: rgba(210,45,55,0.32); box-shadow: 0 30px 65px rgba(110,35,40,0.14), 0 15px 30px rgba(205,45,55,0.10), 0 0 45px rgba(225,55,65,0.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-fef7464:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================================= CONTENT ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464 > * { position: relative; z-index: 5; } /* ========================================================= ICON ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464 .elementor-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; color: #d52f3b; background: linear-gradient( 145deg, #fff1f2, #ffe4e6 ); border: 1px solid rgba(210,45,55,0.10); box-shadow: 0 7px 18px rgba(190,45,55,0.09); transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease, background .4s ease, box-shadow .45s ease, border-color .4s ease; } /* RED ICON HOVER */ .elementor-11 .elementor-element.elementor-element-fef7464:hover .elementor-icon { color: #ffffff; background: linear-gradient( 135deg, #c92332, #ed5963 ); border-color: rgba(255,255,255,0.45); transform: translateY(-5px) rotate(-4deg) scale(1.1); box-shadow: 0 14px 28px rgba(201,35,50,0.28), 0 0 25px rgba(235,75,88,0.22); } /* ========================================================= ICON INNER BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464 .elementor-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transition: opacity .4s ease; } .elementor-11 .elementor-element.elementor-element-fef7464:hover .elementor-icon::after { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464 .elementor-heading-title { color: #172b47; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .elementor-11 .elementor-element.elementor-element-fef7464:hover .elementor-heading-title { color: #c92332; transform: translateX(4px); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464 .elementor-widget-text-editor { color: #536579; transition: color .4s ease, transform .4s ease; } .elementor-11 .elementor-element.elementor-element-fef7464:hover .elementor-widget-text-editor { color: #59474a; transform: translateY(-1px); } /* ========================================================= HEADING LIFT ========================================================= */ .elementor-11 .elementor-element.elementor-element-fef7464:hover .elementor-widget-heading { transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-fef7464 { border-radius: 20px; } .elementor-11 .elementor-element.elementor-element-fef7464:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 20px 40px rgba(110,35,40,0.12), 0 10px 20px rgba(205,45,55,0.08); } .elementor-11 .elementor-element.elementor-element-fef7464 .elementor-icon { width: 50px; height: 50px; border-radius: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-fef7464, .elementor-11 .elementor-element.elementor-element-fef7464 *, .elementor-11 .elementor-element.elementor-element-fef7464::before, .elementor-11 .elementor-element.elementor-element-fef7464::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3db11d6 *//* ========================================================= DRISHTIPATH FOUNDATION — CARD 03 PREMIUM EMERALD GREEN VARIANT ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6 { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,255,252,0.97) 50%, rgba(239,251,245,0.96) 100% ); border: 1px solid rgba(20, 150, 91, 0.12); box-shadow: 0 14px 35px rgba(20, 85, 55, 0.08), 0 4px 12px rgba(20, 85, 55, 0.04), inset 0 1px 0 rgba(255,255,255,0.95); transform: translateY(0) scale(1); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease; } /* ========================================================= ANIMATED EMERALD BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(20,150,91,0.08) 80deg, rgba(20,150,91,0.75) 105deg, rgba(65,215,143,1) 125deg, rgba(20,150,91,0.15) 155deg, transparent 190deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; z-index: 20; } .elementor-11 .elementor-element.elementor-element-3db11d6:hover::before { opacity: 1; animation: dpGreenPremiumBorder 2.8s linear infinite; } @keyframes dpGreenPremiumBorder { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SOFT GREEN AURA ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(30,180,105,0.20) 0%, rgba(30,180,105,0.08) 35%, transparent 72% ); filter: blur(12px); opacity: .55; transform: scale(.8); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; pointer-events: none; z-index: -1; } /* ========================================================= MAIN HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6:hover { transform: translateY(-12px) scale(1.018); border-color: rgba(20,150,91,0.32); box-shadow: 0 30px 65px rgba(20,85,55,0.14), 0 15px 30px rgba(20,150,91,0.10), 0 0 45px rgba(30,180,105,0.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-3db11d6:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================================= CONTENT ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6 > * { position: relative; z-index: 5; } /* ========================================================= ICON ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6 .elementor-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; color: #15965b; background: linear-gradient( 145deg, #effbf5, #e0f6ea ); border: 1px solid rgba(20,150,91,0.10); box-shadow: 0 7px 18px rgba(20,140,85,0.09); transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease, background .4s ease, box-shadow .45s ease, border-color .4s ease; } /* ========================================================= GREEN ICON HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6:hover .elementor-icon { color: #ffffff; background: linear-gradient( 135deg, #108951, #28bd79 ); border-color: rgba(255,255,255,0.45); transform: translateY(-5px) rotate(-4deg) scale(1.1); box-shadow: 0 14px 28px rgba(16,137,81,0.28), 0 0 25px rgba(40,189,121,0.22); } /* ========================================================= ICON INNER BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6 .elementor-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transition: opacity .4s ease; } .elementor-11 .elementor-element.elementor-element-3db11d6:hover .elementor-icon::after { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6 .elementor-heading-title { color: #172b47; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .elementor-11 .elementor-element.elementor-element-3db11d6:hover .elementor-heading-title { color: #108951; transform: translateX(4px); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6 .elementor-widget-text-editor { color: #536579; transition: color .4s ease, transform .4s ease; } .elementor-11 .elementor-element.elementor-element-3db11d6:hover .elementor-widget-text-editor { color: #3d5a4b; transform: translateY(-1px); } /* ========================================================= HEADING LIFT ========================================================= */ .elementor-11 .elementor-element.elementor-element-3db11d6:hover .elementor-widget-heading { transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-3db11d6 { border-radius: 20px; } .elementor-11 .elementor-element.elementor-element-3db11d6:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 20px 40px rgba(20,85,55,0.12), 0 10px 20px rgba(20,150,91,0.08); } .elementor-11 .elementor-element.elementor-element-3db11d6 .elementor-icon { width: 50px; height: 50px; border-radius: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-3db11d6, .elementor-11 .elementor-element.elementor-element-3db11d6 *, .elementor-11 .elementor-element.elementor-element-3db11d6::before, .elementor-11 .elementor-element.elementor-element-3db11d6::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-dc1db2a *//* ================================================ DRISHTI PATH — PREMIUM SECONDARY BUTTON Frosted White → Deep Navy / Royal Blue Elementor Style Tab Controlled ================================================ */ /* MAIN BUTTON */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button { position: relative; overflow: hidden; isolation: isolate; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease; } /* SLIDING NAVY / BLUE BACKGROUND */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 115deg, #102B56 0%, #153F79 20%, #1766A7 40%, #258DCC 50%, #1766A7 65%, #153F79 82%, #102B56 100% ); transform: translateX(-102%); transition: transform .65s cubic-bezier(.22,.61,.36,1); z-index: 0; pointer-events: none; } /* PREMIUM WHITE LIGHT SWEEP */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button::after { content: ""; position: absolute; top: -20%; left: -120%; width: 38%; height: 140%; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.04) 25%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.18) 53%, transparent 75% ); transform: skewX(-18deg); z-index: 2; pointer-events: none; opacity: 0; } /* KEEP CONTENT ABOVE ANIMATION */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-content-wrapper { position: relative; z-index: 5; } .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-text { position: relative; z-index: 5; transition: color .35s ease, text-shadow .35s ease; } /* ICON — FONT AWESOME AND SVG */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-icon { position: relative; z-index: 6; display: inline-flex; align-items: center; justify-content: center; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); } .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-icon i, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-icon svg { color: inherit !important; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), filter .35s ease; } .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-icon svg { fill: currentColor; } /* PREMIUM HOVER */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover { transform: translateY(-4px) scale(1.025); border-color: rgba(155,220,255,.95); box-shadow: 0 18px 38px rgba(5,30,75,.30), 0 0 22px rgba(40,145,240,.24), 0 0 42px rgba(60,185,255,.12), inset 0 1px 2px rgba(255,255,255,.35); } /* SLIDE BLUE BACKGROUND IN */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover::before { transform: translateX(0); } /* SLIDE WHITE LIGHT ACROSS */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover::after { left: 145%; opacity: 1; transition: left .85s cubic-bezier(.22,.61,.36,1), opacity .15s ease; } /* HOVER TEXT */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover .elementor-button-text { color: #ffffff !important; } .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover .elementor-button-text { text-shadow: 0 0 8px rgba(220,245,255,.35); } /* HOVER ICON */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover .elementor-button-icon { color: #ffffff !important; transform: translateX(5px); } .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover .elementor-button-icon i, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover .elementor-button-icon svg { color: #ffffff !important; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); } /* CLICK */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:active { transform: translateY(-1px) scale(.975); } /* KEYBOARD FOCUS */ .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:focus-visible { outline: 2px solid #b5e7ff; outline-offset: 4px; } /* MOBILE */ @media (max-width:767px) { .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button:hover { transform: translateY(-2px); } } /* REDUCED MOTION */ @media (prefers-reduced-motion:reduce) { .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button::before, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button::after, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-text, .elementor-11 .elementor-element.elementor-element-dc1db2a .elementor-button-icon { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for divider, class: .elementor-element-6531aaf */.elementor-11 .elementor-element.elementor-element-6531aaf .elementor-divider-separator { border-radius: 999px !important; overflow: hidden; box-sizing: border-box; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6e70d9a *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM RED BUTTON Elementor Button Widget ============================================================ */ /* ------------------------------------------------------------ 1. ELEMENTOR WIDGET WRAPPER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a { position: relative !important; } /* ------------------------------------------------------------ 2. KEEP BUTTON WRAPPER FROM STRETCHING ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ------------------------------------------------------------ 3. MAIN BUTTON ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button { /* positioning */ position: relative !important; isolation: isolate !important; /* IMPORTANT — prevents full-width button */ display: inline-flex !important; width: auto !important; max-width: max-content !important; /* alignment */ align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* premium shape */ border-radius: 13px !important; /* RED PREMIUM SURFACE */ background: linear-gradient( 135deg, #75111f 0%, #9f1729 28%, #c52238 58%, #e04456 82%, #a7192d 100% ) !important; background-size: 180% 180% !important; /* border */ border: 1px solid rgba(255, 155, 165, 0.65) !important; /* text */ color: #ffffff !important; /* premium depth */ box-shadow: 0 10px 25px rgba(115, 15, 30, 0.22), 0 3px 8px rgba(115, 15, 30, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(70,0,10,0.13) !important; /* animation */ transform: translate3d(0,0,0); transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, background-position 0.6s ease, border-color 0.4s ease, filter 0.4s ease !important; /* prevent shine from escaping */ overflow: hidden !important; /* hardware acceleration */ backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------ 4. PREMIUM INNER EDGE ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.12), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ------------------------------------------------------------ 5. MOVING LUXURY LIGHT ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ------------------------------------------------------------ 6. ELEMENTOR CONTENT WRAPPER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 10px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ------------------------------------------------------------ 7. BUTTON TEXT ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ------------------------------------------------------------ 8. ICON CONTAINER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-icon { position: relative !important; z-index: 11 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 30px !important; height: 30px !important; min-width: 30px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #f4f7fa ) !important; color: #a7182d !important; box-shadow: 0 4px 12px rgba(60,0,10,0.20), inset 0 1px 2px rgba(255,255,255,0.9) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ------------------------------------------------------------ 9. ICON — SVG ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-icon svg { display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ------------------------------------------------------------ 10. ICON — FONT AWESOME / I ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ HOVER ============================================================ */ /* ------------------------------------------------------------ 11. BUTTON LIFT ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #921326 0%, #bd1d35 28%, #dd3047 58%, #f25a69 82%, #b51b31 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,190,198,0.9) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(115,15,30,0.30), 0 7px 18px rgba(180,25,45,0.18), 0 0 28px rgba(225,45,65,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ------------------------------------------------------------ 12. BORDER GLOW ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ------------------------------------------------------------ 13. LIGHT SWEEP ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover::after { left: 155% !important; } /* ------------------------------------------------------------ 14. TEXT MOTION ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ------------------------------------------------------------ 15. ICON PREMIUM HOVER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover .elementor-button-icon { transform: translate3d(5px,0,0) scale(1.10) !important; color: #ffffff !important; background: linear-gradient( 145deg, #f45b6b, #b61931 ) !important; box-shadow: 0 7px 18px rgba(90,5,15,0.30), 0 0 18px rgba(255,100,115,0.35), inset 0 1px 0 rgba(255,255,255,0.35) !important; } /* ------------------------------------------------------------ 16. ICON ROTATION ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ------------------------------------------------------------ 17. ICON RING ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.55) !important; } /* ============================================================ CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(115,15,30,0.20) !important; } /* ============================================================ FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(197,34,53,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(125,20,32,0.25) !important; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-content-wrapper { gap: 8px !important; } .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; } .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button, .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button *, .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6e70d9a .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d33dcef *//* ========================================================= DRISHTIPATH FOUNDATION PREMIUM GLASS CARD + ANIMATED BORDER Elementor Container > Advanced > Custom CSS ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; /* Premium glass surface */ background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(248,252,255,0.97) 50%, rgba(239,248,255,0.96) 100% ); /* Transparent border — animated border appears above */ border: 1px solid rgba(9, 125, 193, 0.12); box-shadow: 0 14px 35px rgba(20,70,100,0.08), 0 4px 12px rgba(20,70,100,0.04), inset 0 1px 0 rgba(255,255,255,0.95); transform: translateY(0) scale(1); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease; z-index: 1; } /* ========================================================= ANIMATED PREMIUM BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(15,150,218,0.08) 80deg, rgba(15,150,218,0.75) 105deg, rgba(65,201,244,1) 125deg, rgba(15,150,218,0.15) 155deg, transparent 190deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transform: rotate(0deg); transition: opacity .45s ease; pointer-events: none; z-index: 20; } /* ========================================================= BORDER ANIMATION ON HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef:hover::before { opacity: 1; animation: dpPremiumBorder 2.8s linear infinite; } @keyframes dpPremiumBorder { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SOFT BLUE AURA ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(22,166,225,0.22) 0%, rgba(22,166,225,0.09) 35%, transparent 72% ); filter: blur(12px); opacity: .55; transform: scale(.8); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; pointer-events: none; z-index: -1; } /* ========================================================= MAIN HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef:hover { transform: translateY(-12px) scale(1.018); border-color: rgba(12,145,210,0.32); box-shadow: 0 30px 65px rgba(12,78,119,0.14), 0 15px 30px rgba(8,137,204,0.10), 0 0 45px rgba(20,165,225,0.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-d33dcef:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================================= CONTENT ABOVE EFFECTS ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef > * { position: relative; z-index: 5; } /* ========================================================= ICON BOX ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef .elementor-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; color: #0788ca; background: linear-gradient( 145deg, #f0f9ff, #e2f2ff ); border: 1px solid rgba(8,137,202,0.10); box-shadow: 0 7px 18px rgba(8,125,190,0.09); transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease, background .4s ease, box-shadow .45s ease, border-color .4s ease; } /* ICON HOVER */ .elementor-11 .elementor-element.elementor-element-d33dcef:hover .elementor-icon { color: #ffffff; background: linear-gradient( 135deg, #0679c4, #19b0e8 ); border-color: rgba(255,255,255,0.45); transform: translateY(-5px) rotate(-4deg) scale(1.1); box-shadow: 0 14px 28px rgba(7,125,196,0.28), 0 0 25px rgba(21,176,232,0.22); } /* ========================================================= ICON INNER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef .elementor-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.25); opacity: 0; transition: opacity .4s ease; } .elementor-11 .elementor-element.elementor-element-d33dcef:hover .elementor-icon::after { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef .elementor-heading-title { color: #172b47; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .elementor-11 .elementor-element.elementor-element-d33dcef:hover .elementor-heading-title { color: #0678bd; transform: translateX(4px); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef .elementor-widget-text-editor { color: #536579; transition: color .4s ease; } .elementor-11 .elementor-element.elementor-element-d33dcef:hover .elementor-widget-text-editor { color: #354e67; } /* ========================================================= SUBTLE CONTENT LIFT ========================================================= */ .elementor-11 .elementor-element.elementor-element-d33dcef:hover .elementor-widget-heading { transform: translateY(-1px); } .elementor-11 .elementor-element.elementor-element-d33dcef:hover .elementor-widget-text-editor { transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d33dcef { border-radius: 20px; } .elementor-11 .elementor-element.elementor-element-d33dcef:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 20px 40px rgba(12,78,119,0.12), 0 10px 20px rgba(8,137,204,0.08); } .elementor-11 .elementor-element.elementor-element-d33dcef .elementor-icon { width: 50px; height: 50px; border-radius: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d33dcef, .elementor-11 .elementor-element.elementor-element-d33dcef *, .elementor-11 .elementor-element.elementor-element-d33dcef::before, .elementor-11 .elementor-element.elementor-element-d33dcef::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2e7120e *//* ========================================================= DRISHTIPATH FOUNDATION — CARD 02 PREMIUM RED VARIANT ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(255,250,250,0.97) 50%, rgba(255,242,242,0.96) 100% ); border: 1px solid rgba(210, 45, 55, 0.12); box-shadow: 0 14px 35px rgba(100,35,40,0.08), 0 4px 12px rgba(100,35,40,0.04), inset 0 1px 0 rgba(255,255,255,0.95); transform: translateY(0) scale(1); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease; } /* ========================================================= ANIMATED RED PREMIUM BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(210,45,55,0.08) 80deg, rgba(218,45,55,0.75) 105deg, rgba(255,105,105,1) 125deg, rgba(218,45,55,0.15) 155deg, transparent 190deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; z-index: 20; } .elementor-11 .elementor-element.elementor-element-2e7120e:hover::before { opacity: 1; animation: dpRedPremiumBorder 2.8s linear infinite; } @keyframes dpRedPremiumBorder { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SOFT RED AURA ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(225,55,65,0.20) 0%, rgba(225,55,65,0.08) 35%, transparent 72% ); filter: blur(12px); opacity: .55; transform: scale(.8); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; pointer-events: none; z-index: -1; } /* ========================================================= MAIN HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e:hover { transform: translateY(-12px) scale(1.018); border-color: rgba(210,45,55,0.32); box-shadow: 0 30px 65px rgba(110,35,40,0.14), 0 15px 30px rgba(205,45,55,0.10), 0 0 45px rgba(225,55,65,0.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-2e7120e:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================================= CONTENT ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e > * { position: relative; z-index: 5; } /* ========================================================= ICON ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e .elementor-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; color: #d52f3b; background: linear-gradient( 145deg, #fff1f2, #ffe4e6 ); border: 1px solid rgba(210,45,55,0.10); box-shadow: 0 7px 18px rgba(190,45,55,0.09); transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease, background .4s ease, box-shadow .45s ease, border-color .4s ease; } /* RED ICON HOVER */ .elementor-11 .elementor-element.elementor-element-2e7120e:hover .elementor-icon { color: #ffffff; background: linear-gradient( 135deg, #c92332, #ed5963 ); border-color: rgba(255,255,255,0.45); transform: translateY(-5px) rotate(-4deg) scale(1.1); box-shadow: 0 14px 28px rgba(201,35,50,0.28), 0 0 25px rgba(235,75,88,0.22); } /* ========================================================= ICON INNER BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e .elementor-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transition: opacity .4s ease; } .elementor-11 .elementor-element.elementor-element-2e7120e:hover .elementor-icon::after { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e .elementor-heading-title { color: #172b47; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .elementor-11 .elementor-element.elementor-element-2e7120e:hover .elementor-heading-title { color: #c92332; transform: translateX(4px); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e .elementor-widget-text-editor { color: #536579; transition: color .4s ease, transform .4s ease; } .elementor-11 .elementor-element.elementor-element-2e7120e:hover .elementor-widget-text-editor { color: #59474a; transform: translateY(-1px); } /* ========================================================= HEADING LIFT ========================================================= */ .elementor-11 .elementor-element.elementor-element-2e7120e:hover .elementor-widget-heading { transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-2e7120e { border-radius: 20px; } .elementor-11 .elementor-element.elementor-element-2e7120e:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 20px 40px rgba(110,35,40,0.12), 0 10px 20px rgba(205,45,55,0.08); } .elementor-11 .elementor-element.elementor-element-2e7120e .elementor-icon { width: 50px; height: 50px; border-radius: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-2e7120e, .elementor-11 .elementor-element.elementor-element-2e7120e *, .elementor-11 .elementor-element.elementor-element-2e7120e::before, .elementor-11 .elementor-element.elementor-element-2e7120e::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5340981 *//* ========================================================= DRISHTIPATH FOUNDATION — CARD 03 PREMIUM EMERALD GREEN VARIANT ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981 { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,255,252,0.97) 50%, rgba(239,251,245,0.96) 100% ); border: 1px solid rgba(20, 150, 91, 0.12); box-shadow: 0 14px 35px rgba(20, 85, 55, 0.08), 0 4px 12px rgba(20, 85, 55, 0.04), inset 0 1px 0 rgba(255,255,255,0.95); transform: translateY(0) scale(1); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s cubic-bezier(.22,1,.36,1), border-color .4s ease; } /* ========================================================= ANIMATED EMERALD BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(20,150,91,0.08) 80deg, rgba(20,150,91,0.75) 105deg, rgba(65,215,143,1) 125deg, rgba(20,150,91,0.15) 155deg, transparent 190deg, transparent 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; z-index: 20; } .elementor-11 .elementor-element.elementor-element-5340981:hover::before { opacity: 1; animation: dpGreenPremiumBorder 2.8s linear infinite; } @keyframes dpGreenPremiumBorder { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= SOFT GREEN AURA ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981::after { content: ""; position: absolute; width: 280px; height: 280px; top: -170px; right: -150px; border-radius: 50%; background: radial-gradient( circle, rgba(30,180,105,0.20) 0%, rgba(30,180,105,0.08) 35%, transparent 72% ); filter: blur(12px); opacity: .55; transform: scale(.8); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s ease; pointer-events: none; z-index: -1; } /* ========================================================= MAIN HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981:hover { transform: translateY(-12px) scale(1.018); border-color: rgba(20,150,91,0.32); box-shadow: 0 30px 65px rgba(20,85,55,0.14), 0 15px 30px rgba(20,150,91,0.10), 0 0 45px rgba(30,180,105,0.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-5340981:hover::after { transform: scale(1.5); opacity: 1; } /* ========================================================= CONTENT ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981 > * { position: relative; z-index: 5; } /* ========================================================= ICON ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981 .elementor-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; color: #15965b; background: linear-gradient( 145deg, #effbf5, #e0f6ea ); border: 1px solid rgba(20,150,91,0.10); box-shadow: 0 7px 18px rgba(20,140,85,0.09); transition: transform .55s cubic-bezier(.22,1,.36,1), color .4s ease, background .4s ease, box-shadow .45s ease, border-color .4s ease; } /* ========================================================= GREEN ICON HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981:hover .elementor-icon { color: #ffffff; background: linear-gradient( 135deg, #108951, #28bd79 ); border-color: rgba(255,255,255,0.45); transform: translateY(-5px) rotate(-4deg) scale(1.1); box-shadow: 0 14px 28px rgba(16,137,81,0.28), 0 0 25px rgba(40,189,121,0.22); } /* ========================================================= ICON INNER BORDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981 .elementor-icon::after { content: ""; position: absolute; inset: 2px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.28); opacity: 0; transition: opacity .4s ease; } .elementor-11 .elementor-element.elementor-element-5340981:hover .elementor-icon::after { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981 .elementor-heading-title { color: #172b47; transition: color .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .elementor-11 .elementor-element.elementor-element-5340981:hover .elementor-heading-title { color: #108951; transform: translateX(4px); } /* ========================================================= DESCRIPTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981 .elementor-widget-text-editor { color: #536579; transition: color .4s ease, transform .4s ease; } .elementor-11 .elementor-element.elementor-element-5340981:hover .elementor-widget-text-editor { color: #3d5a4b; transform: translateY(-1px); } /* ========================================================= HEADING LIFT ========================================================= */ .elementor-11 .elementor-element.elementor-element-5340981:hover .elementor-widget-heading { transform: translateY(-1px); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5340981 { border-radius: 20px; } .elementor-11 .elementor-element.elementor-element-5340981:hover { transform: translateY(-6px) scale(1.008); box-shadow: 0 20px 40px rgba(20,85,55,0.12), 0 10px 20px rgba(20,150,91,0.08); } .elementor-11 .elementor-element.elementor-element-5340981 .elementor-icon { width: 50px; height: 50px; border-radius: 13px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5340981, .elementor-11 .elementor-element.elementor-element-5340981 *, .elementor-11 .elementor-element.elementor-element-5340981::before, .elementor-11 .elementor-element.elementor-element-5340981::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ca7232f *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button, .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button *, .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button::before, .elementor-11 .elementor-element.elementor-element-ca7232f .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-59eee8d *//* ========================================================= DRISHTIPATH ADVANCED EYE CARE — PREMIUM LUMINOUS LABEL Light Background / Emerald Medical Luxury ========================================================= */ /* ========================================================= 01 — WIDGET ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d { position: relative !important; display: inline-block !important; /* Premium ambient aura */ filter: drop-shadow( 0 8px 18px rgba(20, 150, 82, 0.10) ); } /* ========================================================= 02 — MAIN BUTTON ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 200px; height: 44px; padding: 0 20px !important; gap: 9px; border-radius: 999px !important; /* Elegant medical glass surface */ background: linear-gradient( 135deg, #ffffff 0%, #f3fff7 35%, #dffff0 68%, #effff5 100% ) !important; color: #075b32 !important; border: 1px solid rgba(57, 190, 112, 0.48) !important; box-shadow: /* external depth */ 0 7px 20px rgba(12, 110, 62, 0.10), /* soft green aura */ 0 0 20px rgba(48, 211, 113, 0.10), /* glass highlight */ inset 0 1px 0 rgba(255,255,255,0.98), /* lower glass edge */ inset 0 -1px 0 rgba(31, 150, 82, 0.08); overflow: hidden !important; isolation: isolate !important; transform: translateZ(0); animation: dpCareGlow 5s ease-in-out infinite; transition: box-shadow .45s ease, border-color .45s ease; } /* ========================================================= 03 — PREMIUM INNER GLASS EDGE ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid rgba(255,255,255,0.90); background: linear-gradient( 120deg, rgba(255,255,255,0.42), transparent 32%, transparent 68%, rgba(255,255,255,0.20) ); pointer-events: none; z-index: 1; opacity: .9; } /* ========================================================= 04 — SLOW PREMIUM LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button::after { content: ""; position: absolute; top: -100%; left: -140%; width: 38%; height: 300%; background: linear-gradient( 105deg, transparent 0%, transparent 38%, rgba(255,255,255,0.12) 45%, rgba(255,255,255,0.78) 50%, rgba(255,255,255,0.12) 55%, transparent 62%, transparent 100% ); transform: skewX(-22deg); pointer-events: none; z-index: 5; animation: dpCareShine 6.5s ease-in-out infinite; } /* ========================================================= 05 — CONTENT WRAPPER ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-content-wrapper { position: relative; z-index: 10; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* ========================================================= 06 — TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-text { position: relative; z-index: 10; display: inline-flex; align-items: center; color: #075b32 !important; font-size: 14px; font-weight: 700; letter-spacing: .45px; line-height: 1.1; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.8); } /* ========================================================= 07 — PREMIUM ICON BADGE THIS FIXES THE WHITE ICON PROBLEM ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon { position: relative !important; z-index: 12 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 27px !important; height: 27px !important; min-width: 27px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Deep emerald badge */ background: linear-gradient( 145deg, #159b50, #087238 ) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.72) !important; box-shadow: 0 3px 9px rgba(7, 104, 52, 0.22), 0 0 0 3px rgba(36, 185, 94, 0.08), inset 0 1px 1px rgba(255,255,255,0.38), inset 0 -2px 4px rgba(0,70,30,0.12); line-height: 1 !important; transition: box-shadow .4s ease, transform .4s ease; } /* ========================================================= 08 — ICON SVG ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon svg { display: block !important; width: 14px !important; height: 14px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; fill: none !important; stroke: #ffffff !important; stroke-width: 2 !important; filter: drop-shadow( 0 1px 1px rgba(0,0,0,.12) ); transition: transform .45s cubic-bezier(.22,1,.36,1); } /* ========================================================= 09 — FONT ICON SUPPORT ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; height: 100%; color: #ffffff !important; font-size: 13px; line-height: 1; } /* ========================================================= 10 — ICON OUTER HALO ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(21,155,80,0.18); box-shadow: 0 0 8px rgba(36,185,94,0.10); pointer-events: none; animation: dpIconHalo 3.5s ease-in-out infinite; } /* ========================================================= 11 — ICON INNER HIGHLIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon::after { content: ""; position: absolute; width: 7px; height: 4px; top: 4px; left: 6px; border-radius: 99px; background: rgba(255,255,255,0.38); filter: blur(.4px); pointer-events: none; } /* ========================================================= 12 — VERY SUBTLE HOVER NO MOVEMENT OF THE LABEL ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button:hover { transform: none !important; border-color: rgba(31, 170, 91, 0.62) !important; box-shadow: 0 9px 24px rgba(12,110,62,0.12), 0 0 25px rgba(48,211,113,0.13), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(31,150,82,0.08); } /* ========================================================= 13 — ICON HOVER SUBTLE PREMIUM RESPONSE ========================================================= */ .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button:hover .elementor-button-icon { transform: scale(1.07); box-shadow: 0 4px 12px rgba(7,104,52,0.25), 0 0 0 4px rgba(36,185,94,0.10), 0 0 16px rgba(36,185,94,0.18), inset 0 1px 1px rgba(255,255,255,0.45); } .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button:hover .elementor-button-icon svg { transform: scale(1.08); } /* ========================================================= 14 — SLOW LUMINOUS BREATHING ========================================================= */ @keyframes dpCareGlow { 0%, 100% { box-shadow: 0 7px 20px rgba(12,110,62,0.09), 0 0 18px rgba(48,211,113,0.08), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -1px 0 rgba(31,150,82,0.07); } 50% { box-shadow: 0 8px 23px rgba(12,110,62,0.12), 0 0 27px rgba(48,211,113,0.14), 0 0 42px rgba(48,211,113,0.05), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(31,150,82,0.06); } } /* ========================================================= 15 — LIGHT SWEEP ANIMATION ========================================================= */ @keyframes dpCareShine { 0% { left: -140%; } 18% { left: 150%; } 100% { left: 150%; } } /* ========================================================= 16 — ICON HALO ========================================================= */ @keyframes dpIconHalo { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.05); opacity: 1; } } /* ========================================================= 17 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button { min-width: 160px; height: 40px; padding: 0 17px !important; } .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-text { font-size: 13px; letter-spacing: .3px; } .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon { width: 25px !important; height: 25px !important; min-width: 25px !important; } .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon svg { width: 13px !important; height: 13px !important; } } /* ========================================================= 18 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button, .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button::after, .elementor-11 .elementor-element.elementor-element-59eee8d .elementor-button-icon::before { animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-986d817 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button, .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button *, .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-986d817 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-30cf00c *//* ============================================================ DRISHTIPATH PREMIUM SECONDARY BUTTON Elementor Button Widget • Medical Blue / Glass White • Icon Right • 14px Typography • Premium Border • Elegant Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN SECONDARY BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; min-height: 46px !important; padding: 9px 16px !important; border-radius: 13px !important; /* ======================================================== PREMIUM LIGHT BLUE / WHITE SURFACE ======================================================== */ background: linear-gradient( 135deg, #ffffff 0%, #f5fbff 42%, #eaf7ff 72%, #ffffff 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BLUE PREMIUM BORDER ======================================================== */ border: 1px solid rgba(8,120,201,0.38) !important; /* ======================================================== TEXT ======================================================== */ color: #075b99 !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 8px 22px rgba(8,120,201,0.10), 0 2px 7px rgba(8,120,201,0.06), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -5px 14px rgba(8,120,201,0.035) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, color .35s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER BORDER ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.90) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.65), transparent 40%, rgba(8,120,201,0.025) ) !important; pointer-events: none !important; z-index: 1 !important; transition: border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 45% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0.12) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #075b99 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, letter-spacing .4s ease !important; } /* ============================================================ 8. ICON — RIGHT SIDE ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* ======================================================== BLUE ICON BADGE ======================================================== */ background: linear-gradient( 145deg, #eaf7ff, #d9efff ) !important; color: #0878c9 !important; border: 1px solid rgba(8,120,201,0.15) !important; box-shadow: 0 4px 11px rgba(8,120,201,0.13), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(8,120,201,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #0878c9 0%, #0789d4 35%, #25a3e6 65%, #0874bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(125,215,255,0.95) !important; color: #ffffff !important; filter: brightness(1.03) !important; box-shadow: 0 20px 42px rgba(8,120,201,0.26), 0 7px 18px rgba(8,120,201,0.16), 0 0 28px rgba(30,165,230,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover::before { border-color: rgba(255,255,255,0.55) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.08); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover .elementor-button-text { color: #ffffff !important; transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #0878c9 !important; background: linear-gradient( 145deg, #ffffff, #eaf8ff ) !important; border-color: rgba(255,255,255,0.75) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.20), 0 0 16px rgba(80,195,245,0.28), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(8,120,201,0.40) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(8,120,201,0.18) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.16), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(8,120,201,0.22) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button { max-width: 100% !important; min-height: 44px !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button, .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button *, .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-30cf00c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a6d360 *//* ========================================================= DRISHTIPATH — PREMIUM EYE SERVICE CARD Apply this CSS to the OUTER CARD CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 { /* ------------------------- CARD VARIABLES ------------------------- */ --card-radius: 20px; --card-border: rgba(45, 128, 205, 0.22); --card-blue: #0878c9; --card-cyan: #36bdf5; --card-green: #079653; --card-shadow: 0 10px 30px rgba(12, 43, 72, 0.08), 0 25px 60px rgba(12, 77, 125, 0.08); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); border: 1px solid var(--card-border); background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,253,255,0.98) 55%, rgba(241,249,253,0.98) 100% ); box-shadow: var(--card-shadow); transform: translate3d(0, 0, 0); transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.65s cubic-bezier(.16,1,.3,1), border-color 0.5s ease; /* Allows the card to breathe */ will-change: transform; } /* ========================================================= PREMIUM OUTER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: linear-gradient( 135deg, rgba(8,120,201,0.00) 0%, rgba(8,120,201,0.20) 28%, rgba(53,189,245,0.35) 50%, rgba(7,150,83,0.18) 72%, rgba(8,120,201,0.00) 100% ); opacity: 0.35; filter: blur(10px); transform: scale(0.97); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1); } /* ========================================================= INNER GLASS LAYER ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--card-radius) - 1px); background: linear-gradient( 145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18) ); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360:hover { transform: translate3d(0, -10px, 0); border-color: rgba(24, 145, 219, 0.48); box-shadow: 0 18px 40px rgba(12, 55, 90, 0.13), 0 35px 80px rgba(8, 112, 178, 0.13), 0 0 0 1px rgba(71, 190, 241, 0.08); } .elementor-11 .elementor-element.elementor-element-4a6d360:hover::before { opacity: 0.85; transform: scale(1.015); } /* ========================================================= TOP PREMIUM LIGHT LINE ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-4a6d360 > .elementor-element-populated::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(54,189,245,0.85), rgba(7,150,83,0.75), rgba(54,189,245,0.85), transparent ); opacity: 0.45; transform: scaleX(0.65); transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-4a6d360:hover > .elementor-element-populated::before { transform: scaleX(1); opacity: 1; } /* ========================================================= IMAGE AREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; transform: translateZ(0); } /* Image itself */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-image img { display: block; width: 100%; transform: scale(1) translate3d(0,0,0); filter: saturate(1) contrast(1); transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.7s ease; } /* Premium image zoom */ .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-image img { transform: scale(1.055) translate3d(0,-2px,0); filter: saturate(1.08) contrast(1.025); } /* ========================================================= IMAGE LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-image::after { content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.48), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: left 0.9s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-image::after { left: 140%; opacity: 1; } /* ========================================================= IMAGE BOTTOM DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to top, rgba(3,35,60,0.14), transparent ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-image::before { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-heading { transform: translate3d(0,-2px,0); } /* Heading underline accent */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading .elementor-heading-title { position: relative; display: inline-block; } /* Tiny premium accent underneath heading */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--card-blue), var(--card-cyan), var(--card-green) ); transform: translateX(-50%); opacity: 0; transition: width 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-heading .elementor-heading-title::after { width: 42px; opacity: 1; } /* ========================================================= DESCRIPTION / TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-text-editor { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-text-editor { transform: translate3d(0,-1px,0); } /* ========================================================= CONTENT DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-text-editor { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } /* ========================================================= BUTTON CONTAINER IMPORTANT: We DO NOT STYLE THE BUTTONS THEMSELVES. ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-button { position: relative; z-index: 5; } /* Give the button row a little premium separation */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-element:has(.elementor-widget-button) { transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-element:has(.elementor-widget-button) { transform: translate3d(0,-2px,0); } /* ========================================================= FLOATING AMBIENT LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 { background-image: radial-gradient( circle at 10% 92%, rgba(8,120,201,0.055), transparent 34% ), radial-gradient( circle at 92% 8%, rgba(7,150,83,0.045), transparent 32% ); } /* ========================================================= PREMIUM CORNER LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 > .e-con-inner { position: relative; } /* Small glowing corner detail */ .elementor-11 .elementor-element.elementor-element-4a6d360 > .e-con-inner::after { content: ""; position: absolute; right: 15px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: rgba(54,189,245,0.55); box-shadow: 0 0 0 4px rgba(54,189,245,0.07), 0 0 14px rgba(54,189,245,0.28); opacity: 0.35; transition: opacity 0.5s ease, transform 0.5s ease; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover > .e-con-inner::after { opacity: 1; transform: scale(1.35); } /* ========================================================= CARD CONTENT MICRO-MOTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-image, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-button { backface-visibility: hidden; } /* ========================================================= SUBTLE HOVER SHINE ACROSS ENTIRE CARD ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-container { position: relative; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-4a6d360 { border-radius: 17px; transform: none; box-shadow: 0 8px 25px rgba(12,43,72,0.08); } .elementor-11 .elementor-element.elementor-element-4a6d360:hover { transform: translate3d(0,-5px,0); box-shadow: 0 15px 35px rgba(12,55,90,0.12), 0 25px 50px rgba(8,112,178,0.08); } .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-image img { transform: scale(1); } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-image img { transform: scale(1.035); } .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading .elementor-heading-title::after { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-11 .elementor-element.elementor-element-4a6d360:hover { transform: translate3d(0,-7px,0); } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-image img { transform: scale(1.045); } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-4a6d360, .elementor-11 .elementor-element.elementor-element-4a6d360::before, .elementor-11 .elementor-element.elementor-element-4a6d360::after, .elementor-11 .elementor-element.elementor-element-4a6d360 img, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-4a6d360 .elementor-widget-button { transition: none !important; animation: none !important; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-4a6d360:hover .elementor-widget-image img { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-3772463 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button, .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button *, .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-3772463 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4d39e93 *//* ============================================================ DRISHTIPATH PREMIUM SECONDARY BUTTON Elementor Button Widget • Medical Blue / Glass White • Icon Right • 14px Typography • Premium Border • Elegant Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN SECONDARY BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; min-height: 46px !important; padding: 9px 16px !important; border-radius: 13px !important; /* ======================================================== PREMIUM LIGHT BLUE / WHITE SURFACE ======================================================== */ background: linear-gradient( 135deg, #ffffff 0%, #f5fbff 42%, #eaf7ff 72%, #ffffff 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BLUE PREMIUM BORDER ======================================================== */ border: 1px solid rgba(8,120,201,0.38) !important; /* ======================================================== TEXT ======================================================== */ color: #075b99 !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 8px 22px rgba(8,120,201,0.10), 0 2px 7px rgba(8,120,201,0.06), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -5px 14px rgba(8,120,201,0.035) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, color .35s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER BORDER ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.90) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.65), transparent 40%, rgba(8,120,201,0.025) ) !important; pointer-events: none !important; z-index: 1 !important; transition: border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 45% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0.12) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #075b99 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, letter-spacing .4s ease !important; } /* ============================================================ 8. ICON — RIGHT SIDE ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* ======================================================== BLUE ICON BADGE ======================================================== */ background: linear-gradient( 145deg, #eaf7ff, #d9efff ) !important; color: #0878c9 !important; border: 1px solid rgba(8,120,201,0.15) !important; box-shadow: 0 4px 11px rgba(8,120,201,0.13), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(8,120,201,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #0878c9 0%, #0789d4 35%, #25a3e6 65%, #0874bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(125,215,255,0.95) !important; color: #ffffff !important; filter: brightness(1.03) !important; box-shadow: 0 20px 42px rgba(8,120,201,0.26), 0 7px 18px rgba(8,120,201,0.16), 0 0 28px rgba(30,165,230,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover::before { border-color: rgba(255,255,255,0.55) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.08); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover .elementor-button-text { color: #ffffff !important; transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #0878c9 !important; background: linear-gradient( 145deg, #ffffff, #eaf8ff ) !important; border-color: rgba(255,255,255,0.75) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.20), 0 0 16px rgba(80,195,245,0.28), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(8,120,201,0.40) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(8,120,201,0.18) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.16), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(8,120,201,0.22) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button { max-width: 100% !important; min-height: 44px !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button, .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button *, .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-4d39e93 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a0b359 *//* ========================================================= DRISHTIPATH — PREMIUM EYE SERVICE CARD Apply this CSS to the OUTER CARD CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 { /* ------------------------- CARD VARIABLES ------------------------- */ --card-radius: 20px; --card-border: rgba(45, 128, 205, 0.22); --card-blue: #0878c9; --card-cyan: #36bdf5; --card-green: #079653; --card-shadow: 0 10px 30px rgba(12, 43, 72, 0.08), 0 25px 60px rgba(12, 77, 125, 0.08); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); border: 1px solid var(--card-border); background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,253,255,0.98) 55%, rgba(241,249,253,0.98) 100% ); box-shadow: var(--card-shadow); transform: translate3d(0, 0, 0); transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.65s cubic-bezier(.16,1,.3,1), border-color 0.5s ease; /* Allows the card to breathe */ will-change: transform; } /* ========================================================= PREMIUM OUTER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: linear-gradient( 135deg, rgba(8,120,201,0.00) 0%, rgba(8,120,201,0.20) 28%, rgba(53,189,245,0.35) 50%, rgba(7,150,83,0.18) 72%, rgba(8,120,201,0.00) 100% ); opacity: 0.35; filter: blur(10px); transform: scale(0.97); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1); } /* ========================================================= INNER GLASS LAYER ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--card-radius) - 1px); background: linear-gradient( 145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18) ); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359:hover { transform: translate3d(0, -10px, 0); border-color: rgba(24, 145, 219, 0.48); box-shadow: 0 18px 40px rgba(12, 55, 90, 0.13), 0 35px 80px rgba(8, 112, 178, 0.13), 0 0 0 1px rgba(71, 190, 241, 0.08); } .elementor-11 .elementor-element.elementor-element-4a0b359:hover::before { opacity: 0.85; transform: scale(1.015); } /* ========================================================= TOP PREMIUM LIGHT LINE ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-4a0b359 > .elementor-element-populated::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(54,189,245,0.85), rgba(7,150,83,0.75), rgba(54,189,245,0.85), transparent ); opacity: 0.45; transform: scaleX(0.65); transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-4a0b359:hover > .elementor-element-populated::before { transform: scaleX(1); opacity: 1; } /* ========================================================= IMAGE AREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; transform: translateZ(0); } /* Image itself */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-image img { display: block; width: 100%; transform: scale(1) translate3d(0,0,0); filter: saturate(1) contrast(1); transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.7s ease; } /* Premium image zoom */ .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-image img { transform: scale(1.055) translate3d(0,-2px,0); filter: saturate(1.08) contrast(1.025); } /* ========================================================= IMAGE LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-image::after { content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.48), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: left 0.9s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-image::after { left: 140%; opacity: 1; } /* ========================================================= IMAGE BOTTOM DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to top, rgba(3,35,60,0.14), transparent ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-image::before { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-heading { transform: translate3d(0,-2px,0); } /* Heading underline accent */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading .elementor-heading-title { position: relative; display: inline-block; } /* Tiny premium accent underneath heading */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--card-blue), var(--card-cyan), var(--card-green) ); transform: translateX(-50%); opacity: 0; transition: width 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-heading .elementor-heading-title::after { width: 42px; opacity: 1; } /* ========================================================= DESCRIPTION / TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-text-editor { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-text-editor { transform: translate3d(0,-1px,0); } /* ========================================================= CONTENT DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-text-editor { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } /* ========================================================= BUTTON CONTAINER IMPORTANT: We DO NOT STYLE THE BUTTONS THEMSELVES. ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-button { position: relative; z-index: 5; } /* Give the button row a little premium separation */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-element:has(.elementor-widget-button) { transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-element:has(.elementor-widget-button) { transform: translate3d(0,-2px,0); } /* ========================================================= FLOATING AMBIENT LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 { background-image: radial-gradient( circle at 10% 92%, rgba(8,120,201,0.055), transparent 34% ), radial-gradient( circle at 92% 8%, rgba(7,150,83,0.045), transparent 32% ); } /* ========================================================= PREMIUM CORNER LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 > .e-con-inner { position: relative; } /* Small glowing corner detail */ .elementor-11 .elementor-element.elementor-element-4a0b359 > .e-con-inner::after { content: ""; position: absolute; right: 15px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: rgba(54,189,245,0.55); box-shadow: 0 0 0 4px rgba(54,189,245,0.07), 0 0 14px rgba(54,189,245,0.28); opacity: 0.35; transition: opacity 0.5s ease, transform 0.5s ease; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover > .e-con-inner::after { opacity: 1; transform: scale(1.35); } /* ========================================================= CARD CONTENT MICRO-MOTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-image, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-button { backface-visibility: hidden; } /* ========================================================= SUBTLE HOVER SHINE ACROSS ENTIRE CARD ========================================================= */ .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-container { position: relative; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-4a0b359 { border-radius: 17px; transform: none; box-shadow: 0 8px 25px rgba(12,43,72,0.08); } .elementor-11 .elementor-element.elementor-element-4a0b359:hover { transform: translate3d(0,-5px,0); box-shadow: 0 15px 35px rgba(12,55,90,0.12), 0 25px 50px rgba(8,112,178,0.08); } .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-image img { transform: scale(1); } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-image img { transform: scale(1.035); } .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading .elementor-heading-title::after { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-11 .elementor-element.elementor-element-4a0b359:hover { transform: translate3d(0,-7px,0); } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-image img { transform: scale(1.045); } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-4a0b359, .elementor-11 .elementor-element.elementor-element-4a0b359::before, .elementor-11 .elementor-element.elementor-element-4a0b359::after, .elementor-11 .elementor-element.elementor-element-4a0b359 img, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-4a0b359 .elementor-widget-button { transition: none !important; animation: none !important; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-4a0b359:hover .elementor-widget-image img { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-49b31a2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button, .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-49b31a2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-b4cb5d7 *//* ============================================================ DRISHTIPATH PREMIUM SECONDARY BUTTON Elementor Button Widget • Medical Blue / Glass White • Icon Right • 14px Typography • Premium Border • Elegant Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN SECONDARY BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; min-height: 46px !important; padding: 9px 16px !important; border-radius: 13px !important; /* ======================================================== PREMIUM LIGHT BLUE / WHITE SURFACE ======================================================== */ background: linear-gradient( 135deg, #ffffff 0%, #f5fbff 42%, #eaf7ff 72%, #ffffff 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BLUE PREMIUM BORDER ======================================================== */ border: 1px solid rgba(8,120,201,0.38) !important; /* ======================================================== TEXT ======================================================== */ color: #075b99 !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 8px 22px rgba(8,120,201,0.10), 0 2px 7px rgba(8,120,201,0.06), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -5px 14px rgba(8,120,201,0.035) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, color .35s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER BORDER ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.90) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.65), transparent 40%, rgba(8,120,201,0.025) ) !important; pointer-events: none !important; z-index: 1 !important; transition: border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 45% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0.12) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #075b99 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, letter-spacing .4s ease !important; } /* ============================================================ 8. ICON — RIGHT SIDE ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* ======================================================== BLUE ICON BADGE ======================================================== */ background: linear-gradient( 145deg, #eaf7ff, #d9efff ) !important; color: #0878c9 !important; border: 1px solid rgba(8,120,201,0.15) !important; box-shadow: 0 4px 11px rgba(8,120,201,0.13), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(8,120,201,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #0878c9 0%, #0789d4 35%, #25a3e6 65%, #0874bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(125,215,255,0.95) !important; color: #ffffff !important; filter: brightness(1.03) !important; box-shadow: 0 20px 42px rgba(8,120,201,0.26), 0 7px 18px rgba(8,120,201,0.16), 0 0 28px rgba(30,165,230,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover::before { border-color: rgba(255,255,255,0.55) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.08); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover .elementor-button-text { color: #ffffff !important; transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #0878c9 !important; background: linear-gradient( 145deg, #ffffff, #eaf8ff ) !important; border-color: rgba(255,255,255,0.75) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.20), 0 0 16px rgba(80,195,245,0.28), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(8,120,201,0.40) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(8,120,201,0.18) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.16), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(8,120,201,0.22) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button { max-width: 100% !important; min-height: 44px !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button, .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button *, .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-b4cb5d7 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6d3cc1f *//* ========================================================= DRISHTIPATH — PREMIUM EYE SERVICE CARD Apply this CSS to the OUTER CARD CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f { /* ------------------------- CARD VARIABLES ------------------------- */ --card-radius: 20px; --card-border: rgba(45, 128, 205, 0.22); --card-blue: #0878c9; --card-cyan: #36bdf5; --card-green: #079653; --card-shadow: 0 10px 30px rgba(12, 43, 72, 0.08), 0 25px 60px rgba(12, 77, 125, 0.08); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); border: 1px solid var(--card-border); background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,253,255,0.98) 55%, rgba(241,249,253,0.98) 100% ); box-shadow: var(--card-shadow); transform: translate3d(0, 0, 0); transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.65s cubic-bezier(.16,1,.3,1), border-color 0.5s ease; /* Allows the card to breathe */ will-change: transform; } /* ========================================================= PREMIUM OUTER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: linear-gradient( 135deg, rgba(8,120,201,0.00) 0%, rgba(8,120,201,0.20) 28%, rgba(53,189,245,0.35) 50%, rgba(7,150,83,0.18) 72%, rgba(8,120,201,0.00) 100% ); opacity: 0.35; filter: blur(10px); transform: scale(0.97); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1); } /* ========================================================= INNER GLASS LAYER ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--card-radius) - 1px); background: linear-gradient( 145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18) ); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover { transform: translate3d(0, -10px, 0); border-color: rgba(24, 145, 219, 0.48); box-shadow: 0 18px 40px rgba(12, 55, 90, 0.13), 0 35px 80px rgba(8, 112, 178, 0.13), 0 0 0 1px rgba(71, 190, 241, 0.08); } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover::before { opacity: 0.85; transform: scale(1.015); } /* ========================================================= TOP PREMIUM LIGHT LINE ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-6d3cc1f > .elementor-element-populated::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(54,189,245,0.85), rgba(7,150,83,0.75), rgba(54,189,245,0.85), transparent ); opacity: 0.45; transform: scaleX(0.65); transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover > .elementor-element-populated::before { transform: scaleX(1); opacity: 1; } /* ========================================================= IMAGE AREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; transform: translateZ(0); } /* Image itself */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-image img { display: block; width: 100%; transform: scale(1) translate3d(0,0,0); filter: saturate(1) contrast(1); transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.7s ease; } /* Premium image zoom */ .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-image img { transform: scale(1.055) translate3d(0,-2px,0); filter: saturate(1.08) contrast(1.025); } /* ========================================================= IMAGE LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-image::after { content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.48), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: left 0.9s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-image::after { left: 140%; opacity: 1; } /* ========================================================= IMAGE BOTTOM DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to top, rgba(3,35,60,0.14), transparent ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-image::before { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-heading { transform: translate3d(0,-2px,0); } /* Heading underline accent */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading .elementor-heading-title { position: relative; display: inline-block; } /* Tiny premium accent underneath heading */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--card-blue), var(--card-cyan), var(--card-green) ); transform: translateX(-50%); opacity: 0; transition: width 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-heading .elementor-heading-title::after { width: 42px; opacity: 1; } /* ========================================================= DESCRIPTION / TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-text-editor { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-text-editor { transform: translate3d(0,-1px,0); } /* ========================================================= CONTENT DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-text-editor { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } /* ========================================================= BUTTON CONTAINER IMPORTANT: We DO NOT STYLE THE BUTTONS THEMSELVES. ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-button { position: relative; z-index: 5; } /* Give the button row a little premium separation */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-element:has(.elementor-widget-button) { transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-element:has(.elementor-widget-button) { transform: translate3d(0,-2px,0); } /* ========================================================= FLOATING AMBIENT LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f { background-image: radial-gradient( circle at 10% 92%, rgba(8,120,201,0.055), transparent 34% ), radial-gradient( circle at 92% 8%, rgba(7,150,83,0.045), transparent 32% ); } /* ========================================================= PREMIUM CORNER LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f > .e-con-inner { position: relative; } /* Small glowing corner detail */ .elementor-11 .elementor-element.elementor-element-6d3cc1f > .e-con-inner::after { content: ""; position: absolute; right: 15px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: rgba(54,189,245,0.55); box-shadow: 0 0 0 4px rgba(54,189,245,0.07), 0 0 14px rgba(54,189,245,0.28); opacity: 0.35; transition: opacity 0.5s ease, transform 0.5s ease; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover > .e-con-inner::after { opacity: 1; transform: scale(1.35); } /* ========================================================= CARD CONTENT MICRO-MOTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-image, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-button { backface-visibility: hidden; } /* ========================================================= SUBTLE HOVER SHINE ACROSS ENTIRE CARD ========================================================= */ .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-container { position: relative; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6d3cc1f { border-radius: 17px; transform: none; box-shadow: 0 8px 25px rgba(12,43,72,0.08); } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover { transform: translate3d(0,-5px,0); box-shadow: 0 15px 35px rgba(12,55,90,0.12), 0 25px 50px rgba(8,112,178,0.08); } .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-image img { transform: scale(1); } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-image img { transform: scale(1.035); } .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading .elementor-heading-title::after { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover { transform: translate3d(0,-7px,0); } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-image img { transform: scale(1.045); } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6d3cc1f, .elementor-11 .elementor-element.elementor-element-6d3cc1f::before, .elementor-11 .elementor-element.elementor-element-6d3cc1f::after, .elementor-11 .elementor-element.elementor-element-6d3cc1f img, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-6d3cc1f .elementor-widget-button { transition: none !important; animation: none !important; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-6d3cc1f:hover .elementor-widget-image img { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6c68891 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button, .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button *, .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6c68891 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-02a35e1 *//* ============================================================ DRISHTIPATH PREMIUM SECONDARY BUTTON Elementor Button Widget • Medical Blue / Glass White • Icon Right • 14px Typography • Premium Border • Elegant Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN SECONDARY BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; min-height: 46px !important; padding: 9px 16px !important; border-radius: 13px !important; /* ======================================================== PREMIUM LIGHT BLUE / WHITE SURFACE ======================================================== */ background: linear-gradient( 135deg, #ffffff 0%, #f5fbff 42%, #eaf7ff 72%, #ffffff 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BLUE PREMIUM BORDER ======================================================== */ border: 1px solid rgba(8,120,201,0.38) !important; /* ======================================================== TEXT ======================================================== */ color: #075b99 !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 8px 22px rgba(8,120,201,0.10), 0 2px 7px rgba(8,120,201,0.06), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -5px 14px rgba(8,120,201,0.035) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, color .35s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER BORDER ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.90) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.65), transparent 40%, rgba(8,120,201,0.025) ) !important; pointer-events: none !important; z-index: 1 !important; transition: border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 45% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0.12) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #075b99 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, letter-spacing .4s ease !important; } /* ============================================================ 8. ICON — RIGHT SIDE ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* ======================================================== BLUE ICON BADGE ======================================================== */ background: linear-gradient( 145deg, #eaf7ff, #d9efff ) !important; color: #0878c9 !important; border: 1px solid rgba(8,120,201,0.15) !important; box-shadow: 0 4px 11px rgba(8,120,201,0.13), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(8,120,201,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #0878c9 0%, #0789d4 35%, #25a3e6 65%, #0874bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(125,215,255,0.95) !important; color: #ffffff !important; filter: brightness(1.03) !important; box-shadow: 0 20px 42px rgba(8,120,201,0.26), 0 7px 18px rgba(8,120,201,0.16), 0 0 28px rgba(30,165,230,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.55) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.08); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover .elementor-button-text { color: #ffffff !important; transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #0878c9 !important; background: linear-gradient( 145deg, #ffffff, #eaf8ff ) !important; border-color: rgba(255,255,255,0.75) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.20), 0 0 16px rgba(80,195,245,0.28), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(8,120,201,0.40) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(8,120,201,0.18) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.16), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(8,120,201,0.22) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button { max-width: 100% !important; min-height: 44px !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button, .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-02a35e1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6b81d25 *//* ========================================================= DRISHTIPATH — PREMIUM EYE SERVICE CARD Apply this CSS to the OUTER CARD CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 { /* ------------------------- CARD VARIABLES ------------------------- */ --card-radius: 20px; --card-border: rgba(45, 128, 205, 0.22); --card-blue: #0878c9; --card-cyan: #36bdf5; --card-green: #079653; --card-shadow: 0 10px 30px rgba(12, 43, 72, 0.08), 0 25px 60px rgba(12, 77, 125, 0.08); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); border: 1px solid var(--card-border); background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,253,255,0.98) 55%, rgba(241,249,253,0.98) 100% ); box-shadow: var(--card-shadow); transform: translate3d(0, 0, 0); transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.65s cubic-bezier(.16,1,.3,1), border-color 0.5s ease; /* Allows the card to breathe */ will-change: transform; } /* ========================================================= PREMIUM OUTER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: linear-gradient( 135deg, rgba(8,120,201,0.00) 0%, rgba(8,120,201,0.20) 28%, rgba(53,189,245,0.35) 50%, rgba(7,150,83,0.18) 72%, rgba(8,120,201,0.00) 100% ); opacity: 0.35; filter: blur(10px); transform: scale(0.97); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1); } /* ========================================================= INNER GLASS LAYER ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--card-radius) - 1px); background: linear-gradient( 145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18) ); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25:hover { transform: translate3d(0, -10px, 0); border-color: rgba(24, 145, 219, 0.48); box-shadow: 0 18px 40px rgba(12, 55, 90, 0.13), 0 35px 80px rgba(8, 112, 178, 0.13), 0 0 0 1px rgba(71, 190, 241, 0.08); } .elementor-11 .elementor-element.elementor-element-6b81d25:hover::before { opacity: 0.85; transform: scale(1.015); } /* ========================================================= TOP PREMIUM LIGHT LINE ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-6b81d25 > .elementor-element-populated::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(54,189,245,0.85), rgba(7,150,83,0.75), rgba(54,189,245,0.85), transparent ); opacity: 0.45; transform: scaleX(0.65); transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-6b81d25:hover > .elementor-element-populated::before { transform: scaleX(1); opacity: 1; } /* ========================================================= IMAGE AREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; transform: translateZ(0); } /* Image itself */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-image img { display: block; width: 100%; transform: scale(1) translate3d(0,0,0); filter: saturate(1) contrast(1); transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.7s ease; } /* Premium image zoom */ .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-image img { transform: scale(1.055) translate3d(0,-2px,0); filter: saturate(1.08) contrast(1.025); } /* ========================================================= IMAGE LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-image::after { content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.48), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: left 0.9s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-image::after { left: 140%; opacity: 1; } /* ========================================================= IMAGE BOTTOM DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to top, rgba(3,35,60,0.14), transparent ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-image::before { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-heading { transform: translate3d(0,-2px,0); } /* Heading underline accent */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading .elementor-heading-title { position: relative; display: inline-block; } /* Tiny premium accent underneath heading */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--card-blue), var(--card-cyan), var(--card-green) ); transform: translateX(-50%); opacity: 0; transition: width 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-heading .elementor-heading-title::after { width: 42px; opacity: 1; } /* ========================================================= DESCRIPTION / TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-text-editor { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-text-editor { transform: translate3d(0,-1px,0); } /* ========================================================= CONTENT DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-text-editor { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } /* ========================================================= BUTTON CONTAINER IMPORTANT: We DO NOT STYLE THE BUTTONS THEMSELVES. ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-button { position: relative; z-index: 5; } /* Give the button row a little premium separation */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-element:has(.elementor-widget-button) { transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-element:has(.elementor-widget-button) { transform: translate3d(0,-2px,0); } /* ========================================================= FLOATING AMBIENT LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 { background-image: radial-gradient( circle at 10% 92%, rgba(8,120,201,0.055), transparent 34% ), radial-gradient( circle at 92% 8%, rgba(7,150,83,0.045), transparent 32% ); } /* ========================================================= PREMIUM CORNER LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 > .e-con-inner { position: relative; } /* Small glowing corner detail */ .elementor-11 .elementor-element.elementor-element-6b81d25 > .e-con-inner::after { content: ""; position: absolute; right: 15px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: rgba(54,189,245,0.55); box-shadow: 0 0 0 4px rgba(54,189,245,0.07), 0 0 14px rgba(54,189,245,0.28); opacity: 0.35; transition: opacity 0.5s ease, transform 0.5s ease; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover > .e-con-inner::after { opacity: 1; transform: scale(1.35); } /* ========================================================= CARD CONTENT MICRO-MOTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-image, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-button { backface-visibility: hidden; } /* ========================================================= SUBTLE HOVER SHINE ACROSS ENTIRE CARD ========================================================= */ .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-container { position: relative; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b81d25 { border-radius: 17px; transform: none; box-shadow: 0 8px 25px rgba(12,43,72,0.08); } .elementor-11 .elementor-element.elementor-element-6b81d25:hover { transform: translate3d(0,-5px,0); box-shadow: 0 15px 35px rgba(12,55,90,0.12), 0 25px 50px rgba(8,112,178,0.08); } .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-image img { transform: scale(1); } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-image img { transform: scale(1.035); } .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading .elementor-heading-title::after { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-11 .elementor-element.elementor-element-6b81d25:hover { transform: translate3d(0,-7px,0); } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-image img { transform: scale(1.045); } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b81d25, .elementor-11 .elementor-element.elementor-element-6b81d25::before, .elementor-11 .elementor-element.elementor-element-6b81d25::after, .elementor-11 .elementor-element.elementor-element-6b81d25 img, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-6b81d25 .elementor-widget-button { transition: none !important; animation: none !important; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-6b81d25:hover .elementor-widget-image img { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-192e9a6 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button, .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button *, .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-192e9a6 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7a6de2d *//* ============================================================ DRISHTIPATH PREMIUM SECONDARY BUTTON Elementor Button Widget • Medical Blue / Glass White • Icon Right • 14px Typography • Premium Border • Elegant Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN SECONDARY BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; min-height: 46px !important; padding: 9px 16px !important; border-radius: 13px !important; /* ======================================================== PREMIUM LIGHT BLUE / WHITE SURFACE ======================================================== */ background: linear-gradient( 135deg, #ffffff 0%, #f5fbff 42%, #eaf7ff 72%, #ffffff 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BLUE PREMIUM BORDER ======================================================== */ border: 1px solid rgba(8,120,201,0.38) !important; /* ======================================================== TEXT ======================================================== */ color: #075b99 !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 8px 22px rgba(8,120,201,0.10), 0 2px 7px rgba(8,120,201,0.06), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -5px 14px rgba(8,120,201,0.035) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, color .35s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER BORDER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.90) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.65), transparent 40%, rgba(8,120,201,0.025) ) !important; pointer-events: none !important; z-index: 1 !important; transition: border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 45% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0.12) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #075b99 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, letter-spacing .4s ease !important; } /* ============================================================ 8. ICON — RIGHT SIDE ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* ======================================================== BLUE ICON BADGE ======================================================== */ background: linear-gradient( 145deg, #eaf7ff, #d9efff ) !important; color: #0878c9 !important; border: 1px solid rgba(8,120,201,0.15) !important; box-shadow: 0 4px 11px rgba(8,120,201,0.13), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(8,120,201,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #0878c9 0%, #0789d4 35%, #25a3e6 65%, #0874bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(125,215,255,0.95) !important; color: #ffffff !important; filter: brightness(1.03) !important; box-shadow: 0 20px 42px rgba(8,120,201,0.26), 0 7px 18px rgba(8,120,201,0.16), 0 0 28px rgba(30,165,230,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover::before { border-color: rgba(255,255,255,0.55) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.08); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover .elementor-button-text { color: #ffffff !important; transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #0878c9 !important; background: linear-gradient( 145deg, #ffffff, #eaf8ff ) !important; border-color: rgba(255,255,255,0.75) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.20), 0 0 16px rgba(80,195,245,0.28), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(8,120,201,0.40) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(8,120,201,0.18) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.16), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(8,120,201,0.22) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button { max-width: 100% !important; min-height: 44px !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button, .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button *, .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button::before, .elementor-11 .elementor-element.elementor-element-7a6de2d .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fd5128c *//* ========================================================= DRISHTIPATH — PREMIUM EYE SERVICE CARD Apply this CSS to the OUTER CARD CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c { /* ------------------------- CARD VARIABLES ------------------------- */ --card-radius: 20px; --card-border: rgba(45, 128, 205, 0.22); --card-blue: #0878c9; --card-cyan: #36bdf5; --card-green: #079653; --card-shadow: 0 10px 30px rgba(12, 43, 72, 0.08), 0 25px 60px rgba(12, 77, 125, 0.08); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); border: 1px solid var(--card-border); background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,253,255,0.98) 55%, rgba(241,249,253,0.98) 100% ); box-shadow: var(--card-shadow); transform: translate3d(0, 0, 0); transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.65s cubic-bezier(.16,1,.3,1), border-color 0.5s ease; /* Allows the card to breathe */ will-change: transform; } /* ========================================================= PREMIUM OUTER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: linear-gradient( 135deg, rgba(8,120,201,0.00) 0%, rgba(8,120,201,0.20) 28%, rgba(53,189,245,0.35) 50%, rgba(7,150,83,0.18) 72%, rgba(8,120,201,0.00) 100% ); opacity: 0.35; filter: blur(10px); transform: scale(0.97); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1); } /* ========================================================= INNER GLASS LAYER ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--card-radius) - 1px); background: linear-gradient( 145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18) ); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c:hover { transform: translate3d(0, -10px, 0); border-color: rgba(24, 145, 219, 0.48); box-shadow: 0 18px 40px rgba(12, 55, 90, 0.13), 0 35px 80px rgba(8, 112, 178, 0.13), 0 0 0 1px rgba(71, 190, 241, 0.08); } .elementor-11 .elementor-element.elementor-element-fd5128c:hover::before { opacity: 0.85; transform: scale(1.015); } /* ========================================================= TOP PREMIUM LIGHT LINE ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-fd5128c > .elementor-element-populated::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(54,189,245,0.85), rgba(7,150,83,0.75), rgba(54,189,245,0.85), transparent ); opacity: 0.45; transform: scaleX(0.65); transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-fd5128c:hover > .elementor-element-populated::before { transform: scaleX(1); opacity: 1; } /* ========================================================= IMAGE AREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; transform: translateZ(0); } /* Image itself */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-image img { display: block; width: 100%; transform: scale(1) translate3d(0,0,0); filter: saturate(1) contrast(1); transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.7s ease; } /* Premium image zoom */ .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-image img { transform: scale(1.055) translate3d(0,-2px,0); filter: saturate(1.08) contrast(1.025); } /* ========================================================= IMAGE LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-image::after { content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.48), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: left 0.9s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-image::after { left: 140%; opacity: 1; } /* ========================================================= IMAGE BOTTOM DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to top, rgba(3,35,60,0.14), transparent ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-image::before { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-heading { transform: translate3d(0,-2px,0); } /* Heading underline accent */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading .elementor-heading-title { position: relative; display: inline-block; } /* Tiny premium accent underneath heading */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--card-blue), var(--card-cyan), var(--card-green) ); transform: translateX(-50%); opacity: 0; transition: width 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-heading .elementor-heading-title::after { width: 42px; opacity: 1; } /* ========================================================= DESCRIPTION / TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-text-editor { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-text-editor { transform: translate3d(0,-1px,0); } /* ========================================================= CONTENT DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-text-editor { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } /* ========================================================= BUTTON CONTAINER IMPORTANT: We DO NOT STYLE THE BUTTONS THEMSELVES. ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-button { position: relative; z-index: 5; } /* Give the button row a little premium separation */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-element:has(.elementor-widget-button) { transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-element:has(.elementor-widget-button) { transform: translate3d(0,-2px,0); } /* ========================================================= FLOATING AMBIENT LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c { background-image: radial-gradient( circle at 10% 92%, rgba(8,120,201,0.055), transparent 34% ), radial-gradient( circle at 92% 8%, rgba(7,150,83,0.045), transparent 32% ); } /* ========================================================= PREMIUM CORNER LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c > .e-con-inner { position: relative; } /* Small glowing corner detail */ .elementor-11 .elementor-element.elementor-element-fd5128c > .e-con-inner::after { content: ""; position: absolute; right: 15px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: rgba(54,189,245,0.55); box-shadow: 0 0 0 4px rgba(54,189,245,0.07), 0 0 14px rgba(54,189,245,0.28); opacity: 0.35; transition: opacity 0.5s ease, transform 0.5s ease; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover > .e-con-inner::after { opacity: 1; transform: scale(1.35); } /* ========================================================= CARD CONTENT MICRO-MOTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-image, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-button { backface-visibility: hidden; } /* ========================================================= SUBTLE HOVER SHINE ACROSS ENTIRE CARD ========================================================= */ .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-container { position: relative; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-fd5128c { border-radius: 17px; transform: none; box-shadow: 0 8px 25px rgba(12,43,72,0.08); } .elementor-11 .elementor-element.elementor-element-fd5128c:hover { transform: translate3d(0,-5px,0); box-shadow: 0 15px 35px rgba(12,55,90,0.12), 0 25px 50px rgba(8,112,178,0.08); } .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-image img { transform: scale(1); } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-image img { transform: scale(1.035); } .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading .elementor-heading-title::after { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-11 .elementor-element.elementor-element-fd5128c:hover { transform: translate3d(0,-7px,0); } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-image img { transform: scale(1.045); } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-fd5128c, .elementor-11 .elementor-element.elementor-element-fd5128c::before, .elementor-11 .elementor-element.elementor-element-fd5128c::after, .elementor-11 .elementor-element.elementor-element-fd5128c img, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-fd5128c .elementor-widget-button { transition: none !important; animation: none !important; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-fd5128c:hover .elementor-widget-image img { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-7734215 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button, .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button *, .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-7734215 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c215b72 *//* ============================================================ DRISHTIPATH PREMIUM SECONDARY BUTTON Elementor Button Widget • Medical Blue / Glass White • Icon Right • 14px Typography • Premium Border • Elegant Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN SECONDARY BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; min-height: 46px !important; padding: 9px 16px !important; border-radius: 13px !important; /* ======================================================== PREMIUM LIGHT BLUE / WHITE SURFACE ======================================================== */ background: linear-gradient( 135deg, #ffffff 0%, #f5fbff 42%, #eaf7ff 72%, #ffffff 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BLUE PREMIUM BORDER ======================================================== */ border: 1px solid rgba(8,120,201,0.38) !important; /* ======================================================== TEXT ======================================================== */ color: #075b99 !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 8px 22px rgba(8,120,201,0.10), 0 2px 7px rgba(8,120,201,0.06), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -5px 14px rgba(8,120,201,0.035) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, color .35s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER BORDER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.90) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.65), transparent 40%, rgba(8,120,201,0.025) ) !important; pointer-events: none !important; z-index: 1 !important; transition: border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 45% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.90) 50%, rgba(255,255,255,0.12) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #075b99 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease, letter-spacing .4s ease !important; } /* ============================================================ 8. ICON — RIGHT SIDE ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* ======================================================== BLUE ICON BADGE ======================================================== */ background: linear-gradient( 145deg, #eaf7ff, #d9efff ) !important; color: #0878c9 !important; border: 1px solid rgba(8,120,201,0.15) !important; box-shadow: 0 4px 11px rgba(8,120,201,0.13), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(8,120,201,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #0878c9 0%, #0789d4 35%, #25a3e6 65%, #0874bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(125,215,255,0.95) !important; color: #ffffff !important; filter: brightness(1.03) !important; box-shadow: 0 20px 42px rgba(8,120,201,0.26), 0 7px 18px rgba(8,120,201,0.16), 0 0 28px rgba(30,165,230,0.16), inset 0 1px 0 rgba(255,255,255,0.42) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover::before { border-color: rgba(255,255,255,0.55) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.08); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover .elementor-button-text { color: #ffffff !important; transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #0878c9 !important; background: linear-gradient( 145deg, #ffffff, #eaf8ff ) !important; border-color: rgba(255,255,255,0.75) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.20), 0 0 16px rgba(80,195,245,0.28), inset 0 1px 0 rgba(255,255,255,1) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(8,120,201,0.40) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(8,120,201,0.18) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.16), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(8,120,201,0.22) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button { max-width: 100% !important; min-height: 44px !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button, .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button *, .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-c215b72 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a65b167 *//* ========================================================= DRISHTIPATH — PREMIUM EYE SERVICE CARD Apply this CSS to the OUTER CARD CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 { /* ------------------------- CARD VARIABLES ------------------------- */ --card-radius: 20px; --card-border: rgba(45, 128, 205, 0.22); --card-blue: #0878c9; --card-cyan: #36bdf5; --card-green: #079653; --card-shadow: 0 10px 30px rgba(12, 43, 72, 0.08), 0 25px 60px rgba(12, 77, 125, 0.08); position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); border: 1px solid var(--card-border); background: linear-gradient( 145deg, rgba(255,255,255,0.98) 0%, rgba(249,253,255,0.98) 55%, rgba(241,249,253,0.98) 100% ); box-shadow: var(--card-shadow); transform: translate3d(0, 0, 0); transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.65s cubic-bezier(.16,1,.3,1), border-color 0.5s ease; /* Allows the card to breathe */ will-change: transform; } /* ========================================================= PREMIUM OUTER GLOW ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: linear-gradient( 135deg, rgba(8,120,201,0.00) 0%, rgba(8,120,201,0.20) 28%, rgba(53,189,245,0.35) 50%, rgba(7,150,83,0.18) 72%, rgba(8,120,201,0.00) 100% ); opacity: 0.35; filter: blur(10px); transform: scale(0.97); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1); } /* ========================================================= INNER GLASS LAYER ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--card-radius) - 1px); background: linear-gradient( 145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.18) ); pointer-events: none; } /* ========================================================= CARD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167:hover { transform: translate3d(0, -10px, 0); border-color: rgba(24, 145, 219, 0.48); box-shadow: 0 18px 40px rgba(12, 55, 90, 0.13), 0 35px 80px rgba(8, 112, 178, 0.13), 0 0 0 1px rgba(71, 190, 241, 0.08); } .elementor-11 .elementor-element.elementor-element-a65b167:hover::before { opacity: 0.85; transform: scale(1.015); } /* ========================================================= TOP PREMIUM LIGHT LINE ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-a65b167 > .elementor-element-populated::before { content: ""; position: absolute; top: 0; left: 8%; width: 84%; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, transparent, rgba(54,189,245,0.85), rgba(7,150,83,0.75), rgba(54,189,245,0.85), transparent ); opacity: 0.45; transform: scaleX(0.65); transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-a65b167:hover > .e-con-inner::before, .elementor-11 .elementor-element.elementor-element-a65b167:hover > .elementor-element-populated::before { transform: scaleX(1); opacity: 1; } /* ========================================================= IMAGE AREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-image { position: relative; overflow: hidden; border-radius: var(--card-radius) var(--card-radius) 0 0; transform: translateZ(0); } /* Image itself */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-image img { display: block; width: 100%; transform: scale(1) translate3d(0,0,0); filter: saturate(1) contrast(1); transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.7s ease; } /* Premium image zoom */ .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-image img { transform: scale(1.055) translate3d(0,-2px,0); filter: saturate(1.08) contrast(1.025); } /* ========================================================= IMAGE LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-image::after { content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 150%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.48), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: left 0.9s cubic-bezier(.16,1,.3,1), opacity 0.3s ease; } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-image::after { left: 140%; opacity: 1; } /* ========================================================= IMAGE BOTTOM DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-image::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient( to top, rgba(3,35,60,0.14), transparent ); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-image::before { opacity: 1; } /* ========================================================= HEADING ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-heading { transform: translate3d(0,-2px,0); } /* Heading underline accent */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading .elementor-heading-title { position: relative; display: inline-block; } /* Tiny premium accent underneath heading */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading .elementor-heading-title::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--card-blue), var(--card-cyan), var(--card-green) ); transform: translateX(-50%); opacity: 0; transition: width 0.55s cubic-bezier(.16,1,.3,1), opacity 0.4s ease; } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-heading .elementor-heading-title::after { width: 42px; opacity: 1; } /* ========================================================= DESCRIPTION / TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-text-editor { position: relative; z-index: 3; transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-text-editor { transform: translate3d(0,-1px,0); } /* ========================================================= CONTENT DEPTH ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-text-editor { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.5s ease; } /* ========================================================= BUTTON CONTAINER IMPORTANT: We DO NOT STYLE THE BUTTONS THEMSELVES. ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-button { position: relative; z-index: 5; } /* Give the button row a little premium separation */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-element:has(.elementor-widget-button) { transition: transform 0.6s cubic-bezier(.16,1,.3,1); } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-element:has(.elementor-widget-button) { transform: translate3d(0,-2px,0); } /* ========================================================= FLOATING AMBIENT LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 { background-image: radial-gradient( circle at 10% 92%, rgba(8,120,201,0.055), transparent 34% ), radial-gradient( circle at 92% 8%, rgba(7,150,83,0.045), transparent 32% ); } /* ========================================================= PREMIUM CORNER LIGHT ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 > .e-con-inner { position: relative; } /* Small glowing corner detail */ .elementor-11 .elementor-element.elementor-element-a65b167 > .e-con-inner::after { content: ""; position: absolute; right: 15px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: rgba(54,189,245,0.55); box-shadow: 0 0 0 4px rgba(54,189,245,0.07), 0 0 14px rgba(54,189,245,0.28); opacity: 0.35; transition: opacity 0.5s ease, transform 0.5s ease; } .elementor-11 .elementor-element.elementor-element-a65b167:hover > .e-con-inner::after { opacity: 1; transform: scale(1.35); } /* ========================================================= CARD CONTENT MICRO-MOTION ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-image, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-button { backface-visibility: hidden; } /* ========================================================= SUBTLE HOVER SHINE ACROSS ENTIRE CARD ========================================================= */ .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-container { position: relative; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-a65b167 { border-radius: 17px; transform: none; box-shadow: 0 8px 25px rgba(12,43,72,0.08); } .elementor-11 .elementor-element.elementor-element-a65b167:hover { transform: translate3d(0,-5px,0); box-shadow: 0 15px 35px rgba(12,55,90,0.12), 0 25px 50px rgba(8,112,178,0.08); } .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-image img { transform: scale(1); } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-image img { transform: scale(1.035); } .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading .elementor-heading-title::after { display: none; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-11 .elementor-element.elementor-element-a65b167:hover { transform: translate3d(0,-7px,0); } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-image img { transform: scale(1.045); } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-a65b167, .elementor-11 .elementor-element.elementor-element-a65b167::before, .elementor-11 .elementor-element.elementor-element-a65b167::after, .elementor-11 .elementor-element.elementor-element-a65b167 img, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-heading, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-text-editor, .elementor-11 .elementor-element.elementor-element-a65b167 .elementor-widget-button { transition: none !important; animation: none !important; } .elementor-11 .elementor-element.elementor-element-a65b167:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-a65b167:hover .elementor-widget-image img { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-a01d44c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM RED BUTTON Elementor Button Widget ============================================================ */ /* ------------------------------------------------------------ 1. ELEMENTOR WIDGET WRAPPER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c { position: relative !important; } /* ------------------------------------------------------------ 2. KEEP BUTTON WRAPPER FROM STRETCHING ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ------------------------------------------------------------ 3. MAIN BUTTON ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button { /* positioning */ position: relative !important; isolation: isolate !important; /* IMPORTANT — prevents full-width button */ display: inline-flex !important; width: auto !important; max-width: max-content !important; /* alignment */ align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* premium shape */ border-radius: 13px !important; /* RED PREMIUM SURFACE */ background: linear-gradient( 135deg, #75111f 0%, #9f1729 28%, #c52238 58%, #e04456 82%, #a7192d 100% ) !important; background-size: 180% 180% !important; /* border */ border: 1px solid rgba(255, 155, 165, 0.65) !important; /* text */ color: #ffffff !important; /* premium depth */ box-shadow: 0 10px 25px rgba(115, 15, 30, 0.22), 0 3px 8px rgba(115, 15, 30, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(70,0,10,0.13) !important; /* animation */ transform: translate3d(0,0,0); transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, background-position 0.6s ease, border-color 0.4s ease, filter 0.4s ease !important; /* prevent shine from escaping */ overflow: hidden !important; /* hardware acceleration */ backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------ 4. PREMIUM INNER EDGE ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.12), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ------------------------------------------------------------ 5. MOVING LUXURY LIGHT ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ------------------------------------------------------------ 6. ELEMENTOR CONTENT WRAPPER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 10px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ------------------------------------------------------------ 7. BUTTON TEXT ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ------------------------------------------------------------ 8. ICON CONTAINER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-icon { position: relative !important; z-index: 11 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 30px !important; height: 30px !important; min-width: 30px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #f4f7fa ) !important; color: #a7182d !important; box-shadow: 0 4px 12px rgba(60,0,10,0.20), inset 0 1px 2px rgba(255,255,255,0.9) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ------------------------------------------------------------ 9. ICON — SVG ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-icon svg { display: block !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ------------------------------------------------------------ 10. ICON — FONT AWESOME / I ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ HOVER ============================================================ */ /* ------------------------------------------------------------ 11. BUTTON LIFT ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #921326 0%, #bd1d35 28%, #dd3047 58%, #f25a69 82%, #b51b31 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,190,198,0.9) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(115,15,30,0.30), 0 7px 18px rgba(180,25,45,0.18), 0 0 28px rgba(225,45,65,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ------------------------------------------------------------ 12. BORDER GLOW ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ------------------------------------------------------------ 13. LIGHT SWEEP ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover::after { left: 155% !important; } /* ------------------------------------------------------------ 14. TEXT MOTION ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ------------------------------------------------------------ 15. ICON PREMIUM HOVER ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover .elementor-button-icon { transform: translate3d(5px,0,0) scale(1.10) !important; color: #ffffff !important; background: linear-gradient( 145deg, #f45b6b, #b61931 ) !important; box-shadow: 0 7px 18px rgba(90,5,15,0.30), 0 0 18px rgba(255,100,115,0.35), inset 0 1px 0 rgba(255,255,255,0.35) !important; } /* ------------------------------------------------------------ 16. ICON ROTATION ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ------------------------------------------------------------ 17. ICON RING ------------------------------------------------------------ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.55) !important; } /* ============================================================ CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(115,15,30,0.20) !important; } /* ============================================================ FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(197,34,53,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(125,20,32,0.25) !important; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-content-wrapper { gap: 8px !important; } .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button-icon { width: 27px !important; height: 27px !important; min-width: 27px !important; } .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button, .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button *, .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-a01d44c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c5c011b *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 2 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button, .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button *, .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button::before, .elementor-11 .elementor-element.elementor-element-c5c011b .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-bf874ea *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button, .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button *, .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button::before, .elementor-11 .elementor-element.elementor-element-bf874ea .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-38d7bee *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button *, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::before, .elementor-11 .elementor-element.elementor-element-38d7bee .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f9992aa *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button *, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f9992aa .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-d6243a0 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button *, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-d6243a0 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36d7e29 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button *, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-36d7e29 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f57bbd2 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button *, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-f57bbd2 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5430f02 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button *, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-5430f02 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-f2a5c97 *//* ============================================================ DRISHTIPATH — PREMIUM DEPARTMENT TABS FINAL VERSION - Left aligned tab titles - Always visible icons - Smooth fade transition - Premium medical UI - Desktop / Tablet / Mobile ============================================================ */ /* ============================================================ MAIN TABS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs { display: flex !important; width: 100% !important; background: linear-gradient( 145deg, #ffffff 0%, #fbfdff 55%, #f7fbfd 100% ) !important; border: 1px solid rgba(24,117,160,.12) !important; border-radius: 26px !important; overflow: hidden !important; box-shadow: 0 25px 60px rgba(20,65,95,.10), 0 8px 22px rgba(20,65,95,.05), inset 0 1px 0 rgba(255,255,255,.95) !important; position: relative !important; isolation: isolate !important; } /* ============================================================ LEFT TAB AREA ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-heading { position: relative !important; z-index: 5 !important; flex: 0 0 250px !important; width: 250px !important; min-width: 250px !important; max-width: 250px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 7px !important; padding: 15px !important; box-sizing: border-box !important; background: linear-gradient( 180deg, #f3f8fb 0%, #f9fcfd 100% ) !important; border-right: 1px solid #e1edf3 !important; } /* ============================================================ TAB BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 11px 14px !important; box-sizing: border-box !important; border: 1px solid transparent !important; border-radius: 14px !important; background: transparent !important; color: #344f66 !important; font-family: "Poppins", sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: left !important; white-space: nowrap !important; word-break: keep-all !important; cursor: pointer !important; overflow: hidden !important; transform: translate3d(0,0,0) !important; transition: background .35s ease, color .30s ease, border-color .35s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ TAB TITLE — HARD LEFT ALIGNMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-title-text { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; text-align: left !important; white-space: nowrap !important; word-break: keep-all !important; overflow: hidden !important; text-overflow: ellipsis !important; color: inherit !important; line-height: 1.25 !important; } /* Elementor direct span protection */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title > span:not(.e-n-tab-icon) { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ============================================================ ICON — NORMAL ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon { position: relative !important; flex: 0 0 27px !important; width: 27px !important; min-width: 27px !important; height: 27px !important; margin: 0 10px 0 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; background: linear-gradient( 145deg, #ffffff, #edf5f9 ) !important; color: #416278 !important; opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; box-shadow: 0 2px 7px rgba(30,80,110,.06), inset 0 1px 0 #ffffff !important; transition: color .3s ease, background .3s ease, transform .4s cubic-bezier(.22,1,.36,1), box-shadow .35s ease !important; } /* ============================================================ ICON SVG ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg { display: block !important; width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; opacity: 1 !important; visibility: visible !important; color: currentColor !important; fill: currentColor !important; stroke: currentColor !important; } /* SVG internals */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg path, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg circle, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg line, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg polyline, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg rect { color: currentColor !important; stroke: currentColor !important; } /* ============================================================ NORMAL HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title:not([aria-selected="true"]):hover { color: #087db7 !important; background: linear-gradient( 105deg, #e8f6fc 0%, #f5fbfd 100% ) !important; border-color: rgba(24,150,200,.16) !important; transform: translate3d(5px,0,0) !important; box-shadow: 0 9px 22px rgba(20,120,165,.08), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* Hover icon */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title:not([aria-selected="true"]):hover .e-n-tab-icon { color: #087db7 !important; background: #ffffff !important; transform: scale(1.08) !important; box-shadow: 0 5px 12px rgba(20,120,165,.12) !important; } /* ============================================================ ACTIVE TAB ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] { color: #ffffff !important; background: linear-gradient( 110deg, #138fd1 0%, #159fd4 45%, #1dbb99 100% ) !important; border-color: rgba(101,235,212,.65) !important; transform: translate3d(5px,0,0) !important; box-shadow: 0 14px 30px rgba(18,137,184,.22), 0 4px 10px rgba(18,110,150,.12), inset 0 1px 0 rgba(255,255,255,.34) !important; } /* ============================================================ ACTIVE TITLE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { color: #ffffff !important; text-align: left !important; } /* ============================================================ ACTIVE ICON — VISIBILITY FIX IMPORTANT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon { flex: 0 0 27px !important; width: 27px !important; min-width: 27px !important; height: 27px !important; color: #ffffff !important; background: linear-gradient( 145deg, #087db8, #09699d ) !important; border: 1px solid rgba(255,255,255,.45) !important; opacity: 1 !important; visibility: visible !important; transform: scale(1.05) !important; box-shadow: 0 4px 12px rgba(0,70,105,.25), inset 0 1px 0 rgba(255,255,255,.30) !important; } /* ============================================================ ACTIVE ICON SVG — FORCE WHITE ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; opacity: 1 !important; visibility: visible !important; display: block !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg path, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg circle, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg line, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg polyline, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg rect { color: #ffffff !important; stroke: #ffffff !important; } /* ============================================================ ACTIVE TAB HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"]:hover { color: #ffffff !important; transform: translate3d(7px,-1px,0) !important; background: linear-gradient( 110deg, #1695d4 0%, #18a6d7 45%, #20c0a1 100% ) !important; box-shadow: 0 17px 35px rgba(18,137,184,.27), 0 5px 13px rgba(18,110,150,.15), inset 0 1px 0 rgba(255,255,255,.38) !important; } /* Active hover icon stays visible */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"]:hover .e-n-tab-icon { color: #ffffff !important; background: linear-gradient( 145deg, #087db8, #075f91 ) !important; transform: scale(1.10) !important; opacity: 1 !important; visibility: visible !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"]:hover .e-n-tab-icon svg { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* ============================================================ ACTIVE LEFT ACCENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"]::before { content: "" !important; position: absolute !important; left: 0 !important; top: 9px !important; bottom: 9px !important; width: 3px !important; border-radius: 0 999px 999px 0 !important; background: #ffffff !important; box-shadow: 0 0 8px rgba(255,255,255,.65) !important; } /* ============================================================ CONTENT AREA ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-content { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 34px 38px !important; box-sizing: border-box !important; background: #ffffff !important; overflow: hidden !important; } /* ============================================================ CONTENT ANIMATION Matches your video: fade toward white → new content fades in ============================================================ */ @keyframes dpDepartmentFade { 0% { opacity: 0; transform: translate3d(0,6px,0); filter: blur(2px); } 35% { opacity: .22; transform: translate3d(0,3px,0); filter: blur(1px); } 70% { opacity: .72; transform: translate3d(0,1px,0); filter: blur(.3px); } 100% { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } } /* Active content */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content.e-active { animation: dpDepartmentFade .72s cubic-bezier(.22,1,.36,1) both !important; } /* Elementor alternate state */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content[aria-hidden="false"] { animation: dpDepartmentFade .72s cubic-bezier(.22,1,.36,1) both !important; } /* ============================================================ CONTENT TYPOGRAPHY ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content { color: #526c80 !important; font-family: "Poppins", sans-serif !important; font-size: 13px !important; line-height: 1.75 !important; } /* ============================================================ CONTENT HEADINGS ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content h1, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content h2, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content h3 { position: relative !important; color: #102f4b !important; font-family: "Poppins", sans-serif !important; font-weight: 700 !important; padding-left: 14px !important; } /* Heading accent */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content h1::before, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content h2::before, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content h3::before { content: "" !important; position: absolute !important; left: 0 !important; top: 4px !important; bottom: 4px !important; width: 4px !important; border-radius: 999px !important; background: linear-gradient( 180deg, #20bd8d, #168ed0 ) !important; } /* ============================================================ CONTENT IMAGES ============================================================ */ .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content img { max-width: 100% !important; height: auto !important; border-radius: 18px !important; border: 1px solid #dce8ef !important; box-shadow: 0 18px 38px rgba(20,70,100,.13), 0 4px 12px rgba(20,70,100,.06) !important; transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .45s ease !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content img:hover { transform: translateY(-4px) scale(1.01) !important; box-shadow: 0 25px 48px rgba(20,70,100,.18) !important; } /* ============================================================ TABLET ============================================================ */ @media (max-width:1024px) and (min-width:768px) { .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-heading { flex-basis: 215px !important; width: 215px !important; min-width: 215px !important; max-width: 215px !important; padding: 12px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title { min-height: 49px !important; padding: 10px 11px !important; font-size: 12px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon { flex-basis: 24px !important; width: 24px !important; min-width: 24px !important; height: 24px !important; margin-right: 8px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-content { padding: 27px 25px !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width:767px) { .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs { display: block !important; border-radius: 19px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-heading { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; min-width: 100% !important; max-width: none !important; padding: 8px !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; border-right: 0 !important; border-bottom: 1px solid #e0edf3 !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-heading::-webkit-scrollbar { display: none !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title { flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: none !important; min-height: 43px !important; padding: 9px 13px !important; border-radius: 11px !important; font-size: 11px !important; transform: none !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title:hover { transform: translateY(-1px) !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title[aria-selected="true"] { transform: translateY(-1px) !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon { flex-basis: 22px !important; width: 22px !important; min-width: 22px !important; height: 22px !important; margin-right: 7px !important; border-radius: 7px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon svg { width: 13px !important; height: 13px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-content { width: 100% !important; padding: 23px 17px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-content { font-size: 13px !important; line-height: 1.7 !important; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media (max-width:480px) { .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs { border-radius: 16px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title { min-height: 40px !important; padding: 8px 11px !important; font-size: 10.5px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tab-title .e-n-tab-icon { flex-basis: 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; margin-right: 6px !important; } .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs-content { padding: 20px 14px !important; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce) { .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs *, .elementor-11 .elementor-element.elementor-element-f2a5c97 .e-n-tabs { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-376b193 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button *, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-376b193 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-6b18a0c *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button *, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::before, .elementor-11 .elementor-element.elementor-element-6b18a0c .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-54ca034 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button *, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-54ca034 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-006a392 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM GREEN BUTTON Elementor Button Widget • Premium Medical Green • Icon Right • 14px Typography • Luxury Shine • Premium Hover • Elementor Compatible ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM GREEN SURFACE ======================================================== */ background: linear-gradient( 135deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; background-size: 180% 180% !important; /* ======================================================== PREMIUM BORDER ======================================================== */ border: 1px solid rgba(150, 245, 190, 0.72) !important; /* ======================================================== TEXT COLOR ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(5, 100, 48, 0.22), 0 3px 8px rgba(5, 100, 48, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,55,25,0.13) !important; /* ======================================================== SMOOTH INTERACTION ======================================================== */ transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. BUTTON TEXT TEXT ON LEFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON ICON ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* Smaller icon container */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* Premium white icon badge */ background: linear-gradient( 145deg, #ffffff, #effff5 ) !important; color: #087a43 !important; box-shadow: 0 4px 11px rgba(0,70,35,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(95,235,150,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #08703c 0%, #09934d 28%, #16ad60 58%, #42cf82 82%, #087c43 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,255,215,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,100,48,0.30), 0 7px 18px rgba(10,150,75,0.18), 0 0 28px rgba(30,205,105,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #29b96d, #08723e ) !important; box-shadow: 0 6px 15px rgba(0,80,38,0.28), 0 0 16px rgba(65,220,125,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,100,48,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(15,160,80,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,100,48,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button *, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-006a392 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-cbc5055 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button *, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-cbc5055 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-34bdeb1 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM CRIMSON BUTTON Elementor Button Widget Crimson Red • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; border-radius: 13px !important; /* ======================================================== PREMIUM CRIMSON / CHERRY RED ======================================================== */ background: linear-gradient( 135deg, #8f1622 0%, #a91b2c 22%, #b92134 45%, #c92a3c 65%, #d93649 82%, #b51f32 100% ) !important; background-size: 180% 180% !important; /* ======================================================== BORDER ======================================================== */ border: 1px solid rgba(255, 190, 198, 0.82) !important; /* ======================================================== TEXT ======================================================== */ color: #ffffff !important; /* ======================================================== PREMIUM DEPTH ======================================================== */ box-shadow: 0 10px 25px rgba(157, 24, 40, 0.22), 0 3px 8px rgba(157, 24, 40, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(90,5,15,0.14) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.24) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; /* WHITE ICON BADGE */ background: linear-gradient( 145deg, #ffffff 0%, #fffafa 55%, #fff0f2 100% ) !important; color: #c5263a !important; box-shadow: 0 4px 11px rgba(120,20,30,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(255,120,135,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM CRIMSON LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #a01827 0%, #b91f32 22%, #c9263b 45%, #d83247 65%, #e74659 82%, #c12035 100% ) !important; background-position: 100% 0 !important; border-color: rgba(255,215,220,0.98) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(145,25,40,0.30), 0 7px 18px rgba(190,45,60,0.18), 0 0 28px rgba(235,65,85,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #df4052 0%, #c02036 55%, #a9182b 100% ) !important; box-shadow: 0 6px 15px rgba(120,20,30,0.28), 0 0 16px rgba(255,90,110,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(145,25,40,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(210,45,60,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(145,25,40,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button *, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-34bdeb1 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for nested-tabs, class: .elementor-element-4ae69a7 *//* ========================================================= DRISHTIPATH EYE HOSPITAL PREMIUM ELEMENTOR TABS / MOBILE ACCORDION FINAL CSS Desktop: - Existing tab structure remains untouched Mobile: - Elementor's native accordion behavior is preserved - Only accordion headers are redesigned - Active/open header gets premium blue/green styling - Content remains controlled entirely by Elementor ========================================================= */ /* ========================================================= MOBILE ACCORDION ONLY ========================================================= */ @media (max-width: 767px) { /* ===================================================== MAIN TABS CONTAINER ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tabs { width: 100% !important; max-width: 100% !important; overflow: visible !important; } /* ===================================================== ACCORDION HEADER CONTAINER Elementor converts the tabs into accordion-style buttons on mobile. We only style the container. ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tabs-heading { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ===================================================== ACCORDION BUTTON ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title { position: relative !important; width: 100% !important; min-width: 0 !important; min-height: 58px !important; margin: 0 !important; padding: 10px 15px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex: none !important; border: 1px solid rgba(24, 126, 169, 0.13) !important; border-radius: 15px !important; background: linear-gradient( 135deg, #ffffff 0%, #f7fbfd 52%, #eef8fb 100% ) !important; color: #24455d !important; box-shadow: 0 5px 16px rgba(24, 81, 107, 0.065), 0 1px 3px rgba(24, 81, 107, 0.035), inset 0 1px 0 rgba(255,255,255,0.96) !important; overflow: hidden !important; cursor: pointer !important; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, transform 0.30s ease !important; } /* ===================================================== SUBTLE LEFT ACCENT ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title::before { content: "" !important; position: absolute !important; left: 0 !important; top: 10px !important; bottom: 10px !important; width: 3px !important; border-radius: 0 5px 5px 0 !important; background: linear-gradient( 180deg, #18b98b, #078dcc ) !important; opacity: 0 !important; transform: scaleY(.45) !important; transform-origin: center !important; transition: opacity .35s ease, transform .35s ease !important; } /* ===================================================== ICON ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-icon { position: relative !important; width: 35px !important; height: 35px !important; min-width: 35px !important; min-height: 35px !important; margin: 0 11px 0 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 35px !important; border-radius: 10px !important; background: linear-gradient( 145deg, #edf8fc 0%, #e1f2f7 100% ) !important; color: #1380b5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 7px rgba(19, 111, 145, .05) !important; transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease !important; } /* ===================================================== TAB TITLE TEXT ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title-text { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; font-family: "Poppins", sans-serif !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.15px !important; color: #294a61 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; } /* ===================================================== HOVER ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title:hover { border-color: rgba(13, 139, 181, .24) !important; background: linear-gradient( 135deg, #ffffff 0%, #eff9fc 100% ) !important; box-shadow: 0 9px 23px rgba(20, 100, 130, .10), 0 2px 5px rgba(20, 100, 130, .04), inset 0 1px 0 rgba(255,255,255,.98) !important; transform: translateY(-1px) !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title:hover::before { opacity: .55 !important; transform: scaleY(.7) !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title:hover .e-n-tab-icon { background: linear-gradient( 145deg, #e4f7fa, #d7eef5 ) !important; color: #0785bd !important; transform: scale(1.045) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px rgba(19, 111, 145, .08) !important; } /* ===================================================== ACTIVE / OPEN ACCORDION Elementor controls aria-selected automatically. ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title[aria-selected="true"] { border-color: transparent !important; background: linear-gradient( 135deg, #078dcc 0%, #0ca5ba 50%, #18b788 100% ) !important; color: #ffffff !important; box-shadow: 0 10px 25px rgba(8, 135, 177, .20), 0 3px 8px rgba(8, 135, 177, .08), inset 0 1px 0 rgba(255,255,255,.25) !important; transform: none !important; } /* Active left accent */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title[aria-selected="true"]::before { opacity: 1 !important; transform: scaleY(1) !important; background: #ffffff !important; } /* ===================================================== ACTIVE TEXT ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { color: #ffffff !important; } /* ===================================================== ACTIVE ICON ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title[aria-selected="true"] .e-n-tab-icon { background: rgba(255,255,255,.18) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 8px rgba(0,0,0,.05) !important; transform: none !important; } /* ===================================================== ACCORDION CONTENT IMPORTANT: We intentionally DO NOT set display, height, position, opacity, or visibility. Elementor remains fully responsible for opening and closing the content. ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; } /* ===================================================== CONTENT MEDIA SAFETY ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content img { max-width: 100% !important; height: auto !important; display: block !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content iframe, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content video { max-width: 100% !important; } /* ===================================================== CONTENT TEXT SAFETY ===================================================== */ .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content h1, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content h2, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content h3, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content h4, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content h5, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content h6, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-content p { max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; } /* ===================================================== 480px AND BELOW ===================================================== */ @media (max-width: 480px) { .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tabs-heading { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title { min-height: 54px !important; padding: 9px 13px !important; border-radius: 13px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title::before { top: 9px !important; bottom: 9px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; flex-basis: 32px !important; margin-right: 9px !important; border-radius: 9px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title-text { font-size: 13px !important; line-height: 1.3 !important; } } /* ===================================================== 360px AND BELOW ===================================================== */ @media (max-width: 360px) { .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title { min-height: 51px !important; padding: 8px 12px !important; border-radius: 12px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title::before { top: 8px !important; bottom: 8px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; flex-basis: 30px !important; margin-right: 8px !important; border-radius: 8px !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title-text { font-size: 12px !important; } } /* ===================================================== TOUCH DEVICES ===================================================== */ @media (hover: none) { .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title:hover { transform: none !important; } .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title:hover .e-n-tab-icon { transform: none !important; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-icon, .elementor-11 .elementor-element.elementor-element-4ae69a7 .e-n-tab-title::before { transition: none !important; } } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-686b4e4 *//* ============================================================ DRISHTIPATH SIGNATURE PREMIUM BLUE BUTTON Elementor Button Widget Blue • Premium • Icon Right ============================================================ */ /* ============================================================ 1. ELEMENTOR WIDGET ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 { position: relative !important; } /* ============================================================ 2. BUTTON WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-wrapper { width: fit-content !important; max-width: 100% !important; } /* ============================================================ 3. MAIN BUTTON ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button { position: relative !important; isolation: isolate !important; display: inline-flex !important; width: auto !important; max-width: max-content !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; /* Premium rounded shape */ border-radius: 13px !important; /* ======================================================== PREMIUM BLUE SURFACE ======================================================== */ background: linear-gradient( 135deg, #064f91 0%, #086bb5 28%, #087fd1 58%, #2499e3 82%, #0966ad 100% ) !important; background-size: 180% 180% !important; /* Border */ border: 1px solid rgba(153, 220, 255, 0.72) !important; /* Text */ color: #ffffff !important; /* Premium depth */ box-shadow: 0 10px 25px rgba(5, 82, 145, 0.22), 0 3px 8px rgba(5, 82, 145, 0.12), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -8px 18px rgba(0,35,75,0.13) !important; transform: translate3d(0,0,0); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, background-position .6s ease, border-color .4s ease, filter .4s ease !important; overflow: hidden !important; backface-visibility: hidden; -webkit-font-smoothing: antialiased; } /* ============================================================ 4. PREMIUM INNER EDGE ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.22) !important; background: linear-gradient( 135deg, rgba(255,255,255,0.13), transparent 35%, transparent 70%, rgba(255,255,255,0.05) ) !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; transition: border-color .4s ease, opacity .4s ease !important; } /* ============================================================ 5. PREMIUM LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button::after { content: "" !important; position: absolute !important; top: -120% !important; left: -130% !important; width: 48% !important; height: 340% !important; background: linear-gradient( 105deg, transparent 0%, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.72) 50%, rgba(255,255,255,0.08) 58%, transparent 66%, transparent 100% ) !important; transform: skewX(-22deg) !important; pointer-events: none !important; z-index: 8 !important; transition: left .9s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 6. ELEMENTOR CONTENT WRAPPER ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-content-wrapper { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; position: relative !important; z-index: 10 !important; } /* ============================================================ 7. TEXT TEXT ALWAYS FIRST ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; position: relative !important; z-index: 10 !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; transition: transform .45s cubic-bezier(.22,1,.36,1), letter-spacing .4s ease !important; } /* ============================================================ 8. ICON CONTAINER ICON NOW ON RIGHT ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon { position: relative !important; z-index: 11 !important; order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; /* SMALLER PREMIUM ICON */ width: 26px !important; height: 26px !important; min-width: 26px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient( 145deg, #ffffff, #edf7ff ) !important; color: #0878c9 !important; box-shadow: 0 4px 11px rgba(0,45,90,0.20), inset 0 1px 2px rgba(255,255,255,0.95) !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, box-shadow .4s ease !important; } /* ============================================================ 9. SVG ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon svg { display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; fill: currentColor !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 10. FONT AWESOME / I ICON ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; margin: 0 !important; color: currentColor !important; font-size: 12px !important; line-height: 1 !important; transition: transform .55s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ 11. ICON OUTER RING ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon::before { content: "" !important; position: absolute !important; inset: -4px !important; border-radius: 50% !important; border: 1px solid rgba(105,205,255,0) !important; transform: scale(.65) !important; opacity: 0 !important; transition: transform .45s ease, opacity .4s ease, border-color .4s ease !important; } /* ============================================================ 12. HOVER — PREMIUM BLUE LIFT ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover { transform: translate3d(0,-5px,0) !important; background: linear-gradient( 135deg, #075da3 0%, #0878c9 28%, #1594df 58%, #42abe8 82%, #0870bd 100% ) !important; background-position: 100% 0 !important; border-color: rgba(190,235,255,0.95) !important; filter: brightness(1.04) !important; box-shadow: 0 20px 42px rgba(5,82,145,0.30), 0 7px 18px rgba(8,120,201,0.18), 0 0 28px rgba(20,157,225,0.18), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 13. INNER BORDER HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover::before { border-color: rgba(255,255,255,0.68) !important; box-shadow: inset 0 0 12px rgba(255,255,255,0.05); } /* ============================================================ 14. LIGHT SWEEP ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover::after { left: 155% !important; } /* ============================================================ 15. TEXT MICRO MOVEMENT ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover .elementor-button-text { transform: translateX(-2px) !important; letter-spacing: .25px !important; } /* ============================================================ 16. ICON PREMIUM HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover .elementor-button-icon { transform: translate3d(3px,0,0) scale(1.08) !important; color: #ffffff !important; background: linear-gradient( 145deg, #25a2e5, #0869b1 ) !important; box-shadow: 0 6px 15px rgba(0,65,120,0.28), 0 0 16px rgba(70,190,245,0.30), inset 0 1px 0 rgba(255,255,255,0.40) !important; } /* ============================================================ 17. ICON ROTATION ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover .elementor-button-icon svg { transform: rotate(-8deg) scale(1.08) !important; } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover .elementor-button-icon i { transform: rotate(-8deg) scale(1.08) !important; } /* ============================================================ 18. ICON RING HOVER ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover .elementor-button-icon::before { transform: scale(1) !important; opacity: 1 !important; border-color: rgba(255,255,255,0.60) !important; } /* ============================================================ 19. ACTIVE / CLICK ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:active { transform: translate3d(0,-1px,0) scale(.975) !important; box-shadow: 0 8px 16px rgba(5,82,145,0.20) !important; } /* ============================================================ 20. FOCUS ============================================================ */ .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(8,120,201,0.18), 0 0 0 6px rgba(255,255,255,0.95), 0 15px 35px rgba(5,82,145,0.25) !important; } /* ============================================================ 21. MOBILE ============================================================ */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button { max-width: 100% !important; transform: translate3d(0,0,0); } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-content-wrapper { gap: 7px !important; } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-text { font-size: 14px !important; } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon svg { width: 12px !important; height: 12px !important; } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button-icon i { font-size: 11px !important; } .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button:hover { transform: translate3d(0,-3px,0) !important; } } /* ============================================================ 22. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button, .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button *, .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button::before, .elementor-11 .elementor-element.elementor-element-686b4e4 .elementor-button::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for form, class: .elementor-element-492137b *//* ========================================================= DRISHTIPATH — PREMIUM ELEMENTOR FORM Scoped ONLY to this Elementor Form widget ========================================================= */ /* ========================================================= FORM CONTAINER ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-form { position: relative; padding: 4px; font-family: "Poppins", sans-serif; } /* ========================================================= FORM ROW / FIELD GROUP ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group { position: relative; margin-bottom: 18px; } /* ========================================================= LABELS ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-label { display: block; margin-bottom: 7px; color: #183b5d; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .05px; transition: color .3s ease, transform .3s ease; } /* ========================================================= INPUTS / TEXTAREA / SELECT ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field { width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 11px !important; border: 1px solid #d8e3ec !important; background: linear-gradient( 145deg, #ffffff 0%, #f9fcfe 100% ) !important; color: #163b5d !important; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.5; outline: none !important; box-shadow: 0 3px 10px rgba(18,70,105,.035), inset 0 1px 0 rgba(255,255,255,.95); transition: border-color .35s ease, box-shadow .4s cubic-bezier(.16,1,.3,1), background .35s ease, transform .35s cubic-bezier(.16,1,.3,1); } /* ========================================================= PLACEHOLDER ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field::placeholder { color: #9aaabd !important; opacity: 1; font-weight: 400; transition: color .3s ease; } /* ========================================================= TEXTAREA ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b textarea.elementor-field { min-height: 105px; resize: vertical; padding-top: 14px; } /* ========================================================= FIELD HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field:hover { border-color: #b7d2e4 !important; box-shadow: 0 5px 16px rgba(24,101,150,.055), inset 0 1px 0 rgba(255,255,255,.95); } /* ========================================================= FIELD FOCUS ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field:focus { border-color: #199ed0 !important; background: #ffffff !important; transform: translateY(-1px); box-shadow: 0 7px 20px rgba(20,126,177,.08), 0 0 0 3px rgba(37,170,220,.10), inset 0 1px 0 rgba(255,255,255,1); } .elementor-11 .elementor-element.elementor-element-492137b .elementor-field:focus::placeholder { color: #b6c5d1 !important; } /* ========================================================= LABEL WHEN FIELD GROUP IS ACTIVE ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group:focus-within .elementor-field-label { color: #087bb7; } /* ========================================================= SELECT FIELD ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b select.elementor-field { cursor: pointer; appearance: auto; -webkit-appearance: auto; } /* ========================================================= FORM COLUMNS SPACING ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-form-fields-wrapper { margin-left: -7px; margin-right: -7px; } .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group { padding-left: 7px; padding-right: 7px; } /* ========================================================= SUBMIT BUTTON PREMIUM EMERALD STYLE ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button { position: relative; min-height: 48px; padding: 0 17px 0 22px !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border-radius: 11px !important; border: 1px solid rgba(142,245,187,.68) !important; background: linear-gradient( 110deg, #075b32 0%, #087a43 28%, #0b9653 58%, #29b96d 82%, #08723e 100% ) !important; color: #ffffff !important; font-family: "Poppins", sans-serif; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .05px; box-shadow: 0 8px 20px rgba(5,116,62,.20), 0 3px 7px rgba(4,91,48,.16), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.13); transform: translateZ(0); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .35s ease; } /* ========================================================= BUTTON TEXT ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button-text { position: relative; z-index: 3; color: #ffffff !important; line-height: 1; white-space: nowrap; } /* ========================================================= BUTTON ARROW BADGE ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button::after { content: "→"; position: relative; z-index: 4; width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.96); color: #087b47; font-family: Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; box-shadow: 0 2px 7px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,1); transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease; } /* ========================================================= BUTTON LIGHT SWEEP ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button::before { content: ""; position: absolute; z-index: 1; top: -60%; left: -65%; width: 25%; height: 220%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.24), transparent ); transform: skewX(-18deg); opacity: 0; pointer-events: none; } /* ========================================================= BUTTON HOVER ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button:hover { transform: translateY(-3px); border-color: rgba(180,255,210,.90) !important; box-shadow: 0 13px 28px rgba(5,116,62,.28), 0 5px 10px rgba(4,91,48,.18), 0 0 22px rgba(28,191,108,.12), inset 0 1px 0 rgba(255,255,255,.28); } .elementor-11 .elementor-element.elementor-element-492137b .elementor-button:hover::after { transform: translateX(2px) scale(1.08); background: #ffffff; color: #087a43; box-shadow: 0 3px 10px rgba(0,0,0,.15); } .elementor-11 .elementor-element.elementor-element-492137b .elementor-button:hover::before { opacity: 1; animation: dpFormButtonShine .85s cubic-bezier(.16,1,.3,1); } @keyframes dpFormButtonShine { from { left: -65%; } to { left: 145%; } } /* ========================================================= BUTTON ACTIVE ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button:active { transform: translateY(-1px) scale(.985); box-shadow: 0 5px 13px rgba(5,116,62,.20); } /* ========================================================= BUTTON FOCUS ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button:focus-visible { outline: none !important; box-shadow: 0 8px 20px rgba(5,116,62,.22), 0 0 0 3px rgba(28,185,108,.18) !important; } /* ========================================================= REMOVE DEFAULT ELEMENTOR BUTTON ICON IF PRESENT ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-button .elementor-button-icon { display: none !important; } /* ========================================================= SUCCESS MESSAGE ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-message { margin-top: 14px; padding: 12px 15px; border-radius: 10px; background: linear-gradient( 135deg, #effbf4, #e5f8ed ); border: 1px solid rgba(30,156,91,.16); color: #137542; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 600; box-shadow: 0 5px 16px rgba(30,156,91,.06); } /* ========================================================= ERROR MESSAGE ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-message.elementor-message-danger { background: linear-gradient( 135deg, #fff5f4, #fffafa ); border-color: rgba(210,64,54,.16); color: #bd4036; } /* ========================================================= FIELD VALIDATION ERROR ========================================================= */ .elementor-11 .elementor-element.elementor-element-492137b .elementor-field.elementor-error { border-color: #dc645c !important; box-shadow: 0 0 0 3px rgba(220,100,92,.08) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-group { margin-bottom: 14px; } .elementor-11 .elementor-element.elementor-element-492137b .elementor-field-label { font-size: 11px; margin-bottom: 6px; } .elementor-11 .elementor-element.elementor-element-492137b .elementor-field { min-height: 48px; padding: 12px 14px; font-size: 12px; } .elementor-11 .elementor-element.elementor-element-492137b textarea.elementor-field { min-height: 95px; } .elementor-11 .elementor-element.elementor-element-492137b .elementor-button { width: 100%; min-height: 48px; font-size: 13px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-11 .elementor-element.elementor-element-492137b .elementor-field, .elementor-11 .elementor-element.elementor-element-492137b .elementor-button, .elementor-11 .elementor-element.elementor-element-492137b .elementor-button::after, .elementor-11 .elementor-element.elementor-element-492137b .elementor-button::before { transition: none !important; animation: none !important; } }/* End custom CSS */