html {
  background-color: #ffffff; /* your dark background */
}

/* Light Mode Overrides: Show Moon, Hide Sun */
#theme-toggle .sun {
  opacity: 0 !important;
  transform: scale(0);
}
#theme-toggle .moon {
  opacity: 1 !important;
  transform: scale(1);
}

/* Moon Icon Styling */
#theme-toggle .moon path {
  fill: #000 !important; /* Black moon */
}


/* Light Mode Color Overrides */
/* Light Mode Color Overrides for Header Elements */

/* Site Header */
#header-section .site-header {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
#header-section .site-header::before {
  background-color: #ffffff !important;
}
#header-section .site-header.sticky::before {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Logo */



/* Light Mode Styles – lightmode.css */
/* Light Mode Styles – lightmode.css */

/* Override the logo image and apply the vertical flip animation for light mode */
#header-section .logo img {
/*content: url("https://cssdelivefs.sfo3.cdn.digitaloceanspaces.com/DELmarblck.png") !important;
 filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5)) !important; */
animation: flipLight 0.6s ease-in-out !important;
filter: invert(1);
}

/* Define the vertical flip animation for light mode */
@keyframes flipLight {
0% {
  transform: rotateX(0deg);
  opacity: 1;
}
50% {
  transform: rotateX(90deg);
  opacity: 0;
}
50.1% {
  transform: rotateX(90deg);
  opacity: 0;
}
100% {
  transform: rotateX(0deg);
  opacity: 1;
}
}
#header-section .get-started:hover span {
color: #001f3f !important;
}




.cs-topper{
color: #0cbcf5 !important; 
}





/* -----------------------------------------
 LIGHT MODE OVERRIDES (no theme selector)
 Place this AFTER your main CSS
 ----------------------------------------- */

 :root {
  /* Page background & text colors */
  --color-bg: #ffffff !important;    /* Overall background */
  --color-text: #1a1a1a !important;  /* Dark text on light BG */

  /* Basic “white” and “black” in the new scheme */
  --color-white: #ffffff !important;
  --color-black: #000000 !important;

  /* Accent color for highlights/links (adjust if desired) */
  --color-accent: #47bbf6 !important; /* example: a bright blue link */

  /* Sun icon colors can stay the same or be changed for your light mode */
  --color-sun-circle: #FFD700 !important;
  --color-sun-ray: #FFA500 !important;

  /* Shadows and header box-shadow more suitable for a light background */
  --shadow-rgba1: rgba(0, 0, 0, 0.15) !important;
  --shadow-rgba2: rgba(0, 0, 0, 0.1) !important;
  --shadow-header: 0 4px 12px var(--shadow-rgba1),
                   0 -2px 8px var(--shadow-rgba2) !important;

  /* GET STARTED BUTTON COLORS (Light Mode) */
  --color-button-grad-start: #001f3f !important; /* Navy */
  --color-button-grad-end:   #001f3f !important; /* Same navy => solid color */
  --color-button-hover:      #47bbf6 !important; /* Lighter blue for “::before” */
  --color-text-dark:         #fafbfc !important; /* Near-white text inside button */
}

/* -----------------------------------------
   SPECIFIC ELEMENT OVERRIDES FOR VISIBILITY
   ----------------------------------------- */











#hero-358 .hero-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;            /* adjust height */
  background: #ffffff00;     /* color or gradient */
  z-index: -2;              /* above background, below content */
  display: none;
}




/* Nav menu links (so they don't stay white on a white BG) */
#header-section .menu a {
  color: var(--color-text) !important;
  text-shadow: none !important;
}
#header-section .menu a:hover {
  color: var(--color-accent) !important;
  text-shadow: none !important;
}

/* Dropdown menu background & text */


#header-section .dropdown-menu a {
  color: var(--color-text) !important;
}
#header-section .dropdown-menu a:hover {
  color: var(--color-accent) !important;
}

