.elementor-12 .elementor-element.elementor-element-e579718{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12 .elementor-element.elementor-element-3130d29{--display:flex;}.elementor-12 .elementor-element.elementor-element-6061440{--display:flex;}.elementor-12 .elementor-element.elementor-element-bcb62f4{--iteration-count:infinite;}.elementor-12 .elementor-element.elementor-element-bcb62f4 .elementor-headline{text-align:center;}.elementor-12 .elementor-element.elementor-element-6bef43cb:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-6bef43cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ffffff;}.elementor-12 .elementor-element.elementor-element-6bef43cb > .elementor-background-overlay{background-image:url("https://shivala.org/wp-content/uploads/2025/06/DSC_0262-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;opacity:0.18;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-6bef43cb > .elementor-container{min-height:700px;}.elementor-12 .elementor-element.elementor-element-6bef43cb{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:100px 0px 100px 0px;}.elementor-12 .elementor-element.elementor-element-4ed70d03 > .elementor-widget-container{margin:0px 0px 40px 0px;}.elementor-12 .elementor-element.elementor-element-4ed70d03{text-align:center;}.elementor-12 .elementor-element.elementor-element-4ed70d03 .elementor-heading-title{font-family:"Noto Serif Devanagari", Sans-serif;font-size:60px;text-transform:capitalize;line-height:70px;color:#0c0c0c;}.elementor-12 .elementor-element.elementor-element-c75e431 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-bc-flex-widget .elementor-12 .elementor-element.elementor-element-5bbe501d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-12 .elementor-element.elementor-element-5bbe501d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-12 .elementor-element.elementor-element-5bbe501d > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-12 .elementor-element.elementor-element-5bbe501d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-78b7fe82 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-78b7fe82 .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-12 .elementor-element.elementor-element-78b7fe82 .elementor-custom-embed-play i{color:#c19a78;font-size:142px;}.elementor-12 .elementor-element.elementor-element-78b7fe82 .elementor-custom-embed-play svg{fill:#c19a78;width:142px;height:142px;}.elementor-12 .elementor-element.elementor-element-12c29bee > .elementor-widget-container{margin:0px 0px 30px 0px;}.elementor-12 .elementor-element.elementor-element-12c29bee{text-align:center;font-family:"Karla", Sans-serif;font-size:16px;line-height:27px;color:#ffffff;}.elementor-12 .elementor-element.elementor-element-b393076 .elementor-tab-content{color:#000000;}.elementor-12 .elementor-element.elementor-element-4863653b{padding:3em 0em 0em 0em;}.elementor-12 .elementor-element.elementor-element-2bbbe93 > .elementor-element-populated{box-shadow:0px 10px 50px 0px rgba(178,142,121,0.1);margin:0px 15px 0px 15px;--e-column-margin-right:15px;--e-column-margin-left:15px;padding:20px 40px 20px 40px;}.elementor-12 .elementor-element.elementor-element-52a98248 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-52a98248{text-align:left;}.elementor-12 .elementor-element.elementor-element-52a98248 .elementor-heading-title{font-family:"Merriweather", Sans-serif;font-size:30px;line-height:40px;color:#0c0c0c;}.elementor-12 .elementor-element.elementor-element-6f1f993f > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-6f1f993f{text-align:left;font-family:"Karla", Sans-serif;font-size:16px;line-height:27px;}.elementor-12 .elementor-element.elementor-element-65f783e5 .elementor-button{background-color:rgba(0,0,0,0);font-family:"Karla", Sans-serif;font-size:16px;font-weight:600;line-height:27px;fill:#000000;color:#000000;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-65f783e5 > .elementor-widget-container{margin:-5px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-7f70610c > .elementor-element-populated{box-shadow:0px 10px 50px 0px rgba(178,142,121,0.1);margin:0px 15px 0px 15px;--e-column-margin-right:15px;--e-column-margin-left:15px;padding:20px 40px 20px 40px;}.elementor-12 .elementor-element.elementor-element-2add159 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-2add159{text-align:left;}.elementor-12 .elementor-element.elementor-element-2add159 .elementor-heading-title{font-family:"Merriweather", Sans-serif;font-size:30px;line-height:40px;color:#0c0c0c;}.elementor-12 .elementor-element.elementor-element-4359ad1d > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-4359ad1d{text-align:left;font-family:"Karla", Sans-serif;font-size:16px;line-height:27px;}.elementor-12 .elementor-element.elementor-element-50a34f33 .elementor-button{background-color:rgba(0,0,0,0);font-family:"Karla", Sans-serif;font-size:16px;font-weight:600;line-height:27px;fill:#000000;color:#000000;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-50a34f33 > .elementor-widget-container{margin:-5px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-2301374b > .elementor-element-populated{box-shadow:0px 10px 50px 0px rgba(178,142,121,0.1);margin:0px 15px 0px 15px;--e-column-margin-right:15px;--e-column-margin-left:15px;padding:20px 40px 20px 40px;}.elementor-12 .elementor-element.elementor-element-459a0c3e > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-459a0c3e{text-align:left;}.elementor-12 .elementor-element.elementor-element-459a0c3e .elementor-heading-title{font-family:"Merriweather", Sans-serif;font-size:30px;line-height:40px;color:#0c0c0c;}.elementor-12 .elementor-element.elementor-element-5937482b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-5937482b{text-align:left;font-family:"Karla", Sans-serif;font-size:16px;line-height:27px;}.elementor-12 .elementor-element.elementor-element-54c16e55 .elementor-button{background-color:rgba(0,0,0,0);font-family:"Karla", Sans-serif;font-size:16px;font-weight:600;line-height:27px;fill:#000000;color:#000000;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-54c16e55 > .elementor-widget-container{margin:-5px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-12 .elementor-element.elementor-element-221d08bd.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-12 .elementor-element.elementor-element-221d08bd.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-12 .elementor-element.elementor-element-221d08bd > .elementor-element-populated{margin:60px 60px 60px 60px;--e-column-margin-right:60px;--e-column-margin-left:60px;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-5f9cb45c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:rgba(255,255,255,0.1);}.elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-element-populated >  .elementor-background-overlay{background-image:url("https://shivala.org/wp-content/uploads/2025/06/3.png");background-position:center center;background-repeat:no-repeat;background-size:cover;opacity:0.76;}.elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-element-populated, .elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-element-populated > .elementor-background-overlay, .elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-element-populated{box-shadow:0px 10px 50px 0px rgba(178,142,121,0.2);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:10px 10px 10px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;}.elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-beeea5a:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-12 .elementor-element.elementor-element-beeea5a > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:rgba(195,171,151,0.1);}.elementor-12 .elementor-element.elementor-element-beeea5a > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:rgba(195,171,151,0.1);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:10px 10px 10px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;}.elementor-12 .elementor-element.elementor-element-beeea5a > .elementor-element-populated, .elementor-12 .elementor-element.elementor-element-beeea5a > .elementor-element-populated > .elementor-background-overlay, .elementor-12 .elementor-element.elementor-element-beeea5a > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-beeea5a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-5667dd13 > .elementor-widget-container{padding:60px 20px 60px 20px;}.elementor-12 .elementor-element.elementor-element-5667dd13 .elementor-counter-number-wrapper{color:#c3ab97;font-family:"Merriweather", Sans-serif;font-size:45px;line-height:50px;}.elementor-12 .elementor-element.elementor-element-5667dd13 .elementor-counter-title{font-family:"Karla", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;}.elementor-12 .elementor-element.elementor-element-b9d5453:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-12 .elementor-element.elementor-element-b9d5453 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:rgba(195,171,151,0.1);}.elementor-12 .elementor-element.elementor-element-b9d5453 > .elementor-element-populated{border-style:solid;border-width:1px 1px 1px 1px;border-color:rgba(195,171,151,0.1);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:10px 10px 10px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;}.elementor-12 .elementor-element.elementor-element-b9d5453 > .elementor-element-populated, .elementor-12 .elementor-element.elementor-element-b9d5453 > .elementor-element-populated > .elementor-background-overlay, .elementor-12 .elementor-element.elementor-element-b9d5453 > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-b9d5453 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-5b5f8828 > .elementor-widget-container{padding:60px 20px 60px 20px;}.elementor-12 .elementor-element.elementor-element-5b5f8828 .elementor-counter-number-wrapper{color:#c3ab97;font-family:"Merriweather", Sans-serif;font-size:45px;line-height:50px;}.elementor-12 .elementor-element.elementor-element-5b5f8828 .elementor-counter-title{font-family:"Karla", Sans-serif;font-size:16px;font-weight:400;text-transform:capitalize;}.elementor-12 .elementor-element.elementor-element-2c1b61aa:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:rgba(255,255,255,0.1);}.elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-element-populated >  .elementor-background-overlay{background-image:url("https://shivala.org/wp-content/uploads/2025/06/9.png");background-position:center center;background-repeat:no-repeat;background-size:cover;opacity:0.76;}.elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-element-populated, .elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-element-populated > .elementor-background-overlay, .elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-element-populated{box-shadow:0px 10px 50px 0px rgba(178,142,121,0.2);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:10px 10px 10px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;}.elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-c00d74b:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-12 .elementor-element.elementor-element-c00d74b > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#c3ab97;}.elementor-12 .elementor-element.elementor-element-c00d74b > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:80px 80px 80px 120px;}.elementor-12 .elementor-element.elementor-element-c00d74b > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-2eb33f34{text-align:left;}.elementor-12 .elementor-element.elementor-element-2eb33f34 .elementor-heading-title{font-family:"Merriweather", Sans-serif;font-size:50px;font-weight:700;text-transform:capitalize;line-height:60px;color:#ffffff;}.elementor-12 .elementor-element.elementor-element-5565d14d > .elementor-widget-container{margin:20px 0px 40px 0px;}.elementor-12 .elementor-element.elementor-element-5565d14d{font-family:"Karla", Sans-serif;font-size:16px;line-height:27px;color:#ffffff;}.elementor-12 .elementor-element.elementor-element-31758644 > .elementor-widget-container{padding:0px 0px 20px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:rgba(255,255,255,0.37);}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-icon i{color:#635442;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-icon svg{fill:#635442;transition:fill 0.3s;}.elementor-12 .elementor-element.elementor-element-31758644{--e-icon-list-icon-size:29px;--icon-vertical-offset:0px;}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-icon{padding-inline-end:28px;}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-item > a{font-family:"Merriweather", Sans-serif;font-size:23px;font-weight:700;line-height:40px;}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-text{color:#ffffff;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-413c5b9d > .elementor-widget-container{padding:0px 0px 20px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:rgba(255,255,255,0.37);}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-icon i{color:#635442;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-icon svg{fill:#635442;transition:fill 0.3s;}.elementor-12 .elementor-element.elementor-element-413c5b9d{--e-icon-list-icon-size:29px;--icon-vertical-offset:0px;}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-icon{padding-inline-end:28px;}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-item > a{font-family:"Merriweather", Sans-serif;font-size:23px;font-weight:700;line-height:40px;}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-text{color:#ffffff;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-7d8280dd > .elementor-widget-container{padding:0px 0px 20px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:rgba(255,255,255,0.37);}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-icon i{color:#635442;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-icon svg{fill:#635442;transition:fill 0.3s;}.elementor-12 .elementor-element.elementor-element-7d8280dd{--e-icon-list-icon-size:29px;--icon-vertical-offset:0px;}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-icon{padding-inline-end:28px;}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-item > a{font-family:"Merriweather", Sans-serif;font-size:23px;font-weight:700;line-height:40px;}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-text{color:#ffffff;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-4a05de36 > .elementor-widget-container{padding:0px 0px 20px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:rgba(255,255,255,0.37);}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-icon i{color:#635442;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-icon svg{fill:#635442;transition:fill 0.3s;}.elementor-12 .elementor-element.elementor-element-4a05de36{--e-icon-list-icon-size:29px;--icon-vertical-offset:0px;}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-icon{padding-inline-end:28px;}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-item > a{font-family:"Merriweather", Sans-serif;font-size:23px;font-weight:700;line-height:40px;}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-text{color:#ffffff;transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-3ccf21bc{margin-top:0px;margin-bottom:0px;padding:4em 0em 6em 0em;}.elementor-bc-flex-widget .elementor-12 .elementor-element.elementor-element-4a0a583a.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-12 .elementor-element.elementor-element-4a0a583a.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-12 .elementor-element.elementor-element-4a0a583a > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-12 .elementor-element.elementor-element-7869020b img{border-radius:50% 50% 50% 50%;box-shadow:0px 10px 50px 0px rgba(178,142,121,0.2);}.elementor-bc-flex-widget .elementor-12 .elementor-element.elementor-element-3107da9a.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-12 .elementor-element.elementor-element-3107da9a.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-12 .elementor-element.elementor-element-3107da9a > .elementor-element-populated >  .elementor-background-overlay{background-position:top left;background-repeat:no-repeat;opacity:0.76;}.elementor-12 .elementor-element.elementor-element-3107da9a > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px 0px 60px;--e-column-margin-right:0px;--e-column-margin-left:60px;padding:70px 15px 0px 15px;}.elementor-12 .elementor-element.elementor-element-3107da9a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-12 .elementor-element.elementor-element-622a2ea1 > .elementor-widget-container{margin:-60px -30px -30px -30px;padding:1em 1em 1em 1em;}.elementor-12 .elementor-element.elementor-element-622a2ea1 .elementor-swiper-button{font-size:20px;}.elementor-12 .elementor-element.elementor-element-622a2ea1 .elementor-testimonial__text{color:#000000;font-family:"Merriweather", Sans-serif;font-size:2rem;font-weight:bold;font-style:oblique;line-height:1.4em;}.elementor-12 .elementor-element.elementor-element-622a2ea1 .elementor-testimonial__name{color:#000000;font-family:"Karla", Sans-serif;font-size:1.3rem;font-style:normal;letter-spacing:-0.2px;}.elementor-12 .elementor-element.elementor-element-622a2ea1 .elementor-testimonial__title{color:#c3ab97;font-family:"Karla", Sans-serif;font-size:1.2rem;font-weight:bold;text-transform:uppercase;font-style:normal;}.elementor-12 .elementor-element.elementor-element-42b8c533 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-3203c146.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:0px;}.elementor-12 .elementor-element.elementor-element-3203c146 > .elementor-widget-container{margin:0px 0px -30px 0px;padding:0em 0em 0em 0em;}.elementor-12 .elementor-element.elementor-element-3203c146 .elementor-main-swiper{height:320px;width:100%;}.elementor-12 .elementor-element.elementor-element-3203c146 .elementor-main-swiper .swiper-slide{background-color:#ffffff;}.elementor-12 .elementor-element.elementor-element-3203c146 .elementor-swiper-button{font-size:20px;}.elementor-12 .elementor-element.elementor-element-8d51c8d{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-12 .elementor-element.elementor-element-6c9b427 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-6c9b427 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-12 .elementor-element.elementor-element-6c9b427{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-12 .elementor-element.elementor-element-6c9b427 .elementor-icon-list-text{transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-6632911{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-12 .elementor-element.elementor-element-954ef62{text-align:center;}.elementor-12 .elementor-element.elementor-element-f8665b2 .elementor-icon-wrapper{text-align:center;}.elementor-12 .elementor-element.elementor-element-55b27b0 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-55b27b0 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-12 .elementor-element.elementor-element-55b27b0{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-12 .elementor-element.elementor-element-55b27b0 .elementor-icon-list-text{transition:color 0.3s;}.elementor-12 .elementor-element.elementor-element-8432b80{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-12 .elementor-element.elementor-element-4a0a583a{width:20%;}.elementor-12 .elementor-element.elementor-element-3107da9a{width:80%;}}@media(max-width:1024px){.elementor-12 .elementor-element.elementor-element-6bef43cb > .elementor-container{min-height:0px;}.elementor-12 .elementor-element.elementor-element-6bef43cb{padding:80px 20px 80px 20px;}.elementor-12 .elementor-element.elementor-element-4ed70d03{text-align:center;}.elementor-12 .elementor-element.elementor-element-543300b2 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-5bbe501d > .elementor-element-populated{padding:70px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-78b7fe82 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-12c29bee{font-size:1.2rem;}.elementor-12 .elementor-element.elementor-element-4863653b{padding:0px 20px 0px 20px;}.elementor-12 .elementor-element.elementor-element-2bbbe93 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-12 .elementor-element.elementor-element-52a98248{text-align:center;}.elementor-12 .elementor-element.elementor-element-6f1f993f{text-align:center;}.elementor-12 .elementor-element.elementor-element-7f70610c > .elementor-element-populated{margin:30px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-12 .elementor-element.elementor-element-2add159{text-align:center;}.elementor-12 .elementor-element.elementor-element-4359ad1d{text-align:center;}.elementor-12 .elementor-element.elementor-element-2301374b > .elementor-element-populated{margin:30px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-12 .elementor-element.elementor-element-459a0c3e{text-align:center;}.elementor-12 .elementor-element.elementor-element-5937482b{text-align:center;}.elementor-12 .elementor-element.elementor-element-221d08bd > .elementor-element-populated{margin:40px 20px 40px 20px;--e-column-margin-right:20px;--e-column-margin-left:20px;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-15f503e8{margin-top:0px;margin-bottom:0px;}.elementor-12 .elementor-element.elementor-element-5f9cb45c > .elementor-element-populated{padding:150px 0px 150px 0px;}.elementor-12 .elementor-element.elementor-element-2c1b61aa > .elementor-element-populated{padding:150px 0px 150px 0px;}.elementor-12 .elementor-element.elementor-element-c00d74b > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:4em 4em 4em 4em;}.elementor-12 .elementor-element.elementor-element-2eb33f34 .elementor-heading-title{font-size:40px;line-height:50px;}.elementor-12 .elementor-element.elementor-element-3ccf21bc{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-7869020b{text-align:center;}.elementor-12 .elementor-element.elementor-element-3107da9a > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:60px 20px 0px 20px;}.elementor-12 .elementor-element.elementor-element-3203c146.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-12 .elementor-element.elementor-element-8d51c8d{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-12 .elementor-element.elementor-element-6bef43cb{padding:14px 0px 0px 0px;}.elementor-12 .elementor-element.elementor-element-4ed70d03{text-align:center;}.elementor-12 .elementor-element.elementor-element-4ed70d03 .elementor-heading-title{font-size:1.8rem;line-height:1.4em;}.elementor-12 .elementor-element.elementor-element-12c29bee{text-align:center;}.elementor-12 .elementor-element.elementor-element-52a98248 .elementor-heading-title{font-size:30px;line-height:40px;}.elementor-12 .elementor-element.elementor-element-2add159 .elementor-heading-title{font-size:30px;line-height:40px;}.elementor-12 .elementor-element.elementor-element-459a0c3e .elementor-heading-title{font-size:30px;line-height:40px;}.elementor-12 .elementor-element.elementor-element-c00d74b > .elementor-element-populated{padding:2em 2em 2em 2em;}.elementor-12 .elementor-element.elementor-element-5565d14d{text-align:left;}.elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-31758644 .elementor-icon-list-item > a{font-size:25px;line-height:30px;}.elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-413c5b9d .elementor-icon-list-item > a{font-size:25px;line-height:30px;}.elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-7d8280dd .elementor-icon-list-item > a{font-size:25px;line-height:30px;}.elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-12 .elementor-element.elementor-element-4a05de36 .elementor-icon-list-item > a{font-size:25px;line-height:30px;}.elementor-12 .elementor-element.elementor-element-7869020b{text-align:center;}.elementor-12 .elementor-element.elementor-element-622a2ea1 .elementor-testimonial__text{font-size:15px;}.elementor-12 .elementor-element.elementor-element-3203c146.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-12 .elementor-element.elementor-element-8d51c8d{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}@media(max-width:1024px) and (min-width:768px){.elementor-12 .elementor-element.elementor-element-7119f7bb{width:100%;}.elementor-12 .elementor-element.elementor-element-543300b2{width:100%;}.elementor-12 .elementor-element.elementor-element-5bbe501d{width:100%;}.elementor-12 .elementor-element.elementor-element-2bbbe93{width:100%;}.elementor-12 .elementor-element.elementor-element-7f70610c{width:100%;}.elementor-12 .elementor-element.elementor-element-2301374b{width:100%;}.elementor-12 .elementor-element.elementor-element-221d08bd{width:100%;}.elementor-12 .elementor-element.elementor-element-5f9cb45c{width:100%;}.elementor-12 .elementor-element.elementor-element-beeea5a{width:100%;}.elementor-12 .elementor-element.elementor-element-b9d5453{width:100%;}.elementor-12 .elementor-element.elementor-element-2c1b61aa{width:100%;}.elementor-12 .elementor-element.elementor-element-c00d74b{width:100%;}.elementor-12 .elementor-element.elementor-element-4a0a583a{width:100%;}.elementor-12 .elementor-element.elementor-element-3107da9a{width:100%;}}/* Start custom CSS for section, class: .elementor-element-6bef43cb */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Varanasi Pooja Booking - Floating Menu</title>
    <!-- Tailwind CSS CDN for basic utility classes and responsive design -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Inter for general text (retained) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Google Fonts: Permanent Marker for handmade text (NEW) -->
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /*
=================================================================
=================================================================
** Spiritually Themed CSS for shivala.org               **
** Based on the Sanatana Dharma theme                     **
=================================================================
=================================================================
*/

/*
=================================================================
** 0. Spiritual Color Palette **
** You can change the entire website's colors from here **
=================================================================
*/
:root {
    /* Richer, more vibrant spiritual colors */
    --spiritual-saffron: #E67E22; /* More intense saffron */
    --spiritual-gold: #FFD700;    /* Brighter, more prominent gold */
    --deep-maroon: #A52A2A;       /* Richer, warmer maroon */
    --warm-background: #FFFAF0;   /* Lighter, more luminous cream */
    --dark-text: #4A2D1F;         /* Deeper, more distinct brown text */
    --soft-shadow: rgba(160, 82, 45, 0.4); /* Stronger, more defined warm shadow */
}

/*
=================================================================
** 1. Global Styles & Body Background **
=================================================================
*/

/* Apply a warm, spiritual background and softer text color to the entire site */
body {
    background-color: var(--warm-background) !important;
    color: var(--dark-text) !important;
    position: relative; /* Needed for pseudo-element positioning */
    overflow-x: hidden; /* Prevent horizontal scroll for fixed elements */
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* A calm and gentle transition for all interactive elements */
a, button, .elementor-element {
    transition: all 0.4s ease-in-out !important;
}

/* Improve readability for paragraph text */
.elementor-widget-text-editor p {
    line-height: 1.8;
}

/* --- Continuous Flower Wind Background (Abstract - CSS only) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind content */
    background:
        /* Subtle saffron and gold "blooms" that drift, with more opacity */
        radial-gradient(circle at 20% 80%, rgba(var(--spiritual-saffron-rgb), 0.12) 0%, transparent 60%) top left / 40% 40% no-repeat,
        radial-gradient(circle at 80% 20%, rgba(var(--spiritual-gold-rgb), 0.12) 0%, transparent 60%) bottom right / 45% 45% no-repeat,
        radial-gradient(circle at 50% 50%, rgba(var(--deep-maroon-rgb), 0.08) 0%, transparent 60%) center center / 35% 35% no-repeat;
    background-size: 300% 300%; /* Large background to allow for movement */
    animation: wind-flow 60s linear infinite; /* Slow, continuous flow */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
    opacity: 0.7; /* Overall subtlety for the background effect */
}

/* Helper variables to get RGB components from hex for rgba() */
:root {
    --spiritual-saffron-rgb: 230, 126, 34; /* RGB of #E67E22 */
    --spiritual-gold-rgb: 218, 165, 32;   /* RGB of #DAA520 */
    --deep-maroon-rgb: 165, 42, 42;       /* RGB of #A52A2A */
}


@keyframes wind-flow {
    0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    100% { background-position: 100% 100%, 0% 0%, 100% 100%; } /* Move gradients diagonally */
}


/*
=================================================================
** 2. Headings & Typography **
=================================================================
*/

.elementor-heading-title {
    color: var(--deep-maroon); /* Deep maroon color for headings */
    /* You could add a serif font for a more traditional look */
    /* font-family: 'Georgia', serif; */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle shadow to lift text */
}


/*
=================================================================
** 3. Spiritual Button Style **
=================================================================
*/
.elementor-button {
    border-radius: 50px !important; /* Fully rounded buttons */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border: 2px solid transparent !important;
    /* A divine gradient of saffron and gold */
    background: linear-gradient(45deg, var(--spiritual-saffron), var(--spiritual-gold)) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px var(--soft-shadow) !important;
}

/* Button Hover Effect */
.elementor-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--soft-shadow) !important;
    /* Reveal a border color on hover */
    border-color: var(--deep-maroon) !important;
}


