body{

    background: var(--website-text-blue-dark, #0A0130);



}



p{

    color:white;

}



.main-div{

    position: relative;

}



.steps-container {

  display: flex;

  align-items: top;

  justify-content: center;

  gap: 0;

 width: 100%;

}



.steps-container .step {

  text-align: center;

  position: relative;

  padding: 0 15px;

}



.steps-container .circle {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #f7d8f0;

  color: #d81b8e;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 8px;

  font-size: 18px;

  z-index: 10;

  position: relative;

}



.steps-container .circle.active {

  background: #d81b8e;

  color: white;

}



.main-div .steps-container h3 {

    color: #141C24 !important;

    font-size: 1rem !important;

    margin-top: 0 !important;

    line-height: 1.1;

    margin-bottom: 0 !important;

    padding-bottom: 0.5rem;

}

.steps-container p{

    color:#344051;

    font-size: 0.8rem;

}

.steps-container .step:before{

  position: absolute;

    top:20px;

    left:0;

    width: 100%;

    height:2px;

    background:#FBE6F3;

    content:"";

}



.steps-container .step:first-child:before{

    width: 50%;

    left:50%

}

.steps-container .step:last-child:before{

    width: 50%;

    right:50%

}



.steps-container .line {

  width: 6px;

  height: 2px;

  background: #f3d6ea;

}



.main-div{

      padding-top:4rem;

}

.landing-logo img{

        height: 70px;

}

.main-div h1{

    color:white;

    font-weight: 700;

    font-size:2.8rem;

    line-height: 4rem;

    position: relative;

    padding-bottom: 2rem;

  

    margin-left:auto;

    margin-right:auto;

        max-width: 40rem;

}



.category-section{

    display:none;

}

.category-section.active{

      display: inline-block !important;

          width: 100%;

}

.main-div h2{

        color:white;

    font-weight: 700;

    font-size:3rem;

    line-height: 3.7rem;

    position: relative;

    padding-bottom: 2rem;

  

    margin-left:auto;

    margin-right:auto;

        max-width: 47rem;

}



.main-div h3{

        color:white;

    font-weight: 700;

    font-size:2rem;

    line-height: 3rem;

    position: relative;

    padding-bottom: 1rem;

    margin-top:4rem;

    margin-left:auto;

    margin-right:auto;

        max-width: 38rem;

}



.sec-11 h3{

    max-width: 30rem;

    padding-bottom: 0.5rem;

    margin-left: 0;

}

.footer-section{

    background-color: white;

}

.sec-1 .txt-2{

    max-width: 34rem;

}

.sec-1 h1:before{

    position: absolute;

    height:0.6rem;

    width:72%;

    content:"";

    background:#D7008A;

    bottom:0;

    left:14%;

    border-radius:10px;

}

.txt-1{

    font-weight: 600;

    margin-top:2rem;

}

.txt-2{

    max-width: 54rem;

    margin:0 auto;

}



.button-1{

    width: auto;

    padding-left:1.5rem;

    padding-right:1.5rem;

}



.sec-3 h1{

    max-width: 54rem;

}



.sec-3 .txt-1{

    margin-top:0;

}



.sec-3 .txt-2{

    max-width: 62rem;

}



.sec-3 h1{

padding-bottom: 1rem;

}



.sec-5 h1, .sec-5 p{

    text-align: left;

    margin-left: 0;

}



.sec-5{

    margin-top:10rem

}

.lazy-img {

    opacity: 0.4;

    transition: opacity 0.4s ease-in-out;

}

.lazy-img.loaded {

    opacity: 1;

}

.sec-6 h1, .sec-6 p{

    text-align: left;

    margin-left: 0;

}



.sec-7 h1{

    max-width: 60rem;

}



.sec-7 .txt-2{

    max-width: 55rem;

}

.img-style-1{

    display: inline-block;

    position: relative;

    float: right;

}

.img-style-1 > span{

   position:absolute;

 

   padding-bottom: 6px;

 

   width:50%;

   left:0;

 



}



#ring {



  transition: transform 0.2s ease;

}



