/* CSS Document */


/** LIGHT MODE **/
body.light {background: #081d47; background: linear-gradient(90deg, #0D3788 0%,  #1761EE  80%);}
body.light  .fullpanel {background: #F9F9F9; color:#525252; }


body.light .custimg::after {content: ""; position: absolute; inset: 0; 
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);}

/** DARK MODE **/
body.dark {background: #081d47; background: linear-gradient(90deg, #160428 11%, #21226B 48%, #091F41 76%);}
body.dark  .fullpanel, body.dark  .formpanel {background: #081d47; color:#F9F9F9; }
body.dark a.button.secondary {color: #ffffff;}
body.dark .custimg::after {content: ""; position: absolute; inset: 0; 
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5);}
body.dark a.button img {filter: drop-shadow(0px 0px 8px #ffffff) drop-shadow(0px 0px 8px #ffffff); }
body.dark .verified svg path {fill:#01F49F;}










.container {width: 100%; transition: max-width 0.5s ease-in-out, padding 0.5s ease-in-out;}
header, main, footer {width: 100%;}
html {max-width: 100vw;overflow-x: hidden;
    max-width: 100%;}

.spark2 {z-index: 49;}/* Footer bar*/
.spark3 {z-index: 48;} /* top logo */

.spark2 {position: absolute; animation: sparkLoop 60s ease-in-out infinite;}
.spark2 {width: 55px;  margin-top:-18px; left:75%;}


@keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}
  @-webkit-keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}


.spark3 {display: block;
width: 40px; position: absolute; top: -6px; left: 69px; animation: sparkle-pulse 11s infinite ease-in-out;}
@keyframes sparkle-pulse {
0%, 90% {transform:scale(1) rotate(0deg);opacity: 1;}
95% {transform:scale(1.2) rotate(-10deg);opacity: 1;}
100% {transform:scale(1) rotate(0deg);opacity: 1;}}


body {font-size: 0.8em; color:#ffffff; font-family: "Roboto", sans-serif;min-height: 100vh;display: grid; grid-template-rows: auto 1fr auto; 	margin:0; position: relative; font-family: 'Roboto', sans-serif; letter-spacing: 0.03em; font-weight: 300;  line-height: 1.5; }

header .top {display: grid; grid-template-columns: 1fr auto; grid-row-gap: 0; align-items: center; column-gap: 20px;padding:10px 20px;align-self: start;}
.logo {position: relative;display: inline-block;}
.logo-img {height:40px; width:auto; display: block;}
.secure {height:31px;padding-top:-2px;}
main {display: grid; grid-template-rows: auto; }
.container  {margin-left: auto;  margin-right: auto;  padding: 10px 10px; align-content: start; display:flex; grid-gap:30px; flex-direction: column;}
.fullpanel {border: 3px solid #01F49F; box-shadow:0px 0px 15px rgba(1,244,159,0.9); border-radius: 13px; margin: 0 0 60px 0; font-weight: 500;padding:10px 10px 20px 10px; transition: all 0.3s ease;}
.formpanel {border: 3px solid #01F49F; box-shadow:0px 0px 15px rgba(1,244,159,0.9); border-radius: 13px; margin: 0 0 60px 0; font-weight: 400;transition: all 0.3s ease;}


.bar { background: linear-gradient(90deg,rgba(1, 244, 159, 1) 0%, rgba(185, 110, 217, 1) 100%);height:3px;}
footer {font-weight: 600;}
footer a {color:#01F49F;}
footer .container {padding: 20px 10px 40px 10px;}
.restrict {max-width: 600px; margin-left: auto; margin-right: auto;}
.custimg { position: relative; width: 100%;max-width: 900px !important;
    height: 350px; border: 1px solid #ccc; border-radius: 13px; background-color: #eee;
    overflow: hidden; margin: 0 auto 20px auto; transition: height 0.5s ease-in-out, max-width 0.5s ease-in-out;}
.custimg img {width: 100%;height: 100%; max-width: 900px !important;
    object-fit: cover; transition: width 0.5s ease-in-out, height 0.5s ease-in-out;}
.custimg::after {content: ""; position: absolute; inset: 0; 
     border-radius: 13px; pointer-events: none; z-index: 5; }
.glow {filter: drop-shadow(0px 0px 8px #01F49F) drop-shadow(0px 0px 4px #01F49F); }/**deliberately doubled**/
 .comptitle { display: flex;align-items: center; justify-content: center; grid-gap:5px; margin-bottom: 10px;}
 h1 {line-height: normal; margin-bottom: 0px; font-size:1.6em;}.custbody p {font-size: 1.1em;margin-bottom: 15px;}
.verified {display: flex;align-items: center;
    position: relative;cursor: pointer; outline: none;}
.verified img {height: 25px;}
.verified .tooltip-text {visibility: hidden; width: 140px;
    background-color: #030C38; color: #fff; text-align: center;
    border-radius: 6px;padding: 8px 5px;position: absolute;z-index: 100;bottom: 125%; 
    left: 50%;margin-left: -70px;border: 1px solid #01F49F; font-size: 0.8rem;
    font-weight: 400; opacity: 0; transition: opacity 0.3s; pointer-events: none;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);}
.verified .tooltip-text::after {content: "";position: absolute; top: 100%;
    left: 50%; margin-left: -5px; border-width: 5px; border-style: solid;
    border-color: #01F49F transparent transparent transparent;}
.verified:hover .tooltip-text,.verified:focus .tooltip-text,.verified:active .tooltip-text {
    visibility: visible; opacity: 1;}
/******* Reset  ******/
* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}
a {text-decoration: none; font-weight: 500;}
.textmid {text-align: center;}
.upper {text-transform: uppercase;}

.custimg .enlarge {display: flex !important;position: absolute;
    top: 15px; right: 15px;z-index: 50; background: rgba(3, 12, 56, 0.6); 
    border-radius: 50%; padding: 8px;  cursor: pointer; transition: transform 0.2s ease, background 0.2s ease;}
.custimg .enlarge:hover {transform: scale(1.1);background: rgba(1, 244, 159, 0.9);}
.simple-overlay-container {position: fixed !important; top: 0;left: 0;
    width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.85); z-index: 99999;
    display: flex; flex-direction: column;align-items: center; justify-content: center;
    visibility: hidden; opacity: 0;pointer-events: none;}
.simple-overlay-container.hide {display: none !important;visibility: hidden; opacity: 0;}
.simple-overlay-container.show { display: flex !important; visibility: visible;
    opacity: 1; pointer-events: auto;}
.simple-overlay-container img { max-width: 90vw;max-height: 80vh; 
    width: auto; height: auto; object-fit: contain; border: 2px solid #fff;
    border-radius: 8px; box-shadow: 0 0 30px rgba(0,0,0,0.8);cursor: pointer; }
.simple-overlay-container .ImgDesc {color: #fff; margin-top: 15px; text-align: center;
    font-size: 1.1em; text-shadow: 0 2px 4px #000;}





.tnc_overlay, .plan_overlays, .overlay-container, .simple-overlay-container {z-index: 162;}


.simple-overlay-container.scale-up-top, .tnc_overlay.scale-up-top, .plan_overlays.scale-up-top {animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both !important;}
.simple-overlay-container.scale-down-top, .tnc_overlay.scale-down-top, .plan_overlays.scale-down-top {animation: scale-down-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;}

/******* CONTACT FORM OVERLAY DO NOT DELETE!*****/
.tnc_overlay, .plan_overlays {position: fixed;top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(4, 20, 36, 0.85);
    display: flex; justify-content: center; overflow: auto; 
    max-width: 100% !important;}


/**** Captcha FIXES *****/
#g-recaptcha-response{   margin: -78px 0 0 0 !important; height: 76px !important; opacity: 0;display: block !important;  position: absolute; left: 0; }
.g_recaptcha, #id_captcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; width:180px;}
#rc-imageselect {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; }

.maxcenter {width:100%; border: none;}

.formitem {border-bottom:1px solid #3E225F; }
.formitem {padding:10px 20px 10px 20px; }
label {display: flex; grid-gap:5px; align-items: center; width: 100%; margin-bottom: 5px;}
label,input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select {flex-grow:1;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select,button
{display: block; width: 100%;border:1px solid #030C38; border-radius: 13px; margin:0px 8px 0px 0;padding:10px;
  box-sizing: border-box;margin-left :0; color:#192733; -webkit-appearance: none;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select{background-color: #ffffff;}
.spacebetween {display: flex; justify-content: space-between;}
.big {font-size: 1.6em; color:#01F49F; font-weight: normal;}

@keyframes scale-up-top { 0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }}
@keyframes scale-down-top { 0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0; }}
.enlarge {z-index: 20; }
.enlarge { display: flex !important; position: absolute;
    top: 15px; right: 15px; z-index: 100;
    background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;
    padding: 8px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.5); transition: transform 0.2s;}
.enlarge:hover {transform: scale(1.1);background-color: #01F49F;}
.enlarge:hover svg path {fill:#000;}
.ImgDesc{ font-weight: 400; padding:0 10px 0 10px; min-height: 3em;}

a.button, input[type="submit"], input[type="button"] { white-space: nowrap;
border: 1px solid #030C38; margin: 5px 0;  border-radius: 12px;
 text-align: center;
font-weight: 800;   font-size: 1.1em; 
transition: all 0.5s ease; box-shadow: inset 0 -10px 10px 10px #20053A;
box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;display: block; 
max-width: 100%; width: 100%;}
.contactbuttons {justify-content: stretch; align-items: center;grid-gap:10px; margin: 0 auto; padding: 0 15px;}
.contactbuttons.one { display: grid; grid-gap:10px;}
.contactbuttons.two { display: grid; grid-gap:10px;}
a.button.primary, a.button.secondary, input[type="submit"], input[type="button"] {color: #030C38; display: flex; align-items: center;  justify-content: center; grid-gap:10px;}
a.button.primary, input[type="submit"], input[type="button"] {background:linear-gradient(0deg,rgba(1, 244, 159, 1) 60%, rgba(0, 252, 252, 1) 100%); padding: 13px 18px 13px 10px;}
a.button.secondary {border: 3px solid #01F49F; padding: 10px 18px 10px 10px;}
a.button:hover, input[type="submit"]:hover, input[type="button"]:hover
{background: linear-gradient(to bottom right,
    rgba(255, 255, 255, 1.0) 0%,
    #cc6ba7 25%,
    #bb3c8a 55%,
    #FF38B4 100% );
     transform: scale(1.1); box-shadow: 0 4px 15px rgba(1, 244, 159, 0.2);  border: 1px solid #030C38; color:#fff; font-size: 1.2em; font-weight: 900; box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px; }
a.button:hover img {filter: drop-shadow(0px 0px 8px #ffffff) drop-shadow(0px 0px 8px #ffffff); }
.formitem:has(input) {justify-items: center; }

 @media (min-width: 2000px){
 .top {padding:20px 150px !important;}
 .bottom {padding: 10px 150px !important;}
 .fullpanel {padding:60px 10px 60px 10px !important;}
}

@media (min-width: 1400px){
  .container  { padding: 60px 60px; }
  .container{max-width:60% !important;}
    .overlaybutton {position:absolute; top:15px; right:15px; display: block;}
}

@media (min-width: 1023px){
  h3,  .heading {font-size:1.5em;}
  h4 {font-size: 1.2em; }
   .enlarge {display: none;}
   .container{max-width:70%;}
     .maxcenter {width:65% !important;}
     .formpanel {margin-top:150px !important;}
}

@media (min-width: 1200px) {
.custimg {height:500px !important;}
}

@media (min-width: 913px){
  h3.big, .big {font-size: 2em;}
  .spark2 {left:30% !important;}
  .logo-img {height:60px !important;}
  .secure {height:41px; padding-top: 0;}
  .spark3 {display: block;
  width: 55px; position: absolute; top: 3px; left: 105px;}
  .overlay-container { overflow-y: auto; top: 10vh !important; left: 10vw !important; max-height: 90vh; }
 .container  {padding: 50px 40px;}
 .maxcenter { min-width: 633px; max-width: 633px;}
}

@media (min-width: 900px){
    .spark2 {left:90% !important;}
  .top {padding: 20px 40px;}
  .bottom {padding: 10px 40px;}
 .sparkcontainer {width:100%;}
  .container{max-width:80%;}
  h1{font-size: 1.9em; line-height: normal; text-wrap: balance;}
  h2 {font-size: 1.9em; line-height: normal}
  body {font-size: 0.9em;}
  .fullpanel {padding:40px 30px 50px 30px; margin: 0 0 20px 0;}
  body {font-size: 0.9em;}
  h1 {font-size:1.8em;}
  .custbody p {font-size: 1.2em;}
  .contactbuttons.two { display: flex; grid-gap:20px;}
  a.button, input[type="submit"], input[type="button"] { max-width: 350px; width: 100%;}
.contactbuttons {justify-content: center;}
}

@media (min-width: 720px) {
.custimg {height:420px;}
 .verified img {height:35px;}
 .formpanel {margin-top:50px;}
}

@media (min-width: 600px) {
    .container  {padding: 20px 20px;}
      .overlaybutton {position:absolute; top:15px; right:15px; display: block;}
      .maxcenter {width:75%;}

}

@media (min-width: 480px) {
      .container:has(.maxcenter) {align-items: center;}
  

}