/*
=================================================================
** 4. Content Boxes & Services **
=================================================================
*/
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: rgba(255, 255, 255, 0.6); /* Slightly less transparent white background */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow */
    border: 1px solid transparent;
    padding: 25px;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-8px);
    border-color: var(--spiritual-saffron);
    background-color: #ffffff; /* Opaque white on hover for prominence */
}

/* Give the icons inside the box a divine glow */
.elementor-widget-image-box .elementor-image-box-wrapper .elementor-icon {
    transition: all 0.4s ease !important;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover .elementor-icon {
    color: var(--spiritual-saffron);
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--spiritual-saffron); /* Glow effect for the icon */
}

/*
=================================================================
** 5. Section Separators **
=================================================================
*/
/* Add a decorative line after each section */
.elementor-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--spiritual-saffron), transparent);
    margin: 40px auto 0; /* Margin below the section */
    opacity: 0.8; /* Slightly less opaque */
}

/* Don't show the line after the very last section */
.elementor-section:last-of-type::after {
    display: none;
}

/*
=================================================================
** 6. Mobile Responsive Fixes **
=================================================================
*/
@media (max-width: 767px) {
    h1.elementor-heading-title {
        font-size: 30px !important;
    }

    h2.elementor-heading-title {
        font-size: 26px !important;
    }

    /* Make the section separator smaller on mobile */
    .elementor-section::after {
        width: 100px;
        height: 2px;
    }
}

        /* Original styles for the floating menu and river banner, integrated */

        /* --- Keyframes for Animations --- */
        /* Keyframes for the breath/glow animation (for icons and GC button) */
        @keyframes breathe-glow {
            0% {
                box-shadow: 0 0 0px rgba(100, 180, 255, 0); /* No initial shadow/glow */
            }
            50% {
                box-shadow: 0 0 15px rgba(100, 180, 255, 0.7); /* Brighter blue glow at peak */
            }
            100% {
                box-shadow: 0 0 0px rgba(100, 180, 255, 0); /* Return to no shadow/glow */
            }
        }

        /* Keyframes for the main floating animation (for the whole container and individual icons) */
        @keyframes float-animation {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); } /* Subtler float height */
            100% { transform: translateY(0px); }
        }

        /* Keyframes for the Instagram glowing effect (specific to Instagram) */
        @keyframes instagram-glow {
            0% { box-shadow: 0 0 0px rgba(225, 48, 108, 0); }
            50% { box-shadow: 0 0 15px rgba(225, 48, 108, 0.7); }
            100% { box-shadow: 0 0 0px rgba(225, 48, 108, 0); }
        }

        /* Keyframes for the "twerking" effect on the map icon */
        @keyframes twerk-animation {
            0%, 100% { transform: rotate(0deg) translateY(0px); }
            25% { transform: rotate(-3deg) translateY(-2px); }
            50% { transform: rotate(3deg) translateY(2px); }
            75% { transform: rotate(-3deg) translateY(-2px); }
        }

        /* --- River Banner Styling --- */
        .river-banner-container {
            width: 100%;
            height: 100px; /* Small banner size */
            position: relative;
            overflow: hidden;
            background-color: #1a73e8; /* Default background if canvas fails/loads late */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        #riverCanvas {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #0d47a1; /* Darker blue for water base */
        }

        /* --- Floating Container Styling (now transparent and acts as a holder) --- */
        .floating-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px; /* Space between icons/button */
            /* The float-animation on the container now affects the collective position */
            animation: float-animation 4s infinite ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        /* Responsive adjustments for the floating container */
        @media (max-width: 768px) {
            .floating-container {
                bottom: 10px;
                right: 10px;
                left: 10px; /* Stretch horizontally on smaller screens */
                flex-direction: row; /* Align items horizontally */
                justify-content: space-around; /* Distribute space evenly */
                gap: 10px; /* Smaller gap on mobile */
            }
        }

        /* --- Icon Button Styling (each icon is now an attractive button) --- */
        .icon-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px; /* Fixed width for icon circles */
            height: 50px; /* Fixed height for icon circles */
            border-radius: 50%; /* Make them circular */
            background-color: #555; /* Opaque default icon background */
            color: white;
            font-size: 1.5rem;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none; /* Explicitly remove any default borders */
            outline: none; /* Remove outline on focus */

            /* Apply floating and breathing animations to ALL individual icon buttons */
            animation: float-animation 3s infinite ease-in-out,
                       breathe-glow 2.5s infinite alternate ease-in-out;
        }

        .icon-button:hover {
            transform: translateY(-3px) scale(1.05); /* Lift and slight enlarge on hover */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* Subtle shadow on hover */
        }

        /* Specific icon colors (these will override the default background-color for .icon-button) */
        .icon-button.facebook { background-color: #3b5998; }
        .icon-button.instagram {
            background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            animation: instagram-glow 2.5s infinite alternate ease-in-out; /* Instagram has its own glow */
        }
        .icon-button.map {
            background-color: #ea4335; /* Google Maps red */
            animation: twerk-animation 0.5s infinite alternate ease-in-out; /* Twerking effect for map icon */
        }
        .icon-button.whatsapp { background-color: #25D366; } /* WhatsApp green */
        .icon-button.mail { background-color: #DB4437; } /* Gmail/Red for mail */


        /* --- Google Calendar Button Styling (Custom override for attractive button) --- */
        /* Make it look like an icon, but its content is text from external script */
        .gc-scheduling-button {
            /* Force width/height and border-radius to mimic icon-button */
            width: 50px !important;
            height: 50px !important;
            border-radius: 50% !important;
            font-size: 0.8rem !important; /* Smaller font to fit in circle if text is long */
            padding: 0 !important; /* Remove internal padding */
            line-height: 50px !important; /* Vertically center single line text */
            overflow: hidden !important; /* Hide overflow if text is too long */
            text-align: center !important; /* Center text */

            /* Remove its own glowing/breathing effect to rely on shared icon-button style */
            animation: breathe-glow 2.5s infinite alternate ease-in-out !important; /* Apply breathe glow */

            /* Ensure smooth transitions and cursor */
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            border: none !important; /* Explicitly remove any border */
            outline: none !important; /* Remove outline on focus */

            /* Add background color based on the script's 'color' property or override it */
            background-color: #039BE5 !important; /* Default Google Blue */
            color: white !important; /* Ensure text is white */
        }

        .gc-scheduling-button:hover {
            transform: translateY(-3px) scale(1.05) !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
        }

        /* Message box styling (from previous example, for completeness) */
        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none; /* Hidden by default */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            max-width: 80%;
        }

        .message-box.show {
            display: flex;
        }

        .message-box button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <!-- Ganga River Water Effect Banner -->
    <div class="river-banner-container">
        <canvas id="riverCanvas"></canvas>
    </div>

    <!-- Main Floating Container (now transparent and just holds the icons) -->
    <div class="floating-container">
        <!-- Facebook Icon -->
        <a href="https://www.facebook.com/people/Varanasi-Pooja-Centre/61556311663816/" target="_blank" aria-label="Visit us on Facebook" class="icon-button facebook">
            <i class="fab fa-facebook-f"></i>
        </a>

        <!-- Instagram Icon -->
        <a href="https://www.instagram.com/shivalaaarati/?igsh=MWZ2NTl2ZDZjcm1vNw%3D%3D#" target="_blank" aria-label="Visit us on Instagram" class="icon-button instagram">
            <i class="fab fa-instagram"></i>
        </a>

        <!-- WhatsApp Icon -->
        <a href="https://wa.me/8858885319" target="_blank" aria-label="Chat on WhatsApp" class="icon-button whatsapp">
            <i class="fab fa-whatsapp"></i>
        </a>

        <!-- Mail Icon -->
        <a href="mailto:YOUR_EMAIL_ADDRESS" target="_blank" aria-label="Send us an Email" class="icon-button mail">
            <i class="fas fa-envelope"></i>
        </a>

        <!-- Google Calendar Appointment Scheduling Button -->
        <!-- The script below will automatically inject a button here -->
        <div id="google-calendar-booking-button-container">
            <!-- Google Calendar Appointment Scheduling begin -->
            <link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
            <script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
            <script>
            (function() {
                var target = document.currentScript;
                // No need for mapInstance here, as it's defined globally for initMap
                window.addEventListener('load', function() {
                    calendar.schedulingButton.load({
                        url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ2CAlNpLPG7QPwBdrnEDjf7ITNy-aX71p0Hx9FJSX00s-s6TRxWBkGvN7UABCYsCv77ZddTgn53?gv=true',
                        color: '#039BE5', /* This sets the background color of the GC button */
                        label: 'Join Ganga Pooja', /* Changed label here */
                        target,
                    });
                });
            })();
            </script>
            <!-- end Google Calendar Appointment Scheduling -->
        </div>

        <!-- Map Icon (opens modal with Google Map) -->
        <div id="openMapModal" aria-label="Find us on Map" class="icon-button map">
            <i class="fas fa-map-marker-alt"></i>
        </div>
    </div>

    <!-- Map Modal Overlay -->
    <div id="mapModalOverlay" class="map-modal-overlay">
        <div class="map-modal-content">
            <div id="map"></div>
            <button id="closeMapModal" class="map-modal-close-btn">Close</button>
        </div>
    </div>

    <!-- Message Box for custom alerts -->
    <div id="messageBox" class="message-box">
        <p id="messageText"></p>
        <button onclick="document.getElementById('messageBox').classList.remove('show');">OK</button>
    </div>

    <script>
        // --- River Banner Animation Logic ---
        const canvas = document.getElementById('riverCanvas');
        const ctx = canvas.getContext('2d');
        let particles = []; // Represents "waves" or "flow lines"
        const floatingTexts = []; // Stores floating text elements
        const englishTextPhrases = ["BHAJ GOVINDAM", "HAR HAR MAHADEV", "JAI JAI SHANKAR"]; // English transliterations

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = 100; // Fixed height for the banner
            initParticles(); // Reinitialize particles on resize
            initFloatingTexts(); // Reinitialize floating texts on resize
        }

        // Function to draw a more natural leaf shape
        function drawLeaf(context, x, y, width, height, rotation) {
            context.save();
            context.translate(x, y);
            context.rotate(rotation);

            // Using Bezier curves for a more organic leaf shape
            context.beginPath();
            context.moveTo(0, height / 2); // Bottom tip
            context.bezierCurveTo(width * 0.3, height * 0.3, width * 0.3, -height * 0.3, 0, -height / 2); // Right side
            context.bezierCurveTo(-width * 0.3, -height * 0.3, -width * 0.3, height * 0.3, 0, height / 2); // Left side
            context.closePath();
            
            // Random leaf color (shades of green/brown)
            const hue = 40 + Math.random() * 40; // Greenish-yellow to olive
            const saturation = 40 + Math.random() * 30; // Medium saturation
            const lightness = 30 + Math.random() * 15; // Darker
            const alpha = 0.7 + Math.random() * 0.2; // Slight transparency
            context.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
            context.fill();

            // Simple vein line (more subtle)
            context.beginPath();
            context.moveTo(-width * 0.3, 0);
            context.lineTo(width * 0.3, 0);
            context.strokeStyle = `rgba(0, 0, 0, 0.15)`; // Very faint vein
            context.lineWidth = 0.8;
            context.stroke();

            context.restore();
        }

        function initParticles() {
            particles = [];
            const numParticles = 20; // Number of wave lines
            const particleGap = canvas.height / numParticles;

            for (let i = 0; i < numParticles; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: i * particleGap + particleGap / 2,
                    speed: 0.5 + Math.random() * 1.5, // Random speed for flow variation
                    amplitude: 5 + Math.random() * 5, // Random wave height
                    frequency: 0.01 + Math.random() * 0.02, // Random wave frequency
                    color: `rgba(173, 216, 230, ${0.3 + Math.random() * 0.5})` // Light blue to darker blue
                });
            }
        }

        function initFloatingTexts() {
            floatingTexts.length = 0; // Clear existing texts
            const numTexts = 5; // Number of floating text elements
            const textVerticalGap = canvas.height / (numTexts + 1);

            for (let i = 0; i < numTexts; i++) {
                floatingTexts.push({
                    text: englishTextPhrases[Math.floor(Math.random() * englishTextPhrases.length)], // Use English phrases
                    x: Math.random() * canvas.width,
                    y: (i + 1) * textVerticalGap + (Math.random() * 10 - 5), // Distribute vertically, add slight random offset
                    speed: 0.3 + Math.random() * 0.8, // Slower speed for text
                    amplitude: 3 + Math.random() * 3, // Smaller wave for text
                    frequency: 0.008 + Math.random() * 0.015, // Slower frequency for text
                    color: `rgba(255, 255, 255, ${0.9})`, // Opaque white for text on leaves
                    fontSize: 14 + Math.random() * 6, // Vary font size between 14px and 20px
                    leafWidth: 80 + Math.random() * 40, // Wider leaves to accommodate English text
                    leafHeight: 40 + Math.random() * 20, // Taller leaves
                    rotation: Math.random() * Math.PI / 4 - Math.PI / 8 // Random rotation +/- 22.5 degrees
                });
            }
        }

        function drawRiver() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

            // Draw base water gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#0056b3'); // Darker blue
            gradient.addColorStop(1, '#4682B4'); // Lighter blue
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw and update wave particles
            particles.forEach(p => {
                ctx.beginPath();
                ctx.strokeStyle = p.color;
                ctx.lineWidth = 1 + Math.random(); // Slight variation in line thickness

                // Draw a wavy line segment
                ctx.moveTo(p.x, p.y + Math.sin(p.x * p.frequency + performance.now() * 0.002) * p.amplitude);
                ctx.lineTo(p.x + 50, p.y + Math.sin((p.x + 50) * p.frequency + performance.now() * 0.002) * p.amplitude);

                ctx.stroke();

                p.x += p.speed; // Move particle horizontally

                // If particle moves off screen, reset it to the other side
                if (p.x > canvas.width) {
                    p.x = -50; // Start slightly off-screen to ensure continuous flow
                }
            });

            // Draw and update floating texts (now on leaves)
            floatingTexts.forEach(t => {
                const waveOffset = Math.sin(t.x * t.frequency + performance.now() * 0.0015) * t.amplitude;
                const currentY = t.y + waveOffset;

                // Draw the leaf first
                drawLeaf(ctx, t.x, currentY, t.leafWidth, t.leafHeight, t.rotation);

                // Draw the text on top of the leaf
                ctx.font = `${t.fontSize}px 'Permanent Marker', cursive`; // Use Permanent Marker font
                ctx.fillStyle = t.color;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';

                // To make text look handmade/rough, might slightly adjust its position or rotation
                ctx.save();
                ctx.translate(t.x, currentY);
                ctx.rotate(t.rotation + (Math.random() * 0.02 - 0.01)); // Slight additional random rotation for handmade feel
                ctx.fillText(t.text, 0, 0);
                ctx.restore();

                t.x += t.speed; // Move text horizontally

                // If text moves off screen, reset it to the other side with new random properties
                if (t.x > canvas.width + 100) { // Add buffer for longer text
                    t.x = -100;
                    t.text = englishTextPhrases[Math.floor(Math.random() * englishTextPhrases.length)]; // New English phrase
                    t.y = Math.random() * canvas.height; // Random Y position
                    t.speed = 0.3 + Math.random() * 0.8; // New speed
                    t.amplitude = 3 + Math.random() * 3; // New amplitude
                    t.leafWidth = 80 + Math.random() * 40; // New leaf width
                    t.leafHeight = 40 + Math.random() * 20; // New leaf height
                    t.rotation = Math.random() * Math.PI / 4 - Math.PI / 8; // New random rotation
                }
            });

            requestAnimationFrame(drawRiver); // Loop animation
        }

        // Initialize and start animation when window loads
        window.addEventListener('load', () => {
            resizeCanvas();
            drawRiver();
        });

        // Re-size and re-initialize particles/texts on window resize
        window.addEventListener('resize', resizeCanvas);


        // --- Map Modal Logic ---
        const openMapModalBtn = document.getElementById('openMapModal');
        const mapModalOverlay = document.getElementById('mapModalOverlay');
        const closeMapModalBtn = document.getElementById('closeMapModal');
        let mapLoaded = false; // To prevent loading Google Maps API multiple times
        let mapInstance = null; // Store map instance here
        const varanasiLocation = { lat: 25.321684, lng: 82.987289 }; // Varanasi coordinates

        openMapModalBtn.addEventListener('click', () => {
            mapModalOverlay.classList.add('show'); // Show the modal

            if (!mapLoaded) {
                // Dynamically load Google Maps JavaScript API
                const script = document.createElement('script');
                script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyD-FeSty1K8tdIim7VdYB3F43I9dTbXeQ0&callback=initMap`;
                script.async = true;
                script.defer = true;
                document.head.appendChild(script);
                mapLoaded = true;
            } else {
                // If map was already loaded, ensure it's resized and centered
                if (mapInstance && typeof google !== 'undefined' && google.maps && google.maps.event) {
                    // This is the crucial part: trigger resize after the modal is visible
                    setTimeout(() => { // Small delay to allow modal to render fully
                        google.maps.event.trigger(mapInstance, 'resize');
                        mapInstance.setCenter(varanasiLocation);
                    }, 150); // Increased delay slightly to 150ms for more reliability
                }
            }
        });

        closeMapModalBtn.addEventListener('click', () => {
            mapModalOverlay.classList.remove('show'); // Hide the modal
        });

        // Global function required by Google Maps API callback
        function initMap() {
            mapInstance = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: varanasiLocation,
                mapTypeId: 'roadmap' // or 'satellite', 'hybrid', 'terrain'
            });

            // Add a marker for Varanasi
            new google.maps.Marker({
                position: varanasiLocation,
                map: mapInstance,
                title: 'Varanasi Pooja Centre'
            });
        }
    </script>
</body>
</html>/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-4863653b */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Varanasi Pooja Booking - Floating Menu</title>
    <!-- Tailwind CSS CDN for basic utility classes and responsive design -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Inter for general text (retained) -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Google Fonts: Permanent Marker for handmade text (NEW) -->
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /*
=================================================================
=================================================================
** Spiritually Themed CSS for shivala.org               **
** Based on the Sanatana Dharma theme                     **
=================================================================
=================================================================
*/

/*
=================================================================
** 0. Spiritual Color Palette **
** You can change the entire website's colors from here **
=================================================================
*/
:root {
    /* Richer, more vibrant spiritual colors */
    --spiritual-saffron: #E67E22; /* More intense saffron */
    --spiritual-gold: #FFD700;    /* Brighter, more prominent gold */
    --deep-maroon: #A52A2A;       /* Richer, warmer maroon */
    --warm-background: #FFFAF0;   /* Lighter, more luminous cream */
    --dark-text: #4A2D1F;         /* Deeper, more distinct brown text */
    --soft-shadow: rgba(160, 82, 45, 0.4); /* Stronger, more defined warm shadow */
}

/*
=================================================================
** 1. Global Styles & Body Background **
=================================================================
*/

/* Apply a warm, spiritual background and softer text color to the entire site */
body {
    background-color: var(--warm-background) !important;
    color: var(--dark-text) !important;
    position: relative; /* Needed for pseudo-element positioning */
    overflow-x: hidden; /* Prevent horizontal scroll for fixed elements */
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* A calm and gentle transition for all interactive elements */
a, button, .elementor-element {
    transition: all 0.4s ease-in-out !important;
}

/* Improve readability for paragraph text */
.elementor-widget-text-editor p {
    line-height: 1.8;
}

/* --- Continuous Flower Wind Background (Abstract - CSS only) --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind content */
    background:
        /* Subtle saffron and gold "blooms" that drift, with more opacity */
        radial-gradient(circle at 20% 80%, rgba(var(--spiritual-saffron-rgb), 0.12) 0%, transparent 60%) top left / 40% 40% no-repeat,
        radial-gradient(circle at 80% 20%, rgba(var(--spiritual-gold-rgb), 0.12) 0%, transparent 60%) bottom right / 45% 45% no-repeat,
        radial-gradient(circle at 50% 50%, rgba(var(--deep-maroon-rgb), 0.08) 0%, transparent 60%) center center / 35% 35% no-repeat;
    background-size: 300% 300%; /* Large background to allow for movement */
    animation: wind-flow 60s linear infinite; /* Slow, continuous flow */
    pointer-events: none; /* Ensure it doesn't interfere with clicks */
    opacity: 0.7; /* Overall subtlety for the background effect */
}

/* Helper variables to get RGB components from hex for rgba() */
:root {
    --spiritual-saffron-rgb: 230, 126, 34; /* RGB of #E67E22 */
    --spiritual-gold-rgb: 218, 165, 32;   /* RGB of #DAA520 */
    --deep-maroon-rgb: 165, 42, 42;       /* RGB of #A52A2A */
}


@keyframes wind-flow {
    0% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    100% { background-position: 100% 100%, 0% 0%, 100% 100%; } /* Move gradients diagonally */
}


/*
=================================================================
** 2. Headings & Typography **
=================================================================
*/

.elementor-heading-title {
    color: var(--deep-maroon); /* Deep maroon color for headings */
    /* You could add a serif font for a more traditional look */
    /* font-family: 'Georgia', serif; */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle shadow to lift text */
}


/*
=================================================================
** 3. Spiritual Button Style **
=================================================================
*/
.elementor-button {
    border-radius: 50px !important; /* Fully rounded buttons */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border: 2px solid transparent !important;
    /* A divine gradient of saffron and gold */
    background: linear-gradient(45deg, var(--spiritual-saffron), var(--spiritual-gold)) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px var(--soft-shadow) !important;
}

/* Button Hover Effect */
.elementor-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--soft-shadow) !important;
    /* Reveal a border color on hover */
    border-color: var(--deep-maroon) !important;
}


/*
=================================================================
** 4. Content Boxes & Services **
=================================================================
*/
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: rgba(255, 255, 255, 0.6); /* Slightly less transparent white background */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow */
    border: 1px solid transparent;
    padding: 25px;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-8px);
    border-color: var(--spiritual-saffron);
    background-color: #ffffff; /* Opaque white on hover for prominence */
}

/* Give the icons inside the box a divine glow */
.elementor-widget-image-box .elementor-image-box-wrapper .elementor-icon {
    transition: all 0.4s ease !important;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover .elementor-icon {
    color: var(--spiritual-saffron);
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--spiritual-saffron); /* Glow effect for the icon */
}

/*
=================================================================
** 5. Section Separators **
=================================================================
*/
/* Add a decorative line after each section */
.elementor-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--spiritual-saffron), transparent);
    margin: 40px auto 0; /* Margin below the section */
    opacity: 0.8; /* Slightly less opaque */
}

/* Don't show the line after the very last section */
.elementor-section:last-of-type::after {
    display: none;
}

/*
=================================================================
** 6. Mobile Responsive Fixes **
=================================================================
*/
@media (max-width: 767px) {
    h1.elementor-heading-title {
        font-size: 30px !important;
    }

    h2.elementor-heading-title {
        font-size: 26px !important;
    }

    /* Make the section separator smaller on mobile */
    .elementor-section::after {
        width: 100px;
        height: 2px;
    }
}

        /* Original styles for the floating menu and river banner, integrated */

        /* --- Keyframes for Animations --- */
        /* Keyframes for the breath/glow animation (for icons and GC button) */
        @keyframes breathe-glow {
            0% {
                box-shadow: 0 0 0px rgba(100, 180, 255, 0); /* No initial shadow/glow */
            }
            50% {
                box-shadow: 0 0 15px rgba(100, 180, 255, 0.7); /* Brighter blue glow at peak */
            }
            100% {
                box-shadow: 0 0 0px rgba(100, 180, 255, 0); /* Return to no shadow/glow */
            }
        }

        /* Keyframes for the main floating animation (for the whole container and individual icons) */
        @keyframes float-animation {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); } /* Subtler float height */
            100% { transform: translateY(0px); }
        }

        /* Keyframes for the Instagram glowing effect (specific to Instagram) */
        @keyframes instagram-glow {
            0% { box-shadow: 0 0 0px rgba(225, 48, 108, 0); }
            50% { box-shadow: 0 0 15px rgba(225, 48, 108, 0.7); }
            100% { box-shadow: 0 0 0px rgba(225, 48, 108, 0); }
        }

        /* Keyframes for the "twerking" effect on the map icon */
        @keyframes twerk-animation {
            0%, 100% { transform: rotate(0deg) translateY(0px); }
            25% { transform: rotate(-3deg) translateY(-2px); }
            50% { transform: rotate(3deg) translateY(2px); }
            75% { transform: rotate(-3deg) translateY(-2px); }
        }

        /* --- River Banner Styling --- */
        .river-banner-container {
            width: 100%;
            height: 100px; /* Small banner size */
            position: relative;
            overflow: hidden;
            background-color: #1a73e8; /* Default background if canvas fails/loads late */
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        #riverCanvas {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #0d47a1; /* Darker blue for water base */
        }

        /* --- Floating Container Styling (now transparent and acts as a holder) --- */
        .floating-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px; /* Space between icons/button */
            /* The float-animation on the container now affects the collective position */
            animation: float-animation 4s infinite ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        /* Responsive adjustments for the floating container */
        @media (max-width: 768px) {
            .floating-container {
                bottom: 10px;
                right: 10px;
                left: 10px; /* Stretch horizontally on smaller screens */
                flex-direction: row; /* Align items horizontally */
                justify-content: space-around; /* Distribute space evenly */
                gap: 10px; /* Smaller gap on mobile */
            }
        }

        /* --- Icon Button Styling (each icon is now an attractive button) --- */
        .icon-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px; /* Fixed width for icon circles */
            height: 50px; /* Fixed height for icon circles */
            border-radius: 50%; /* Make them circular */
            background-color: #555; /* Opaque default icon background */
            color: white;
            font-size: 1.5rem;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none; /* Explicitly remove any default borders */
            outline: none; /* Remove outline on focus */

            /* Apply floating and breathing animations to ALL individual icon buttons */
            animation: float-animation 3s infinite ease-in-out,
                       breathe-glow 2.5s infinite alternate ease-in-out;
        }

        .icon-button:hover {
            transform: translateY(-3px) scale(1.05); /* Lift and slight enlarge on hover */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* Subtle shadow on hover */
        }

        /* Specific icon colors (these will override the default background-color for .icon-button) */
        .icon-button.facebook { background-color: #3b5998; }
        .icon-button.instagram {
            background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            animation: instagram-glow 2.5s infinite alternate ease-in-out; /* Instagram has its own glow */
        }
        .icon-button.map {
            background-color: #ea4335; /* Google Maps red */
            animation: twerk-animation 0.5s infinite alternate ease-in-out; /* Twerking effect for map icon */
        }
        .icon-button.whatsapp { background-color: #25D366; } /* WhatsApp green */
        .icon-button.mail { background-color: #DB4437; } /* Gmail/Red for mail */


        /* --- Google Calendar Button Styling (Custom override for attractive button) --- */
        /* Make it look like an icon, but its content is text from external script */
        .gc-scheduling-button {
            /* Force width/height and border-radius to mimic icon-button */
            width: 50px !important;
            height: 50px !important;
            border-radius: 50% !important;
            font-size: 0.8rem !important; /* Smaller font to fit in circle if text is long */
            padding: 0 !important; /* Remove internal padding */
            line-height: 50px !important; /* Vertically center single line text */
            overflow: hidden !important; /* Hide overflow if text is too long */
            text-align: center !important; /* Center text */

            /* Remove its own glowing/breathing effect to rely on shared icon-button style */
            animation: breathe-glow 2.5s infinite alternate ease-in-out !important; /* Apply breathe glow */

            /* Ensure smooth transitions and cursor */
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            border: none !important; /* Explicitly remove any border */
            outline: none !important; /* Remove outline on focus */

            /* Add background color based on the script's 'color' property or override it */
            background-color: #039BE5 !important; /* Default Google Blue */
            color: white !important; /* Ensure text is white */
        }

        .gc-scheduling-button:hover {
            transform: translateY(-3px) scale(1.05) !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
        }

        /* Message box styling (from previous example, for completeness) */
        .message-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none; /* Hidden by default */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            max-width: 80%;
        }

        .message-box.show {
            display: flex;
        }

        .message-box button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <!-- Ganga River Water Effect Banner -->
    <div class="river-banner-container">
        <canvas id="riverCanvas"></canvas>
    </div>

    <!-- Main Floating Container (now transparent and just holds the icons) -->
    <div class="floating-container">
        <!-- Facebook Icon -->
        <a href="https://www.facebook.com/people/Varanasi-Pooja-Centre/61556311663816/" target="_blank" aria-label="Visit us on Facebook" class="icon-button facebook">
            <i class="fab fa-facebook-f"></i>
        </a>

        <!-- Instagram Icon -->
        <a href="https://www.instagram.com/shivalaaarati/?igsh=MWZ2NTl2ZDZjcm1vNw%3D%3D#" target="_blank" aria-label="Visit us on Instagram" class="icon-button instagram">
            <i class="fab fa-instagram"></i>
        </a>

        <!-- WhatsApp Icon -->
        <a href="https://wa.me/8858885319" target="_blank" aria-label="Chat on WhatsApp" class="icon-button whatsapp">
            <i class="fab fa-whatsapp"></i>
        </a>

        <!-- Mail Icon -->
        <a href="mailto:YOUR_EMAIL_ADDRESS" target="_blank" aria-label="Send us an Email" class="icon-button mail">
            <i class="fas fa-envelope"></i>
        </a>

        <!-- Google Calendar Appointment Scheduling Button -->
        <!-- The script below will automatically inject a button here -->
        <div id="google-calendar-booking-button-container">
            <!-- Google Calendar Appointment Scheduling begin -->
            <link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
            <script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
            <script>
            (function() {
                var target = document.currentScript;
                // No need for mapInstance here, as it's defined globally for initMap
                window.addEventListener('load', function() {
                    calendar.schedulingButton.load({
                        url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ2CAlNpLPG7QPwBdrnEDjf7ITNy-aX71p0Hx9FJSX00s-s6TRxWBkGvN7UABCYsCv77ZddTgn53?gv=true',
                        color: '#039BE5', /* This sets the background color of the GC button */
                        label: 'Join Ganga Pooja', /* Changed label here */
                        target,
                    });
                });
            })();
            </script>
            <!-- end Google Calendar Appointment Scheduling -->
        </div>

        <!-- Map Icon (opens modal with Google Map) -->
        <div id="openMapModal" aria-label="Find us on Map" class="icon-button map">
            <i class="fas fa-map-marker-alt"></i>
        </div>
    </div>

    <!-- Map Modal Overlay -->
    <div id="mapModalOverlay" class="map-modal-overlay">
        <div class="map-modal-content">
            <div id="map"></div>
            <button id="closeMapModal" class="map-modal-close-btn">Close</button>
        </div>
    </div>

    <!-- Message Box for custom alerts -->
    <div id="messageBox" class="message-box">
        <p id="messageText"></p>
        <button onclick="document.getElementById('messageBox').classList.remove('show');">OK</button>
    </div>

    <script>
        // --- River Banner Animation Logic ---
        const canvas = document.getElementById('riverCanvas');
        const ctx = canvas.getContext('2d');
        let particles = []; // Represents "waves" or "flow lines"
        const floatingTexts = []; // Stores floating text elements
        const englishTextPhrases = ["BHAJ GOVINDAM", "HAR HAR MAHADEV", "JAI JAI SHANKAR"]; // English transliterations

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = 100; // Fixed height for the banner
            initParticles(); // Reinitialize particles on resize
            initFloatingTexts(); // Reinitialize floating texts on resize
        }

        // Function to draw a more natural leaf shape
        function drawLeaf(context, x, y, width, height, rotation) {
            context.save();
            context.translate(x, y);
            context.rotate(rotation);

            // Using Bezier curves for a more organic leaf shape
            context.beginPath();
            context.moveTo(0, height / 2); // Bottom tip
            context.bezierCurveTo(width * 0.3, height * 0.3, width * 0.3, -height * 0.3, 0, -height / 2); // Right side
            context.bezierCurveTo(-width * 0.3, -height * 0.3, -width * 0.3, height * 0.3, 0, height / 2); // Left side
            context.closePath();
            
            // Random leaf color (shades of green/brown)
            const hue = 40 + Math.random() * 40; // Greenish-yellow to olive
            const saturation = 40 + Math.random() * 30; // Medium saturation
            const lightness = 30 + Math.random() * 15; // Darker
            const alpha = 0.7 + Math.random() * 0.2; // Slight transparency
            context.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
            context.fill();

            // Simple vein line (more subtle)
            context.beginPath();
            context.moveTo(-width * 0.3, 0);
            context.lineTo(width * 0.3, 0);
            context.strokeStyle = `rgba(0, 0, 0, 0.15)`; // Very faint vein
            context.lineWidth = 0.8;
            context.stroke();

            context.restore();
        }

        function initParticles() {
            particles = [];
            const numParticles = 20; // Number of wave lines
            const particleGap = canvas.height / numParticles;

            for (let i = 0; i < numParticles; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: i * particleGap + particleGap / 2,
                    speed: 0.5 + Math.random() * 1.5, // Random speed for flow variation
                    amplitude: 5 + Math.random() * 5, // Random wave height
                    frequency: 0.01 + Math.random() * 0.02, // Random wave frequency
                    color: `rgba(173, 216, 230, ${0.3 + Math.random() * 0.5})` // Light blue to darker blue
                });
            }
        }

        function initFloatingTexts() {
            floatingTexts.length = 0; // Clear existing texts
            const numTexts = 5; // Number of floating text elements
            const textVerticalGap = canvas.height / (numTexts + 1);

            for (let i = 0; i < numTexts; i++) {
                floatingTexts.push({
                    text: englishTextPhrases[Math.floor(Math.random() * englishTextPhrases.length)], // Use English phrases
                    x: Math.random() * canvas.width,
                    y: (i + 1) * textVerticalGap + (Math.random() * 10 - 5), // Distribute vertically, add slight random offset
                    speed: 0.3 + Math.random() * 0.8, // Slower speed for text
                    amplitude: 3 + Math.random() * 3, // Smaller wave for text
                    frequency: 0.008 + Math.random() * 0.015, // Slower frequency for text
                    color: `rgba(255, 255, 255, ${0.9})`, // Opaque white for text on leaves
                    fontSize: 14 + Math.random() * 6, // Vary font size between 14px and 20px
                    leafWidth: 80 + Math.random() * 40, // Wider leaves to accommodate English text
                    leafHeight: 40 + Math.random() * 20, // Taller leaves
                    rotation: Math.random() * Math.PI / 4 - Math.PI / 8 // Random rotation +/- 22.5 degrees
                });
            }
        }

        function drawRiver() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

            // Draw base water gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#0056b3'); // Darker blue
            gradient.addColorStop(1, '#4682B4'); // Lighter blue
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw and update wave particles
            particles.forEach(p => {
                ctx.beginPath();
                ctx.strokeStyle = p.color;
                ctx.lineWidth = 1 + Math.random(); // Slight variation in line thickness

                // Draw a wavy line segment
                ctx.moveTo(p.x, p.y + Math.sin(p.x * p.frequency + performance.now() * 0.002) * p.amplitude);
                ctx.lineTo(p.x + 50, p.y + Math.sin((p.x + 50) * p.frequency + performance.now() * 0.002) * p.amplitude);

                ctx.stroke();

                p.x += p.speed; // Move particle horizontally

                // If particle moves off screen, reset it to the other side
                if (p.x > canvas.width) {
                    p.x = -50; // Start slightly off-screen to ensure continuous flow
                }
            });

            // Draw and update floating texts (now on leaves)
            floatingTexts.forEach(t => {
                const waveOffset = Math.sin(t.x * t.frequency + performance.now() * 0.0015) * t.amplitude;
                const currentY = t.y + waveOffset;

                // Draw the leaf first
                drawLeaf(ctx, t.x, currentY, t.leafWidth, t.leafHeight, t.rotation);

                // Draw the text on top of the leaf
                ctx.font = `${t.fontSize}px 'Permanent Marker', cursive`; // Use Permanent Marker font
                ctx.fillStyle = t.color;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';

                // To make text look handmade/rough, might slightly adjust its position or rotation
                ctx.save();
                ctx.translate(t.x, currentY);
                ctx.rotate(t.rotation + (Math.random() * 0.02 - 0.01)); // Slight additional random rotation for handmade feel
                ctx.fillText(t.text, 0, 0);
                ctx.restore();

                t.x += t.speed; // Move text horizontally

                // If text moves off screen, reset it to the other side with new random properties
                if (t.x > canvas.width + 100) { // Add buffer for longer text
                    t.x = -100;
                    t.text = englishTextPhrases[Math.floor(Math.random() * englishTextPhrases.length)]; // New English phrase
                    t.y = Math.random() * canvas.height; // Random Y position
                    t.speed = 0.3 + Math.random() * 0.8; // New speed
                    t.amplitude = 3 + Math.random() * 3; // New amplitude
                    t.leafWidth = 80 + Math.random() * 40; // New leaf width
                    t.leafHeight = 40 + Math.random() * 20; // New leaf height
                    t.rotation = Math.random() * Math.PI / 4 - Math.PI / 8; // New random rotation
                }
            });

            requestAnimationFrame(drawRiver); // Loop animation
        }

        // Initialize and start animation when window loads
        window.addEventListener('load', () => {
            resizeCanvas();
            drawRiver();
        });

        // Re-size and re-initialize particles/texts on window resize
        window.addEventListener('resize', resizeCanvas);


        // --- Map Modal Logic ---
        const openMapModalBtn = document.getElementById('openMapModal');
        const mapModalOverlay = document.getElementById('mapModalOverlay');
        const closeMapModalBtn = document.getElementById('closeMapModal');
        let mapLoaded = false; // To prevent loading Google Maps API multiple times
        let mapInstance = null; // Store map instance here
        const varanasiLocation = { lat: 25.321684, lng: 82.987289 }; // Varanasi coordinates

        openMapModalBtn.addEventListener('click', () => {
            mapModalOverlay.classList.add('show'); // Show the modal

            if (!mapLoaded) {
                // Dynamically load Google Maps JavaScript API
                const script = document.createElement('script');
                script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyD-FeSty1K8tdIim7VdYB3F43I9dTbXeQ0&callback=initMap`;
                script.async = true;
                script.defer = true;
                document.head.appendChild(script);
                mapLoaded = true;
            } else {
                // If map was already loaded, ensure it's resized and centered
                if (mapInstance && typeof google !== 'undefined' && google.maps && google.maps.event) {
                    // This is the crucial part: trigger resize after the modal is visible
                    setTimeout(() => { // Small delay to allow modal to render fully
                        google.maps.event.trigger(mapInstance, 'resize');
                        mapInstance.setCenter(varanasiLocation);
                    }, 150); // Increased delay slightly to 150ms for more reliability
                }
            }
        });

        closeMapModalBtn.addEventListener('click', () => {
            mapModalOverlay.classList.remove('show'); // Hide the modal
        });

        // Global function required by Google Maps API callback
        function initMap() {
            mapInstance = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: varanasiLocation,
                mapTypeId: 'roadmap' // or 'satellite', 'hybrid', 'terrain'
            });

            // Add a marker for Varanasi
            new google.maps.Marker({
                position: varanasiLocation,
                map: mapInstance,
                title: 'Varanasi Pooja Centre'
            });
        }
    </script>
