html {
  font-size: 16px;
}

/* CSS Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

/* Root-level Variables */
:root {
  /* Typography */
  --font-family: Poppins, sans-serif; 
  --h1-size: 3.5rem;  /* 56 */
  --h2-size: 3rem;  /* 48 */
  --h3-size: 2.75rem;  /* 44 */
  --h4-size: 2rem;  /* 32 */
  --h5-size: 1.5rem;    /* 24 */
  --h6-size: 1rem;  /* 16 */

  --font-size-xlg: clamp(3rem, 2.75vw + .1rem, 5.75rem); /* Extra large groups */
  --font-size-xslg: clamp(3rem, 2.5vw + .1rem, 5.25rem); /* Extra slightly large */
  --font-size-xl: clamp(2.75rem, 2.25vw + .1rem, 4.75rem); /* Extra large */
  --font-size-xl0: clamp(2.5rem, 2vw + .1rem, 4.5rem); /* Slightly less than extra large */
  --font-size-xsl: clamp(2rem, 2vw + .1rem, 4.5rem); /* Slightly less than extra large */
  --font-size-lg: clamp(1.725rem, 1.75vw + .1rem, 4rem); /* Large */
  --font-size-md: clamp(1rem, 1.5vw + .1rem, 3.5rem); /* Medium */
  --font-size-smd: clamp(1.5rem, 1.375vw + .1rem, 3.25rem); /* Slightly medium */
  --font-size-xsmd: clamp(1rem, 1vw + .1rem, 3.125rem); /* Extra small medium */
  --font-size-sm: clamp(1.125rem, 1.125vw + .1rem, 3rem); /* Small */
  --font-size-xs: clamp(0.85rem, 1vw + .1rem, 2.875rem); /* Extra small */
  --font-size-xxs: clamp(0.5rem, 1vw + .1rem, 2.75rem); /* Extra extra small */
  --font-size-ss: clamp(0.75rem, 0.75vw + .1rem, 2.625rem); /* Super small */
  --p-size: clamp(1.125rem, 1.125vw + .1rem, 3rem); /* Paragraph size */
  --ps-size: clamp(1rem, 1vw + .1rem, 2.875rem); /* Small paragraph size */

  --p-size: 1.125rem; /* 18 */
  --ps-size: 1rem; /* 16 */

  /* Spacing */
  --base-container-padding1: 0px 64px;
  --base-container-padding2: 100px 64px;
  --base-container-padding3: 112px 64px;
  --base-container-padding4: 112px 64px 112px 0px;
  --base-container-padding5: 0px 64px 112px 64px;
  --base-container-padding6: 80px 64px;

  --padding-top-base: 26px;
  --padding-top-base2: 32px;
  --padding-top-base3: 50px;
  --padding-bottom-base: 50px;
  --padding-base: 60px;
  --padding-base-md: 50px;
  --padding-base-sm: 30px;
  --padding-inner-container: 40px 30px;
  --padding-inner-container-lg: 80px 64px;

  --margin-bottom-l1: 5px;
  --margin-bottom-l2: 6px;
  --margin-bottom-l3: 10px;
  --margin-bottom-l4: 16px;
  --margin-bottom-l5: 20px;
  --margin-bottom-l6: 27px;
  --margin-bottom-l7: 30px;
  --margin-bottom-l8: 40px;
  --margin-bottom-l9: 48px;
  --margin-bottom-l10: 80px;

  --margin-top-l1: 30px;
}

body {
  font-family: poppins;
}

html, body {
  width: 100%;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-40 {
  margin-bottom: 40px;
}
.main-container {
  padding: 40px 30px;
}

.flex-basis-30 {
  flex-basis: 30% !important;
}

.display-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: end;
}

.font-gray {
  color: #79818E;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
}

.line-height-100 {
  line-height: 100%
}
.logo {
  border-radius: 10px;
  background: #F9FAFB;
}

.message {
  font-family: Manrope;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
}

.message2 {
  color: #342A53;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
}


.bottom {
  border-radius: 8px;
  background: #46B4E0;
  padding: 30px 20px;
  flex-direction: column;
}