/* Ensure “Get Started” button picks up your custom (navy) color scheme */
#header-section .get-started {
  background: var(--color-button-grad-start) !important;
  color: var(--color-text-dark) !important;
  transition: background 0.4s ease-in-out, color 0.3s ease !important;
}
#header-section .get-started::before {
  background: var(--color-button-hover) !important;
  transition: width 0.3s ease-in-out !important;
}
#header-section .get-started span {
  color: var(--color-text-dark) !important;
  transition: color 0.3s ease !important;
}
#header-section .get-started:hover span {
  color: var(--color-button-grad-start) !important; 
  /* flips to navy text on hover, matching your original request (#001f3f) */
}



/* For the mobile nav “active” box shadow */


/* For the dropdown menu borders and optional box-shadow */








#header-section .dropdown-menu {

background: var(--color-bg) !important;


border-bottom: 2px solid var(--color-button-grad-start) !important; 

box-shadow: none !important;

}


@media (min-width: 992px) {
  #header-section .dropdown-menu {
    /* No flicker on large screens */
    animation: none;
    box-shadow: none; /* No need for !important here */
  }
}

/* text area itself box round design  cotainer. not the white bg color somehow */


/* Show dropdown only when active  SERVICES MENU PADDING*/ 
#header-section .menu li.active .dropdown-menu {
max-height: 500px;
opacity: 1;
/* transform: translateX(-50%) scaleY(1);*/
transform: scaleY(1);  
overflow: visible;
padding-left: 0px;
}

/* Fade in the text inside when the dropdown becomes visible */
#header-section .menu li.active .dropdown-menu li {
opacity: 1;

}


#header-section .dropdown-menu a {
color: var(--color-button-grad-start) !important;
}

#header-section .dropdown-menu a:hover {
color: var(--color-white) !important;

filter: none !important;

background: var(--color-button-grad-start) !important;

}

#header-section .hamburger .bar {

  background-color: var(--color-black) !important;
}



@media (max-width: 991px) {
  /* your CSS rules here */


#header-section nav.active {

  border-top: 0px solid rgba(0, 0, 0, 0.4) !important;
  border-bottom: 0px solid rgba(0, 0, 0, 0.4) !important;

}
#header-section .dropdown-menu {
  background-color: var(--color-white) !important;
  border-top: 2px solid rgba(0, 0, 0, 0.2) !important;
  border-bottom: 6px solid rgba(255, 255, 255, 1) !important;
  border: 2px solid var(--color-button-grad-start) !important;
  border-radius: 12px !important;
  animation: none !important;

}


}









/* start of scene css 
*/
/* --- Sky -----------------------------------------------------------------*/

/* very faint, daylight twinkles */
.star-clusters {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,.12), transparent),
    radial-gradient(1px 1px at 50px 160px,rgba(255,255,255,.12), transparent),
    radial-gradient(2px 2px at 200px 20px,rgba(255,255,255,.15), transparent);
}