</body>
</html>/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-61573f54 *//*
=================================================================
=================================================================
** Spiritually Themed CSS for shivala.org               **
** Based on the Sanatana Dharma theme                     **
=================================================================
=================================================================
*/

/*
=================================================================
** 0. Spiritual Color Palette **
** You can change the entire website's colors from here **
=================================================================
*/
:root {
    --spiritual-saffron: #FF9933; /* Main saffron color */
    --spiritual-gold: #FFD700;    /* Gold accent color */
    --deep-maroon: #800000;       /* Deep maroon for headings */
    --warm-background: #FFF8E1;   /* Warm, parchment-like background */
    --dark-text: #4E342E;         /* Dark brown text (softer than black) */
    --soft-shadow: rgba(139, 69, 19, 0.2); /* Warm shadow color */
}

/*
=================================================================
** 1. Global Styles & Body Background **
=================================================================
*/

/* Apply a warm, spiritual background and softer text color to the entire site */
body {
    background-color: var(--warm-background) !important;
    color: var(--dark-text) !important;
}

/* A calm and gentle transition for all interactive elements */
a, button, .elementor-element {
    transition: all 0.4s ease-in-out !important;
}

/* Improve readability for paragraph text */
.elementor-widget-text-editor p {
    line-height: 1.8;
}