.link {
  font-weight: bold;
  text-decoration: none;
  color: #46B4E0;
}

.text-align-center {
  text-align: center;
}

.height-72 {
  height: 72px;
}

.font-blue {
  color: #03B0E7;
}

.button-main {
  padding: 10px 35px;
  border-radius: 6px;
  background: #E000DE;
  border: none;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}


.button-main:hover{
opacity: 0.6 !important;
}

.background-dark {
  background: #141517;
}

.mobile-show {
  display: none !important;
}

.ring-test {
  position: absolute;
  transform: translate3d(0px, -40.9642px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

#video-modal {
  z-index: 1000;
}
  
.flex-gap-8 { gap: 8px; }
.flex-gap-10 { gap: 10px; }
.flex-gap-12 { gap: 12px; } 
.flex-gap-20 { gap: 20px; }
.flex-gap-22 { gap: 22px; }
.flex-gap-24 { gap: 24px; }
.flex-gap-40 { gap: 40px; }
.flex-gap-48 { gap: 48px; }
.flex-gap-50 { gap: 50px; }
.flex-gap-80 { gap: 80px; }
.flex-gap-96 { gap: 96px; }
.flex-gap-100 { gap: 100px; }
.border-bottom-dark {
  border-bottom: 1px solid #5A5E68;
}

.font-bold {
  font-weight: 700;
}


.font-pink {
  color: #DEC9DE;
}

.flex-1 {
  flex: 1;
}

.flex-3 {
  flex: 3;
}

.flex-2 {
  flex: 2;
}

.line-height-120 {
  line-height: 120%;
}


.dark-background {
  background: #141517;
}

.inline-list {
  list-style-type: none; /* Removes default bullets */
  padding: 0; /* Removes default padding */
}

.inline-list li {
  display: inline; /* Displays list items inline */
  margin-right: 12px; /* Adds space between items */
  position: relative; /* Needed for custom bullet positioning */
  font-size: var(--font-size-ss);
}

.inline-list li:not(:first-child):before {
  content: "•"; /* Custom bullet symbol */
  position: absolute;
  left: -10px; /* Adjusts position to the left of the list item */
}

select {
  background-color: transparent;
  border: none;
  outline: none;
  color: #fff;
}

option {
  color: black; /* You can change the color if needed */
}
.border-radius-20 {
  border-radius: 20px;
}

.border-pink-3 {
  border: 3px solid #FF4EFE;
}

.light-dark-background {
  background: linear-gradient(0deg, rgba(23, 53, 150, 0.18) 0%, rgba(23, 53, 150, 0.18) 100%), rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(20.5px);
}

.margin-bottom-27 {
  margin-bottom: 27px;
}

.round-shape {
  border-radius: 80px;
  border: 5px solid #FF4EFE;
  display: flex;
  width: 50px;
  height: 50px;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

.width-50 {
  width: 50%;
}

.m-auto {
  margin: auto;
}

.font-white {
  color: #FCFDFE;
}

.ml-auto {
  margin-left: auto;
}


.text-underling {
  text-decoration: underline ;
}

.clickable {
  cursor: pointer;
}

.background-radial-1 {
  background: radial-gradient(46.96% 46.96% at 50% 50%, rgba(9, 218, 255, 0.38) 0%, rgba(224, 0, 222, 0.00) 100%), #141517;
}

.padding-0-64-112-64 {
  padding: 0px 64px 112px 64px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-gap-20 {
  gap: 20px;
}

.padding-40-30 {
  padding: 40px 30px;
}

.background-gradient-1 {
  background: linear-gradient(0deg, rgba(23, 53, 150, 0.18) 0%, rgba(23, 53, 150, 0.18) 100%), rgba(0, 0, 0, 0.23);
}

.font-family-roboto {
  font-family: roboto;
}

.padding-80-64 {
  padding: 80px 64px;
}

.website-links {
  color: #09DAFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}


#landing-page {
  background-image: url(./asset/background_main.svg);
  background-size:cover;
  background-position: center;    
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.background-image {
  background-image: url(./asset/background_main.svg);
  background-size: contain;
  min-height: 269px;
  background-repeat: no-repeat;
}

.ring0 {
  top: 10% !important;
  left: 60% !important;
}

.ring0 .rings-class  {
  min-height: 115vh;
}

.group153{
  left: -180px !important
}

.group144-container {
  z-index: 2;
  margin-left: 10%;
}
.rings9-class {
  top: 500px;
  left: 50%;
  display: flex;
}

@media (min-width: 992px) {
.background-image {
    display: none;
}
.desktop-none {
  display: none !important;
}

.group144-container {
  z-index: 2;
  margin-left: 10%;
}

#landing-page {
  background-image: url(./asset/background_main.svg);
  background-size:cover;
  background-position: center;
  flex-direction: initial;
}

}

#background2 {
  background-image: url(./asset/background2.svg);
  background-size:cover;
  background-position: center;
}

.linear-gradient2 {
  background: linear-gradient(0deg, rgba(23, 53, 150, 0.18) 0%, rgba(23, 53, 150, 0.18) 100%), rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(20.5px);
}

.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(33%, 1fr)); 
}

