body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
a {
    text-align: center;
}
j {
    color: black;
    font-size: 15pt;
}
h {
    font-size: 15pt;
    color: black;
    text-align: center;
}
 
.bn45 {
  width: 170px;
  height: 50px;
}
.bn46 {
  width: 150px;
  height: 50px;
}

#LoginBTN:hover {
    background-color: green !important;
}
#GetStartedBTN:hover {
    background-color: blue !important;
}
#GalleryBTN:hover {
    background-color: red !important;
}

/**Hero Section**/
    .hero {
      display: inline-block;
      width: 100%;
      height: 90vh;
      position: relative;
    } 
    .diagonal-hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: ghostwhite;
      z-index: -1;
      overflow: hidden;
    }
    .falling-star {
        position: absolute;
        width: 4px;
        height: 4px;
        background: black;
        border-radius: 50%;
        box-shadow: 0 0 10px white, 0 0 20px white;
        animation: fall 10s linear infinite, randomPosition 0s linear infinite;
        /*animation: twinkle 1.5s ease-in-out infinite, randomPosition 0s linear infinite;*/
        opacity: 0;
    }
    @keyframes fall {
      0% {
        transform: translateY(0); /* Start at the top */
        opacity: 1;
      }
      100% {
        transform: translateY(3000px); /* Fall straight down */
        opacity: 0;
      }
    }
    @keyframes randomPosition {
      0% {
        left: calc(100% * random());
        top: calc(100% * random());
        animation-delay: calc(2s * random());
      }
      100% {
        left: calc(100% * random());
        top: calc(100% * random());
        animation-delay: calc(2s * random());
      }
    }
    @keyframes twinkle {
      0% {
        opacity: 0.7;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.7;
      }
    }
    .logo {
      object-fit: contain;        /* keep it nicely cropped */
    }
    .row {
        margin: 0 auto !important;
    }
    .center-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .center-container img {
      max-width: 30vw;
    }

    @media (min-width: 1861px) {
        .center-container img {
            max-width: 30vw;
        }
    }
/**Hero Section**/

/**Public Gallery**/
    .grid-wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        grid-auto-rows: 200px;
        grid-auto-flow: dense;
    }
    .grid-wrapper > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .grid-wrapper > div > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .grid-wrapper .wide {
        grid-column: span 2;
    }
    .grid-wrapper .tall {
        grid-row: span 2;
    }
    .grid-wrapper .big {
        grid-column: span 2;
        grid-row: span 2;
    }

    @media (max-width: 575.98px) {
        .grid-wrapper .wide,
        .grid-wrapper .tall,
        .grid-wrapper .big {
            grid-column: span 1;
            grid-row: span 1;
        }
    }
/**Public Gallery**/

/**Features**/
    #features {
        background-color: rgba(8, 13, 32, 1);
        border-top: 1px solid black;
    }
    .fancy-container-top {
      background: rgba(8, 13, 32, 1);
      clip-path: polygon(
        /* top zig-zags */
        0 5%, 5% 0, 10% 5%, 15% 0,
        20% 5%, 25% 0, 30% 5%, 35% 0,
        40% 5%, 45% 0, 50% 5%, 55% 0,
        60% 5%, 65% 0, 70% 5%, 75% 0,
        80% 5%, 85% 0, 90% 5%, 95% 0,
        100% 5%,

        /* right side */
        100% 95%,

        /* bottom zig-zags */
        95% 100%, 90% 95%, 85% 100%, 80% 95%,
        75% 100%, 70% 95%, 65% 100%, 60% 95%,
        55% 100%, 50% 95%, 45% 100%, 40% 95%,
        35% 100%, 30% 95%, 25% 100%, 20% 95%,
        15% 100%, 10% 95%, 5% 100%, 0 95%,

        /* left side */
        0 5%
      );
    }

    #features > .row {
        width: 90%;
        margin: 0 auto;
        color: white;
    }
    #features > h2 {
        color: white;
    }
    .drop-text-FeaturesHeader,
    .drop-text-FeaturesItem {
        opacity: 0;
        transform: translateY(-100px);
        animation: dropFade 1s ease-out forwards;
        color: wheat;
        text-align: center;
        margin-bottom: 0;
    }
    .container {
        display: flex;
        align-items: center;
        gap: 20px;
        max-width: 900px;
        margin: 5% auto 0%;
        flex-wrap: wrap;
    }
    .container img {
        width: 300px;
        height: auto;
        border-radius: 10px;
    }
    .text {
        flex: 1;
        font-size: 18px;
        line-height: 1.5;
    }

    @media (max-width: 768px) {
        .fa-2xl {
            display: none !important;
        }
        .container {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .container img {
            width: 90%;
            max-width: 350px;
        }
        .text {
            font-size: 16px;
        }
        .fancy-container-top {
            clip-path:border-box;
        }
        .fancy-container-faq::before, .fancy-container-pricing::before {
            display: none;
        }
        #features {
            padding-top: 3rem !important;
        }
    }
    @media (min-width: 769px) {
        #features {
            padding-top: 6rem !important;
            padding-bottom: 6rem !important;
        }
    }
/**Features**/

/**Who we are**/
    @media (max-width: 768px) {
        #about {
            margin-top: 0% !important;
        }
    }
    @media (min-width: 769px) {
        #about {
            margin-top: -5% !important;
        }
        .who-we-are-container {
            margin-top: 17% !important;
            margin-bottom: 17% !important;
        }
    }
    @media (min-width: 1440px) {
        #about {
            margin-top: 0% !important;
        }
        .who-we-are-container {
            margin-top: 8% !important;
            margin-bottom: 10% !important;
        }
    }
/**Who we are**/