/* soft atmospheric haze */
.celestial-glow {
  background: linear-gradient(45deg,
              #a8d8ff 0%,
              #caf0ff 50%,
              #ffffff 100%);
  opacity: .5;
    inset: -2rem 0 0 0; /* push down */
}

/* horizon mist */
.drifting-haze {
  background: linear-gradient(to bottom,
              rgba(179, 0, 0, 0.6),
              rgba(255,255,255,.25),
              transparent);
}

/* mountains in sunlit haze */
.shadowed-peaks {
  background:
    url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" preserveAspectRatio="none">\<path fill="%2377a9e3" d="M0,200 L100,100 L150,150 L200,50 L250,120 L300,80 L350,160 L400,90 L450,140 L500,60 L500,200 Z"/>\</svg>') no-repeat right bottom / contain;
}

/* thin horizon gleam */
.horizon-gleam {
  background: linear-gradient(to top,
              rgba(192, 14, 14, 0.6),
              transparent);
  opacity: .25;
}

/* --- Sun & glow ----------------------------------------------------------*/
.moon-sphere {  /* now the sun */
  background: radial-gradient(ellipse at 52% 70%,
              #fffbd2 15%,
              #ffe37a 35%,
              #ffd05b 60%,
              #ffbf3f 80%);
}
.moon-sphere::before { background: none; }  /* no craters */

.moon-glow {
  background: radial-gradient(circle,
              #fffbe2 0%,
              rgba(255,255,255,0) 100%);
  opacity: .25;
}

/* sun shimmer on water */
.moon-secondary-glow {
  background: radial-gradient(ellipse 70% 100% at center,
              rgba(255,255,255,.18) 0%,
              rgba(250,250,210,.09) 45%,
              rgba(0,0,0,0) 100%);
  opacity: .4;
}

/* sun reflection */
.moon-reflection {
  background: radial-gradient(ellipse 50% 95% at center,
              rgba(255,255,255,.45) 0%,
              rgba(255,255,255,.35) 10%,
              rgba(240,250,255,.25) 25%,
              rgba(220,245,255,.15) 40%,
              rgba(190,235,255,.10) 55%,
              rgba(150,225,255,.07) 70%,
              rgba(100,200,255,.05) 85%,
              rgba(0,0,0,0) 100%);
  opacity: .35;
}

/* --- Ocean ----------------------------------------------------------------*/
.night-ocean {
  background: linear-gradient(to bottom,
              #7ccfff 0%,   /* bright aqua */
              #bdeeff 100%  /* pale turquoise */
            );
}

/* far wave */
.night-ocean .far-wave {
  background-image: url('data:image/svg+xml;utf8,\<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg">\<path fill="%2377c8ff" d="M0,60 C500,120 1420,-50 1920,60 L1920,200 L0,200 Z"/>\</svg>');
  opacity: .35;
}

/* mid wave */
.night-ocean .mid-wave {
  background-image: url('data:image/svg+xml;utf8,\<svg width="1920" height="220" xmlns="http://www.w3.org/2000/svg">\<path fill="%239fd9ff" d="M0,80 C500,180 1420,-30 1920,90 L1920,220 L0,220 Z"/>\</svg>');
  opacity: .25;
}

/* front wave – gradient from mid-wave blue to white */
.night-ocean .front-wave {
  /* blue-to-white surf */
  background: linear-gradient(to bottom,#9fd9ff 0%,#ffffff 100%);
  /* same wave shape used as a mask */
  -webkit-mask: url('data:image/svg+xml;utf8,\<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg">\<path d="M0,50 C400,150 1520,-50 1920,50 L1920,200 L0,200 Z" fill="black"/>\</svg>') bottom center / cover no-repeat;
          mask: url('data:image/svg+xml;utf8,\<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg">\<path d="M0,50 C400,150 1520,-50 1920,50 L1920,200 L0,200 Z" fill="black"/>\</svg>') bottom center / cover no-repeat;
}
.night-ocean .front-wave {
  /* blue-to-white surf */
  background: linear-gradient(to bottom,#9fd9ff 0%,#ffffff 55%);
  /* same wave shape used as a mask */
  -webkit-mask: url('data:image/svg+xml;utf8,\<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg">\<path d="M0,50 C400,150 1520,-50 1920,50 L1920,200 L0,200 Z"/>\</svg>') bottom center / cover no-repeat;
          mask: url('data:image/svg+xml;utf8,\<svg width="1920" height="200" xmlns="http://www.w3.org/2000/svg">\<path d="M0,50 C400,150 1520,-50 1920,50 L1920,200 L0,200 Z" />\</svg>') bottom center / cover no-repeat;
}

/* --- Extra stars hidden in daylight --------------------------------------*/
.extra-stars { background-image: none; opacity: .1; }





/* other stuff*/


.ocean-sparkle {
  display: block !important;
  /* Remove the opacity override so the animation can control it */
  /* And do not override the animation shorthand so inline delays are respected */
}



/* For the dropdown menu borders and optional box-shadow */
:root {
  /* SKY: Rich daytime gradient: warm near horizon, bright at zenith */
  --sky-color-start: hsl(198, 90%, 75%) !important;
  --sky-color-mid:   hsl(200, 95%, 90%) !important;
  --sky-color-end:   hsl(205, 100%, 97%) !important;

  /* OCEAN: Light, tropical blues */
  --day1: #1d88b9 !important; /* Lighter wave color at bottom */
  --day2: #4dc0ed !important; /* Deeper wave color toward top of water */

  /* Light beams, flares, etc. (was “shooting-star” in the night version) */
  --shooting-star: linear-gradient(to bottom, rgba(255,255,255,0), #fff) !important;
  --star-twinkle-duration: 2s !important;

  /* Sun & reflection intensities */
  --sun-glow-opacity: 0.35 !important;
  --sun-reflection-opacity: 0.35 !important;
}



/* Full Viewport: Daytime sky background */
.night-sky-scene {
  background: linear-gradient(45deg, 
      hsla(195, 100%, 90%, 1) 0%, 
      hsla(205, 90%, 80%, 1) 30%, 
      hsla(215, 80%, 70%, 1) 100%);
}





/* Hide */
.star-clusters {
  display: none !important;
}



/* Light "fog" or haze near horizon */
.drifting-haze {
  background: linear-gradient(to bottom, rgb(236, 236, 237), rgba(117, 146, 232, 0.384), transparent);
}

/* Mountains: lighter silhouettes, tinted slightly green/gray/blue */
.shadowed-peaks {
 
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" preserveAspectRatio="none"><path fill="%238faea4" d="M0,200 L100,100 L150,150 L200,50 L250,120 L300,80 L350,160 L400,90 L450,140 L500,60 L500,200 Z"></path></svg>') no-repeat right bottom;
}

/* Bright horizon line just above ocean */
.horizon-gleam {
  opacity: 1;
  background: linear-gradient(to top, rgb(121, 156, 237), transparent);
}


/* Sun container (formerly moon) */











 .moon-sphere {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 45% 35%,
        rgba(255, 255, 200, 1) 5%,
        rgba(255, 255, 150, 0.95) 20%,
        rgba(255, 240, 100, 0.9) 40%,
        rgba(255, 220, 80, 0.85) 65%,
        rgba(240, 200, 60, 0.8) 85%
    );  
    z-index: 9;
    overflow: hidden;
}

      
        .moon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px; 
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle, 
        rgba(255, 255, 100, 0.8) 0%, 
        rgba(247, 241, 175, 0.884) 20%, 
        rgba(247, 247, 246, 0.461) 50%,
        transparent 100%
    );
    opacity: 0.6;
    filter: blur(30px);
    z-index: 8;
    pointer-events: none;
    animation: pulseGlow 2s ease-in-out infinite alternate;
}
        @keyframes pulseGlow {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.8;
            }
        }



.moon-secondary-glow {
    position: absolute;
    bottom: 55%;
    left: 50%;
    width: 180%;
    height: 30%;
    transform: translateX(-50%);
    background: rgb(25, 82, 174);
    opacity: 0.45;
    filter: blur(35px);
    pointer-events: none;
}

.moon-reflection {
   display: none;
}


#hero-358 > div > div.cs-flex-group > span{
  color: #091c38;
}
#hero-358 > div > div.cs-flex-group > h1 {
  color: #091c38;
}
#hero-358 > div > div.cs-flex-group > p
{
  color: #000000;
}
 #hero-358::after {
  
 
  background: #ffffff; /* your desired bottom color */
  
}
.glowfillbtn