/* Ring animation: shake effect */

@keyframes ringAnimation {

  0% { transform: rotate(0deg); }

  25% { transform: rotate(15deg); }

  50% { transform: rotate(-15deg); }

  75% { transform: rotate(10deg); }

  100% { transform: rotate(0deg); }

}



.active_1 #ring{

  animation: ringAnimation 0.5s infinite;

}



.img-style-1 .trans_2{

    transition-delay: 0s;

    transition-duration: 0.8s;

    transition-property: all;

    transition-timing-function: 

ease;

    -webkit-transition-delay: 0s;

    -webkit-transition-duration: 0.8s;

    -webkit-transition-property: all;

    -webkit-transition-timing-function: 

ease;

    -moz-transition-delay: 0s;

    -moz-transition-duration: 0.8s;

    -moz-transition-property: all;

    -moz-transition-timing-function: ease;

    -ms-transition-delay: 0s;

    -ms-transition-duration: 0.8s;

    -ms-transition-property: all;

    -ms-transition-timing-function: ease;

    -o-transition-delay: 0s;

    -o-transition-duration: 0.8s;

    -o-transition-property: all;

    -o-transition-timing-function: ease;

}

.img-style-1 span img{

    width:100%;

}

.img-style-1 span span span{

    width:100%;

    align-items: start;

    vertical-align: top;

  opacity:0;

   transform: scale(0);

   background:white;

     border-radius:100%;

         display: inline-block;

          padding: 5%;

    padding-bottom: 2%;

           

   

}



.img-style-3-2 img{

    transition-delay: 1.5s !important;

}



.img-style-3-2 img.trans-2{

    transition-delay: 1.7s !important;

}

.img-style-1-1{

      top:0;

      left:0;

   transform: translate(-92%, -26%);

}

.img-style-1-2{

    right:0;

    top:0;

         transform: translate(109%, 2%);

}



.img-style-1-3{

 top:auto;

 bottom:0;

     transform: translate(-113%, 60%);



}

.img-style-2{

    position: relative;



}

.img-style-2-2{

    position: absolute;

    top:12%;

    left:0;

}

.img-style-2-1  img{

    max-width: 100%;

}

.img-style-2-2  img{

    max-width: 100%;

}



.highlight-item{

    flex: 100%;

    width:100%;

    max-width: 100%;

    margin-bottom: 25px;

}

.highlight-text {

    margin-bottom: 0.5rem;

    font-size: 0.9rem;}

.highlight-content {

    font-size: 1rem;

}



.highlight-content a{

color:#141C24;

}

.highlight-block{

    padding-left:15px;

    padding-right:15px;

    padding-bottom: 4rem;

    position: relative;

}

.highlight-date{

    background:white;

    color:#344051;

    font-size:0.75rem;

    padding:0.2rem 0.7rem;

    font-weight: 500;

    border-radius:1rem;

    position: absolute;

    bottom:15px;

    left:15px;

    

}



.highlight-block{

    min-height: 12rem;

}



.highlight-image img {

    width: 100%;

    height: 12rem;

    border-radius: 0;

    border-top-left-radius: 8px;

    border-top-right-radius: 8px;

    object-fit: cover;

}



.highlight-list .col-md-6 .highlight-date{

    left:auto;

    right:15px;

    bottom:auto;

    top:1rem;

  



}



.highlight-list .col-md-6 .highlight-block{

  padding-bottom: 15px;

}

.sec-8 h1{

margin-top: 1rem;

}

.title-sec-1{

    color:#D7008A;

}



.menu-tab {

    font-size: 0.9rem;

   width: 95%;}





   .sec-8 .txt-2 {

    max-width: 55rem;

}



.sec-9 .txt-2{

    padding-left:0;

    padding-right:0;

        margin-left: 0;

}



.img-style-3{

    position: relative;

}