.fullWidth {
  width: 100%;
}

.hover-effect:hover {
  transform: scale(1.01) !important;
  transition: .3s;
}


.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.animate-on-scroll.show {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll2 {
  opacity: 0;
  transform: translate3d(0px, 10px, 0px);
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.animate-on-scroll2.show2 {
  opacity: 1;
  transform: translateZ(0px);
}

.animate-on-scroll3 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.5s ease;
}

/* Class to trigger the animation */
.animate-on-scroll3.show3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* Adjust the delay as needed */
}

/* Basic Structure */
body {
  font-family: var(--font-family);
  line-height: 1.6;
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

p {
  font-size: var(--p-size);
}

.container1 {
  padding: var(--base-container-padding1);
}

.container2 {
  padding: var(--base-container-padding2);
}

.container3 {
  padding: var(--base-container-padding3);
}

.container4 {
  padding: var(--base-container-padding4);
}

.container5 {
  padding: var(--base-container-padding5);
}

.container6 {
  padding: var(--base-container-padding6);
}

.font-size-xlg {
  font-size: var(--font-size-xlg);
}

.font-size-xslg {
font-size: var(--font-size-xslg);
}

.font-size-xl {
  font-size: var(--font-size-xl);
}

.font-size-xl0 {
  font-size: var(--font-size-xl0);
}

.font-size-xsl {
  font-size: var(--font-size-xsl);
}

.font-size-lg {
  font-size: var(--font-size-lg);
}

.font-size-md {
  font-size: var(--font-size-md);
}

.font-size-smd {
  font-size: var(--font-size-smd);
}

.font-size-xsmd {
  font-size: var(--font-size-xsmd);
}

.font-size-sm {
  font-size: var(--font-size-sm);
}

.font-size-xs {
  font-size: var(--font-size-xs);
}

.font-size-xxs {
  font-size: var(--font-size-xxs);
}

.font-size-ss {
  font-size: var(--font-size-ss);
}
.padding-top-base {
  padding-top: var(--padding-top-base);
}

.padding-top-base2 {
  padding-top: var(--padding-top-base2);
}

.padding-top-base3 {
  padding-top: var(--padding-top-base3);
}

.padding-bottom-base {
  padding-bottom: var(--padding-bottom-base);
}

.padding-base {
  padding: var(--padding-base);
}

.padding-base-md {
  padding: var(--padding-base-md);
}

.padding-base-sm {
  padding: var(--padding-base-sm);
}

.padding-inner-container {
  padding: var(--padding-inner-container);
}

.padding-inner-container-lg {
  padding: var(--padding-inner-container-lg);
}


.margin-bottom-l1 {
  margin-bottom: var(--margin-bottom-l1);
}

.margin-bottom-l2 {
  margin-bottom: var(--margin-bottom-l2);
}

.margin-bottom-l3 {
  margin-bottom: var(--margin-bottom-l3);
}

.margin-bottom-l4 {
  margin-bottom: var(--margin-bottom-l4);
}

.margin-bottom-l5 {
  margin-bottom: var(--margin-bottom-l5);
}

.margin-bottom-l6 {
  margin-bottom: var(--margin-bottom-l6);
}

.margin-bottom-l7 {
  margin-bottom: var(--margin-bottom-l7);
}

.margin-bottom-l8 {
  margin-bottom: var(--margin-bottom-l8);
}

.margin-bottom-l9 {
  margin-bottom: var(--margin-bottom-l9);
}

.margin-bottom-l10 {
  margin-bottom: var(--margin-bottom-l10);
}

.margin-top-l1 {
  margin-top: var(--margin-top-l1);
}

.margin-inner {
  margin: var(--margin-inner);
}

.parallax-container {
top: 0;
left: 0;
height: 100%;
bottom: 0;
pointer-events: none;
}

.parallax-container2 {
top: 0;
height: 100%;
bottom: 0;
left: 25%;
pointer-events: none;
}


.parallax-image {
min-width: 50vw;
min-height: 100vh;
background-repeat: no-repeat;
background-attachment: fixed;
}

.parallax-image2 {
min-width: 50vw;
min-height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center bottom;
background-size: 25% 25%;
}


.parallax-image3 {
min-width: 281px;
min-height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;
}


.rings-class {
z-index: 1;
}
@media (min-width: 360px) {
  :root {
      /* Spacing */
      --base-container-padding1: 0px 12px;
      --base-container-padding2: 16px 12px;
      --base-container-padding3: 20px;
      --base-container-padding4: 20px 12px 20px 12px;
      --base-container-padding5: 0px 12px 20px 12px;
      --base-container-padding6: 12px 12px;
      --padding-top-base: 8px;
      --padding-top-base2: 10px;
      --padding-top-base3: 32px;
      --padding-bottom-base: 16px;
      --padding-base: 30px 20px;
      --padding-base-md: 30px 20px;
      --padding-base-sm: 10px;
      --padding-inner-container: 20px;
      --padding-inner-container-lg: 16px 12px;
      --margin-inner: 100px 0px 64px 20px;
      --margin-bottom-l1: 1px;
      --margin-bottom-l2: 2px;
      --margin-bottom-l3: 3px;
      --margin-bottom-l4: 5px;
      --margin-bottom-l5: 6px;
      --margin-bottom-l6: 8px;
      --margin-bottom-l7: 10px;
      --margin-bottom-l8: 40px;
      --margin-bottom-l9: 14px;
      --margin-bottom-l10: 40px;
      --margin-top-l1: 8px;
  } 
  
  .button-main {
    padding: 10px 40px;
    border-radius: 5px;
  }
  
  .ring0 {
    top: -5% !important;
    left: 25% !important;
  }
  .mobile-view-privocracy {
    padding-top: 100px;
  }
}
@media (max-width: 359px) {
  .rings9-class.mobile-view {
      top: 10%;
  }

  .mobile-max-height-sm {
    max-height: 262px;
  }
}

/* / Media query for screen sizes between 360px and 479px / */
@media (min-width: 360px) and (max-width: 479px) {
  .rings9-class.mobile-view {
      top: 20%;
  }

  .mobile-max-height-sm {
    max-height: 350px !important;
  }
}

/* / Media query for screen sizes 480px and above / */
@media (min-width: 480px) {
  .rings9-class.mobile-view {
      top: 30%;
  }
}

@media (min-width: 480px) {
  :root {
      /* Spacing */
      --base-container-padding1: 0px 16px;
      --base-container-padding2: 24px 16px;
      --base-container-padding3: 32px 16px;
      --base-container-padding4: 32px 16px 32px 16px;
      --base-container-padding5: 0px 16px 32px 16px;
      --base-container-padding6: 16px 16px;
      --padding-top-base: 10px;
      --padding-top-base2: 12px;
      --padding-top-base3: 80px;
      --padding-bottom-base: 20px;
      --padding-base: 36px 26px;
      --padding-base-md: 30px 20px;
      --padding-base-sm: 12px;
      --padding-inner-container: 20px;
      --padding-inner-container-lg: 20px 16px;
      --margin-inner: 80px 0px 64px 16px;
      --margin-bottom-l1: 1px;
      --margin-bottom-l2: 2px;
      --margin-bottom-l3: 4px;
      --margin-bottom-l4: 6px;
      --margin-bottom-l5: 8px;
      --margin-bottom-l6: 10px;
      --margin-bottom-l7: 12px;
      --margin-bottom-l8: 16px;
      --margin-bottom-l9: 18px;
      --margin-bottom-l10: 40px;
      --margin-top-l1: 10px;
  }

  .button-main {
      padding: 10px 40px;
      border-radius: 5px;
  }
  .rings2-class {   
     bottom: -50px;
      left: -8%;
}


}

@media (max-width: 480px) {
.flex-xs-column {
  flex-direction: column;
}

.display-xxs-none {
  display: none;
}

#landing-page br {
  display: none;
}

.grid-xs-one-row {
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}
.priocracy-image {
  width: 100% !important;
}

.group153-container {
  left: 30%;
}

.group153 {
  min-width: 60vw;
  min-height: 38vh;
  background-size: 100%;
}

}