{
  background-color: #091c38;
  color: white;
}
.glowfillbtn:hover

{
  color: #091c38
}



    #services-966 {
       
        background-color: #ffffff;
    }

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

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

    #services-966 .cs-title {
        max-width: 20ch;
        color: rgb(0, 0, 0);
    }

    
.linebtn {

  color: #000000; /* Light text */

}

.linebtn::after {
  background-color: #ffffff; /* Light blue underline */
}





 
    #services-966 .cs-fake-link {
      
        color:#000
    }

    #services-966 .cs-fake-link:hover:before {
      
        background-color: #091c38;
       
    }

   
   #services-966 .cs-fake-link:before {

        background: rgb(0, 0, 0);
        
    }

 #services-966 .cs-item:hover .cs-fake-link:hover {
        color: rgb(255, 255, 255);
        
    }

 #services-966 .cs-item:hover .cs-fake-link {
        color: rgb(0, 0, 0);
    }




  #services-966 .cs-item:hover .cs-h3 {
        color:white;
    }
  
    
  #services-966 .cs-link {
        
        background-color: #a0c4ff;
       
    }




   #services-966 .cs-icon-wrapper,  #services-966 .cs-item:hover .cs-icon-wrapper 
    {
         color: white; /*text colro */
         background-color: #091c38;
       
    }

      

       
    


 #services-966 .cs-item .cs-h3,
 #services-966 .cs-item:hover .cs-h3 {
        color:#000000;
    }
     #services-966 .cs-item .cs-item-text,
    #services-966 .cs-item:hover .cs-item-text {
       color: #000000;
    }


 #services-966 .cs-item:hover .cs-background {
        opacity: 1;
    background: linear-gradient(to bottom, #a0c4ff 0%, #ffffff 100%);

    }


 

   #services-966 .cs-item:hover .cs-graphic {
    opacity: 1;
    bottom: -1px;
    filter: invert(0.79);
    
    
   }
   #services-966 .cs-item:hover .cs-fake-link:hover {
       color: white;
    }