/*
=================================================================
** 2. Headings & Typography **
=================================================================
*/

.elementor-heading-title {
    color: var(--deep-maroon); /* Deep maroon color for headings */
    /* You could add a serif font for a more traditional look */
    /* font-family: 'Georgia', serif; */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle shadow to lift text */
}


/*
=================================================================
** 3. Spiritual Button Style **
=================================================================
*/
.elementor-button {
    border-radius: 50px !important; /* Fully rounded buttons */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border: 2px solid transparent !important;
    /* A divine gradient of saffron and gold */
    background: linear-gradient(45deg, var(--spiritual-saffron), var(--spiritual-gold)) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px var(--soft-shadow) !important;
}

/* Button Hover Effect */
.elementor-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--soft-shadow) !important;
    /* Reveal a border color on hover */
    border-color: var(--deep-maroon) !important;
}


/*
=================================================================
** 4. Content Boxes & Services **
=================================================================
*/
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    padding: 25px;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-8px);
    border-color: var(--spiritual-saffron);
    background-color: #ffffff;
}

/* Give the icons inside the box a divine glow */
.elementor-widget-image-box .elementor-image-box-wrapper .elementor-icon {
    transition: all 0.4s ease !important;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover .elementor-icon {
    color: var(--spiritual-saffron);
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--spiritual-saffron); /* Glow effect for the icon */
}