@media (max-width: 992px) {
  #landing-page{
    background-image: unset;
    background: #141517;
    gap: unset;
  }

  #landing-page{
    background-image: unset;
    background: #141517;
  }

  

.mobile-none {
  display: none !important;
}
}

@media (min-width: 768px) {
  :root {
      /* Spacing */
      --base-container-padding1: 0px 24px;
      --base-container-padding2: 40px 24px;
      --base-container-padding3: 48px 24px;
      --base-container-padding4: 48px 24px 48px 24px;
      --base-container-padding5: 0px 24px 48px 24px;
      --base-container-padding6: 32px 24px;
      --padding-top-base: 14px;
      --padding-top-base2: 18px;
      --padding-top-base3: 120px;
      --padding-bottom-base: 30px;
      --padding-base: 50px 40px;
      --padding-base-md: 30px;
      --padding-base-sm: 16px;
      --padding-inner-container: 25px;
      --padding-inner-container-lg: 32px 24px;
      --margin-inner: 100px 0px 64px 48px;
      --margin-bottom-l1: 2px;
      --margin-bottom-l2: 3px;
      --margin-bottom-l3: 6px;
      --margin-bottom-l4: 10px;
      --margin-bottom-l5: 14px;
      --margin-bottom-l6: 18px;
      --margin-bottom-l7: 20px;
      --margin-bottom-l8: 26px;
      --margin-bottom-l9: 30px;
      --margin-bottom-l10: 40px;
      --margin-top-l1: 14px;
  }
  .priocracy-image {
    width: 320px !important;
  }

  .button-main {
      padding: 10px 40px;
      border-radius: 5px;
  }

  .sub-images {
    height: 100%;
  }

  .display-xs-none {
    display: none;
  }

  .mobile-width-unset {
    width: unset !important;
    margin-bottom: 48px !important;
  }  

  .ring0 {
    top: 10% !important;
    left: 60% !important;
  }
}

