/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* =========================================================
   Mobile-first hero (0 rem – 599 px)
   ========================================================= */
@media only screen and (min-width: 0rem) {
  /* ---------- Section wrapper -------------------------------- */
  #hero-358 {
    position: relative;                         /* containing block for image */
    text-align: center;
    overflow: hidden;                           /* hide any stray overflow   */
    padding: clamp(5rem, 12vw, 7rem) 1rem 0;    /* top | sides | bottom      */
    min-height: 100vh;                          /* fill first screen         */
    z-index: 1;
  }
#hero-358 .hero-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;            /* adjust height */
  background: #030a14;     /* color or gradient */
  z-index: -2;              /* above background, below content */
}
  /* ---------- Flex container ---------------------------------- */
  #hero-358 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4rem;
    align-items: center;
    gap: 2.5rem;                                /* space between blocks      */
  }

  /* ---------- Copy block -------------------------------------- */
  #hero-358 .cs-flex-group {
    max-width: 39.125rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #hero-358 .cs-topper2 {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.25rem;
    font-family: 'oswald';
  }

  #hero-358 .cs-title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: 1.2em;
    font-weight: 900;
    width: 100%;
    margin: 0 0 0.75rem;
    color: #ffffff;
  }

  #hero-358 .cs-accent { color: var(--primaryLight); }

  #hero-358 .cs-text {
    font-size: 1.1rem;
    line-height: 1.5em;
    max-width: 39.125rem;
    margin: 0 0 1.5rem;
    color: #ffffff;
  }

  /* ---------- Buttons ---------------------------------------- */
  #hero-358 .cs-button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    flex-wrap: nowrap;
    margin-top: 3%;
  }



  /* ---------- Image ------------------------------------------ */
  #hero-358 .cs-person {
    position: static;
    left: 50%;
   
   
    width: clamp(16rem, 80vw, 26rem);
    pointer-events: none;
    padding-top: 5%;
  }

  #hero-358 .cs-person img {
    width: 100%;
    height: auto;
    display: block;
   
  }
}


/* 
@media only screen and (min-width: 47rem) {

#hero-358 .cs-person img {
  width: clamp(12rem, 38vw, 23rem);
  width: auto;
  height: 34%;
  bottom: 0%; 
   padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(0.5rem, 2vw, 1.25rem);


}








}
*/



/* =========================================================
   Desktop hero  (64 rem and up)
   ========================================================= */
@media only screen and (min-width: 64rem) {

  /* SECTION ─────────────────────────────────────────────── */
  #hero-358 {
    position: relative;                      /* keeps image absolute-ref */
    /* pull content away from the edges a touch */
    padding-inline: clamp(3rem, 4vw, 5rem);
    max-height: 100%;                       /* hero still fills screen */
    display: flex;                           /* vertical centring        */
    align-items: center;
  }
 #hero-358 .cs-text {
    font-size: 1.5rem;
    
  }

 

  /* FLEX ROW ────────────────────────────────────────────── */
  #hero-358 .cs-container {
    flex-direction: row;                     /* text left | image right  */
    align-items: center;
    justify-content: space-between;
    gap: clamp(3rem, 5vw, 6rem);             /* breathing-room in middle */
    width: 100%;
    max-width: 80rem;
    margin: auto;
  }

  /* COPY COLUMN ─────────────────────────────────────────── */
  #hero-358 .cs-flex-group {
    flex: 0 1 42rem;                         /* don’t let it get too wide */
    align-items: flex-start;
    text-align: left;
    margin: 0;
  }

  #hero-358 .cs-button-group {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4.75rem;
   
    margin-top: 3%
  }
  #hero-358 .cs-title {
    font-size: clamp(3.375rem, 5vw, 4.5rem);
    width: 118%;
  }

  /* IMAGE ───────────────────────────────────────────────── */
  #hero-358 .cs-person {                     /* wrapper, not the <img>   */
    position: static;
  margin-bottom: 2%;
  width: clamp(33rem, 5vw, 36rem);
    pointer-events: none;   
     margin-right: -7%;                 /* never blocks clicks      */
  }

  #hero-358 .cs-person img {
    width: 100%;
      padding-bottom: clamp(0.75rem, 2.5vw, 2.25rem);
    height: auto;
    display: block;
    
  }
}






@media only screen and (min-width: 0rem) {

 #picsec {
  height: 1px;        /* make section tiny */
  overflow: visible;    /* allow image to stick out */
  position: relative;
}

#picsec .cs-person img {
  position: relative;
  top: -300px;          /* move image up a lot */
  display: block;
  margin: 0 auto;
  
   z-index: 2;
   
    width: clamp(16rem, 80vw, 26rem);
    pointer-events: none;
    padding-top: 5%;
    height: auto;
}


}

/* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES *//* SERVICES */
@media only screen and (min-width: 0rem) {
    #services-966 {
        z-index: 1;
        position: relative;
        padding: var(--sectionPadding);
        padding-top: 0rem;
        background-color: #030a14;
    }

    #services-966 .cs-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        max-width: 34.375rem;
        width: 100%;
        gap: clamp(3rem, 6vw, 4rem);
        padding-top: 7%;
    }

    #services-966 .cs-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 50rem;
        width: 100%;
        text-align: center;
    }

    #services-966 .cs-text {
        margin: 0;
        max-width: 40.625rem;
        width: 100%;
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        color: #d9d9d9;
        text-align: inherit;
    }

    #services-966 .cs-title, #services-966 .cs-text {
        max-width: 100%;
    }

    #services-966 .cs-title {
        max-width: 20ch;
        color: white;
    }

    #services-966 .cs-card-group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        margin: 0;
        width: 100%;
        padding: 0;
        row-gap: 1.875rem;
    }

    #services-966 .cs-item {
        list-style: none;
        text-align: left;
        margin: 2.75rem 0 0 0;
        grid-column: span 12;
        grid-row: span 1;
    }