/**Privacy**/
    .Privacy-Table {
        width: 80%;
        margin: 7% auto 7% auto;
    }
    @media (max-width: 768px) {
        #privacy {
            margin-top: -17% !important;
        }
        .Privacy-Table {
            margin-top: 15%;
            margin-bottom: 15%;
        }
        .wavy-section {
            --R: 0 !important;
        }
    }
    @media (min-width: 769px) {
        #privacy {
            margin-top: -5% !important;
        }
        .Privacy-Table {
            margin-top: 15%;
            margin-bottom: 15%;
        }
    }
    @media (min-width: 1440px) {
        .Privacy-Table {
            margin-top: 8%;
            margin-bottom: 15%;
        }
    }
/**Privacy**/

/**FAQ**/
    .accordion-body {
        font-size: 16pt;
    }
    #faqAccordion {
        margin: 0 auto;
        width: 90%;
    }
    .fancy-container-pricing {
      position: relative;
      background: #f0f8ff;
      padding: 4rem;
      overflow: hidden; /* hides the overflow from the curve shape */
    }
    .fancy-container-pricing::before {
      content: "";
      position: absolute;
      top: -40px; /* move up so curve dips inside */
      left: 0;
      width: 100%;
      height: 120px;
      background: white; /* match your page background */
      border-bottom-left-radius: 50% 80px;
      border-bottom-right-radius: 50% 80px;
    }
    .fancy-container-faq {
      position: relative;
      background: #f0f8ff;
      padding: 4rem;
      overflow: hidden; /* hides the overflow from the curve shape */
    }
    .fancy-container-faq::before {
      content: "";
      position: absolute;
      top: -0px; /* move up so curve dips inside */
      left: 0;
      width: 100%;
      height: 140px;
      background: ghostWhite; /* match your page background */
      border-bottom-left-radius: 50% 80px;
      border-bottom-right-radius: 50% 80px;
    }
    @media (max-width: 768px) {
        #faqAccordion {
            width: 60%;
        }
        .wavy-section {
            margin-top: -11%;
        }
        .faq-header {
            margin-top: 10%;
        }
    }
    @media (min-width: 769px) {
        #faqAccordion {
            width: 60%;
        }
        .wavy-section {
            margin-top: -11%;
        }
        .faq-header {
            margin-top: 15%;
        }
    }
    @media(min-width: 1440px) {
        .faq-header{
            margin-top: 7% !important;
        }
    }
/**FAQ**/

/**Comparison table**/
    .wavy-section {
      --size: 50px;
      --m: 0.5;
      --p: calc(var(--m)*var(--size));
      --R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1));

      mask:
        radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
          calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
        radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
          50% var(--size)/calc(4 * var(--size)) 100% repeat-x; 
    }

    .wavy-section-bottom {
      --size: 50px;
      --m: 0.5;
      --p: calc(var(--m) * var(--size));
      --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

      mask:
        /* Flip the top gradient to bottom */
        radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%) 
          calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
        radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
          50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
    }

    .tableHeader {
        padding:14px 18px; 
        text-align:center; 
        background:limegreen; 
        color:black; 
        font-size:16px;
    }
    .tableHeaderHightlighted{
        padding:14px 18px;
        text-align:center;
        border-top: 1px solid rgba(0,0,0, 0.25);
        border-left:1px solid rgba(0,0,0, 0.25);
        border-right:1px solid rgba(0,0,0, 0.25);
        border-bottom: none !important;
        background:#E0FFFF;
        color:black;
        font-size:16px;"
    }
    .tableRowData {
        padding:14px 18px;
        border-bottom:1px solid #e5e7eb;
        width:20%;
    }
    .highligthedRow {
        padding:14px 18px;
        border-top:1px solid rgba(0,0,0, 0.25);
        border-left:1px solid rgba(0,0,0, 0.25);
        border-right:1px solid rgba(0,0,0, 0.25);
        border-bottom:none !important;
        background:#E0FFFF;
        font-weight:bold;"
    }
/**Comparison table**/

/**Footer**/
    #footerContainer {  }
/**Footer**/

/**Pricing**/
    .card {
        border-radius: 25px !important;
        border: 1px solid black;
    }
    .py-5 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
    .StripePayment {
        position: relative;
        bottom:0px !important;
    }
    .StripePaymentsContainer {
        display: inline-flex;
        margin: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .custom-pricing-container {
        text-align: center;
    }
    .custom-pricing-container .card {
        height: 100%;
    }
    .custom-pricing-container .card-body {
        display: flex;
        flex-direction: column;
    }
    .custom-pricing-container .card-body .text-center.mt-3 {
        margin-top: auto !important;
    }
    @media (max-width: 767.98px) {
        .custom-pricing-container {
            margin-bottom: 1.5rem;
        }
        .custom-pricing-container .card {
            height: auto;
        }
    }
    @media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    @media (max-width: 1420px) {
        .col-md-3 {
            flex: 0 0 auto;
            width: 100%;
        }
    }
/**Pricing**/

/**Login page**/
    .BackgroundContainer {
        width: 100%;
        height: 100%;
        position: absolute;
        background-size: cover;
        background-position: center;
        opacity: 0.9;
        overflow: scroll;
        background-color: ghostwhite;
    }
/**Login page**/

/**Register**/
    @media (max-height:680px) {
        .container {
            margin-top: 0px !important;
        }
    }
    @media (min-width: 768px) {
        .col-md-6{
            width: 100%;
        }
    }

    .container {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .HomeLink {
        text-decoration: none;
        color: white;
    }
/**Register**/

.scroll-top {
    transition: all .25s ease-in-out;
    position: fixed;
    bottom: 0;
    right: 0;
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    margin: 0 3em 3em 0;
    border-radius: 50%;
    padding: .25em;
    width: 50px;
    height: 50px;
    background-color: #F8F8F8;
}