/*
=================================================================
** 5. Section Separators **
=================================================================
*/
/* Add a decorative line after each section */
.elementor-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--spiritual-saffron), transparent);
    margin: 40px auto 0; /* Margin below the section */
    opacity: 0.6;
}

/* Don't show the line after the very last section */
.elementor-section:last-of-type::after {
    display: none;
}

/*
=================================================================
** 6. Mobile Responsive Fixes **
=================================================================
*/
@media (max-width: 767px) {
    h1.elementor-heading-title {
        font-size: 30px !important;
    }

    h2.elementor-heading-title {
        font-size: 26px !important;
    }

    /* Make the section separator smaller on mobile */
    .elementor-section::after {
        width: 100px;
        height: 2px;
    }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-3ccf21bc *//*
=================================================================
=================================================================
** Spiritually Themed CSS for shivala.org               **
** Based on the Sanatana Dharma theme                     **
=================================================================
=================================================================
*/

/*
=================================================================
** 0. Spiritual Color Palette **
** You can change the entire website's colors from here **
=================================================================
*/
:root {
    --spiritual-saffron: #FF9933; /* Main saffron color */
    --spiritual-gold: #FFD700;    /* Gold accent color */
    --deep-maroon: #800000;       /* Deep maroon for headings */
    --warm-background: #FFF8E1;   /* Warm, parchment-like background */
    --dark-text: #4E342E;         /* Dark brown text (softer than black) */
    --soft-shadow: rgba(139, 69, 19, 0.2); /* Warm shadow color */
}

/*
=================================================================
** 1. Global Styles & Body Background **
=================================================================
*/

/* Apply a warm, spiritual background and softer text color to the entire site */
body {
    background-color: var(--warm-background) !important;
    color: var(--dark-text) !important;
}

/* A calm and gentle transition for all interactive elements */
a, button, .elementor-element {
    transition: all 0.4s ease-in-out !important;
}

/* Improve readability for paragraph text */
.elementor-widget-text-editor p {
    line-height: 1.8;
}


/*
=================================================================
** 2. Headings & Typography **
=================================================================
*/

.elementor-heading-title {
    color: var(--deep-maroon); /* Deep maroon color for headings */
    /* You could add a serif font for a more traditional look */
    /* font-family: 'Georgia', serif; */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle shadow to lift text */
}


/*
=================================================================
** 3. Spiritual Button Style **
=================================================================
*/
.elementor-button {
    border-radius: 50px !important; /* Fully rounded buttons */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border: 2px solid transparent !important;
    /* A divine gradient of saffron and gold */
    background: linear-gradient(45deg, var(--spiritual-saffron), var(--spiritual-gold)) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px var(--soft-shadow) !important;
}

/* Button Hover Effect */
.elementor-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--soft-shadow) !important;
    /* Reveal a border color on hover */
    border-color: var(--deep-maroon) !important;
}