/*icon hover color */
    #services-966 .cs-item:hover .cs-icon-wrapper {
        background-color: #00122c;

        color: white; /*text colro */
    }

    #services-966 .cs-item:hover .cs-icon {
        filter: none;

    }

    #services-966 .cs-item:hover .cs-h3 {
        color:white;
    }
  
    #services-966 .cs-item:hover .cs-item-text {
        opacity: 0.9;
        color: var(--bodyTextColorWhite);
    }

    #services-966 .cs-item:hover .cs-fake-link {
        color: var(--bodyTextColorWhite);
    }

    #services-966 .cs-item:hover .cs-background {
        opacity: 1;
       
    }

    #services-966 .cs-item:hover .cs-background::after {
        transform: rotate(35deg) translate(2.25rem, 1.5rem);
    }

   #services-966 .cs-item:hover .cs-graphic {
    opacity: 0.2;
    bottom: -1px;
    filter: invert(0.9);
}

/* card background */ 
    #services-966 .cs-link {
        text-decoration: none;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        border-radius: 1rem;
        background-color: #03090e;
        width: 100%;
        box-sizing: border-box;
        padding: 0 clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 4rem);
        transition: background-color 0.3s;
    }

    #services-966 .cs-link:hover {
        cursor: pointer;
    }
/* ixon background */ 
    #services-966 .cs-icon-wrapper {
        position: relative;
        left: calc(clamp(1.5rem, 4vw, 2.5rem)*-1);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        margin: -2.75rem auto 2rem 2.375rem;
         background-color: #00122c;
        height: 5.5rem;
        width: 5.5rem;
        transition: background-color 0.3s, border-radius 0.3s;
    }
  
 
    #services-966 .cs-icon {
        height: 2.5rem;
        width: 2.5rem;
        filter: grayscale(1) brightness(1000%);
    }

    #services-966 .cs-h3 {
        margin: 0 0 0.75rem 0;
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        color: white;
        font-family: 'oswald';
        transition: color 0.3s;
        text-align: inherit;
    }

    #services-966 .cs-item-text {
        margin: 0 0 2rem 0;
        max-width: 18.75rem;
        padding: 0;
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        color: white;
        font-family: 'source sans 3';
        transition: color 0.3s;
    }

    #services-966 .cs-fake-link {
        position: relative;
        margin: 0;
        padding: 0;
        font-family: 'oswald';
        text-decoration: none;
        font-size: 0.8rem;
        line-height: 1.2em;
        font-weight: bold;
        color: white;
        transition: color 0.3s;
    }

    #services-966 .cs-fake-link:hover {
        color: #fff;
    }

    #services-966 .cs-fake-link:before {
        position: absolute;
        bottom: 0rem;
        left: 0;
        content: "";
        opacity: 1;
        display: block;
        background: white;
        height: 1px;
        width: 100%;
    }
/* The card background*/
    #services-966 .cs-background {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        display: block;
        border-radius: 1rem;
        background: rgb(3, 0, 17);
        height: 100%;
        width: 100%;
        overflow: hidden;
        
        transition: opacity 0.3s;
    }
/*the corner color*/
    #services-966 .cs-background::after {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        transform: rotate(35deg) translate(5rem, 4rem);
        background-color: var(--primaryLight);
        height: 8rem;
        width: 3rem;
        transition: transform 0.3s;
    }

    #services-966 .cs-graphic {
        width: 100%;
        height: auto;
        opacity: 0;

        pointer-events: none;
        position: absolute;
        bottom: -3.125rem;
        left: 0;
        z-index: -1;
        transition: opacity 0.5s, bottom 0.5s;
    }

    #services-966 .universe {
        display: none;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

     /*universe*/
    #services-966 .cs-item:hover .universe {
  display: block;     
}

    #services-966 .satellite {
        left: -0.625rem;
    }

    #services-966 .shooting-star {
        position: absolute;
        right: 50%;
        top: -23.59%;
        width: 1px;
        height: 70px;
        background: #fff;
        transform: rotate(-33deg);
        animation: none;
    }
 #services-966 .cs-item:hover .cs-fake-link:hover {
        color: #000000;
    }

    #services-966 .shooting-star2 {
        top: -26.59%;
    }
}

@media only screen and (min-width: 48rem) {
    #services-966 {
        padding-top: 3.125rem;
    }

    #services-966 .cs-container {
        max-width: 80rem;
        padding-top: 4%;
    }

    #services-966 .cs-card-group {
        -moz-column-gap: 1.875rem;
             column-gap: 1.875rem;
    }

    #services-966 .cs-item {
        grid-column: span 4;
    }

   
    #services-966 .cs-fake-link {
        line-height: 1.875rem;
        padding: 0 1rem;
        position: relative;
        z-index: 1;
        transform-style: preserve-3d;
        perspective: 700px;
        transform: translateX(-1rem);
        transition: color 0.3s;
    }

    #services-966 .cs-fake-link:hover:before {
        height: 1.875rem;
        left: 0;
        right: 0;
        background-color: white;
        bottom: 0;
    }

    #services-966 .cs-fake-link:before {
        width: auto;
        left: 1rem;
        right: 1rem;
        bottom: 0.3125rem;
        border-radius: 0.5rem;
        transition: width 0.3s, height 0.3s, background-color 0.3s, transform 0.3s, bottom 0.3s, left 0.3s, right 0.3s, box-shadow 0.3s;
        z-index: -1;
    }
}






    .star {
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        opacity: 0.5;
        display: block;
        z-index: 99;
    }

    .star1 {
        top: 2%;
        left: 25%;
        animation: starFlicker;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
    }

    .star2 {
        top: 1.3%;
        left: 48%;
        animation: starFlicker;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.5s;
    }