.img-style-3-2{

       position: absolute;

    bottom: 9rem;

    left: 16rem;



}



.img-style-3-2-1{

    margin-left:15%

}





.faq-container{

    max-width:50rem;

    margin:0 auto;

}

 .accordion-item {

        border-bottom: 1px solid #eee;

        padding: 20px 15px;

    }



    .accordion-header {

        display: flex;

        justify-content: space-between;

        cursor: pointer;

        font-weight: 500;

        font-size: 16px;

    }



    .accordion-header span {

        font-size: 20px;

        transition: 0.3s;

    }



    .accordion-content {

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.3s ease;

        color: #555;

        padding-right: 20px;

        line-height: 1.5;

    }



    .accordion-item.active .accordion-content {

        max-height: 200px;

        margin-top: 10px;

    }



    .accordion-item.active .accordion-header span:before {

       content:"-"

    }





    .sec-10{

        background-color: white;

    }



    .accordion-content p{

        color:#344051;

        font-size: 1rem;

    }



    .sec-10 .txt-2{

        color:#344051;

            max-width: 38rem;

    }



    .accordion-header{

        color:#141C24;

         font-size: 1.1rem;

    }



    .accordion-header span{

           width: 1.3rem;

    height: 1.3rem;

    border-radius: 100%;

    border: 1px solid #141C24;

    line-height: 1;

    text-align: center;

    line-height: 1rem;



    }



      .accordion-header span:before{

        content:"+"

      }



 .img-style-4{

    display: inline-block;

    position: relative;

    margin-top:3rem;

    margin-left:9rem ;

 }

      .img-style-4-1{

        position: absolute;

    bottom: 0;

    right: 55%;



      }



     .img-style-4-2{

           position: absolute;

    top: 0;

    left: 0;

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

      }

  .img-style-4-1 img{

        width: 22rem;

      }

      .img-style-4-2 img{

        width: 13rem;

      }

      .img-style-4 img{

        opacity:0;

        transform: scale(0);

      }



      .img-style-5{

        position: relative;

            width: inherit;

    height: 31rem;

    float: right;

    margin-right:7rem ;

    padding-top: 7rem;

      }



      .img-style-5-1{

     position: absolute;

    top: 1rem;

    left: 8rem;

      }

      .notificaiton-ring{

        position: absolute;

        bottom:100%;

        right:1rem;

        transform: translateY(50%);

      }



    #notification-pos{

        height:5rem;

      }



      #pos_machine{

        display: inline-block;

        position: relative;

      transform: rotate(-22deg) !important;

      }



      #pos_machine img{

        width: 100%;

      }



      #pos_machine_2{

        position: absolute;

        top:0;

        left:0;

        width: 100%;

        height:100%;

        opacity: 0;

      }



         .active_1 #pos_machine_2{

            opacity: 1;

         }





   





.container{

    position: initial !important;

    z-index: inherit !important; 

}

.zindex_1, .zindex_2{

    z-index: 1001;

}



.zindex_m{

z-index: 1002;

position: relative;

}



html, body {

  

        scroll-behavior: auto;

}



.sec-2{

    opacity: 1;

    padding-top:1rem;

  

   

}

#img-6-1-1{

    position: absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    transform: scale(0.8);

    z-index: 11;

      



}



#img-6-1-1.trans.ActiveItem {

  transform: scale(0.8); /* initial scale */

  animation: popAnimation 1.5s forwards; /* play once and keep final state */

    animation-delay: 0.5s; /* delay before animation starts, adjust as needed */

}



@keyframes popAnimation {

  0% {

    transform: scale(0.8);

  }

  50% {

    transform: scale(1.5);

  }

  100% {

    transform: scale(1);

  }

}



.img-style-3-1{

    position: relative;

    display: inline-block;



}