/*
=================================================================
** 4. Content Boxes & Services **
=================================================================
*/
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    padding: 25px;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-8px);
    border-color: var(--spiritual-saffron);
    background-color: #ffffff;
}

/* Give the icons inside the box a divine glow */
.elementor-widget-image-box .elementor-image-box-wrapper .elementor-icon {
    transition: all 0.4s ease !important;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover .elementor-icon {
    color: var(--spiritual-saffron);
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--spiritual-saffron); /* Glow effect for the icon */
}

/*
=================================================================
** 5. Section Separators **
=================================================================
*/
/* Add a decorative line after each section */
.elementor-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--spiritual-saffron), transparent);
    margin: 40px auto 0; /* Margin below the section */
    opacity: 0.6;
}

/* Don't show the line after the very last section */
.elementor-section:last-of-type::after {
    display: none;
}

/*
=================================================================
** 6. Mobile Responsive Fixes **
=================================================================
*/
@media (max-width: 767px) {
    h1.elementor-heading-title {
        font-size: 30px !important;
    }

    h2.elementor-heading-title {
        font-size: 26px !important;
    }

    /* Make the section separator smaller on mobile */
    .elementor-section::after {
        width: 100px;
        height: 2px;
    }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-61605e2b *//*
=================================================================
=================================================================
** Spiritually Themed CSS for shivala.org               **
** Based on the Sanatana Dharma theme                     **
=================================================================
=================================================================
*/

/*
=================================================================
** 0. Spiritual Color Palette **
** You can change the entire website's colors from here **
=================================================================
*/
:root {
    --spiritual-saffron: #FF9933; /* Main saffron color */
    --spiritual-gold: #FFD700;    /* Gold accent color */
    --deep-maroon: #800000;       /* Deep maroon for headings */
    --warm-background: #FFF8E1;   /* Warm, parchment-like background */
    --dark-text: #4E342E;         /* Dark brown text (softer than black) */
    --soft-shadow: rgba(139, 69, 19, 0.2); /* Warm shadow color */
}

/*
=================================================================
** 1. Global Styles & Body Background **
=================================================================
*/

/* Apply a warm, spiritual background and softer text color to the entire site */
body {
    background-color: var(--warm-background) !important;
    color: var(--dark-text) !important;
}

/* A calm and gentle transition for all interactive elements */
a, button, .elementor-element {
    transition: all 0.4s ease-in-out !important;
}

/* Improve readability for paragraph text */
.elementor-widget-text-editor p {
    line-height: 1.8;
}


/*
=================================================================
** 2. Headings & Typography **
=================================================================
*/

.elementor-heading-title {
    color: var(--deep-maroon); /* Deep maroon color for headings */
    /* You could add a serif font for a more traditional look */
    /* font-family: 'Georgia', serif; */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle shadow to lift text */
}


/*
=================================================================
** 3. Spiritual Button Style **
=================================================================
*/
.elementor-button {
    border-radius: 50px !important; /* Fully rounded buttons */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border: 2px solid transparent !important;
    /* A divine gradient of saffron and gold */
    background: linear-gradient(45deg, var(--spiritual-saffron), var(--spiritual-gold)) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px var(--soft-shadow) !important;
}

/* Button Hover Effect */
.elementor-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--soft-shadow) !important;
    /* Reveal a border color on hover */
    border-color: var(--deep-maroon) !important;
}