/*background: #0cbcf5;;
*/
    .star3 {
        top: 20%;
        left: 36%;
        animation: starFlicker;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 1s;
    }

    .star4 {
        top: 17%;
        left: 5%;
        animation: starFlicker;
        animation-duration: 7s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.8s;
    }

    .star5 {
        top: 11%;
        right: 19%;
        animation: starFlicker;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.2s;
    }

    .star6 {
        top: 4%;
        right: 24%;
        animation: starFlicker;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.9s;
    }

    .star7 {
        top: 3%;
        left: 29%;
        animation: starFlicker;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
    }

    .star8 {
        top: 18%;
        left: 56%;
        animation: starFlicker;
        animation-duration: 7s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.4s;
    }

    .star9 {
        top: 31%;
        left: 57%;
        animation: starFlicker;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.1s;
    }

    .star10 {
        top: 27%;
        left: 12%;
        animation: starFlicker;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.2s;
    }

    .star11 {
        top: 7%;
        right: 31%;
        animation: starFlicker;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 1.4s;
    }

    .star12 {
        top: 35%;
        right: 12%;
        animation: starFlicker;
        animation-duration: 4.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 1.1s;
    }

    .star13 {
        top: 12%;
        right: 25%;
        animation: starFlicker;
        animation-duration: 3.3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.7s;
    }

    @keyframes starFlicker {
        0% {
            opacity: 0.2;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            opacity: 0.2;
        }
    }









    @media only screen and (min-width: 0rem) {
    #sbs-1362 {
        z-index: 1;
        position: relative;
        overflow: hidden;
        padding: var(--sectionPadding);
        padding-top: 0rem;
        background-color: #030a14;
    }

.cs-title .highlight {

  color: #0cbcf5;
   text-shadow: 0 0 30px rgba(12, 188, 245, 0.4);
}

    #sbs-1362 .cs-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        max-width: 36.5rem;
        width: 100%;
        gap: clamp(3rem, 6vw, 4rem);
    }

    #sbs-1362 .cs-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 39.375rem;
        width: 100%;
        text-align: left;
    }

    #sbs-1362 .cs-topper{

        color: #0cbcf5;;
    }
    #sbs-1362 .cs-title {
        max-width: 26ch;
        font-family: 'oswald';
        color: white;
    }

    #sbs-1362 .cs-text {
        margin-bottom: 1.5rem;
        color: white;
        font-size: 1rem;
        font-family: 'source sans 3';
    }

    #sbs-1362 #list-1597 {
        display: grid;
        align-items: center;
        margin: 0 0 2rem;
        max-width: clamp(34.375rem, 50vw, 39.375rem);
        width: 100%;
        padding: 0;
        gap: clamp(1rem, 4vw, 2.5rem);
    }

    #sbs-1362 #list-1597 .cs-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        list-style: none;
        gap: 0.75rem;
    }

    #sbs-1362 #list-1597 .wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        gap: 0.625rem;
    }

    #sbs-1362 #list-1597 .cs-h3 {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        font-family: 'oswald';
        color: white;
        gap: 0.5rem;
    }

    #sbs-1362 #list-1597 .cs-item-text {
        margin: 0;
        font-size: 1rem;
        line-height: 1.5em;
        font-family: 'source sans 3';
        color: white;
    }

    #sbs-1362 .cs-image-group {
        position: relative;
        border-radius: clamp(1rem, 10vw, 6.25rem);
        height: 32.5rem;
        max-width: 36.625rem;
        width: 100%;
        overflow: hidden;
        border-bottom-right-radius: 1rem;
       
    }

    #sbs-1362 .cs-background {
        display: block;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        
    }

    #sbs-1362 .cs-background img {
        display: block;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
     
    }

    #sbs-1362 .cs-box {
        position: absolute;
        bottom: clamp(0.75rem, 1.9vw, 1.5rem);
        right: clamp(0.75rem, 1.9vw, 1.5rem);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        background-color: #fff;
        width: 80%;
        max-width: 19rem;
        box-sizing: border-box;
        padding: 1.5rem;
        text-align: left;
        gap: 1.5rem;
    }


    #sbs-1362 .cs-flex {
        display: flex;
        flex-direction: column;
    }

    #sbs-1362 .cs-name {
        display: block;
        text-transform: uppercase;
        font-family: var(--headerFont);
        font-size: clamp(1rem, 1.8vw, 1.25rem);
        line-height: 1.2em;
        font-weight: 700;
        font-family: 'oswald';
        color: var(--headerColor);
    }

    #sbs-1362 .cs-job {
        display: block;
        font-size: clamp(0.875rem, 1.8vw, 1rem);
        line-height: 1.2em;
        color: var(--primary);
        font-family: 'oswald';
    }

    #sbs-1362 .cs-box-icon {
        display: block;
        height: 3rem;
        width: auto;
    }
.cs-bubbles {
  position: absolute;
  bottom: -3.125em;
  right: -16.25em;
  width: 26em;
  height: 26em;
  font-size: min(2.5vw, 0.7em);
  z-index: -1;
  pointer-events: none;
}

.cs-bubbles::before,
.cs-bubbles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: block;
}

.cs-bubbles::before {
  width: 20em;
  height: 20em;
  bottom: 0;
  right: 0;
  border: 1px solid #ffffff;
  background: transparent;
  opacity: 1;
  animation: floatAnimation1 5s ease-in-out infinite;
  /* Glow effect */
  box-shadow:
    rgba(67, 183, 255, 0.2) 0px 0px 44px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 30px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 55px,
    inset rgba(67, 183, 255, 0.4) 0px 0px 75px,
    rgba(67, 183, 255, 0.4) 0px 0px 105px;
}