.img-style-3-1 img{

     max-width: 100%;

    max-height: 93vh;

}





 #origin{

      width: 50px;

      height: 50px;

      background-color: red;

      position: relative;

    }



     #origin{

        position: fixed;

        left:80vw;

        top:0;

     }



     #target1{

          display: inline-block;

 

    position: relative;

    opacity: 0;

    transform: translateX(50%);

     }



     #target2{

    position: absolute;

    top: -4rem;

    left: -2rem;

    opacity:0;



    

     }



   #target2  .card img {

width: 13rem !important;

    height: 19.94rem !important;

}

     #target2 .card{

        width: 13rem !important;

    height: 19.94rem !important;

               transform: rotateX(45deg) rotateY(370deg) rotateZ(317deg);

     }

     #target2 img, #target3 img{

       width: 20.5rem;

  

     }





   #target3{

    position: absolute;

    top: -3rem;

    left: 16rem;

    z-index: 100;

    opacity:10;

     }

     .scene{

          position: absolute;

    top: -3rem;

    left: 6rem;

     }

/* .img-style-2, #target3{

    padding-top:12vh;

}



#target3 .card-wrapper{

    top: 12vh;

} */



 

   #target3 .card{

  transform: rotateX(55deg) rotateY(349deg) rotateZ(397deg);

    

     }



#target4{

      left: 18%;

      position: relative;

      opacity:0;

}

   #target4 .card{

  transform: rotateX(0) rotateY(0) rotateZ(0);

    

     }





#target5{

      left: 53%;

      position: relative;

      opacity:0;

    

}

   #target5 .card{

  transform: rotateX(0) rotateY(0) rotateZ(0);

    

     }

     

 



    /* ---------------------------------------------------

      CARD ANIMATION BASE

    --------------------------------------------------- */

    .card-anim {

      position: absolute;

      transition: transform 0.1s linear;

      z-index: 10;

   

    }



    #cardAnim {

      position: fixed;

      top:0;

      transform-style: preserve-3d;

      transition: transform 0.1s ease-out;

    }



    /* ---------------------------------------------------

      CARD WRAPPER + 3D PERSPECTIVE

    --------------------------------------------------- */

    .card-wrapper {

      position: relative;

      top: 0;

      left: 0;

      transform: translateX(-50%);

      perspective: 1500px;

    }



    /* ---------------------------------------------------

      MAIN CARD

    --------------------------------------------------- */

    .card {

      width: 20.5rem;

     height:31.45rem !important;

      position: relative !important;

      transform-style: preserve-3d !important;

      transition: transform 0.25s ease-out !important;

    

/* 

      box-shadow:

        0 0 0.5px 0.5px #00d9ff,

        0 0 0.5px 0.5px #3a62a8,

        0 0 0.5px 0.5px #6b2a8f; */



      border-radius: 2rem;



      

    }

.card .bevel {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 12px;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 rgba(0, 0, 0, 0.2);

    pointer-events: none;

}

    .card img{

        width: 20.5rem !important;

        height:31.45rem !important

    }

#pos_machine{

    width:100%;

    transform: translate(150px);

    opacity:0;

}

#pos_machine.ActiveItem{

      transform: translate(0);

    opacity:1;

}



.landing-logo{

    margin-bottom: 30px;

}







    /* ---------------------------------------------------

      CARD FACES

    --------------------------------------------------- */

    .card-front,

    .card-back {

      position: absolute;

      width: 100%;

      height: 100%;

      border-radius: 12px;



      backface-visibility: hidden;

      display: flex;

      justify-content: center;

      align-items: center;

      text-align: center;

      font-size: 24px;

      font-weight: bold;

      box-sizing: border-box;

    }



    .card-front {

      transform: rotateY(0deg);

    }



    .card-back {

      transform: rotateY(180deg);

    }



    /* Card Images */

    .card-front img,

    .card-back img {

      width: 100%;

      height: 100%;

      object-fit: cover;

      border-radius: 22px;

    }



 .card-front-sub {

    margin-top: 5px;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

   opacity:0;

 

}



