/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 9, 2024 */



@font-face {

    font-family: 'proxima_novaregular';

    src: url('./../fonts/proximanova_regular-webfont.woff2') format('woff2'),

         url('./../fonts/proximanova_regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'proxima_novabold';

    src: url('./../fonts/proximanova_bold-webfont.woff2') format('woff2'),

         url('./../fonts/proximanova_bold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'proxima_novabold_italic';

    src: url('./../fonts/proximanova_boldit-webfont.woff2') format('woff2'),

         url('./../fonts/proximanova_boldit-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'proxima_novablack';

    src: url('./../fonts/proximanova_black-webfont.woff2') format('woff2'),

         url('./../fonts/proximanova_black-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}





@font-face {

    font-family: 'proxima_novalight';

    src: url('./../fonts/proximanova_light-webfont.woff2') format('woff2'),

         url('./../fonts/proximanova_light-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}







/* Scrollbar Styling */

::-webkit-scrollbar {

    width: 8px;

  }

  

  ::-webkit-scrollbar-track {

    background-color: #e7e7e7;

    -webkit-border-radius: 8px;

    border-radius: 8px;

  }

  

  ::-webkit-scrollbar-thumb {

    -webkit-border-radius: 8px;

    border-radius: 8px;

    background: #d5b349;

  }



body, html {

  margin: 0;

  padding: 0;

  overflow: hidden;

  /* display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh; */

  background-color: #000;

}



.container

{

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

    background-color: #000;

    position: relative;

}



#ConnectAnd

{

    position: absolute;

    z-index: 1;

    bottom: 20%;  

    transition: transform 3s ease;

    transform: scale(0);

}

.show-ConnectAnd

{

    transform: scale(0.5) !important;

}

#ConnectAnd a{

    background: rgb(255, 255, 255, 50%);

    border-radius: 100px;

    padding: 30px 80px;

    border: #9b6000 solid 2px;

    text-decoration: none;

    text-transform: uppercase;

    color: #9b6000;

    font-size: 40pt;   

    font-family: 'proxima_novaregular';

}

#zoomImage {

  /* transform: scale(0);

  transition: transform 60s ease; */

  transform: scale(8);

  -webkit-animation: zoomin 10s ease-in ;

  animation: zoomin 10s ease-in ;

}



/* Zoom in Keyframes */

/* @-webkit-keyframes zoomin {

    0% {transform: scale(0.01);}

    50% {transform: scale(.5);}

    100% {transform: scale(8);}

  } */

  @keyframes zoomin {

    0% {transform: scale(0.01);}

    50% {transform: scale(.5);}

    100% {transform: scale(8);}

  } /*End of Zoom in Keyframes */

  #logo 

{

    position: absolute;

    z-index: 1;

    bottom: 12%;

    opacity: 0;

    /* transition: transform 40s ease; */

}

.show-logo

  {

    opacity: 1 !important;

    transform: scale(0.4);

    -webkit-animation: zoomin1 6s ease-in ;

    animation: zoomin1 6s ease-in ;

   

  }

  @keyframes zoomin1 {

    0% {transform: scale(0.01); opacity: 1;}

    100% {transform: scale(0.4);opacity: 1;}

  } /*End of Zoom in Keyframes */

  

#forABetter

{

    position: absolute;

    z-index: 1;

    bottom: -8%;  

    opacity: 0;

   

}



#forABetter p{

    text-decoration: none;

    text-transform: uppercase;

    color: #000000;

    font-size: 18pt;   

    letter-spacing: 20px;

    font-family: 'proxima_novaregular';

}

.show-content

{

    opacity: 1;

    animation: mymove 6s;

  animation-fill-mode: forwards;

}

  @keyframes mymove {

    0% {bottom: -8%;  opacity: 1;}

  50% {bottom: 10%;  opacity: 1; }

  60% {bottom: 10%;  opacity: 1;}

  70% {bottom: -8%;  opacity: 1;}

  80% {bottom: -8%;  opacity: 0;}

  100% {bottom: -8%;  opacity: 0;}

  }





#nextContent

{

    position: absolute;

    z-index: 1;

    bottom: -12%;

    opacity: 0;

    width: 100%;

    max-width: 963px;

}

#nextContent p{

    text-decoration: none;

    text-transform: uppercase;

    color: #000000;

    font-size: 18pt;   

    letter-spacing: 5px;

    text-align: center;

    line-height: 36px;

    font-family: 'proxima_novaregular';

}





.show-content1

{

    opacity: 1;

    animation: mymove1 3s;

  animation-fill-mode: forwards;

}

  @keyframes mymove1 {

    0% {bottom: -20%;  opacity: 1;}

  /* 50% {bottom: 5%;  opacity: 1; } */

  100% {bottom: 5%;  opacity: 1;}

  /* 70% {bottom: -8%;  opacity: 1;}

  80% {bottom: -8%;  opacity: 0;}

  100% {bottom: -8%;  opacity: 0;} */

  }



.hideConnectAnd

  {

    transition: transform 2s ease;

    transform: scale(0) !important;

  }

  .hide-content

  {

    animation: mymoveHide 1s;

    animation-fill-mode: forwards;

  }

  

  @keyframes mymoveHide {

    0% {bottom: 5%;  opacity: 1;}

  /* 50% {bottom: 5%;  opacity: 1; } */

  100% {bottom: -20%;  opacity: 1;}

  }



  #IAMHere

{

    position: absolute;

    z-index: 1;

    bottom: 20%;  

    transition: transform 2s ease;

    transform: scale(0);

}



#IAMHere a{

    background: rgb(255, 255, 255, 50%);

    border-radius: 100px;

    padding: 30px 80px;

    border: #9b6000 solid 2px;

    text-decoration: none;

    text-transform: uppercase;

    color: #9b6000;

    font-size: 40pt;   

    font-family: 'proxima_novaregular';

}







#whatDoyou

{

    position: absolute;

    z-index: 1;

    bottom: -10%;  

    opacity: 0;

}

#whatDoyou p{

    text-decoration: none;

    text-transform: uppercase;

    color: #ac0000;

    font-size: 18pt;   

    letter-spacing: 10px;

    font-family: 'proxima_novabold';

    cursor: pointer;

}

.show-content2

{

    opacity: 1;

    animation: mymoveWhat 2s;

  animation-fill-mode: forwards; 

}

  @keyframes mymoveWhat {

    0% {bottom: -10%;  opacity: 1;}

    /* 50% {bottom: 5%;  opacity: 1; } */

    100% {bottom: 10%;  opacity: 1;}

  }



  .show-content2 p{

    animation: zoomInOut 2s ease-in-out 3s infinite;

  }

  @keyframes zoomInOut {

    0%, 100% {

        transform: scale(1); /* Normal size */

      }

      50% {

        transform: scale(1.15); /* Scaled up */

      }

  }

  

  .popupSection

  {

    width: 900px;

    background: #f2cd61;

    border-radius: 20px;

    position: absolute;

    z-index: 1;

    min-height: 200px;

  }

  .headerSection

  {

    display: flex;

    align-items: center;

    padding: 20px 30px;

    border-bottom: #f7d677 solid 1px;

  }

  .headerSection h2{

    color: #000000;

    font-size: 35px;

    font-family: 'proxima_novabold';

    margin: 0;

  }

  .closeBtn

  {

    margin-left: auto;

    cursor: pointer;

  }

  .closeBtn img{

    width: 24px;

  }



  



.popupMidSection {

    padding: 30px;

    max-height: 400px;

    overflow: auto;

    min-height: 400px;

  }

  

  .form-group {

    display: block;

    margin-bottom: 30px;

  }

  

  .form-group input {

    padding: 0;

    height: initial;

    width: initial;

    margin-bottom: 0;

    display: none;

    cursor: pointer;

  }

  

  .form-group label {

    position: relative;

    cursor: pointer;

    font-family: 'proxima_novaregular';

    font-size: 22px;

    display: flex;

    align-items: flex-start;

  }

  

  .form-group label:before {

    content: '';

    -webkit-appearance: none;

    background-color: transparent;

    border: 2px solid #b98a00;

    /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */

    padding: 12px;

    display: inline-block;

    position: relative;

    vertical-align: middle;

    cursor: pointer;

    margin-right: 20px;

    border-radius: 3px;

  }

  

  .form-group input:checked + label:after {

    content: '';

    display: block;

    position: absolute;

    top: 5px;

    left: 10px;

    width: 6px;

    height: 12px;

    border: solid #b98a00;

    border-width: 0 3px 3px 0;

    transform: rotate(45deg);

  }

  .popupFooter

  {

    display: flex;

    align-items: center;

    padding: 30px;

  }

  #wantToKnow

  {

    border-radius: 100px;

    border: #9b6000 solid 2px;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 24px;   

    font-family: 'proxima_novabold';

    color: #bc0000;

    background:rgb(255, 255, 255, 20%);

    padding: 17px 60px;

    background-image: linear-gradient(to left, transparent, transparent 50%, #f2cd61 50%, #f2cd61);

    background-position: 100% 0;

    background-size: 200% 100%;

    transition: all 0.25s ease-in;

    cursor: pointer;

  }

  #wantToKnow:is(:hover, :focus, :active){

    background-position: 0 0;

}



  #TestWhat

  {

    border-radius: 100px;

    border: #9b6000 solid 2px;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 24px;   

    font-family: 'proxima_novabold';

    color: #734700;

    background:rgb(255, 255, 255, 20%);

    padding: 17px 60px;

    background-image: linear-gradient(to left, transparent, transparent 50%, #f2cd61 50%, #f2cd61);

    background-position: 100% 0;

    background-size: 200% 100%;

    transition: all 0.25s ease-in;

    margin-left: auto;

    cursor: pointer;

  }

  #TestWhat:is(:hover, :focus, :active){

    background-position: 0 0;

}



#popupQuestion

{

    position: absolute;

    z-index: 1;

    transition: transform 2s ease;

    transform: scale(0);

}

.show-popupQuestion

{

    transform: scale(1) !important;

}

.hide-popupQuestion

{

    transform: scale(0) !important;

}





.wheelSection

{   

    width: 96%;

    max-width: 900px;

    background: #ffffff;

    border-radius: 20px;

    position: absolute;

    z-index: 3;

    min-height: 200px;

    border: #f2cd61 solid 1px;

}

.wheelSection .headerSection1

{

  display: flex;

  align-items: center;

  padding: 20px 30px;

  border-bottom: #f7d677 solid 1px;

}

.wheelSection .headerSection1 h2{

  color: #000000;

  font-size: 30px;

  font-family: 'proxima_novabold';

  margin: 0;

}

.wheelSection .closeBtn1

{

  margin-left: auto;

  cursor: pointer;

}

.wheelSection .closeBtn1 img{

  width: 24px;

}



/* wheel */

body .wheel-wrapper {

    flex: 0 0 35rem;

}



body .wheel-wrapper #wheel-container {

    height: 35rem;

    position: relative;

    border-radius: 50%;

    box-shadow: 1.5rem 0 1.5rem rgb(0 0 0 / 30%);

}