/*corner*/
#services-966 .cs-background::after {
       
        background-color: #091c38;
        
    }






#sbs-1362 > div.cs-container > div.cs-content > h2
{
  color: black;
}
#sbs-1362 > div.cs-container > div.cs-content > h2 > span
{
  color: #0cbcf5;
}

#sbs-1362 > div.cs-container > div.cs-content > p
{

  color: #000;
}

 #sbs-1362 #list-1597 .cs-h3 {
   
        color: #000000;
  
    }

    #sbs-1362 #list-1597 .cs-item-text {
      
        color: rgb(0, 0, 0);
    }
#sbs-1362 {
  background-color: white;
}
#sbs-1362 .cs-check svg path {
  fill: #0cbcf5;
}
#sbs-1640{
  background-color: #001f3f;
}

  #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;
    }











#RPsbs-248{
  background-color: #ffffff;
}



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

    }
    #RPsbs-248 .cs-text {
        margin-bottom: 1rem;
        opacity: 0.8;
        color:rgb(0, 0, 0);
       
    }




#RPsbs-248 > div > div > span{

  color: #0cbcf5;
}



















    #pricing-33 {
  background-color: #fdfdfd;
}

#pricing-33 .cs-title3 {
  color: #111;
}

#pricing-33 .cs-text3 {
  color: #333;
}

#pricing-33 .pricing-plans .pricing-card {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

#pricing-33 .pricing-plans .pricing-card.highlighted {
  background-color: #fafafa;
  border: 1px solid #000;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

#pricing-33 .pricing-plans .pricing-card-title {
  color: #000;
}

#pricing-33 .pricing-plans .features,
#pricing-33 .pricing-plans .feature {
  color: #000;
}

#pricing-33 .pricing-plans .check,
#pricing-33 .pricing-plans .cross {
  color: #000;
}

#pricing-33 .pricing-plans .price {
  color: #000;
}

#pricing-33 .pricing-plans .pricing-period {
  color: #444;
}

#pricing-33 .pricing-plans button {
  background-color: #091c38;
  color: #fff;
}

#pricing-33 .pricing-plans button:hover {
  background-color: #091c38;
}