.active_3 .card-front-sub {

    transform: translate(45px, 56px);

    opacity:1;

   

}

.active_3  .card-front-2{

    z-index: 10;

     transition-delay: 0.2s;



}

.active_3  .card-front-3{

    transform: translate(91px, 106px);

     opacity:1;

      transition-delay: 0.4s;

}







/* ///////////////TRANSITION///////// */



.trans_2{

  transition-delay: 0s;

  transition-duration: 0.4s;

  transition-property: all;

  transition-timing-function: ease;

  -webkit-transition-delay: 0s;

  -webkit-transition-duration: 0.4s;

  -webkit-transition-property: all;

  -webkit-transition-timing-function: ease;

  -moz-transition-delay: 0s;

  -moz-transition-duration: 0.4s;

  -moz-transition-property: all;

  -moz-transition-timing-function: ease;

  -ms-transition-delay: 0s;

  -ms-transition-duration: 0.4s;

  -ms-transition-property: all;

  -ms-transition-timing-function: ease;

  -o-transition-delay: 0s;

  -o-transition-duration: 0.4s;

  -o-transition-property: all;

  -o-transition-timing-function: ease;

}







.active_4 .trans-1, .active_5 .trans-1 {

  transition-delay: 0.2s;

}



.active_4  .trans-2, .active_5 .trans-2 {

  transition-delay: 0.4s;

}



.active_4  .trans-3 {

  transition-delay: 0.6s;

}



.active_4  .trans-4 {

  transition-delay: 0.8s;

}



.trans-5 {

  transition-delay: 1s;

}





.img-style-5-1{

    opacity:0;

    transform: translate(-10rem,15rem) scale(0);

}







.active_1 .img-style-5-1{

    opacity:1;

      transition-delay: 0s;

    transform: translateX(0);

}





.active_4 .img-style-1 span span{

    opacity:1;

    transform: scale(1);

}



.active_5 .img-style-4 img{

    opacity:1;

    transform: scale(1);

}

.GetAppForm .modal-header{

    display: block;

    border-bottom: none !important;

    padding-top:2rem

}

.GetAppForm{

    z-index: 100000000000000000;

}



.GetAppForm h5, .GetAppForm h6{

    width: 100%;

    display: inline-block;

    text-align: center;

}



.GetAppForm .btn-close{

        float: right;

    right: 0;

    position: absolute;

    top: 15px;

    right: 15px;

}

.GetAppForm .modal-footer {

    border-top: none !important;

    padding-top: 0;

    margin-bottom: 1.5rem;

}

.GetAppForm .btn-style-1{



    border:none !important;

     padding-top: 0.8rem !important;

    padding-bottom: 0.8rem !important;

}



#contactForm{

    max-width: 402px;

    margin: 0 auto;

    /* display: block; */

    width: 100%;

}



.GetAppForm .form-label{

    font-size: 0.9rem;

}











.menu-item{

    cursor: pointer;

}





.main-div .sec-10  h3{

    color:#141C24

}

/* /////////////CARD///////////// */

   /* The 3D world */

    .scene {

  

      perspective: 1500px;



    }



    .deck {

      width: 20.5rem;

      height: 31.45rem;

      position: relative;

      transform-style: preserve-3d;

      transform: rotateX(55deg) rotateY(349deg) rotateZ(397deg);

    }

  

    .card-2 {

      width: 20.5rem;

      height: 31.45rem;

      border-radius: 12px;

      transform-style: preserve-3d;

      transform-origin: center center;

      position: absolute;

      top: 0;

      left: 0;

      background: url('../images/landing-2/card.png') center/cover no-repeat;

      image-rendering: auto;

    }



    /* Enhanced 3D thickness effect */

    .card-2::before {

      content: '';

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: linear-gradient(45deg, rgb(62, 73, 155), rgb(97, 70, 107));

      transform: translateZ(-1px);

      border-radius: 12px;

      z-index: -1;

    }



    /* Back face */

    .card-2::after {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background: url('../images/landing-2/card-back.png') center/cover no-repeat;

      backface-visibility: hidden;

      transform: rotateY(180deg) translateZ(1px);

      border-radius: 12px;

    }



    /* Bevel effect */

    .card-2 .bevel {

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      border-radius: 12px;

      box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, 0.2),

        inset 0 -1px 0 rgba(0, 0, 0, 0.3),

        inset 1px 0 0 rgba(255, 255, 255, 0.1),

        inset -1px 0 0 rgba(0, 0, 0, 0.2);

      pointer-events: none;

    }