@media (min-width: 992px) {
  :root {
      /* Spacing */
      --base-container-padding1: 0px 32px;
      --base-container-padding2: 56px 32px;
      --base-container-padding3: 64px 32px;
      --base-container-padding4: 64px 32px 64px 32px;
      --base-container-padding5: 0px 32px 64px 32px;
      --base-container-padding6: 48px 32px;
      --padding-top-base: 18px;
      --padding-top-base2: 22px;
      --padding-top-base3: 32px;
      --padding-bottom-base: 36px;
      --padding-base: 56px 46px;
      --padding-base-md: 36px;
      --padding-base-sm: 20px;
      --padding-inner-container: 30px;
      --padding-inner-container-lg: 40px 32px;
      --margin-inner: 100px 0px 64px 32px;
      --margin-bottom-l1: 3px;
      --margin-bottom-l2: 4px;
      --margin-bottom-l3: 7px;
      --margin-bottom-l4: 12px;
      --margin-bottom-l5: 16px;
      --margin-bottom-l6: 20px;
      --margin-bottom-l7: 22px;
      --margin-bottom-l8: 28px;
      --margin-bottom-l9: 32px;
      --margin-bottom-l10: 48px;
      --margin-top-l1: 18px;
  }

  .button-main {
    padding: 12px 48px;
    border-radius: 6px;
}
}