#steps-889{
background-color: #001f3f;

}


  .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, #001f3f 3%, #1d2f4a 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, 252, 252, 0.03) 5%, rgba(228, 222, 222, 0.1) 80%);
      filter: blur(400px);
      opacity: 0.4;
      mix-blend-mode: overlay;
      pointer-events: none;
    }




    .glowbtn {
  font-size: clamp(1rem, 1.5vw, 1rem);
  z-index: 22 !important;
  line-height: clamp(2.75rem, 5vw, 3.25rem);
  padding: 0 1.25rem;
  font-weight: 700;
  font-family: 'oswald';
  border-radius: 44px;
  text-transform: uppercase;

  overflow: hidden;
  color: #ffffff;
  background: #091c38;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 12.5rem;
  max-width: 100%;
  height: 3.375rem;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 0 24px rgba(0, 150, 255, 0.15),
    0 0 12px rgba(0, 150, 255, 0.1);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.glowbtn:hover {
  transform: scale(1.03);
  box-shadow:
    0 0 20px rgba(0, 150, 255, 0.25),
    0 0 40px rgba(0, 150, 255, 0.2);
}

.glowbtn span {
  position: relative;
  z-index: 1;
}





.cs-bubbles::before {
  background-color: #044466;
  opacity: 0.7;
  filter: blur(6px);
  animation: floatAnimation1 5s ease-in-out infinite;
}

.cs-bubbles::after {
  border: 1px solid #044466;
  background: transparent;
  opacity: 1;
  box-shadow: none;
  animation: floatAnimation2 14s ease-in-out infinite;
  z-index: -1;
}








/* PAGE INTRO LIGHT MODE THEME */

.banny {
      fill: #ffffff;
    }
.headel {
  color: black;
}
















/* ABOUT PAGE LIGHT */


#sbs-1362 { 
  background-color: white;
}
/*
#why-choose-892{
  background-color: wh;
}
  */
  #why-choose-892 {
    background-color: white;
  }
  #why-choose-892 .cs-title{
    color: black;
  }
   #why-choose-892 .cs-text {
    color: black;
  }
     #why-choose-892 .cs-h3 {
    color: black;
  }
     #why-choose-892 .cs-item-text {
    color: black;
  }
     #why-choose-892 .cs-item {
    background-color: #f7f7f7;
  }

  
/* FAQ PAGE LIGHT */

#faq1 {
  background-color: #ffffff;
}

#faq1 .cs-title,
#faq1 .cs-text,
#faq1 .cs-button,
#faq1 .cs-item-p {
  color: #111;
}

#faq1 .cs-option {
  background-color: #f7f7f7;
  color: #111;
  border-color: #d0d0d0;
}

#faq1 .cs-option:hover {
  border-color: #0cbcf5;
}

#faq1 .cs-option.cs-active {
  color: #0cbcf5;
  border-color: #0cbcf5;
}

#faq1 .cs-option:before {
  background: #f7f7f7;
}

#faq1 .cs-faq-item {
  background-color: #f7f7f7;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 16px;
}

#faq1 .cs-button:before,
#faq1 .cs-button:after {
  background-color: #333;
}

#faq1 .cs-faq-item.active .cs-button:before,
#faq1 .cs-faq-item.active .cs-button:after {
  background-color: #0cbcf5;
}

#faq1 .cs-item-p a {
  color: #0cbcf5;
}

#faq1 .cs-bubbles:before {
  border: 1px solid #e0e0e0;
}

#faq1 .cs-bubbles:after {
  background: #0cbcf5;
}


/* DESIGN PAGE LIGHT */
#content-page-714 {
  background-color: #ffffff;
}

#content-page-714 h1,
#content-page-714 h2,
#content-page-714 h3,
#content-page-714 h4,
#content-page-714 h5,
#content-page-714 h6,
#content-page-714 p,
#content-page-714 ul,
#content-page-714 ol,
#content-page-714 strong {
  color: #111;
}

#content-page-714 p a {
  color: #0077cc;
  text-decoration: underline;
}

#content-page-714 ul li::before {
  background: #111;
}

#content-page-714 .cs-picture {
  border-color: #eaeaea;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 24px;
}

#content-page-714 .cs-bubbles:before {
  border: 1px solid #e0e0e0;
}

#content-page-714 .cs-bubbles:after {
  background-color: #0cbcf5;
  opacity: 0.15;
}

/* Optional: match light glow effect */
.cs-bubbles::before {
  border: 1px solid #d0d0d0;
  box-shadow:
    rgba(67, 183, 255, 0.15) 0px 0px 20px,
    inset rgba(67, 183, 255, 0.15) 0px 0px 20px,
    inset rgba(67, 183, 255, 0.2) 0px 0px 30px,
    inset rgba(67, 183, 255, 0.3) 0px 0px 40px,
    rgba(67, 183, 255, 0.25) 0px 0px 60px;
}