@media (max-width:600px){

.landing-logo img{

    height:auto;

}

    #cardAnim, #target3, #target4{

        display:none;

    }

    .button-1{

                font-size: 1.2rem !important;

        padding: 0.8rem 2rem;

    }

.sec-8 .category-section{

         width: calc(100% + 30px);

}

.highlight-list{

    position: relative;

}

.category-section{

    display:inline-block !important;

    position: absolute;

    top:0;

    left:0;

    opacity:0;

         

}



.img-style-4 .trans{

    transform: translateX(-100px);

    opacity:0;

    display: inline-block;

    width: 100%;

}



.img-style-4 .trans.ActiveItem{

  transform: translateX(0px);

  opacity:1;

}



.category-section.active{

    position: relative;

    z-index:1000;

    opacity: 1;

}







.category-item{

    padding-right: 15px;

}

    #target1{

        opacity:1;

        left:0;

        transform: translate(0);

    }

.img-style-5-1{

    opacity:0 !important;

   

}







    .sec-2 .mob{

        margin:0 auto;

        transform: rotate(40deg);

        max-width: 50%;

    }



    #target2 {

 

opacity:1;

}







.img-style-5 {

  

    margin-top: 4rem;

    width: 58%;

    opacity:1 !important;

    margin-left:10%;

        margin-right: 20px;

 

}

#pos_machine{

    opacity:1 !important;

   transform: translateX(0) !important;

}



.img-style-5 #pos_machine_2{

    opacity:0 !important;

    

}



.img-style-5.active #pos_machine_2{

    opacity:1 !important;

    

}

.img-style-5-1{

  opacity: 1;

    transform: translateX(0);

}

.img-style-5-1 img{

  margin-left:10%;

    width: 80%;

}



.sec-5 .pt-5.pb-5.mt-5{

    padding-top:0 !important;

}



.sec-5, .img-style-2 {

    margin-top: 3rem;

}



.sec-3.pt-5.mt-5{

    margin-top:0 !important;

    padding-top:0 !important;

}



.img-style-1 .trans_2 {

    opacity:1  !important;

    transform: translate(0) !important;

}



.img-style-1 .mob{



    width:100%;

}

.img-style-4 img{

    width: 100%;

}

.img-style-4-1{



}

.img-style-1 {

        margin: 0 auto;

        margin-top:5rem;

    display: block;

    width:60%

}



.img-style-1 .trans{

    transform: scale(0);

    opacity:0;

}



.img-style-1 .trans.ActiveItem{

    transform: scale(1);

    opacity:1;

}





.img-style-1-2 {

    transform: translate(151%, 63%);

}

.img-style-1-1 {

    transform: translate(-37%, -26%);

}



.img-style-1-3 {

    transform: translate(-43%, 32%);

}

.img-style-4-1 {

    width: 100%;

}

.img-style-4-2 {

    transform: translate(-37%, -34%);

    width: 72%;

}

.sec-3 .container .row{

    padding-top: 10px !important;

    border-top: 1px solid rgba(255,255,255,0.3);

}

.sec-7 .container > .row{

    padding-top: 50px !important;

    border-top: 1px solid rgba(255,255,255,0.3);

}

.sec-7 .container.pt-5.pb-5.mt-5{

    padding-top:0 !important;

    margin-top: 0 !important;

}

.img-style-1{

    margin-bottom: 25px;

}