@media (max-width: 992px) {
  :root {
    --font-size-xl: clamp(2.25rem, 2.25vw + .1rem, 4.75rem);
  }


  .mobile-max-height-sm {
    max-height: 600px;
  }

.flex-sm-column {
  flex-direction: column;
}

.flex-xs-column {
  flex-direction: column;
}

.mobile-landing {
  padding: 26px 20px !important;
  margin: unset !important;
}

.display-sm-none {
  display: none;
}

.justify-content-sm-center {
  justify-content: center !important;
}

.bottom-sm-0 {
  bottom: 0 !important;
}

.margin-sm-auto {
  margin: auto;
}

.text-align-center-sm {
  text-align: center !important;
}

.mb-16-sm {
  margin-bottom: 16px !important;
}

.mb-10-sm {
  margin-bottom: 10px !important;
}

.hide-br-sm br {
  display: none;
}

.font-size-xs {
  font-size: var(--font-size-sm);
}

.rings2-class {   
   bottom: -50px;
    left: -8%;
}
}


/* Large Desktops - 1200px */
@media (min-width: 1365px) {
      :root {
      /* Spacing */
      --base-container-padding1: 0px 48px;
      --base-container-padding2: 80px 48px;
      --base-container-padding3: 96px 48px;
      --base-container-padding4: 96px 48px 96px 0px;
      --base-container-padding5: 0px 48px 96px 48px;
      --base-container-padding6: 64px 48px;
      --padding-top-base: 20px;
      --padding-top-base2: 24px;
      --padding-bottom-base: 40px;
      --padding-base: 50px;
      --padding-base-md: 40px;
      --padding-base-sm: 24px;
      --padding-inner-container: 32px 24px;
      --padding-inner-container-lg: 64px 48px;
      --margin-inner: 24px 0px 64px 48px;
      --margin-bottom-l1: 4px;
      --margin-bottom-l2: 5px;
      --margin-bottom-l3: 8px;
      --margin-bottom-l4: 12px;
      --margin-bottom-l5: 16px;
      --margin-bottom-l6: 20px;
      --margin-bottom-l7: 24px;
      --margin-bottom-l8: 32px;
      --margin-bottom-l9: 36px;
      --margin-bottom-l10: 64px;
      --margin-top-l1: 20px;
  }

  .button-main {
      padding: 12px 48px;
      border-radius: 6px;
  }

  .rings2-class {
    bottom: -20px;
    left: -5%;
}
}


@media (max-width: 1367px) {
  .flex-1 {
    flex: unset;
    min-width: 37% !important;
  }

  .rings-class-type1.parallax-container2 {
    width: 38vw;
    left: 14% !important;
  }


  .rings-class-type2.parallax-container2 {
    width: 50vw;
    left: 37%;
  }

}