.cs-bubbles::after {
  background-color: #0cbcf5;
  opacity: 0.1;
  filter: blur(1px);
}

/* hosting PAGE LIGHT ABOVE SHARED FOR ALL CONTENT PAGE */


/* PRICING PAGE */

#services-1684 {

  background-color: #ffffff;
}

#services-1684 .cs-title, #services-1684 .cs-text, #services-1684 .cs-h3, #services-1684 .cs-item-text,#services-1684 .cs-link-text,#services-1684 .cs-arrow{ 

color: black;

}

#sbs-1362 span{
  text-shadow: none;
}
/*CONTACT PAGE */

.contact-section {
  background: #fdfdfd;
  color: #111;
}

.contact-form {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-form::before {
  background: #0cbcf5;
  box-shadow: 0 0 12px rgba(122, 158, 243, 0.3);
}

.main-title,
.contact-title,
.form-title,
.input-label,
.response-title,
.checkbox-label,
.contact-label {
  color: #111;
  text-shadow: none;
}

.title-highlight {
  color: #0cbcf5;
  text-shadow: none;
}

.description {
  color: #444;
}

.contact-value {
  color: #333;
}

.contact-item:hover .contact-value {
  text-decoration: underline;
}

.icon-container {
  border-color: #111;
  background: transparent;
}

.icon-container svg {
  color: #111;
}

.contact-item:hover .icon-container {
  background: #111;
  box-shadow: 0 0 8px #0cbcf5;
}

.contact-item:hover .icon-container svg {
  color: #fff;
}

.input,
textarea {
  background: #fff;
  border: 2px solid #ccc;
  color: #111;
}

.input:focus,
textarea:focus {
  border-color: #0cbcf5;
  box-shadow: 0 0 12px rgba(122, 158, 243, 0.2);
}

.checkbox-group {
  background: #f2f2f2;
}

.checkbox-input {
  accent-color: #0cbcf5;
}

.submit-btn {
  background: #111;
  color: #fff;
  box-shadow: 0 0 20px rgba(122, 158, 243, 0.2);
}

.submit-btn:hover {
  background: #333;
  box-shadow: 0 0 30px rgba(122, 158, 243, 0.3);
}



/* footer 

.wave-path-1 {
  fill: #04101e;
  fill-opacity: 1;
}

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

 #footer01 {
        z-index: 10;
        position: relative;
        background-color: #000000;
 }
 #footer01 > div.cs-container > div.cs-logo-group > p
 {
  color: black;
 }

*/

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

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

 #footer01 {
        z-index: 10;
        position: relative;
        background-color: #000000;
 }

 /* Light Mode Footer Styles */
#footer01 {
  background-color: #ffffff;
}

#footer01 .cs-text,
#footer01 .cs-header,
#footer01 .cs-link,
#footer01 .cs-credit,
#footer01 .cs-bottom-link,
#footer01 .cs-credit-link {
  color: #1a1a1a;
}

#footer01 .cs-link:hover,
#footer01 .cs-credit-link:hover,
#footer01 .cs-bottom-link:hover {
  color: var(--secondary); /* Adjust secondary if needed for light theme contrast */
}

#footer01 .cs-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

#footer01 .cs-bottom-link:last-of-type:before {
  background: currentColor;
}

#footer01 .cs-logo-img {
  filter:
    drop-shadow(0 0 8px hsla(200, 100%, 30%, 0.2))
    drop-shadow(0 0 10px hsla(200, 100%, 30%, 0.1))
    drop-shadow(0 0 18px hsla(200, 100%, 25%, 0.05));
}

    #footer01 .cs-logo {
        display: block;
    filter: invert(1)
    }
  #footer01 .cs-icon {
       
    filter: invert(1)
    }
  #footer01 .cs-contact-icon {
       
    filter: invert(1)
    }
.plant, .sea-floor-decor, .sign {
  display : none;

}