body .wheel-wrapper #wheel-container #spin-action {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-family: 'Montserrat';

    font-weight: 700;

    text-transform: uppercase;

    width: 5rem;

    height: 5rem;

    display: block;

    border: 0;

    border-radius: 50%;

    font-size: 1rem;

    box-shadow: 0.5rem 0 0.5rem rgb(0 0 0 / 30%);

    outline: none;

    cursor: pointer;

    background: #FFFFFF;

    color: #000000;

}



body .wheel-wrapper #wheel-container #spin-action:hover {

    color: #d0ae4a;

}



body .wheel-wrapper #wheel-container .marker {

    width: 1.5rem;

    height: 2.5rem;

    clip-path: polygon(0 0, 0% 100%, 100% 50%);

    background-color: #FFFFFF;

    position: absolute;

    top: 50%;

    transform: translate(-20%, -50%);

}



body .wheel-wrapper #wheel-container #wheel {

    height: 100%;

    position: relative;

    border-radius: 50%;

    overflow: hidden;

    transition: transform 3s ease;

}



body .wheel-wrapper #wheel-container #wheel .part {

    width: 50%;

    position: absolute;

    transform-origin: center right;

}



body .wheel-wrapper #wheel-container #wheel .part .name {

    width: 100%;

    height: 100%;

    padding: 0 4rem 0 2rem;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    color: #000000;

    font-size: 1rem;

    font-weight: 600;

    overflow: hidden;

    white-space: nowrap;

}