.cs-bubbles::after {
  width: 16em;
  height: 16em;
  top: 0;
  left: 0;
  background-color: #47bbf6;
  opacity: 0.15;
  filter: blur(2px);
  z-index: -1;
  animation: floatAnimation2 14s ease-in-out infinite;
  transition: box-shadow 0.3s ease;
}

/* Renamed animations */
@keyframes floatAnimation1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2rem); }
}

@keyframes floatAnimation2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3rem); }
}

}

@media only screen and (min-width: 48rem) {
    #sbs-1362 {
        padding-top: 3.125rem;
    }

    #list-1597 {
        grid-template-columns: repeat(12, 1fr);
    }

    #list-1597 .cs-item {
        grid-column: span 6;
    }
}

/* 64 rem and up */
@media only screen and (min-width: 64rem) {
    #sbs-1362 .cs-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 80rem;
    }

    #sbs-1362 .cs-image-group {
        max-height: 100%;
        height: -moz-fit-content;
        height: fit-content;
    }
    
    #sbs-1362 .cs-background,
    #sbs-1362 .cs-background img {
        max-height: 90vh; /* Adjust this value to match your content height */
        -o-object-fit: cover;
           object-fit: cover;
    }

    #sbs-1362 .cs-content {
        align-self: center;
    }

    #sbs-1362 .cs-bubbles {
        font-size: min(2.5vw, 1em);
    }
}

#sbs-1362 .cs-box-icon {
  width: 60px;
  height: auto;
}




/* PERFORMANCE SCORE */

@media only screen and (min-width: 0rem) {
    #sbs-1640 {
        background-color: #020911;
        overflow: hidden;
        padding: var(--sectionPadding);
    }


#sbs-1640 > div > div.cs-content > h2{
    text-transform: uppercase;
}

    #sbs-1640 .cs-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
        max-width: 36.5rem;
        width: 100%;
        gap: clamp(3rem, 6vw, 4rem);
    }

    #sbs-1640 .cs-stats-group {
        z-index: 10;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 39.375rem;
        width: 100%;
        text-align: left;
        gap: clamp(2rem, 4vw, 3rem);
    }

    #sbs-1640 .cs-stats {
        display: flex;
        grid-template-columns: repeat(12, 1fr);
        justify-content: space-between;
        margin: 0;
        max-width: 39.375rem;
        width: 100%;
        padding: 0;
        row-gap: 1.5rem;
        -moz-column-gap: clamp(1.5rem, 4vw, 4.5vw);
             column-gap: clamp(1.5rem, 4vw, 4.5vw);
    }

    #sbs-1640 .cs-stat {
        display: flex;
        flex-direction: column;
        align-content: space-between;
        margin: 0;
        padding: 0;
        list-style: none;
        grid-column: span 4;
        align-self: stretch;
        
    }

    #sbs-1640 .cs-number {
        font-family: var(--headerFont);
        display: block;
        margin: 0 0 0.25rem 0;
        font-size: clamp(2.4375rem, 5vw, 3.8125rem);
        line-height: 1.2em;
        font-weight: 900;
        color:#0cbcf5;
        font-family: 'oswald';
        text-align: left;
    }

    #sbs-1640 .cs-desc {
        margin: 0;
        font-size: clamp(0.875rem, 1.6vw, 1.25rem);
        line-height: 1.5em;
        color: white;
        text-align: left;
        font-family: 'source sans 3';
    }

    #sbs-1640 .cs-picture {
        z-index: 1;
        position: relative;
        display: block;
        border-radius: 1rem;
        overflow: hidden;
        height: 28.8125rem;
        width: 100%;
    }

    #sbs-1640 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    #sbs-1640 .cs-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 35.625rem;
        width: 100%;
    }

    #sbs-1640 .cs-topper {
        color: var(--primaryLight);
    }

    #sbs-1640 .cs-title {
        margin: 0 0 2.5rem 0;
        color: var(--bodyTextColorWhite);
    }

    #sbs-1640 .cs-color {
        color: var(--primaryLight);
    }

    #sbs-1640 .cs-text {
        opacity: 1;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        color: white;
    }

    #sbs-1640 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }

    #sbs-1640 #list-823 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 0 2rem 0;
        max-width: 27.3125rem;
        padding: 0;
        row-gap: clamp(1.5rem, 4vw, 2rem);
    }

    #sbs-1640 #list-823 .cs-li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        list-style: none;
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 700;
        font-family: 'source sans 3';
        color: var(--bodyTextColorWhite);
        gap: 2rem;
    }

    #sbs-1640 .cs-icon {
        width: 2.5rem;
        height: auto;
        filter: grayscale(1) brightness(1000%);
    }
}

@media only screen and (min-width: 48rem) {
    #sbs-1640 .cs-container {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: stretch;
        max-width: 80rem;
    }
}