/*
=================================================================
** 4. Content Boxes & Services **
=================================================================
*/
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    padding: 25px;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-8px);
    border-color: var(--spiritual-saffron);
    background-color: #ffffff;
}

/* Give the icons inside the box a divine glow */
.elementor-widget-image-box .elementor-image-box-wrapper .elementor-icon {
    transition: all 0.4s ease !important;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover .elementor-icon {
    color: var(--spiritual-saffron);
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--spiritual-saffron); /* Glow effect for the icon */
}

/*
=================================================================
** 5. Section Separators **
=================================================================
*/
/* Add a decorative line after each section */
.elementor-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--spiritual-saffron), transparent);
    margin: 40px auto 0; /* Margin below the section */
    opacity: 0.6;
}

/* Don't show the line after the very last section */
.elementor-section:last-of-type::after {
    display: none;
}

/*
=================================================================
** 6. Mobile Responsive Fixes **
=================================================================
*/
@media (max-width: 767px) {
    h1.elementor-heading-title {
        font-size: 30px !important;
    }

    h2.elementor-heading-title {
        font-size: 26px !important;
    }

    /* Make the section separator smaller on mobile */
    .elementor-section::after {
        width: 100px;
        height: 2px;
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8d51c8d *//*
=================================================================
=================================================================
** Spiritually Themed CSS for shivala.org               **
** Based on the Sanatana Dharma theme                     **
=================================================================
=================================================================
*/

/*
=================================================================
** 0. Spiritual Color Palette **
** You can change the entire website's colors from here **
=================================================================
*/
:root {
    --spiritual-saffron: #FF9933; /* Main saffron color */
    --spiritual-gold: #FFD700;    /* Gold accent color */
    --deep-maroon: #800000;       /* Deep maroon for headings */
    --warm-background: #FFF8E1;   /* Warm, parchment-like background */
    --dark-text: #4E342E;         /* Dark brown text (softer than black) */
    --soft-shadow: rgba(139, 69, 19, 0.2); /* Warm shadow color */
}

/*
=================================================================
** 1. Global Styles & Body Background **
=================================================================
*/

/* Apply a warm, spiritual background and softer text color to the entire site */
body {
    background-color: var(--warm-background) !important;
    color: var(--dark-text) !important;
}

/* A calm and gentle transition for all interactive elements */
a, button, .elementor-element {
    transition: all 0.4s ease-in-out !important;
}

/* Improve readability for paragraph text */
.elementor-widget-text-editor p {
    line-height: 1.8;
}


/*
=================================================================
** 2. Headings & Typography **
=================================================================
*/

.elementor-heading-title {
    color: var(--deep-maroon); /* Deep maroon color for headings */
    /* You could add a serif font for a more traditional look */
    /* font-family: 'Georgia', serif; */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); /* Subtle shadow to lift text */
}


/*
=================================================================
** 3. Spiritual Button Style **
=================================================================
*/
.elementor-button {
    border-radius: 50px !important; /* Fully rounded buttons */
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border: 2px solid transparent !important;
    /* A divine gradient of saffron and gold */
    background: linear-gradient(45deg, var(--spiritual-saffron), var(--spiritual-gold)) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 15px var(--soft-shadow) !important;
}

/* Button Hover Effect */
.elementor-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--soft-shadow) !important;
    /* Reveal a border color on hover */
    border-color: var(--deep-maroon) !important;
}