@media (min-width: 1440px) {
  :root {
      /* Spacing */
      --base-container-padding1: 0px 64px;
      --base-container-padding2: 100px 64px;
      --base-container-padding3: 112px 64px;
      --base-container-padding4: 112px 64px 112px 0px;
      --base-container-padding5: 0px 64px 112px 64px;
      --base-container-padding6: 80px 64px;
      --padding-top-base: 26px;
      --padding-top-base2: 32px;
      --padding-bottom-base: 50px;
      --padding-base: 60px;
      --padding-base-md: 50px;
      --padding-base-sm: 30px;
      --padding-inner-container: 40px 30px;
      --padding-inner-container-lg: 80px 64px;
      --margin-inner: 100px 0px 80px 64px;
      --margin-bottom-l1: 5px;
      --margin-bottom-l2: 6px;
      --margin-bottom-l3: 10px;
      --margin-bottom-l4: 16px;
      --margin-bottom-l5: 20px;
      --margin-bottom-l6: 27px;
      --margin-bottom-l7: 30px;
      --margin-bottom-l8: 40px;
      --margin-bottom-l9: 48px;
      --margin-bottom-l10: 80px;
      --margin-top-l1: 30px;
  }
  
.flex-gap-8 { gap: 8px; }
.flex-gap-10 { gap: 10px; }
.flex-gap-12 { gap: 12px; } 
.flex-gap-20 { gap: 20px; }
.flex-gap-22 { gap: 22px; }
.flex-gap-24 { gap: 24px; }
.flex-gap-40 { gap: 40px; }
.flex-gap-48 { gap: 48px; }
.flex-gap-50 { gap: 50px; }
.flex-gap-80 { gap: 80px; }
.flex-gap-96 { gap: 96px; }
.flex-gap-100 { gap: 100px; }

.rings2-class {
  bottom: 0;
  left: -3%;
}

}
/* Standard 4K Displays and Larger - 1920px */
@media (min-width: 1920px) {
  :root {
      /* Spacing */
      --base-container-padding1: 0px 80px;
      --base-container-padding2: 120px 80px;
      --base-container-padding3: 144px 80px;
      --base-container-padding4: 144px 80px 144px 0px;
      --base-container-padding5: 0px 80px 144px 80px;
      --base-container-padding6: 96px 80px;
      --padding-top-base: 32px;
      --padding-top-base2: 40px;
      --padding-top-base3: 80px;
      --padding-bottom-base: 60px;
      --padding-base: 80px;
      --padding-base-md: 60px;
      --padding-base-sm: 40px;
      --padding-inner-container: 48px 40px;
      --padding-inner-container-lg: 96px 80px;
      --margin-inner: 56px 16px 96px 80px;
      --margin-bottom-l1: 6px;
      --margin-bottom-l2: 8px;
      --margin-bottom-l3: 12px;
      --margin-bottom-l4: 20px;
      --margin-bottom-l5: 24px;
      --margin-bottom-l6: 32px;
      --margin-bottom-l7: 36px;
      --margin-bottom-l8: 48px;
      --margin-bottom-l9: 56px;
      --margin-bottom-l10: 96px;
      --margin-top-l1: 40px;
  }
  
  #logo-footer {
    transform: scale(1.5);
  }

  #landing-page {
    min-height: 1080px !important;
  }

  .flex-1 {
    flex: unset;
    min-width: 37% !important;
  }

  .rings-class-type1.parallax-container2 {
    width: 38vw;
    left: 14% !important;
  }

  .rings-class-type2.parallax-container2 {
    width: 50vw;
    left: 37%;
  }

  .button-main {
      padding: 18px 56px;
      border-radius: 8px;
  }
  .flex-gap-8 { gap: 14px; }
  .flex-gap-10 { gap: 16px; }
  .flex-gap-12 { gap: 18px; } 
  .flex-gap-20 { gap: 28px; }
  .flex-gap-22 { gap: 30px; }
  .flex-gap-24 { gap: 32px; }
  .flex-gap-40 { gap: 52px; }
  .flex-gap-48 { gap: 60px; }
  .flex-gap-50 { gap: 62px; }
  .flex-gap-80 { gap: 98px; }
  .flex-gap-96 { gap: 110px; }
  .flex-gap-100 { gap: 114px; }

  /* Adjusted styles for 1920px resolution */
  nav {
    height: 120px !important;
}

.border-pink-3 {
    border: 5px solid #FF4EFE;
}

.border-radius-20 {
    border-radius: 30px;
}

.round-shape {
    border-radius: 100px;
    width: 80px;
    height: 80px;
    padding: 16px;
}

.logo-image {
  width: 80px;
  height: 80px;
}

.priocracy-image {
  width: 500px !important;
}
.rings2-class {
  bottom: 50px;
  left: -2%;
}
}

