@font-face {
    font-family: "Goggins";
    src: url('./poppins-v5-latin-700.woff2') format("truetype");
}

p.customfont { 
    font-family: "Goggins", system;
}

* {
    font-family: "Goggins";
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #f5f5f5;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header img {
    height: 30px;
}

header nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}

.container {
    text-align: center;
    /* padding: 50px 20px; */
}

.container h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    padding: 2rem;
}

.container p {
    margin: 15px 0 40px;
    font-size: 1.2em;
    color: inherit;
}

.cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    z-index: 2;
    margin-top: 1.65rem;
    /* margin-top:  */
        /* calc(-0.7* 100vw); */
        /* calc(-0.7* 27rem); */
}

.card {
    width: calc(50% - 20px); /* 50% width with adjustment for gap */
    padding: 4rem 3rem 7rem;
    border-radius: 0.25rem;
    color: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    height:100%;
}

.ap-formats-logo {
    height: 50px;
    margin-bottom: 15px;
    display: initial;
    width: 50px;
        z-index: 999;

}

.card h2 {
/*    margin-top: 0;*/
    margin-top: 0.4rem;
        z-index: 999;

}

.card p {
    flex-grow: 1;
    font-size:1.2rem;
    margin-bottom:0.75rem;
    padding:0.5rem;
    padding-right:0.75rem;
    z-index: 999;
}
.card ul{
    padding:1.5rem;
    margin-top: -2rem;
    z-index: 999;

}

.card a {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    margin-top:0.75rem;
    margin-bottom:2rem;
}