.sec-5 .container.pt-5.pb-5.mt-5{padding-bottom: 0 !important;}



#target5{

    display:none !important;

}



    .img-style-4 {

        margin: 0 auto;

        display: block;

        width: 60%;

    }



    .img-style-3-1{

     margin: 0 auto;

        display: block;

        width: 70%;

        float: left;

    }



    .img-style-3-1 img{

        width: 100%;

    }



    .img-style-4 img.mob{

        width: 100%;

    }

.img-style-3 {

    position: relative;

    display: inline-block;

}

    .img-style-4-1 {

    bottom: 0;

    top: auto;

 transform: translate(24%, -9%);

}



.img-style-3-2 {

    bottom: 9rem;

    left: 13rem;

    width: 46%;

}



.img-style-3-2 img{

    max-width: 100%;

}



.main-div h1{

    margin-top:0;

    font-size: 6vw;

    line-height: 1.4;

}







.menu-tab {

    display: flex !important;

    overflow-x: auto;

    white-space: nowrap;

    padding: 0;       /* removes default UL padding */

    margin: 0;        /* removes default UL margin */

    width: 100%;

    list-style: none; /* also removes extra bullet spacing */

    margin-top:25px;

}



.menu-item {

    padding: 10px 20px;

    flex-shrink: 0;

}

.highlight-list .col-md-6 .highlight-date{

    position: absolute;

      bottom: 15px;

    left: 15px;

    top:auto !important;



}

#target2{

        z-index: 1;

}

#target2 .card{

               width: 11rem !important;

        height: 16.94rem !important;

        transform: rotateX(38deg) rotateY(376deg) rotateZ(318deg);

}

#target2 .card img{

    width: 100% !important;

    height:100%  !important;

}



#notification-pos{

    width: inherit;

        height: 4rem;

}

#ring{

    height:2rem !important

}

.notificaiton-ring {

    position: absolute;

    bottom: 100%;

    right: 0rem;

}

.img-style-5-1{

 

 transform: translate(0, 200px) scale(0);

 

}

.img-style-5.active .img-style-5-1{

       opacity:1 !important;

     animation: dropCurveScale 1.5s ease-out;

}

@keyframes dropCurveScale {

  0% {

    transform: translate(0, 200px) scale(0); /* start hidden & above */

    opacity: 0;

  }



  50% {

    transform: translate(-40px, -60px) scale(1.2); /* curve + overshoot scale */

    opacity: 1;

  }



  100% {

    transform: translate(0, 0) scale(1); /* final natural position */

    opacity: 1;

  }

}

.img-style-5-1 {

        left: 4rem;

        top: 0;

}



.sec-11 .mt-4.mb-5.pb-5{

    padding-bottom: 0 !important;

    margin-bottom: 15px !important;

}



.sec-3 .text-right{

    text-align: center;

}



.img-style-1{

    float: none;

}



.sec-5 h3{

margin-top: 0;

}

.scene{

    top:-1rem;

    z-index: 100;

    left:50%;

    transform: translateX(-50%);

}

.img-style-2-1 img{

    width: 300px;

}



    .deck, .card-2{

    width: 200px;

    height: 306.8px;

}

.img-style-2{

    text-align: center;

}



.main-div{

    opacity:0;

            margin-top: 3rem !important;

}



.load-page .main-div{

    opacity:1;

}

}



@media (max-width:400px){

    .main-div h2{

        font-size: 2.2rem;

    line-height: 1.3;

    }

        #target2 .card {

               width: 37vw !important;

        height: 59vw !important;

        transform: rotateX(38deg) rotateY(376deg) rotateZ(318deg);

    }

     #target2 {

        top: -1vw;

        left: 4vw;

    }



.img-style-5 {

        width: 65%;}



            #notification-pos {

                 width: 51vw;

        left: -5vw;

        height: auto;

        position: relative;

    }



    .sec-9 .container.pt-5{

        padding-top: 0 !important;

    }





}