/* 1. Hide any horizontal overflow on html/body */
    html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    /* Example content styling */
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }

    h1 { font-family: sans-serif; }
    p  { font-family: sans-serif; line-height: 1.5; }
  html, body
{
   height: 100%;
}
div#space
{
   width: 1px;
   height: 50%;
   margin-bottom: -414px;
   float:left
}
div#container
{
   width: 970px;
   height: 828px;
   margin: 0 auto;
   position: relative;
   clear: left;
}
body
{
   background-color: #FAF5FC;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#Shape4
{
   width: 966px;
   height: 637px;
   background-color: transparent;
   background-image: none;
   border: 2px #A25CFA solid;
   border-radius: 10px;
}
#Shape1
{
   width: 418px;
   height: 427px;
   background-image: linear-gradient(315deg, #F95FE5 0%, #A25CFA 100%);
   border: 0px #D2D2D2 solid;
   border-radius: 209px / 214px;
   box-shadow: 21px 27px 45px rgba(162,92,250,0.78);
}
#Shape1
{
   animation: animate-border 1000ms linear 0ms infinite normal both;
}
#wb_Icon4
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #245580;
   border-radius: 0px;
   text-align: center;
   animation: flip 1000ms linear 0ms infinite normal both;
   margin: 0;
   padding: 0;
   vertical-align: top;
}
#Icon4
{
   height: 22px;
   width: 14px;
}
#Icon4 i
{
   color: #FF0000;
   display: inline-block;
   font-size: 14px;
   line-height: 22px;
   vertical-align: middle;
   width: 13px;
}
#wb_Icon4:hover #Icon4 i
{
   color: #FF0000;
}
#Shape3
{
   width: 470px;
   height: 135px;
   background-image: linear-gradient(to left, #A25CFA 0%, #EE82EE 100%);
   border: 0px #D2D2D2 solid;
   border-radius: 10px;
   box-shadow: 7px 8px 38px rgba(106,90,205,0.42);
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image2
{
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image5
{
   vertical-align: top;
}
#Image5
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text2 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text2 div
{
   text-align: center;
}
#SlideShow1 .image
{
   border-width: 0;
   border-radius: inherit;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#SlideShow1
{
   border: 0px solid #DEE2E6;
   border-radius: 0px;
}
#Shape2
{
   width: 966px;
   height: 68px;
   background-color: #A25CFA;
   background-image: none;
   border: 0px #D2D2D2 solid;
}
#wb_Icon1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #245580;
   border-radius: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
   vertical-align: top;
}
#Icon1
{
   height: 34px;
   width: 37px;
}
#Icon1 i
{
   color: #FAF5FC;
   display: inline-block;
   font-size: 34px;
   line-height: 34px;
   vertical-align: middle;
   width: 33px;
}
#wb_Icon1:hover #Icon1 i
{
   color: #FAF5FC;
}
#wb_Icon2
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #245580;
   border-radius: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
   vertical-align: top;
}
#Icon2
{
   height: 34px;
   width: 37px;
}
#Icon2 i
{
   color: #FAF5FC;
   display: inline-block;
   font-size: 34px;
   line-height: 34px;
   vertical-align: middle;
   width: 33px;
}
#wb_Icon2:hover #Icon2 i
{
   color: #FAF5FC;
}
#wb_Icon3
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #245580;
   border-radius: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
   vertical-align: top;
}
#Icon3
{
   height: 34px;
   width: 37px;
}
#Icon3 i
{
   color: #FAF5FC;
   display: inline-block;
   font-size: 34px;
   line-height: 34px;
   vertical-align: middle;
   width: 41px;
}
#wb_Icon3:hover #Icon3 i
{
   color: #FAF5FC;
}
#wb_Icon5
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #245580;
   border-radius: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
   vertical-align: top;
}
#Icon5
{
   height: 34px;
   width: 37px;
}
#Icon5 i
{
   color: #FAF5FC;
   display: inline-block;
   font-size: 34px;
   line-height: 34px;
   vertical-align: middle;
   width: 41px;
}
#wb_Icon5:hover #Icon5 i
{
   color: #FAF5FC;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text4 div
{
   text-align: left;
}
#wb_Text5 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text5 div
{
   text-align: left;
}
#wb_Text6 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text6 div
{
   text-align: left;
}
#wb_Text7 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text7 div
{
   text-align: left;
}
#wb_Icon6
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #245580;
   border-radius: 0px;
   text-align: center;
   margin: 0;
   padding: 0;
   vertical-align: top;
}
#Icon6
{
   height: 25px;
   width: 25px;
}
#Icon6 i
{
   color: #EE82EE;
   display: inline-block;
   font-size: 25px;
   line-height: 25px;
   vertical-align: middle;
   width: 24px;
}
#wb_Icon6:hover #Icon6 i
{
   color: #A25CFA;
}
#Shape5
{
   top: 0px;
   width: 90px;
   height: 30px;
   background-image: linear-gradient(to right, #A25CFA 0%, #EE82EE 100%);
   border: 0px #D2D2D2 solid;
   border-radius: 3px;
   box-shadow: 11px 10px 0px rgba(250,245,252,0.31);
}
#Shape5:hover
{
   background-image: linear-gradient(to right, #EE82EE 0%, #A25CFA 100%);
   border: 0px #FFFFFF solid;
}
#Shape5_text
{
   position: absolute;
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
    left: 2.22%;
   top: 6.67%;
   width: 94.44%;
   height: 83.33%;
   box-sizing: border-box;
   overflow: hidden;
   text-align: center;
   word-wrap: break-word;
}
#wb_Image3
{
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1
{
   color: #A25CFA;
   font-family: Arial;
   font-weight: 400;
   font-size: 15px;
   line-height: 16px;
}
#wb_Text1 p, #wb_Text1 ul
{
   margin: 0;
   padding: 0;
}
#Html3
{
   position: absolute;
   left: 67px;
   top: 784px;
   width: 804px;
   height: 21px;
   z-index: 25;
}
#wb_Icon1
{
   position: absolute;
   left: 682px;
   top: 720px;
   width: 37px;
   height: 34px;
   text-align: center;
   z-index: 13;
}
#wb_Shape1
{
   position: absolute;
   left: 481px;
   top: 253px;
   width: 418px;
   height: 427px;
   z-index: 1;
}
#wb_Icon6
{
   position: absolute;
   left: 422px;
   top: 254px;
   width: 25px;
   height: 25px;
   visibility: hidden;
   text-align: center;
   z-index: 22;
}
#wb_Shape2
{
   position: absolute;
   left: 0px;
   top: 703px;
   width: 966px;
   height: 68px;
   z-index: 12;
}
#Html1
{
   position: absolute;
   left: 13px;
   top: 194px;
   width: 414px;
   height: 292px;
   z-index: 24;
}
#wb_Image1
{
   position: absolute;
   left: 254px;
   top: 560px;
   width: 100px;
   height: 100px;
   z-index: 6;
}
#wb_Shape3
{
   position: absolute;
   left: 13px;
   top: 531px;
   width: 470px;
   height: 135px;
   z-index: 5;
}
#wb_Text4
{
   position: absolute;
   left: 412px;
   top: 731px;
   width: 138px;
   height: 18px;
   z-index: 18;
}
#wb_Image2
{
   position: absolute;
   left: 367px;
   top: 560px;
   width: 100px;
   height: 100px;
   z-index: 7;
}
#wb_Icon4
{
   position: absolute;
   left: 37px;
   top: 160px;
   width: 14px;
   height: 22px;
   text-align: center;
   z-index: 3;
}
#wb_Image3
{
   position: absolute;
   left: 21px;
   top: 103px;
   width: 46px;
   height: 44px;
   z-index: 26;
}
#wb_Text5
{
   position: absolute;
   left: 563px;
   top: 731px;
   width: 138px;
   height: 18px;
   z-index: 19;
}
#wb_Icon5
{
   position: absolute;
   left: 179px;
   top: 720px;
   width: 37px;
   height: 34px;
   text-align: center;
   z-index: 16;
}
#SlideShow1
{
   position: absolute;
   left: 535px;
   top: 138px;
   width: 336px;
   height: 584px;
   z-index: 11;
}
#Html4
{
   position: absolute;
   left: 93px;
   top: 536px;
   width: 332px;
   height: 17px;
   z-index: 28;
}
#wb_Text6
{
   position: absolute;
   left: 733px;
   top: 731px;
   width: 138px;
   height: 18px;
   z-index: 20;
}
#wb_Image4
{
   position: absolute;
   left: 139px;
   top: 560px;
   width: 100px;
   height: 100px;
   z-index: 8;
}
#wb_Text7
{
   position: absolute;
   left: 56px;
   top: 262px;
   width: 374px;
   height: 97px;
   visibility: hidden;
   z-index: 21;
}
#wb_Image5
{
   position: absolute;
   left: 29px;
   top: 560px;
   width: 100px;
   height: 100px;
   z-index: 9;
}
#JavaScript1
{
   color: #FAF5FC;
   font-size: 37px;
   font-family: "Poppins";
   font-weight: bold;
   width: 100%;
   height: 100%;
   animation: spinZ 20s linear infinite;
   text-align: center;
}
#wb_Text1
{
   position: absolute;
   left: 69px;
   top: 117px;
   width: 293px;
   height: 16px;
   z-index: 27;
}
#wb_Text2
{
   position: absolute;
   left: 99px;
   top: 749px;
   width: 772px;
   height: 15px;
   visibility: hidden;
   text-align: center;
   z-index: 10;
}
#wb_Text3
{
   position: absolute;
   left: 232px;
   top: 731px;
   width: 138px;
   height: 18px;
   z-index: 17;
}
#wb_Shape4
{
   position: absolute;
   left: 0px;
   top: 92px;
   width: 970px;
   height: 641px;
   z-index: 0;
}
#wb_Shape5
{
   position: absolute;
   left: 202px;
   top: 389px;
   width: 90px;
   height: 30px;
   opacity: 0.92;
   visibility: hidden;
   z-index: 23;
}
#wb_JavaScript1
{
   position: absolute;
   left: 441px;
   top: 266px;
   width: 488px;
   height: 401px;
   z-index: 2;
}
#wb_Icon2
{
   position: absolute;
   left: 362px;
   top: 720px;
   width: 37px;
   height: 34px;
   text-align: center;
   z-index: 14;
}
#wb_Icon3
{
   position: absolute;
   left: 513px;
   top: 720px;
   width: 37px;
   height: 34px;
   text-align: center;
   z-index: 15;
}
#Html2
{
   position: absolute;
   left: 56px;
   top: 159px;
   width: 121px;
   height: 19px;
   z-index: 4;
}
@media only screen and (max-width: 969px)
{
div#container
{
   width: 427px;
   height: 1121px;
}
body
{
   background-color: #FAF5FC;
   background-image: none;
}
#wb_Shape4
{
   left: 6px;
   top: 164px;
   width: 415px;
   height: 882px;
   visibility: visible;
   display: inline;
   margin: 0;
}
#Shape4
{
   width: 411px;
   height: 878px;
}
#wb_Shape1
{
   left: 42px;
   top: 203px;
   width: 350px;
   height: 350px;
   visibility: visible;
   display: inline;
   margin: 0;
}
#Shape1
{
   width: 350px;
   height: 350px;
}
#wb_JavaScript1
{
   left: 71px;
   top: 228px;
   width: 282px;
   height: 287px;
   visibility: visible;
   display: inline;
}
#wb_Icon4
{
   left: 21px;
   top: 199px;
   width: 14px;
   height: 22px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#Icon4
{
   width: 14px;
   height: 22px;
}
#Icon4 i
{
   line-height: 22px;
   font-size: 14px;
   width: 13px;
}
#Html2
{
   left: 40px;
   top: 197px;
   width: 121px;
   height: 19px;
   visibility: visible;
   display: inline;
}
#wb_Shape3
{
   left: 6px;
   top: 751px;
   width: 408px;
   height: 136px;
   visibility: visible;
   display: inline;
   margin: 0;
}
#Shape3
{
   width: 408px;
   height: 136px;
}
#wb_Image1
{
   left: 292px;
   top: 800px;
   width: 70px;
   height: 70px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#wb_Image2
{
   left: 211px;
   top: 800px;
   width: 70px;
   height: 70px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#wb_Image4
{
   left: 130px;
   top: 800px;
   width: 70px;
   height: 70px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#wb_Image5
{
   left: 48px;
   top: 800px;
   width: 70px;
   height: 70px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#wb_Text2
{
   left: 13px;
   top: 1557px;
   width: 353px;
   height: 45px;
   visibility: hidden;
   display: none;
}
#wb_Text2
{
   margin: 0;
   padding: 0;
}
#SlideShow1
{
   left: 70px;
   top: 176px;
   width: 288px;
   height: 512px;
   visibility: visible;
   display: inline-block;
}
#wb_Shape2
{
   left: 6px;
   top: 895px;
   width: 408px;
   height: 124px;
   visibility: visible;
   display: inline;
   margin: 0;
}
#Shape2
{
   width: 408px;
   height: 124px;
}
#wb_Icon1
{
   left: 214px;
   top: 980px;
   width: 37px;
   height: 34px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#Icon1
{
   width: 37px;
   height: 34px;
}
#Icon1 i
{
   line-height: 34px;
   font-size: 34px;
   width: 33px;
}
#wb_Icon2
{
   left: 215px;
   top: 913px;
   width: 37px;
   height: 34px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#Icon2
{
   width: 37px;
   height: 34px;
}
#Icon2 i
{
   line-height: 34px;
   font-size: 34px;
   width: 33px;
}
#wb_Icon3
{
   left: 55px;
   top: 971px;
   width: 37px;
   height: 34px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#Icon3
{
   width: 37px;
   height: 34px;
}
#Icon3 i
{
   line-height: 34px;
   font-size: 34px;
   width: 41px;
}
#wb_Icon5
{
   left: 56px;
   top: 913px;
   width: 37px;
   height: 34px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#Icon5
{
   width: 37px;
   height: 34px;
}
#Icon5 i
{
   line-height: 34px;
   font-size: 34px;
   width: 41px;
}
#wb_Text3
{
   left: 99px;
   top: 921px;
   width: 115px;
   height: 18px;
   visibility: visible;
   display: inline;
}
#wb_Text3
{
   margin: 0;
   padding: 0;
}
#wb_Text4
{
   left: 265px;
   top: 921px;
   width: 77px;
   height: 18px;
   visibility: visible;
   display: inline;
}
#wb_Text4
{
   margin: 0;
   padding: 0;
}
#wb_Text5
{
   left: 104px;
   top: 988px;
   width: 110px;
   height: 18px;
   visibility: visible;
   display: inline;
}
#wb_Text5
{
   margin: 0;
   padding: 0;
}
#wb_Text6
{
   left: 264px;
   top: 988px;
   width: 101px;
   height: 18px;
   visibility: visible;
   display: inline;
}
#wb_Text6
{
   margin: 0;
   padding: 0;
}
#wb_Text7
{
   left: 19px;
   top: 1039px;
   width: 360px;
   height: 97px;
   visibility: hidden;
   display: none;
}
#wb_Text7
{
   margin: 0;
   padding: 0;
}
#wb_Icon6
{
   left: 363px;
   top: 1031px;
   width: 20px;
   height: 20px;
   visibility: hidden;
   display: none;
   margin: 0;
   padding: 0;
}
#Icon6
{
   width: 20px;
   height: 20px;
}
#Icon6 i
{
   line-height: 20px;
   font-size: 20px;
   width: 19px;
}
#wb_Shape5
{
   left: 144px;
   top: 1170px;
   width: 90px;
   height: 30px;
   visibility: hidden;
   display: none;
   margin: 0;
}
#Shape5
{
   width: 90px;
   height: 30px;
}
#Html1
{
   left: 13px;
   top: 479px;
   width: 396px;
   height: 246px;
   visibility: visible;
   display: inline;
}
#Html3
{
   left: 45px;
   top: 1067px;
   width: 309px;
   height: 21px;
   visibility: visible;
   display: inline;
}
#wb_Image3
{
   left: 351px;
   top: 191px;
   width: 46px;
   height: 44px;
   visibility: visible;
   display: inline;
   margin: 0;
   padding: 0;
}
#wb_Text1
{
   left: 70px;
   top: 365px;
   width: 238px;
   height: 16px;
   visibility: hidden;
   display: none;
}
#wb_Text1
{
   font-size: 15px;
   margin: 0;
   padding: 0;
   text-align: left;
   line-height: 16px;
}
#Html4
{
   left: 15px;
   top: 762px;
   width: 327px;
   height: 17px;
   visibility: visible;
   display: inline;
}
}
#JavaScript1 span 
{
   position: absolute;
   display: inline-block;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   transition: all .5s cubic-bezier(0,0,0,1);
}
@keyframes spinZ {
0% { transform: rotateZ(360deg); }
100% { transform: rotateZ(0deg); }
}
    #userLocation {
      color: Purple;
      font-size: 18px;
    }
      /* Global Reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; }

    body {
      font-family: Arial, sans-serif;
      background-color: #FAF5FC;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 1rem;
    }

    .container {
      background: #fff;
      border-radius: 0.75rem;
      box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.08);
      width: 100%;
      max-width: 28rem;    /* ~448px */
      padding: 1rem;
      text-align: center;
    }

    /* Timer */
    .timer-title {
      color: purple;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    #timeLeft {
      color: red;
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    /* Step content */
    h2.step-title {
      font-size: 1.375rem;
      margin-bottom: 1rem;
    }
    p { font-size: 1rem; margin-bottom: 1rem; }

    /* Modern CTA */
    .btn {
      display: inline-block;
      padding: 0.75rem 1.75rem;
      margin-top: 0.75rem;
      background: linear-gradient(135deg,#7A4DFF,#B18AFF);
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,0.2);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0.375rem 1.25rem rgba(0,0,0,0.3);
    }
    .btn:active {
      transform: scale(0.98);
    }

    .hidden { display: none; }

    .options label {
      display: block;
      text-align: left;
      margin: 0.5rem 0;
      cursor: pointer;
      font-size: 1rem;
    }
    .options input { margin-right: 0.5rem; }
 /* Tablet up to 768px */
    @media (max-width: 48rem) {
      .container { padding: 1.25rem; }
      .btn { padding: 0.65rem 1.5rem; font-size: 0.95rem; }
    }

    /* Very small phones under 360px */
    @media (max-width: 20.5rem) {
      .timer-title { font-size: 1rem; }
      #timeLeft     { font-size: 1.5rem; }
      h2.step-title { font-size: 1.125rem; }
      .btn          { padding: 0.5rem 1rem; font-size: 0.85rem; }
    }

    /* Desktops: allow slightly wider container */
    @media (min-width: 64rem) {
      .container { max-width: 32rem; } /* ~512px */
    }
      footer {
      padding: 1rem;
      background: #f8f8f8;
      text-align: center;
      font-size: 0.2rem;
    }
    /* NEW: make the footer text purple */
    footer p {
      color: #A25CFA;
    }
    #translated-message {
    color: #fff;
    font-size: 15px;

      footer {
      padding: 1rem;
      background: #f8f8f8;
      text-align: center;
      font-size: 0.2rem;
    }
    /* NEW: make the footer text purple */
    footer p {
      color: #A25CFA;
    }
    #translated-message {
    color: #fff;
    font-size: 15px;
  }