.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14536 .elementor-element.elementor-element-17bfd10 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-14536 .elementor-element.elementor-element-17bfd10{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-widget-image .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-14536 .elementor-element.elementor-element-6c14d81{text-align:center;}.elementor-widget-spacer .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-spacer .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14536 .elementor-element.elementor-element-7b4e305{--spacer-size:164px;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-14536 .elementor-element.elementor-element-923841a{text-align:justify;}.elementor-14536 .elementor-element.elementor-element-923841a .elementor-heading-title{font-family:"Murecho", Sans-serif;font-weight:800;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:7px 0px 0px #000000;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-b1079ca > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-b1079ca{text-align:justify;}.elementor-14536 .elementor-element.elementor-element-b1079ca .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:17px;font-weight:600;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-060cb40{--spacer-size:163px;}.elementor-14536 .elementor-element.elementor-element-8712f81{text-align:center;}.elementor-14536 .elementor-element.elementor-element-8712f81 .elementor-heading-title{font-family:"Murecho", Sans-serif;font-weight:800;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:7px 0px 0px #000000;color:#FFFFFF;}.elementor-widget-social-icons .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-social-icons .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-30e245b.elementor-social-icon{background-color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-30e245b.elementor-social-icon i{color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-30e245b.elementor-social-icon svg{fill:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-f1aae98.elementor-social-icon{background-color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-f1aae98.elementor-social-icon i{color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-f1aae98.elementor-social-icon svg{fill:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-1cda8a4.elementor-social-icon{background-color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-1cda8a4.elementor-social-icon i{color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-1cda8a4.elementor-social-icon svg{fill:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-ca8ec49.elementor-social-icon{background-color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-ca8ec49.elementor-social-icon i{color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-ca8ec49.elementor-social-icon svg{fill:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-6e96c77.elementor-social-icon{background-color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-6e96c77.elementor-social-icon i{color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-repeater-item-6e96c77.elementor-social-icon svg{fill:#FF0000;}.elementor-14536 .elementor-element.elementor-element-8d71556{--grid-template-columns:repeat(0, auto);--icon-size:21px;--grid-column-gap:4px;--grid-row-gap:0px;}.elementor-14536 .elementor-element.elementor-element-8d71556 .elementor-widget-container{text-align:center;}.elementor-14536 .elementor-element.elementor-element-8d71556 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-8bc1ffc > .elementor-widget-container{margin:-10px -10px -10px -10px;padding:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-e4ecf23{padding:0px 0px 0px 0px;}.elementor-widget-media-carousel .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-media-carousel .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-14536 .elementor-element.elementor-element-640e39f.elementor-skin-slideshow .elementor-main-swiper{margin-bottom:10px;}.elementor-14536 .elementor-element.elementor-element-640e39f .elementor-swiper-button{font-size:20px;}.elementor-14536 .elementor-element.elementor-element-640e39f .elementor-main-swiper .elementor-carousel-image{background-size:contain;}.elementor-14536 .elementor-element.elementor-element-ff36656 .elementor-heading-title{color:#070000FC;}.elementor-14536 .elementor-element.elementor-element-54d3876 > .elementor-widget-container{margin:0px 0px -17px 0px;padding:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-54d3876{text-align:center;}.elementor-14536 .elementor-element.elementor-element-54d3876 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:23px;font-weight:500;color:#000000;}.elementor-14536 .elementor-element.elementor-element-801f7b2 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-801f7b2{text-align:center;}.elementor-14536 .elementor-element.elementor-element-372cabd .elementor-heading-title{color:#070000FC;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-30e245b.elementor-social-icon{background-color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-30e245b.elementor-social-icon i{color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-30e245b.elementor-social-icon svg{fill:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-f1aae98.elementor-social-icon{background-color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-f1aae98.elementor-social-icon i{color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-f1aae98.elementor-social-icon svg{fill:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-1cda8a4.elementor-social-icon{background-color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-1cda8a4.elementor-social-icon i{color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-1cda8a4.elementor-social-icon svg{fill:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-ca8ec49.elementor-social-icon{background-color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-repeater-item-6e96c77.elementor-social-icon{background-color:#FF0000;}.elementor-14536 .elementor-element.elementor-element-eb6888a{--grid-template-columns:repeat(0, auto);--grid-column-gap:2px;--grid-row-gap:0px;}.elementor-14536 .elementor-element.elementor-element-eb6888a .elementor-widget-container{text-align:center;}.elementor-14536 .elementor-element.elementor-element-eb6888a > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-dbf5009 > .elementor-widget-container{margin:0px 0px -9px 0px;}.elementor-14536 .elementor-element.elementor-element-dbf5009{text-align:center;}.elementor-14536 .elementor-element.elementor-element-dbf5009 .elementor-heading-title{font-family:"Saira", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-30e245b.elementor-social-icon{background-color:#FF00000D;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-30e245b.elementor-social-icon i{color:#000000F5;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-30e245b.elementor-social-icon svg{fill:#000000F5;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-f1aae98.elementor-social-icon{background-color:#FF00000D;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-f1aae98.elementor-social-icon i{color:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-f1aae98.elementor-social-icon svg{fill:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-1cda8a4.elementor-social-icon{background-color:#FF00000D;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-1cda8a4.elementor-social-icon i{color:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-1cda8a4.elementor-social-icon svg{fill:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-739e0ae.elementor-social-icon{background-color:#FF00000D;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-739e0ae.elementor-social-icon i{color:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-repeater-item-739e0ae.elementor-social-icon svg{fill:#000000;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8{--grid-template-columns:repeat(0, auto);--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 .elementor-widget-container{text-align:center;}.elementor-14536 .elementor-element.elementor-element-8dd6fb8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-14536 .elementor-element.elementor-element-6bfe6e3{padding:0px 0px 160px 0px;}.elementor-14536 .elementor-element.elementor-element-b0b0a41{text-align:center;}.elementor-14536 .elementor-element.elementor-element-b0b0a41 .elementor-heading-title{color:#000000;}.elementor-widget-loop-carousel .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-carousel .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-14536 .elementor-element.elementor-element-cdb6d91{--swiper-slides-gap:10px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-14536 .elementor-element.elementor-element-f10de5e{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:3.3px;}.elementor-14536 .elementor-element.elementor-element-f10de5e .elementor-divider-separator{width:52%;margin:0 auto;margin-center:0;}.elementor-14536 .elementor-element.elementor-element-f10de5e .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-14536 .elementor-element.elementor-element-c31988b{text-align:center;}.elementor-14536 .elementor-element.elementor-element-c31988b .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-widget-text-editor .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-text-editor .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-14536 .elementor-element.elementor-element-9d88582{font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-0286fb4{text-align:center;}.elementor-14536 .elementor-element.elementor-element-0286fb4 .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FEFEFE;}.elementor-14536 .elementor-element.elementor-element-2309f42{text-align:left;font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-85bb7a9{text-align:center;}.elementor-14536 .elementor-element.elementor-element-85bb7a9 .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-e38d47f{color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-e9722dc{text-align:center;}.elementor-14536 .elementor-element.elementor-element-e9722dc .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-fd523a0{font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-ff9128e{text-align:center;}.elementor-14536 .elementor-element.elementor-element-ff9128e .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-weight:bold;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-48f9ac7{font-family:"Roboto Condensed", Sans-serif;font-weight:400;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-74a7255{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:3.3px;}.elementor-14536 .elementor-element.elementor-element-74a7255 .elementor-divider-separator{width:52%;margin:0 auto;margin-center:0;}.elementor-14536 .elementor-element.elementor-element-74a7255 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-14536 .elementor-element.elementor-element-0bc433e{text-align:center;}.elementor-14536 .elementor-element.elementor-element-0bc433e .elementor-heading-title{font-family:"Roboto Condensed", Sans-serif;font-size:23px;font-weight:600;color:#FFFFFF;}.elementor-14536 .elementor-element.elementor-element-6a52594{--spacer-size:230px;}body.elementor-page-14536:not(.elementor-motion-effects-element-type-background), body.elementor-page-14536 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://boxradio.online/wp-content/uploads/2026/02/450836F3-2E33-4B98-B5E1-B004E6529379-2.png");background-position:center center;background-size:cover;}@media(max-width:1024px){.elementor-14536 .elementor-element.elementor-element-640e39f.elementor-skin-slideshow .elementor-main-swiper{margin-bottom:10px;}.elementor-14536 .elementor-element.elementor-element-6bfe6e3{padding:0px 0px 200px 0px;}body.elementor-page-14536:not(.elementor-motion-effects-element-type-background), body.elementor-page-14536 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-repeat:repeat-x;background-size:auto;}}@media(max-width:767px){.elementor-14536 .elementor-element.elementor-element-640e39f.elementor-skin-slideshow .elementor-main-swiper{margin-bottom:10px;}.elementor-14536 .elementor-element.elementor-element-ff36656{text-align:center;}.elementor-14536 .elementor-element.elementor-element-372cabd{text-align:center;}.elementor-14536 .elementor-element.elementor-element-6bfe6e3{padding:0px 0px 250px 0px;}body.elementor-page-14536:not(.elementor-motion-effects-element-type-background), body.elementor-page-14536 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:top center;background-size:800px auto;}}@media(min-width:768px){.elementor-14536 .elementor-element.elementor-element-c45d20a{width:26.654%;}.elementor-14536 .elementor-element.elementor-element-f4e2cec{width:45.282%;}.elementor-14536 .elementor-element.elementor-element-0be0e50{width:27.728%;}.elementor-14536 .elementor-element.elementor-element-e66a13a{width:26.913%;}.elementor-14536 .elementor-element.elementor-element-c817037{width:45.057%;}.elementor-14536 .elementor-element.elementor-element-70d8f4f{width:27.694%;}.elementor-14536 .elementor-element.elementor-element-95509d2{width:33.595%;}.elementor-14536 .elementor-element.elementor-element-fbb3195{width:32.709%;}.elementor-14536 .elementor-element.elementor-element-b879774{width:26.665%;}.elementor-14536 .elementor-element.elementor-element-be4c22e{width:47.736%;}.elementor-14536 .elementor-element.elementor-element-627e37a{width:24.903%;}}@media(min-width:1025px){body.elementor-page-14536:not(.elementor-motion-effects-element-type-background), body.elementor-page-14536 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for html, class: .elementor-element-8bc1ffc *//* ============================================================
   The stray rule  @media(max-width:767px){ #nextOut1 .mytooltiptext,
   #nextOut2 .mytooltiptext { left:-100% !important } }  is ALSO
   !important and loads AFTER our stylesheet, so an equal-specificity
   override loses on source order. We win by RAISING specificity:
   prefixing `body` and doubling the id makes these .elementor-14536 .elementor-element.elementor-element-8bc1ffcs
   strictly more specific, so they beat the stray rule regardless
   of load order. (Deleting the stray rule at its source — likely
   Elementor Custom CSS — remains the cleaner permanent fix.)
   Paste at the END of your CSS.
   ============================================================ */
@media (max-width: 767px) {
  body #nextOut1#nextOut1 .mytooltiptext,
  body #nextOut2#nextOut2 .mytooltiptext,
  body #goneout1#goneout1 .mytooltiptext,
  body #goneout2#goneout2 .mytooltiptext {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
}/* End custom CSS */
/* Start custom CSS */@import url('https://fonts.googleapis.com/css?family=Unbounded&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

/*
 * Globals
 */

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}

/*
 * Base structure
 */

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */


.h1 h1 {
  font-size: 25px;
  font-family: 'Space Grotesk', sans-serif;
}

.image_wrapper {
  position: relative;
}

.image_wrapper img {
  box-shadow: 0px 3px 8px 0 rgba(134, 134, 134, 0.914);
}

.image_wrapper .overlay {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px;
}

.image_wrapper .artist {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  font-weight: normal;
  letter-spacing: -0.2px;
  white-space: nowrap;
  font-size: 13px;
  text-overflow: ellipsis;
  font-family: 'Open Sans', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.41em;
  color: whitesmoke;
  display: block;
}

.image_wrapper .title {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  font-weight: normal;
  letter-spacing: -0.2px;
  white-space: nowrap;
  font-size: 15px;
  text-overflow: ellipsis;
  font-family: 'Open Sans', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.41em;
  color: whitesmoke;
  display: block;
}

.FadeAway {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: transparent;
  background: linear-gradient(
    to bottom,
    rgba(125, 185, 232, 0) 0%,
    rgba(63, 93, 116, 0) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.livebadge {
  display: inline-block;
  color: #ffffff;
  min-width: 40px;
  height: 20px;
  font-family: "Open Sans", sans-serif;
  border-radius: 2px;
  font-size: 11px;
  line-height: 1em;
  padding: 5px 8px;
  text-align: center;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  bottom: 55px;
  left: 10px;
  }

.onairbadge {
    display: inline-block;
    color: #ffffff;
    min-width: 40px;
    height: 20px;
    font-family: "Open Sans", sans-serif;
    border-radius: 2px;
    font-size: 11px;
    line-height: 1em;
    padding: 5px 8px;
    text-align: center;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    bottom: -15px;
    left: 0px;
    }

#bars {
  height: 30px;
  position: absolute;
  bottom: 55px;
  left: 59px;
}

.bar {
  background: rgb(255, 255, 255);
  bottom: 1px;
  height: 2px;
  position: absolute;
  width: 2px;
  animation: sound 0ms -200ms linear infinite alternate;
}

@keyframes sound {
  0% {
    opacity: 0.35;
    height: 3px;
  }
  100% {
    opacity: 1;
    height: 14px;
  }
}

.bar:nth-child(1) {
  left: 1px;
  animation-duration: 250ms;
}
.bar:nth-child(2) {
  left: 5px;
  animation-duration: 270ms;
}
.bar:nth-child(3) {
  left: 9px;
  animation-duration: 290ms;
}
.bar:nth-child(4) {
  left: 13px;
  animation-duration: 300ms;
}
.bar:nth-child(5) {
  left: 17px;
  animation-duration: 310ms;
}
.bar:nth-child(6) {
  left: 21px;
  animation-duration: 427ms;
}
.bar:nth-child(7) {
  left: 25px;
  animation-duration: 441ms;
}
.bar:nth-child(8) {
  left: 29px;
  animation-duration: 419ms;
}
.bar:nth-child(9) {
  left: 33px;
  animation-duration: 487ms;
}
.bar:nth-child(10) {
  left: 37px;
  animation-duration: 442ms;
}

/* ════════════════════════════════════════════════
   ALBUM THUMBNAILS — previous / up-next
   Model (confirmed with user):
   • PREVIOUS group on LEFT, heading right-aligned.
   • UP NEXT group on RIGHT, heading left-aligned.
   • Each group has 2 albums (150×150, 8px gap).
   • Hovering an album expands it to COVER its
     PARTNER, growing toward the group's centre:
       – left album  → grows RIGHT over partner
       – right album → grows LEFT  over partner
   • Expanded width = 150 + 8 + 150 = 308px so the
     partner is fully covered.
   • Slots keep their 150px footprint (no pushing).
   ════════════════════════════════════════════════ */

/* outer wrapper: PREVIOUS | UP NEXT, flanking the centre */
.tracks-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.tracks-group { display: flex; flex-direction: column; }

/* headings */
.tracks-group .head-prev { text-align: right; }
.tracks-group .head-next { text-align: left; }

/* the two-album row */
.tracks-row {
  display: flex;
  gap: 8px;
}

/* Defensive: some CMS themes (Elementor) wrap injected widgets in
   containers with overflow:hidden, which clips the expanded card so its
   title/artwork disappears. Force the album ancestors to show overflow. */
.tracks-wrap, .tracks-group, .tracks-row,
.nextalbum, .gonealbum,
#nextOut1, #nextOut2, #goneout1, #goneout2 {
  overflow: visible !important;
}

/* ── SLOT: fixed footprint, establishes stacking ──
   The nextOut and goneout elements are spans. They must hold a fixed box
   even though their only child (.mytooltip) is absolutely positioned and
   thus out of flow. Use explicit dimensions so the slot can't collapse to
   0x0 (which hid the pos-left albums). */
.nextalbum,
.gonealbum {
  display: inline-block;
  font-family: 'Electrolize', sans-serif;
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  position: relative;
  z-index: 1;
  vertical-align: top;
}

/* expanded/hovered album rises above its neighbours */
.nextalbum:hover,
.gonealbum:hover,
.nextalbum.is-open,
.gonealbum.is-open { z-index: 99999; }

/* A card only expands (and therefore only overlaps neighbours) while it
   is hovered or open. Closed cards stay exactly within their slot so they
   never sit on top of a neighbour and steal its taps. */

/* ── CARD: absolutely positioned, animates width ──
   position + overflow forced with !important so the card always remains the
   containing block for its absolutely-positioned text overlay. If a CMS
   resets .mytooltip to position:static, the text's left:0/right:0 would
   resolve against a far wider ancestor and render outside the card. */
.mytooltip {
  position: absolute !important;
  top: 0;
  height: 150px;
  width: 150px;
  overflow: hidden;
  border-radius: 8px;
  border: 3px solid #fff;
  box-sizing: border-box;
  line-height: 0;
  transition: width 0.35s cubic-bezier(.2,.7,.2,1);
  z-index: 2;
  pointer-events: none;
}

/* slot itself receives taps; closed/open cards never steal a neighbour's tap */
.nextalbum,
.gonealbum { pointer-events: auto; }

/* DIRECTION RULES — grow toward group centre, covering partner.
   We tag each album with .pos-left / .pos-right (added by covers.js)
   instead of relying on :first-child/:last-child or the > combinator,
   which break if a CMS (Elementor/WordPress) wraps each album in its
   own container. .pos-left grows rightward, .pos-right grows leftward. */

/* left album of a pair: anchor left edge → expands rightward */
.gonealbum.pos-left .mytooltip,
.nextalbum.pos-left .mytooltip { left: 0; right: auto; }

/* right album of a pair: anchor right edge → expands leftward */
.gonealbum.pos-right .mytooltip,
.nextalbum.pos-right .mytooltip { right: 0; left: auto; }

/* Fallback if no pos- class is present: keep old child-based behaviour */
.tracks-row > .gonealbum:first-child:not(.pos-left):not(.pos-right) .mytooltip,
.tracks-row > .nextalbum:first-child:not(.pos-left):not(.pos-right) .mytooltip { left: 0; right: auto; }
.tracks-row > .gonealbum:last-child:not(.pos-left):not(.pos-right) .mytooltip,
.tracks-row > .nextalbum:last-child:not(.pos-left):not(.pos-right) .mytooltip { right: 0; left: auto; }

/* expand to fully cover the partner (150 + 8 gap + 150) */
.nextalbum:hover .mytooltip,
.gonealbum:hover .mytooltip,
.nextalbum.is-open .mytooltip,
.gonealbum.is-open .mytooltip { width: 308px; }

/* image fills the card; pin to TOP so when the square cover is cropped
   into a landscape the top of the artwork (usually the title/artist or
   main subject) stays visible instead of showing only the middle band */
.mytooltip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: none;
  border-radius: 0;
}

/* gradient overlay */
.mytooltip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.nextalbum:hover .mytooltip::after,
.gonealbum:hover .mytooltip::after,
.nextalbum.is-open .mytooltip::after,
.gonealbum.is-open .mytooltip::after { opacity: 1; }

/* text overlay — positioning forced with !important so Bootstrap/Elementor
   can't reset position/left/right (which made the text render far to the
   left of its card on the live site, spanning ~250px instead of the card
   width, so the title appeared "missing" for the right-side albums). */
.mytooltip .mytooltiptext {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 0 12px 10px;
  z-index: 2;
  text-align: left;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease 0.12s;
}
.nextalbum:hover .mytooltip .mytooltiptext,
.gonealbum:hover .mytooltip .mytooltiptext,
.nextalbum.is-open .mytooltip .mytooltiptext,
.gonealbum.is-open .mytooltip .mytooltiptext { opacity: 1; }

.mytooltip .tip-title {
  display: block;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.mytooltip .tip-artist {
  display: block;
  color: #eee;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ── Marquee for long titles/artists ──
   When the text is wider than its visible box, covers.js adds .is-scroll
   and sets a per-element --scroll-distance (px) and --scroll-time (s).
   The inner text then slides right→left to reveal the hidden end, pauses,
   and eases back, looping. Short text that fits is never animated. */
.mytooltip .tip-title.is-scroll,
.mytooltip .tip-artist.is-scroll {
  text-overflow: clip;        /* hide the ellipsis while scrolling */
}
.mytooltip .tip-title.is-scroll .tip-scroll,
.mytooltip .tip-artist.is-scroll .tip-scroll {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: tipMarquee var(--scroll-time, 6s) ease-in-out infinite;
}
.mytooltip .tip-title .tip-scroll,
.mytooltip .tip-artist .tip-scroll {
  display: inline-block;
  white-space: nowrap;
}

@keyframes tipMarquee {
  0%, 12%   { transform: translateX(0); }
  50%, 62%  { transform: translateX(calc(-1 * var(--scroll-distance, 0px))); }
  100%      { transform: translateX(0); }
}

/* ── TOUCH DEVICES: tap controls everything, :hover is neutralized ──
   On phones/tablets a tap leaves a "sticky" :hover on the last-tapped
   element. With the normal rules, that stuck :hover keeps a cover expanded
   even after a second tap removes .is-open — so the second tap appeared to
   do nothing. Here we cancel all :hover expand/reveal so ONLY .is-open
   (toggled by tap) drives the cover. Second tap removes .is-open -> closes. */
@media (hover: none) {
  /* A stuck tap-hover must NOT expand or reveal anything. Collapse the
     hovered-but-not-open cover back to its slot size (100%). Using 150px
     here was the bug: on a phone the slot is ~88px, so a removed-is-open
     cover snapped to 150px instead of collapsing — the "minimizes a bit". */
  .nextalbum:hover .mytooltip,
  .gonealbum:hover .mytooltip {
    width: 100% !important;
  }
  .nextalbum:hover .mytooltip::after,
  .gonealbum:hover .mytooltip::after,
  .nextalbum:hover .mytooltip .mytooltiptext,
  .gonealbum:hover .mytooltip .mytooltiptext {
    opacity: 0 !important;
  }

  /* Only an OPEN (tapped) cover expands and shows its text, and it wins
     even if the element is also stuck in :hover. The exact expand WIDTH is
     set by the size-specific blocks below (mobile = calc(200%+6px),
     wider touch screens fall back to the base 308px rule). */
  .nextalbum.is-open .mytooltip,
  .gonealbum.is-open .mytooltip {
    opacity: 1;
  }
  .nextalbum.is-open .mytooltip::after,
  .gonealbum.is-open .mytooltip::after,
  .nextalbum.is-open .mytooltip .mytooltiptext,
  .gonealbum.is-open .mytooltip .mytooltiptext {
    opacity: 1 !important;
  }
}

/* ── MOBILE: all four albums on ONE row, sized to fit screen ── */
@media (max-width: 640px) {
  /* both groups stay side by side on one line */
  .tracks-wrap {
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    padding: 0 8px;
  }

  /* each group takes half the row; its two albums share that half */
  .tracks-group {
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
  }

  .tracks-row {
    gap: 6px;
    justify-content: center;
  }

  /* fluid square albums:
     row width ≈ (100vw - 16px padding - 10px group gap) / 2 per group,
     each album = (that - 6px inner gap) / 2.
     Using flex so they auto-fit; aspect-ratio keeps them square. */
  .nextalbum, .gonealbum {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .mytooltip {
    width: 100%;
    height: 100%;
  }

  /* MOBILE direction: every album anchors LEFT and expands RIGHT by
     default (the PREVIOUS behavior that works). The RIGHT album of each
     pair would run off-screen growing right, so it anchors RIGHT and
     grows left — but its text overlay stays pinned to the card so it is
     never clipped regardless of grow direction. */
  .tracks-row > .gonealbum .mytooltip,
  .tracks-row > .nextalbum .mytooltip {
    left: 0;
    right: auto;
  }
  .tracks-row > .gonealbum:last-child .mytooltip,
  .tracks-row > .nextalbum:last-child .mytooltip {
    left: auto;
    right: 0;
  }

  /* on expand, cover the partner: 2 albums + the 6px gap.
     200% + 6px overshoots the partner edge so coverage is complete.
     .is-open (tap) always expands; !important so it beats the touch
     hover-suppression rule when a cover is briefly hover+open at tap time.
     :hover-expand only on devices that truly hover (desktop). */
  .nextalbum.is-open .mytooltip,
  .gonealbum.is-open .mytooltip {
    width: calc(200% + 6px) !important;
  }
  @media (hover: hover) {
    .nextalbum:hover .mytooltip,
    .gonealbum:hover .mytooltip {
      width: calc(200% + 6px);
    }
  }

  .mytooltip .tip-title  { font-size: 12px; }
  .mytooltip .tip-artist { font-size: 10px; }

  /* slightly tighter text padding on small cards */
  .mytooltip .mytooltiptext { padding: 0 8px 7px; }

  /* headings keep the same alignment as desktop:
     PREVIOUS over its pair on the left, UP NEXT over its pair on the right */
  .tracks-group .head-prev { text-align: right; }
  .tracks-group .head-next { text-align: left; }
}

/* very small phones — let titles wrap to two lines instead of clipping */
@media (max-width: 380px) {
  .mytooltip .tip-title { font-size: 11px; }
}

.nowonair {
  box-shadow: 0 6px 8px 0 rgb(255, 255, 255);
}

#play-stop-button {
  font-size: 70px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  transition: width 2s, height 2s;
}
#play-stop-button:hover {
  font-size: 72px;
  color: rgb(255, 0, 0);
  shadow: 0 5px 15px rgba(123, 79, 155, 0.4);
}

.ru-fluid {
  max-width: 150px;
  max-height: 150px;
}

.tracks-in-out {
  font-family: 'Electrolize', sans-serif;
  font-size:15px;
  font-weight:600;
}

.gradient-background {
  height: 600px;
  background: linear-gradient(62deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============================================================
   OVERRIDE for a stray rule found on the live site:
     @media (max-width:767px) { #nextOut1 .mytooltiptext,
                                #nextOut2 .mytooltiptext { left:-100%; } }
   That rule pushed the UP NEXT titles a full card-width to the
   left (only on mobile, only the right group) so they appeared
   "missing / flowing off". BEST is to delete that rule at its
   source (Elementor Custom CSS / theme custom CSS). If you can't
   find it, this override matches its ID specificity + media query
   and forces the text back inside the card. Paste at END of CSS.
   ============================================================ */
@media (max-width: 767px) {
  #nextOut1 .mytooltiptext,
  #nextOut2 .mytooltiptext,
  #goneout1 .mytooltiptext,
  #goneout2 .mytooltiptext {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   FIX: UP NEXT (and all) titles "flowing" outside their card.
   Cause: an Elementor/Bootstrap rule resets .mytooltip to
   position:static, so the absolutely-positioned text overlay
   (left:0;right:0) anchors to a wide parent container instead
   of the little card — it renders to the left, ~250px wide.
   These !important rules force the card to remain the
   positioning context and keep the text boxed inside it.
   Paste this at the VERY END of your CSS so it wins the cascade.
   ============================================================ */

/* the card must stay an absolutely-positioned containing block */
.mytooltip {
  position: absolute !important;
}

/* the text overlay must resolve against the card, not a parent,
   and never grow wider than the card */
.mytooltip .mytooltiptext {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}/* End custom CSS */