:root{
   --border-radius-l: 12px;
   --padding-l: 24px;
   --padding-s: 12px;
   --ocean-200: #F8F9F9;
   --ocean-500: #EDEFF0;
   --ocean-base: #DEE2E4;
   --background-color-dark: #FFF;
   --background-color: #f6f8fa;
   --midle-gray-base: #6C7A89;
   --dark-gray-100: #E7E7E7;
   --table-bg: var(--midle-gray-base);
   --purple-base: #990AE3;
   --purple-500: #F5E6FC;
   --box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px!important;
}
*{
   box-sizing: border-box;
}

body{
   background-color: var(--background-color);
   width: 100vw;
   margin: 0;
   font-family: "Roboto", sans-serif;
   font-optical-sizing: auto;
   font-weight: 100;
   font-style: normal;
   font-variation-settings:
      "wdth" 100;
}

.promo{
   border-radius: var(--border-radius-l) ;
   overflow: hidden;
   box-sizing: border-box;
   margin: 0 auto;
   background: linear-gradient(135deg, #fab2ff 0%, #1904e5 100%);
   height: auto;
   width: 100%;
   display: flex;
   justify-content: start;
   flex-direction: column;
   align-items: stretch;
   gap: 12px;
   color: #FFF;
   font-size: 14px;
   opacity: 1;
   padding: var(--padding-l);
   box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
 }

 .promo img{
   margin: 0 auto;
   border-radius: 4px;
 }

 .promo-label {
   font-size: 12px;
   color: #fff;
   opacity: 0.8;
   text-align: center;
   margin-top: 6px;
 }
 .promo a{
   color: #FFF;
   border: solid 1px #FFF;
   border-radius: var(--border-radius-l);
   padding: var(--padding-s);
   width: 100%;
   text-decoration: none;
   cursor: pointer!important;
   background: none;
   text-align: center;
   font-size: 12px;
   transition: all ease .3s;
 }

 .promo a:hover{
   background: #fff;
   color: var(--midle-gray-base);
 }

.table-locations{
   border-radius: var(--border-radius-l);
   overflow: hidden;
   width: 100%;
   background-color: var(--table-bg);
   border-collapse: collapse;
   color: var(--ocean-200);
}

.table-locations td,
.table-locations th{
   padding: var(--padding-s)!important;
   border-radius: var(--border-radius-l);
}

.accordion{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--border-radius-l) ;
  border-radius: calc(var(--border-radius-l) + var(--padding-l));
}

.accordion-item{
  width: 100%;
  border: none;
  border-radius: calc(var(--border-radius-l) + var(--padding-l))!important;
}

.accordion-item,
.card{
   border-radius: calc(var(--border-radius-l) + var(--padding-l));
   padding: var(--padding-l);
   border-color: var(--ocean-base)!important;
   background-color: #FFF;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px!important;
}
a,
button,
input,
.form-select{
   border-radius: var(--padding-s)!important;
   cursor: pointer;
}

.form-btn{
   background-color: var(--midle-gray-base);
   cursor: pointer;
}

.card-head{
   padding: var(--padding-s);
   border-radius: var(--border-radius-l)!important;
   overflow: hidden;
   background-color: var(--ocean-500);
   border: none;
}
h1{
   font-weight: bold;
}

.btn-download{
   background-color: var(--ocean-200);
   cursor: pointer;
   padding: var(--padding-s) var(--padding-l);
   border-radius: var(--border-radius-l);
   transition: all ease .3s;
   text-decoration: none;
   margin-top: 24px;
}

.btn-download{
  background-color: var(--ocean-500);
}

.toast-container {
   position: fixed;
   top: 1rem;
   right: 1rem;
   z-index: 9999;
 }

 .btn{
   cursor: pointer;
 }

 .btn:hover{
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px!important;
 }

 .whats-new,
 .preview{
   max-width: 1000px;
   border-radius: calc(var(--border-radius-l) + var(--padding-l));
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px!important;
   margin: 0 auto 240px auto!important;
   padding: var(--padding-l);
   background: linear-gradient(135deg, rgba(256, 256, 256, 0.21) 0%, rgba(256, 256, 256, 0.4) 100% );
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: solid 1px var(--ocean-200);
 }

 .preview-img{
   width: 100%;
   border-radius: var(--border-radius-l);
   transition: transform 0.3s ease-out, opacity 0.3s ease-out, filter 0.3s ease-out;
 }

 .parallax-scale-container {
   overflow: hidden;
   position: relative;
 }

 #parallaxPreview {
   transition: transform 0.2s ease-out;
   will-change: transform;
 }

 #locationList{
    font-size: 12px;
 }

 .user-profile:hover #profileTooltip {
   display: block!important;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px!important;
   font-size: 12px;
   border-radius: calc(var(--border-radius-l));
 }
 #profileTooltip {
   transition: opacity 0.3s ease;
   padding: var(--padding-l);
   border-radius: var(--border-radius-l)!important;
 }

 .whats-new li {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.6s ease-out forwards;
}
.whats-new li:nth-child(1) { animation-delay: 0.1s; }
.whats-new li:nth-child(2) { animation-delay: 0.2s; }
.whats-new li:nth-child(3) { animation-delay: 0.3s; }
.whats-new li:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.whats-new li div {
  position: relative;
}

.whats-new li div::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 4px;
  width: 100%;
  background-color: #1904e5;
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.whats-new li:hover div::after {
  opacity: 1;
  transform: scaleX(1);
}

#whatsNewTitle{
  transition: all ease 0.3s;
}

@media (max-width: 768px) {
  .center-box {
    padding: 2rem 1rem;
  }

  .center-box h1 {
    font-size: 1.8rem;
  }

  .center-box .btn {
    width: 100%;
  }

  .features i {
    font-size: 1.6rem;
  }

  .whats-new {
    padding: 1.5rem;
    margin: 1rem;
    border-radius: 1rem;
  }

  .whats-new .card-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem 1rem !important;
    font-size: 1.1rem;
  }

  .whats-new ul li {
    font-size: 0.95rem;
  }

  .btn-outline-primary {
    width: 100%;
  }

  footer {
    font-size: 0.8rem;
    padding: 10px;
  }
}