.card-blue { background: linear-gradient(225deg,#00dcc0,#005af0 75%); color: white; }
.card-yellow { background: linear-gradient(225deg,#ec6600,#ffdc00 75%); color: black;}
.card-green { background: linear-gradient(225deg,#09a600,#e1eb64 75%); color: black; }
.card-purple { background: linear-gradient(225deg,#eb49e1,#5500d7 75%); color: white; }
.card-black { background: linear-gradient(to bottom left, rgb(169, 255, 244), rgb(175, 255, 175)); color: black; }

/* Adjustments for large screens */
@media (min-width: 1200px) {
    .container h1 {
        font-size: 3em;
        padding:4rem;
        min-width:80vw;
        z-index:2
    }

    .container p {
        font-size: 1.5em;
    }

    .card {
        width: 45%; /* Increased width for better fit on larger screens */
    }

    .cards .card:nth-child(2n) {
        margin-top: -24px;
        margin-bottom: 24px;
    }
    .card-yellow {
        /* margin-top: -26.75rem !important; */
    }
}

/* Adjustments for medium screens */
@media (min-width: 800px) {
    .container h1 {
        font-size: 2.2em;
    }

    .container p {
        font-size: 1.2em;
    }

    .card {
        width: 48%;
    }
}

@media (max-width: 900px) {
    .card {
        width: calc(50% - 20px); /* Adjust for margin */
    }
    /* .card-yellow {
        margin-top: -18.25rem !important;
    } */
    .card-yellow {
        /* margin-top: -24rem; */
    }
}

/* Adjustments for small screens */
@media (max-width: 800px) {
    .card {
        width: 100%;
        height: auto;
        padding: 3rem;
    }
    .card-yellow {
        /* margin-top: none !important; */
    }
    .ht{
        top: calc(0.775* 100vw) !important;
    }    
}

/* Adjustments for mobile screens */
@media (max-width: 600px) {
    .container {
        padding: 1.75rem;
        padding: 0.75rem;
    }

    .container h1 {
        font-size: 2rem;
    }

    .container p {
        font-size: 1em;
    }

    .card {
        width: 100%;
        padding: 2rem;
        margin-bottom: 20px;
    }
}

        .ht {
            position: absolute;
            top: calc(0.475* 100vw);
            border-radius: 0.5rem;
            font-size: calc(0.039*100vw);
            /* left: calc(0.035* 100vw); */
            display:flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 100vw;
        }
      
        nav{
            display: flex;
        }
        .hl-ht-0, .hl-ht-1, .hl-ht-2 {
            color: inherit;
            transition: 0.666s color ease, 0.666s text-decoration ease;
        }
        .hl-ht-0 {
            /* color: #a74bff; */
        }
        .hl-ht-1 {
            /* color: #407fec; */
        }
        .hl-ht-2 {
            /* color: #21cfb8; */
        }
        .hl-ht-0:hover, .hl-ht-1:hover, .hl-ht-2:hover {
            text-decoration: underline;
            text-decoration-thickness: 0.05rem;
        }
        .row {
            display: contents;
        }
        .text-left {
            text-align: left;
            padding-right: 1rem;
        }
        .text-right {
            text-align: right;
        }
        .slidel {
            transform: translateX(-200%); /* Move to the left beyond screen */
        }
        .slideright {
            transform: translateX(0%); /* Move to the left beyond screen */
        }
        canvas, .ht, .container, body, html{
            /* margin-top: -19rem; */
            max-height:100vh;
            max-width:99vw;
            /* scale:2.0 */
        }


                    
            /* Reset default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 100 !important;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

:root {
    --svg-width: 350px;
    --svg-height: 100px;
    --inner-svg-width: 1500px;
    --inner-svg-height: 276px;
    --viewbox-width: 395.52px;
    --viewbox-height: 73.07523665374512px;
    --textblock-height: 49.8402069598598px;
    --accent-peak: rgb(45, 239, 255);
}
.big-svg {
    width: var(--svg-width);
    height: var(--svg-height);
}
    
.product {
    background-color: rgba(0, 0, 139, 0.42);
    padding: 2rem;
    margin-top:2rem; margin-bottom: 2rem;
    border-radius: 2rem;
}
.product p {
    font-size:0.85rem;
}

footer {
    width: 100%;
    background-color: #f9f9f9;
    padding: 2rem 1rem;
    color: #333;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-column {
    flex: 1;
    min-width: 150px;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.footer-column h3 {
    color: #000;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column ul li a {
    text-decoration: none;
    color: #777;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #000;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    color: #777;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .cards{
/*        margin-top:-36rem !important;*/
    }
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        padding: 0;
        margin-bottom: 2rem;
        text-align: center;
    }

    .footer-column ul li a {
        font-size: 0.8rem;
    }
}
/* METALLIC TRILLION PALETTE */
:root {
  --card-blue-iridescent: linear-gradient(to bottom left, rgba(185, 246, 221, 0.7) 6.72%, rgba(177, 228, 233, 0.43) 44.54%, rgba(154, 183, 241, 0.68) 75%);
  --card-blue-light-ethereal: linear-gradient(to bottom left, rgba(156, 195, 224, 0.4), rgba(175, 194, 233, 0.39) 75%);
  --card-blue-dark-metallic: linear-gradient(to top right, rgba(22, 28, 56, 1), rgba(23, 41, 77, 0.89) 75%);
  --card-blue-muted-aqua: linear-gradient(to bottom left, rgba(116, 140, 158, 0.67), rgba(154, 183, 241, 0.88) 75%);

  --card-black-dark-plum: linear-gradient(to bottom left, rgba(128, 93, 112, 0.36), rgba(169, 215, 230, 0));
  --card-black-charcoal-smoke: linear-gradient(to bottom left, rgba(37, 36, 26, 0.61), rgba(60, 53, 46, 0.82));
  --card-black-deep-ink: linear-gradient(25deg, rgba(34, 32, 30, 1), rgba(38, 36, 34, 0.92));
  --card-black-forest-green-tinge: linear-gradient(to bottom left, rgba(16, 17, 17, 0.37), rgba(36, 46, 33, 0.38));
  --card-black-neon-pink-streak: linear-gradient(to bottom left, rgba(233, 97, 192, 0.29), rgba(30, 215, 228, 0.3));

  --card-yellow-golden-haze: linear-gradient(to bottom left, rgba(84, 72, 62, 0.3), rgba(78, 75, 51, 0.32) 75%);
  --card-yellow-sunset-blaze: linear-gradient(to bottom left, rgba(76, 32, 41, 0.66), rgba(85, 70, 39, 0.66) 75%);
  --card-yellow-dark-ember: linear-gradient(25deg, rgba(25, 13, 16, 0.8), rgba(18, 8, 13, 0.89) 75%);
  --card-yellow-midnight-glow: linear-gradient(to top, rgba(12, 12, 12, 0.8), rgba(11, 13, 13, 1) 83.19%, rgb(39, 37, 35) 97.9%);
  --card-yellow-peach-cream: linear-gradient(to bottom left, rgba(231, 165, 179, 0.57), rgba(224, 207, 173, 0.55) 75%);

  --card-green-spring-meadow: linear-gradient(to bottom left, rgba(90, 124, 88, 0.16), rgba(98, 158, 99, 0.41) 75%);
  --card-green-forest-depth: linear-gradient(25deg, rgba(35, 42, 34, 0.79), rgba(29, 33, 29, 0.9) 75%);

  --card-purple-royal-velvet: linear-gradient(to bottom left, rgba(123, 76, 121, 0.28), rgba(45, 34, 50, 0.22) 75.63%);
  --card-purple-deep-amethyst: linear-gradient(to bottom left, rgba(68, 51, 67, 1), rgba(27, 21, 30, 1) 75.63%);
}
.card {
    border-radius:2rem;
    color: black;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.97);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.23);
}
.card-blue {
    position:relative;
    overflow:hidden;
    background:var(--card-blue-iridescent);
/*    animation: iridescent-shift 10s infinite alternate;*/
}

@keyframes iridescent-shift {
  0% {      background-position: 0% 50%; } /* Start at top-center */
  16.67% {  background-position: 100% 50%; } /* Move to right-center */
  33.33% {  background-position: 100% 100%; } /* Move to bottom-right */
  50% {     background-position: 0% 100%; } /* Move to bottom-left */
  66.67% {  background-position: 0% 0%; } /* Move to top-left */
  83.33% {  background-position: 100% 0%; } /* Move to top-right */
  100% {    background-position: 0% 50%; } /* Return to starting position */
}

.card-black, .card-yellow, .card-green, .card-purple {
    position: relative;
    overflow: hidden;
}

.card-blue:after, .card-black::after, .card-yellow::after, .card-green::after, .card-purple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
    background: inherit;
    background-size: 300% 400%;
    background-position: 0% 100%;
    animation: iridescent-shift 10s infinite linear alternate; 
}

.card-black {
    background: var(--card-black-neon-pink-streak);
    color: black;
}
.card-yellow {
    background: var(--card-yellow-peach-cream);
    color: black;
}
.card-green {
    background: var(--card-green-spring-meadow);
    color: black;
}
.card-purple {
    color: ghostwhite;
    background: linear-gradient(to bottom left, rgba(68, 51, 67, 1), rgba(27, 21, 30, 1) 75.63%);
}
.product {
    background-color: rgba(0, 0, 139, 0.14);
    background-color: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: 0.17s background-color ease;
    z-index: 0;
}
.product:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.prodult {
    background-color: rgba(0, 0, 139, 0.14);
/*    background-color: rgba(255, 255, 255, 0.03);*/
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: 0.17s background-color ease;
    z-index: 0;
}
.prodult:hover {
    background-color: darkgray;
}
.animated-outline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

.navbar{
    z-index: 999999999999;
    background: transparent;
    -webkit-backdrop-filter: blur(40rem);
    backdrop-filter: blur(40rem);
}
.logo, .rightlogo {
    transition: 2s color;
}

.gradient-text {
  background: linear-gradient(45deg, #black, #darkblue); /* Customize gradient */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@font-face {
  font-family: 'Goggins';
  src: url('./poppins-v5-latin-700.woff2'); 
/*  format("truetype");*/
  color-stop: from #FF69B4, to #00FFFF; /* Gradient colors */
}

.gradient-text {
  font-family: 'Goggins';
}
ul {
  list-style-type: none; /* Removes all bullet styles */
}