/*
=================================================================
** 4. Content Boxes & Services **
=================================================================
*/
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    padding: 25px;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    transform: translateY(-8px);
    border-color: var(--spiritual-saffron);
    background-color: #ffffff;
}

/* Give the icons inside the box a divine glow */
.elementor-widget-image-box .elementor-image-box-wrapper .elementor-icon {
    transition: all 0.4s ease !important;
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover .elementor-icon {
    color: var(--spiritual-saffron);
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--spiritual-saffron); /* Glow effect for the icon */
}

/*
=================================================================
** 5. Section Separators **
=================================================================
*/
/* Add a decorative line after each section */
.elementor-section::after {
    content: '';
    display: block;
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--spiritual-saffron), transparent);
    margin: 40px auto 0; /* Margin below the section */
    opacity: 0.6;
}

/* Don't show the line after the very last section */
.elementor-section:last-of-type::after {
    display: none;
}

/*
=================================================================
** 6. Mobile Responsive Fixes **
=================================================================
*/
@media (max-width: 767px) {
    h1.elementor-heading-title {
        font-size: 30px !important;
    }

    h2.elementor-heading-title {
        font-size: 26px !important;
    }

    /* Make the section separator smaller on mobile */
    .elementor-section::after {
        width: 100px;
        height: 2px;
    }
}/* End custom CSS */