body .wheel-wrapper #wheel-container #wheel .part:nth-child(1) .name img

{

    width: 50px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(2) .name img

{

    width: 80px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(3) .name img

{

    width: 100px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(4) .name img

{

    width: 120px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(5) .name img

{

    width: 130px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(6) .name img

{

    width: 110px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(7) .name img

{

    width: 110px;

}

body .wheel-wrapper #wheel-container #wheel .part:nth-child(8) .name img

{

    width: 130px;

}

body .wheel-wrapper #wheel-container #wheel .part.selected

{

  background-color:rgb(137 108 24) !important;

}

body .wheel-wrapper #wheel-container #wheel .part.selected .name img {

    color: white;

    animation: selected 800ms ease;

  }

  

  @keyframes selected {

    25% {

      transform: scale(1.25);

      text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);

    }

    40% {

      transform: scale(0.92);

      text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);

    }

    60% {

      transform: scale(1.02);

      text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);

    }

    75% {

      transform: scale(0.98);

    }

    85% {

      transform: scale(1);

    }

  }



.modal-backdrop

{

    z-index: 2 !important;

    display: none !important;

}

#WheelSection .form-control

{

    border: 0px !important;

}

/* @media only screen and (max-width: 992px) {

    html {

        font-size: 12px;

    }

}



@media only screen and (max-width: 768px) {

    html {

        font-size: 8px;

    }

} */

.d-flex.align-items-center.justify-content-center

{

    padding: 30px;

}

#WheelSection .btn-primary {

    color: #fff;

    background-color: #d0ae4a !important;

    border-color: #d0ae4a !important;

    border-radius: 70px;

    padding: 10px 20px;

}

#WheelSection  .btn-danger

{

    border-radius: 70px;

    padding: 10px 20px;

}

#WheelSection  .btn-secondary

{

    border-radius: 70px;

    padding: 10px 20px;

}

/* end Wheel */



#WheelSection

{

    position: absolute;

    z-index: 1;

    transition: transform 2s ease;

    transform: scale(0);

}

.show-WheelSection

{

    transform: scale(1) !important;

}

.hide-WheelSection

{

    transform: scale(0) !important;

}

#WheelSection .modal

{

    overflow: hidden !important;

}

@media only screen and (max-width: 820px) 

{

    .popupSection

    {

        width: 96%;

        max-width: 900px;

        border-radius: 15px;

    }

    #nextContent

    {

        width: 96%;

    }

    #logo

    {

        top: auto;

    }

    #wantToKnow, #TestWhat

    {

        font-size: 24px;

        padding: 17px 38px;

    }

}

@media only screen and (max-width: 767px) {

    .container

    {

        width: 96%;

        margin: auto;

    }

    #logo

    {

        top: -100px;

        /* top: auto; */

    }

    #ConnectAnd a

    {

        text-align: center;

        display: block;

        font-size: 26pt;

        width: 420px;

    }

    #IAMHere a

    {

        text-align: center;

        display: block;

        font-size: 26pt;

        width: 340px;

    }

    #nextContent, #forABetter

    {

        width: 96%;

    }

    #nextContent p

    {

        text-align: center;

        font-size: 13pt;

    }

    #forABetter p

    {

        letter-spacing: 12px;

        text-align: center;

        font-size: 13pt;

    }

    #whatDoyou

    {

        width: 96%;

    }

    #whatDoyou p

    {

        text-align: center;

        font-size: 13pt;

    }

    .popupSection

    {

        width: 100%;

        max-width: 900px;

        border-radius: 15px;

    }

    .headerSection h2

    {

        font-size: 24px;

    }

    .closeBtn img {

        width: 18px;

    }

    .form-group label

    {

        font-size: 18px;

    }

    .popupFooter

    {

        flex-flow: wrap;

        justify-content: center;

    }

    #TestWhat

    {

        margin-top: 10px;

    }

    #wantToKnow, #TestWhat

    {

        font-size: 18px;

        padding: 12px 48px;

    }

    .hide-content

  {

    animation: mymoveHide 1s;

    animation-fill-mode: forwards;

  }

  

  @keyframes mymoveHide {

    0% {bottom: 5%;  opacity: 1;}

  /* 50% {bottom: 5%;  opacity: 1; } */

  100% {bottom: -25%;  opacity: 1;}

  }

  body .wheel-wrapper {

    flex: 0 0 20rem;

}

body .wheel-wrapper #wheel-container

{

    height: 20rem;

}

.wheelSection

{

    border-radius: 10px;

}

.wheelSection .headerSection1 h2

{

    font-size: 20px;

}

.wheelSection .closeBtn1 img {

    width: 15px;

}

}