/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbs-248 {
        padding: 0 1em;
        background-color: #020911;
        position: relative;
        z-index: 1;
    }
    #RPsbs-248 .cs-container{
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        padding-left: 0;
        padding-right: 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 108px */
        gap: clamp(3rem, 8vw, 6.75rem);
        position: relative;
    }
    #RPsbs-248 .cs-content{
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        /* changes at tablet */
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #RPsbs-248 .cs-title{
        max-width: 20ch;
        color: white;

    }
    #RPsbs-248 .cs-text {
        margin-bottom: 1rem;
        opacity: 0.8;
        color:white;
        font-size: 1rem;
       
    }
    #RPsbs-248 .cs-text:last-of-type{
        margin-bottom: 2rem;
    }
    #RPsbs-248 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #RPsbs-248 .cs-button-solid:before{
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #RPsbs-248 .cs-button-solid:hover:before{
        width: 100%;
    }
    #RPsbs-248 .cs-picture {
        width: 100%;
        max-width: 27.125rem;
        margin: 0;
        
        position: relative;
        display: block;
        /* width divided by height */
        
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }
    #RPsbs-248 .cs-picture img{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        -o-object-fit: contain;
           object-fit: contain;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RPsbs-248 .cs-container{
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #RPsbs-248 .cs-lines{
        height: 100%;
        width: 35%;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    #RPsbs-248 .cs-lines:before{
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RPsbs-248 .cs-lines:after {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        /* FF3.6-15 */
        background: -webkit-linear-gradient(
            top,
            rgba(250, 251, 252, 0.5) 0%,
            rgba(250, 251, 252, 0) 100%
        );
        /* Chrome10-25,Safari5.1-6 */
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        /* flips vertically */
        transform: scaleY(-1);
    }
    #RPsbs-248 .cs-picture {
        /* 344px - 434px */
        width: clamp(21.5rem, 37.5vw, 27.125rem);
        flex: none;
    }
    #RPsbs-248 .cs-content {
        max-width: 33.875rem;
        margin: 0;
        width: 45%;
    }
}

 #pricing-33 {
        padding: 0 1em;
        background-color: #020911;
        position: relative;
        z-index: 1;
        padding: var(--sectionPadding)
    }

      /* Base styles scoped under .pricing-plans */






#pricing-33 > div > span {

  text-align: center;
}





#pricing-33 .cs-title3 {
  text-align: center;
  align-content: center;
  font-family: 'oswald';
   font-size: clamp(2.125rem, 6.4vw, 3.8125rem);
text-transform: uppercase;

        font-weight: 900;
        line-height: 1.2em;
        text-align: center;
        width: 100%;
        margin: 0 auto 1rem;
        color: white;
        position: relative;
        font-size: clamp(1.9375rem, 3.9vw, 3.0625rem);;
}



  #pricing-33 .cs-text3 {
    text-align: center;
    color: #fff;
    font-family: 'source sans 3';
     font-size: 1rem;
      max-width: auto;
        width: 100%;
  z-index: 22;
  max-width: 48.125rem; /* MATCHING YOUR .cs-flex-group width */
  margin: 0 auto clamp(2rem, 4vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }

  #pricing-33 .pricing-plans .outer-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0 20px;
	
  }
 #pricing-33  .pricing-plans .pricing-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 auto;
  }
  #pricing-33  .pricing-plans .pricing-card {
    background-color: #03090e;
    border-radius: 12px;
    padding: 40px;
    flex: 1 1 0;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
  }
   #pricing-33    .pricing-plans .pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
  }
    #pricing-33  .pricing-plans .pricing-card.highlighted {
    background-color: #000;
    border: 1px solid #fff;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
  }
 #pricing-33  .pricing-plans .pricing-card-title {
    font-weight: 700;
    font-size: 32px;
    margin: 0 0 20px;
    color: #fff;
    letter-spacing: 0.5px;
    text-align: center;
	  font-family: 'Oswald';
  }
 #pricing-33  .pricing-plans .features {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'source sans 3';
    color: white;
  }
 #pricing-33  .pricing-plans .feature {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    color: inherit;
  
    font-size: 16px;
    font-family: 'Source Sans 3', sans-serif;
  }
 #pricing-33  .pricing-plans .check,
  .pricing-plans .cross {
    width: 24px;
    text-align: center;
    color: inherit;
    font-family: 'oswald';
    color: white;
  }
 #pricing-33   .pricing-plans .check {
    font-size: 20px;
  }
  .pricing-plans .cross {
    font-size: 24px;
  }
 #pricing-33  .pricing-plans .price-container {
    text-align: left;
    margin: 24px 0 12px;
  }
 #pricing-33  .pricing-plans .price {
    font-weight: 700;
    font-size: 42px;
    letter-spacing: 0.5px;
	  font-family: 'Oswald';
    color: #fff; ;
  }
 #pricing-33  .pricing-plans .pricing-period {
    font-size: 18px;
    color: #a8b2bd;
    font-weight: normal;
    font-family: 'source sans 3';
    margin-left: 8px;
  }
 #pricing-33  .pricing-plans button {
    width: 100%;
    background-color: #fff;
    color: #000;
    border: none;
    padding: 16px;
    font-size: 16px;
    font-family: 'oswald';
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
 #pricing-33  .pricing-plans button:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
  }
  /* Flicker Animation for Glow Effect */
  @keyframes flicker {
    0% {
      box-shadow: 
        inset 0 0 20px rgba(127, 219, 255, 0.2),
        inset 0 0 50px rgba(80, 120, 160, 0.25),
        0 0 10px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(127, 219, 255, 0.15),
        0 0 40px rgba(127, 219, 255, 0.1);
    }
    50% {
      box-shadow: 
        inset 0 0 30px rgba(127, 219, 255, 0.25),
        inset 0 0 70px rgba(80, 120, 160, 0.3),
        0 0 12px rgba(255, 255, 255, 0.15),
        0 0 30px rgba(127, 219, 255, 0.2),
        0 0 50px rgba(127, 219, 255, 0.15);
    }
    100% {
      box-shadow: 
        inset 0 0 20px rgba(127, 219, 255, 0.2),
        inset 0 0 50px rgba(80, 120, 160, 0.25),
        0 0 10px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(127, 219, 255, 0.15),
        0 0 40px rgba(127, 219, 255, 0.1);
    }
  }
 #pricing-33  .pricing-plans .glow-cell {
    border-radius: 12px;
    animation: flicker 4s infinite alternate ease-in-out;
  }
  
  /* Responsive styling for screens under 1199px */
  @media (max-width: 1199px) {
  #pricing-33   .pricing-plans .pricing-card-title {
      font-size: 28px;
    }
  #pricing-33   .pricing-plans .feature {
      font-size: 16px;
      margin: 8px 0;
    }
 #pricing-33    .pricing-plans .price {
      font-size: 36px;
    }
  #pricing-33   .pricing-plans .pricing-period {
      font-size: 16px;
     
    }
  #pricing-33   .pricing-plans button {
      font-size: 16px;
    }
  #pricing-33   .pricing-plans .pricing-card {
      padding: 30px;
    }
  }
  
  /* Responsive styling for screens under 991px:
     Two cells per row, with the third centered. */