@media (min-width: 2560px) {
  :root {
}

#landing-page {
  min-height: 1440px !important;
}
}
@media screen and (min-width: 3840px) {
  :root {
    /* Spacing */
    --base-container-padding1: 0px 160px;
    --base-container-padding2: 240px 160px;
    --base-container-padding3: 288px 160px;
    --base-container-padding4: 288px 160px 288px 0px;
    --base-container-padding5: 0px 160px 288px 160px;
    --base-container-padding6: 192px 160px;
    --padding-top-base: 64px;
    --padding-top-base2: 80px;
    --padding-bottom-base: 120px;
    --padding-base: 160px;
    --padding-base-md: 120px;
    --padding-base-sm: 80px;
    --padding-inner-container: 96px 80px;
    --padding-inner-container-lg: 192px 160px;
    --margin-inner: 112px 32px 192px 160px;
    --margin-bottom-l1: 12px;
    --margin-bottom-l2: 16px;
    --margin-bottom-l3: 24px;
    --margin-bottom-l4: 40px;
    --margin-bottom-l5: 48px;
    --margin-bottom-l6: 64px;
    --margin-bottom-l7: 72px;
    --margin-bottom-l8: 96px;
    --margin-bottom-l9: 112px;
    --margin-bottom-l10: 192px;
    --margin-top-l1: 80px;
  }

  #landing-page {
    min-height: 2160px !important;
  }

  .flex-gap-8 { gap: 28px; }
  .flex-gap-10 { gap: 30px; }
  .flex-gap-12 { gap: 32px; } 
  .flex-gap-20 { gap: 42px; }
  .flex-gap-22 { gap: 44px; }
  .flex-gap-24 { gap: 46px; }
  .flex-gap-40 { gap: 66px; }
  .flex-gap-48 { gap: 74px; }
  .flex-gap-50 { gap: 76px; }
  .flex-gap-80 { gap: 114px; }
  .flex-gap-96 { gap: 126px; }
  .flex-gap-100 { gap: 130px; }

  .button-main {
      padding: 20px 64px;
      border-radius: 10px;
  }

  nav {
      height: 150px !important;
  }

  .border-pink-3 {
      border: 6px solid #FF4EFE;
  }

  .border-radius-20 {
      border-radius: 35px;
  }

  .round-shape {
      border-radius: 120px;
      width: 100px;
      height: 100px;
      padding: 20px;
  }

  .logo-image {
    width: 100px;
    height: 100px;
  }
  .priocracy-image {
    width: 900px !important;
}
.rings2-class {
  bottom: 200px;
  left: 2%;
}
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

@media only screen and (max-width: 767px) {
  .mobile-show {
      display: block;
  }
  .ring0 {
    left: 57% !important;
  }
  .ring0 .rings-class {
    background-size: 40% 40% !important;
    top: 5% !important;
  }
}
@media (max-width: 992px) {

  .mobile-width-unset {
    width: unset !important;
    margin-bottom: 48px !important;
  }

  .feature-item {
    display: flex;
    align-items: center;
  }

  .feature-item > * {
    margin-left: 12px !important; 
    margin-right: 12px !important; 
  }

  .mobile-left-align * {
    text-align: left !important; 
  }


  .container3.hide-mobile-view {
    display: none;
  }

  .mobile-column {
    flex-direction: column !important;
    margin-top: 16px;
  }

  .mobile-order-2 {
    order: 2;
  }

  .mobile-order-1 {
    order: 1;
  }

  .container3.mobile {
    padding-top: 60px;
  }

  .mobile-show {
    display: block !important;
  }

  .rings2-class {
    top: 201px !important;
    left: -6% !important;
  }

  .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
    align-self: stretch;
  }

  .footer-wrapper {
    padding: 48px 20px;
  }

  .container6 .footer-text{
      flex-direction: column;
  }

  .container6 .copyright-wrapper {
      order: 2; 
      text-align: center;
  }

  .container6 .links-wrapper {
      order: 1; 
      gap: 16px !important;
      margin: 24px 0px 32px;
      text-align: center;
  }

  .container6 .link {
      margin-top: 10px;
  }

  .mb-64-mobile {
    margin-bottom: 64px;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  }
  
  .modal-content {
  background-color: white;
  margin: 2% auto;
  padding: 29.5px 0px;
  width: 80%;
  }
  
  .close {
  color: balck;
  float: right;
  margin-right: 5px;
  margin-top: -38px;
  font-size: 28px;
  font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  }