@media (max-width: 991px) {
 #pricing-33  .pricing-plans .pricing-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
 #pricing-33  .pricing-plans .pricing-card {
    flex: 0 0 48%;
    padding: 20px; /* compressed cell padding */
  }
 #pricing-33  .pricing-plans .pricing-card:nth-child(3) {
    margin-left: auto;
    margin-right: auto;
  }
 #pricing-33  .pricing-plans .pricing-card-title {
    text-align: left; /* align title to left */
  }
 #pricing-33  .pricing-plans button {
    width: 200px;           /* make button width smaller */
    display: inline-block; /* allow width to shrink */
    text-align: center;    /* center the text within the button */
    margin: 0;             /* ensure the button aligns to the left */
  }
 #pricing-33  .pricing-plans .feature {
    margin: 8px 0; /* reduced gap between li items */
  }
}
/* Responsive styling for screens under 767px:
   Adjust layout to a single column, compress cells,
   left-align titles, and adjust button styles. */
@media (max-width: 767px) {
#pricing-33   .pricing-plans .outer-container {
    max-width: 520px;
    padding: 20px 0;
  }
#pricing-33   .pricing-plans .pricing-container {
    flex-direction: column;
    align-items: center;
	    gap: 50px;
	  
	  
  }
 #pricing-33  .pricing-plans .pricing-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px; /* further compressed cell padding */
  }
 #pricing-33  .pricing-plans .pricing-card-title {
    font-size: 24px;
    text-align: left; /* align title to left */
    margin-bottom: 12px; /* reduced bottom margin for a compressed look */
  }
 #pricing-33  .pricing-plans .price {
    font-size: 30px;
  }
 #pricing-33  .pricing-plans .pricing-period {
    font-size: 16px;
  }
 #pricing-33  .pricing-plans .feature {
    margin: 6px 0; /* further reduced gap between li items */
  }
  /* Retain the extra gap between the feature text and its icon */
#pricing-33   .pricing-plans .feature span {
    margin-left: 10px;
  }
 #pricing-33  .pricing-plans button {
    font-size: 16px;
    width: 200px;           /* make button width smaller */
    display: inline-block; /* allow width to shrink */
    text-align: center;    /* center the text within the button */
    margin: 0;             /* align button to the left */
  }
}
	
	
	

	
	
	@media (max-width: 575px) {
 #pricing-33  .pricing-plans .outer-container {
    max-width: 360px;
    padding: 20px 0;
  }
 #pricing-33  .pricing-plans .pricing-container {
    flex-direction: column;
    align-items: center;
  }
 #pricing-33  .pricing-plans .pricing-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px; /* further compressed cell padding */
  }
 #pricing-33  .pricing-plans .pricing-card-title {
    font-size: 24px;
    text-align: left; /* align title to left */
    margin-bottom: 12px; /* reduced bottom margin for a compressed look */
  }
 #pricing-33  .pricing-plans .price {
    font-size: 28px;
  }
 #pricing-33  .pricing-plans .pricing-period {
    font-size: 16px;
  }
 #pricing-33  .pricing-plans .feature {
    margin: 1px 0; /* further reduced gap between li items */
  }
  /* Retain the extra gap between the feature text and its icon */
 #pricing-33  .pricing-plans .feature span {
    margin-left: 10px;
  }
#pricing-33  .pricing-plans button {
  font-size: 16px;
  width: 180px;
  height: 40px;
  display: inline-flex;       /* Enables flexbox */
  align-items: center;        /* Centers content vertically */
  justify-content: center;    /* Centers content horizontally */
  text-align: center;
  margin: 0;
}
}
	
	












	
	/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #steps-889 {
        padding: var(--sectionPadding);
       background-color: #020911;
    }
    #steps-889 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #steps-889 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #steps-889 .cs-text {
        max-width: 66.5rem;
          font-family: 'source sans 3';
        color: white;
        font-size: 1rem;
    }
    #steps-889 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #steps-889 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #steps-889 .cs-button-solid:hover:before {
        width: 100%;
    }
    #steps-889 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 20px - 40px */
        gap: clamp(1.25rem, 3vw, 2.5rem);
    }
    #steps-889 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        max-width: 20.375rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #steps-889 .cs-picture {
        margin-bottom: 1.5rem;
        width: 4.5rem;
        height: 4.5rem;
        background-color: rgba(226, 80, 26, 0);
        border-radius: 1rem 0 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #steps-889 .cs-h3 {
        font-size: 1.25rem;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        font-family: 'oswald';
        color: white;
        text-transform: uppercase;
    }
    #steps-889 .cs-item-p {
        font-size: 1rem;
        line-height: 1.5em;
        text-align: inherit;
        margin: 0;
        font-family: 'source sans 3';
        color: white;
    }
    #steps-889 .cs-arrow {
        /* 48px - 80px */
        width: clamp(3rem, 6vw, 5rem);
        height: auto;
        display: block;
        flex: none;
        transform: rotate(90deg);
    }
    #steps-889 .cs-arrow-img {
        width: 100%;
        display: block;
    }
    #steps-889 .cs-icon {
        width: 3.5rem;
        height: auto;
        display: block;
    }
      
    #steps-889 .cs-title {
       color: white;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #steps-889 .cs-card-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    #steps-889 .cs-arrow {
        align-self: center;
        transform: rotate(0deg);
    }
}

                                
	



 /* -------------------------------------
       UNDERWATER CTA SECTION
    ------------------------------------- */
    .underwater-cta {
      position: relative;
      width: 100vw;  /* changed from 100% to 100vw */
      margin-left: calc(50% - 50vw);  /* centers full-width section */
      min-height: 60vh;
      padding: 60px 20px 0;
      background: linear-gradient(180deg, #020911 0%, #0b1a2e 100%);
      overflow: hidden;
    }

    /* Light radial fade in the background */
    .underwater-cta::before {
      content: "";
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180%;
      height: 180%;
      background: radial-gradient(circle, rgba(255,255,255,0.03) 5%, rgba(0,0,0,0.1) 80%);
      filter: blur(400px);
      opacity: 0.4;
      mix-blend-mode: overlay;
      pointer-events: none;
    }

    /* -------------------------------------
       TWO-LINE HEADING
    ------------------------------------- */
    .heading-cta {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;             /* bold */
      text-align: center;
      color: #ffffff;
      line-height: 1.2;
      margin: 0 auto 40px;          /* bottom spacing before the rest */
      display: block;
      max-width: 90%;               /* limit width on very wide screens */
          font-size: clamp(1.875rem, 6vw, 3.4375rem);

    }
  

    /* BUBBLES */
    .bubble {
      position: absolute;
      bottom: -50px;
      width: 20px;
      height: 20px;
      background: #ffffff;
      border-radius: 50%;
      opacity: 0.15;
      animation: rise 8s infinite ease-in;
    }
    .bubble:nth-child(1) { left: 20%; animation-delay: 0s; }
    .bubble:nth-child(2) { left: 35%; width: 15px; height: 15px; animation-duration: 6s; animation-delay: 2s; }
    .bubble:nth-child(3) { left: 50%; width: 25px; height: 25px; animation-duration: 10s; animation-delay: 1s; }
    .bubble:nth-child(4) { left: 65%; animation-duration: 7s; animation-delay: 3s; }
    .bubble:nth-child(5) { left: 80%; width: 15px; height: 15px; animation-duration: 5s; animation-delay: 1s; }

    @keyframes rise {
      0%   { transform: translateY(0) scale(1); }
      40%  { transform: translateY(-200px) scale(0.85); }
      100% { transform: translateY(-600px) scale(0.7); opacity: 0; }
    }

    /* SEA PLANTS (LEFT) */
    .sea-plants {
      position: absolute;
      bottom: 0;
      left: 5%;
      height: 30%;
      width: 15%;
      z-index: 9;
    }
    .plant {
      position: absolute;
      bottom: 0;
      background: linear-gradient(180deg, #0f2b15, #081a0d);
      width: 8px;
      border-radius: 4px 4px 0 0;
      animation: sway 3s infinite ease-in-out alternate;
    }
    .plant:nth-child(1) {
      height: 80%;
      left: 0;
      animation-duration: 4s;
    }
    .plant:nth-child(2) {
      height: 60%;
      left: 15px;
    }
    .plant:nth-child(3) {
      height: 90%;
      left: 30px;
      animation-duration: 5s;
    }
    .plant:nth-child(4) {
      height: 70%;
      left: 45px;
    }

    @keyframes sway {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(5deg); }
    }

    /* CORAL PLANTS (CENTER) */
    .coral-plants {
      position: relative;
    }
    .coral-plant {
      position: absolute;
      bottom: 0;
      width: 40px;
      height: 60px;
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA7CAYAAABqp1UIAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEB0lEQVR4nO2aU2kUQRCGL0oaB7FD9A0QKFYF6AIagHb2A5KoNXcgBLqQw8p66Qlr56s8vFR8/8Y7njMjKzI0osB4kMOZ0PkJe3YoNhEhzLLu8DwI1tEt7L1F7uJNAUet7TXUtnXAcBynmT4AB8XHtIFofnX9lZ/p6xZGgiCw30I5b9HGnXQNoT9Nkyk+zawZVRvdEk4LRr0COvX/Xy59EeJ3F//k72CHL6lIj7/+y9ekJg4UqMm3Y+p6ihr8I/h3zaAI21zMev21hFGMlTCH2yXcALwd9K7A2Qfpo/k4LIGlJKlXthDu5gM0iWFHLbSQYMCSvTTsn12AqSGYWFiUV9z0UkSpKIGaTUkLVMRk1pVmdr9/Nb2C3ALuy+PU6bSFEyKyM2LpNCC6ToSNb1dEydpESa8Vz4DsD2F9bcMHA6cAFaCPayq3oE5kdc0ap0FOewrrUKimq3OS0qn0Qa6RUpG5SaNKbq6oq4S3UDz6m0b9DyY52qdKJpgoQBNozk/zgjDEBoVWJBXgCUKn6CchzoIUBENwDm+gBWkWBBJ5sOJ43pppOD4hIh0CWDACXC6XeQ2cARhgNBwaNOvX7/fgZ5FGL3NF85AFzANZSAm7YObzbYHnJ8CTADkF4VnQZby+ar7OWiw4YcC3Ref3Wp3d0H2uFa4sr4IMuE3lgBB9yJg/gp7jNe/f3Ad/CZMAWLBq2EQA9NUAd3uOHx6//wDtUGzC5iCBl/EbCwfINZvD8rdtyga+Fov1Fe3WR30zXsRCAAAAAElFTkSuQmCC')
        no-repeat center/contain;
      animation: coralSway 3s infinite ease-in-out alternate;
      opacity: 0.85;
    }
    .coral-plant:nth-child(1) { left: 0; height: 70px; }
    .coral-plant:nth-child(2) { left: 40%; transform: scale(1.2); }
    .coral-plant:nth-child(3) { left: 75%; bottom: 10px; }

    @keyframes coralSway {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(4deg); }
    }

    /* SEA FLOOR DECOR (RIGHT) */
    .sea-floor-decor {
      position: absolute;
      bottom: 3%;
      right: 5%;
      height: 25%;
      width: 15%;
      z-index: 6;
    }
    /* Shells */
    .shell {
      position: absolute;
      width: 50px;
      height: 25px;
      background: radial-gradient(circle at bottom, #4f4f4f, #2f2f2f);
      border-radius: 50px 50px 0 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    .shell:nth-child(1) {
      bottom: 0;
      left: 20%;
    }
    .shell:nth-child(2) {
      bottom: 15px;
      left: 60%;
      transform: rotate(4deg);
    }
    /* Rocks */
    .rock {
      position: absolute;
      background: linear-gradient(160deg, #2d373a, #141718);
      border-radius: 30% 70% 40% 60% / 40% 40% 60% 60%;
      box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.6);
    }
    .rock:nth-child(3) {
      width: 50px;
      height: 30px;
      bottom: 0;
      left: 0;
    }
    .rock:nth-child(4) {
      width: 70px;
      height: 45px;
      bottom: 10px;
      left: 40%;
      transform: rotate(10deg);
    }

    /* WAVES */
    .wave-container {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 35%;
      overflow: hidden;
      z-index: 5;
    }
    .wave {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .wave svg {
      display: block;
      width: 100%;
      height: 101%;
    }

    /* SIGN (FLOATING) */
    .sign-container {
      position: absolute;
      bottom: 100px; /* space above the waves; adjust as needed */
      right: 8%;
      z-index: 10;
      animation: signFloat 3s ease-in-out infinite alternate;
    }
    @keyframes signFloat {
      0%   { transform: translateY(0); }
      100% { transform: translateY(-6px); }
    }
    .sign-container::before {
      /* Glowing background behind the sign */
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 430%;
      height: 220%;
      background: radial-gradient(circle, rgba(0,180,255,0.4), transparent 60%);
      border-radius: 50%;
      filter: blur(25px);
      z-index: -1;
      pointer-events: none;
    }
    .sign {
      position: relative;
      display: inline-block;
      background: linear-gradient(135deg, #1f2427, #131618);
      border: 3px solid #0f1112;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
      text-decoration: none; /* Remove underline for link */
      padding: 20px;
    }
    .sign::before {
      /* The stick for the sign */
      content: "";
      position: absolute;
      bottom: -90px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 90px;
      background: #0f1112;
      border-radius: 3px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
      border-left: #000000 2px solid;
      border-right: #000000 2px solid;
    }
    .sign-text {
      font-family: 'Oswald', sans-serif;
      font-weight: 600; /* semi-bold */
      text-transform: uppercase;
      color: white;
      text-align: center;
      display: block;
      letter-spacing: 1px;
      font-size: 20px;
    }

    /* EXTRA DECOR */
    .ground-overlay {
      position: absolute;
      bottom: -10%;
      width: 85%;
      height: 11%;
      background: rgb(0, 0, 0);
      border-radius: 50%;
      box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.8);
      z-index: 9;
      transform: rotate(-6deg);
    }
    .signshadow {
      position: absolute;
      bottom: -8%;
      left: 45%;
      width: 170%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(200, 200, 255, 0.4), rgba(0, 0, 0, 0));
      transform: translateX(-50%) rotateX(50deg);
      filter: blur(30px);
      opacity: 0.65;
      z-index: 10; /* Above rocks but below overlay */
    }
.wave-path-1 {
  fill: #04101e;
  fill-opacity: 1;
}

.wave-path-2 {
  fill: #000000;
  fill-opacity: 1;
}

    /* -------------------------------------
       MEDIA QUERIES
       (exact breakpoints)
    ------------------------------------- */
    /* PHONE (PORTRAIT) – ≤575px = 24px heading */
    @media (max-width: 575px) {
  
      .sign {
        padding: 16px;
      }
      .sign-text {
        font-size: 16px;
      }
      .underwater-cta {
        padding: 40px 20px 0; /* reduced mobile padding */
        min-height: 60vh;
      }
    }

    /* PHONE (LANDSCAPE) – 576px to 767px = 30px heading */
    @media (min-width: 576px) and (max-width: 767px) {
    
      .sign {
        padding: 18px;
      }
      .sign-text {
        font-size: 18px;
      }
      .underwater-cta {
        padding: 50px 20px 0; /* reduced padding */
      }
    }

    /* TABLET (PORTRAIT) – 768px to 991px = 36px heading */
    @media (min-width: 768px) and (max-width: 991px) {
   
      .sign {
        padding: 18px;
      }
      .sign-text {
        font-size: 18px;
      }
      .underwater-cta {
        padding: 55px 20px 0; /* reduced padding */
      }
    }

    /* LAPTOP – 992px to 1199px = 44px heading */
    @media (min-width: 992px) and (max-width: 1199px) {
    
      .sign {
        padding: 20px;
      }
      .sign-text {
        font-size: 20px;
      }
      .underwater-cta {
        padding: 60px 20px 0; /* reduced padding */
      }
    }

    /* DESKTOP – 1200px to 1399px = 48px heading */
    @media (min-width: 1200px) and (max-width: 1399px) {
     
      .sign {
        padding: 20px;
      }
      .sign-text {
        font-size: 20px;
      }
      .underwater-cta {
        padding: 60px 20px 0; /* reduced padding */
      }
    }

    /* LARGE MONITOR – ≥1400px = 52px heading */
    @media (min-width: 1400px) {
  
      .sign {
        padding: 20px;
      }
      .sign-text {
        font-size: 20px;
      }
      .underwater-cta {
        padding: 60px 20px 0; /* reduced padding */
      }
    }