@charset "UTF-8";

 /* Fonts - Updated to use only Cooper Black Regular and DM Sans Regular */
 :root {
     --default-font: 'DM Sans', sans-serif;
     /* For body text */
     --heading-font: 'Cooper Black';
     /* For headings and titles */
     --nav-font: 'Cooper Black', serif;
     /* For navigation menu */
 }

 /* Global Colors - Updated to Brand Theme Colors */
 :root {
     --background-color: #ff6d13;
     /* Background color for the entire website, including individual sections */
     --default-color: #2C2C2C;
     /* Main text color across the entire website */
     --heading-color: #FF9A76;
     /* Color for headings, subheadings, and titles */
     --accent-color: #FF9A76;
     /* Primary highlight color used for buttons, links, and hovers */
     --surface-color: #ffffff;
     /* Background of boxed elements */
     --contrast-color: #ffffff;
     /* Ensures text readability on dark or primary backgrounds */
 }

 .light-background {
     --background-color: #FFF8EC;
     --surface-color: #ffffff;
 }

 .dark-background {
     --background-color: #2C2C2C;
     --default-color: #FF9A76;
     --heading-color: #FF9A76;
     --surface-color: #3a3a3a;
     --contrast-color: #ffffff;
 }

 /* Accent Usage */
 :root {
     --accent-1-color: #B2D6FF;
     --accent-2-color: #C9C9C9;
 }


 /* Smooth scroll */
 :root {
     scroll-behavior: smooth;
 }

 /*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/


 a {
     color: var(--accent-color);
     text-decoration: none;
     transition: 0.3s;
 }

 a:hover {
     color: color-mix(in srgb, var(--accent-color), transparent 25%);
     text-decoration: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: var(--heading-color);
     font-family: var(--heading-font);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body,
 html {
     width: 100%;
     height: 100%;
     font-family: var(--default-font);
  background-color: #ff6d13;
     z-index: -100;

 }
 
.wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

.wrapper div {
  height: 6vw;
  width: 6vw;
  max-height: 60px;
  max-width: 60px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  position: absolute;
  animation: animate 4s linear infinite;
}

div .dot {
  height: 1vw;
  width: 1vw;
  max-height: 10px;
  max-width: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 20%;
  right: 20%;
}
/* Phone view: reduce border width */
@media (max-width: 480px) {
  .wrapper div {
    border: 1px solid rgba(255, 255, 255, 0.7);
  }
}

/* Example updated positions and durations */
.wrapper div:nth-child(1) { top: 20%; left: 20%; animation: animate 8s linear infinite; }
.wrapper div:nth-child(2) { top: 60%; left: 80%; animation: animate 10s linear infinite; }
.wrapper div:nth-child(3) { top: 40%; left: 40%; animation: animate 3s linear infinite; }
.wrapper div:nth-child(4) { top: 66%; left: 30%; animation: animate 7s linear infinite; }
.wrapper div:nth-child(5) { top: 90%; left: 10%; animation: animate 9s linear infinite; }
.wrapper div:nth-child(6) { top: 30%; left: 60%; animation: animate 5s linear infinite; }
.wrapper div:nth-child(7) { top: 70%; left: 20%; animation: animate 8s linear infinite; }
.wrapper div:nth-child(8) { top: 75%; left: 60%; animation: animate 10s linear infinite; }
.wrapper div:nth-child(9) { top: 50%; left: 50%; animation: animate 6s linear infinite; }
.wrapper div:nth-child(10) { top: 45%; left: 20%; animation: animate 10s linear infinite; }
.wrapper div:nth-child(11) { top: 10%; left: 90%; animation: animate 9s linear infinite; }
.wrapper div:nth-child(12) { top: 20%; left: 70%; animation: animate 7s linear infinite; }
.wrapper div:nth-child(13) { top: 20%; left: 20%; animation: animate 8s linear infinite; }
.wrapper div:nth-child(14) { top: 60%; left: 5%; animation: animate 6s linear infinite; }
.wrapper div:nth-child(15) { top: 90%; left: 80%; animation: animate 9s linear infinite; }

@keyframes animate {
  0% {
    transform: scale(0) translateY(0) rotate(70deg);
  }
  100% {
    transform: scale(0.7) translateY(-10vh) rotate(360deg);
  }
}







 section {
     padding: 2rem 2rem;
     margin: 2rem 0;
 }

 /* More breathing space for larger screens */
 @media (min-width: 768px) {
     section {
         padding: 6rem 3rem;
         margin: 3rem 0;
     }
 }

 @media (min-width: 1200px) {
     section {
         padding: 8rem 4rem;
         margin: 4rem 0;
     }
 }

 .hero img {
     position: relative;
     top: -5vh;
     max-width: 100%;
     height: auto;
     z-index: 2;
 }

 .hero-image {
     height: 70vh;
     max-height: 500px;
     animation: float 4s ease-in-out infinite;
     z-index: 10;
 }
 /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 /* Hero Section */
.hero {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 2rem 1rem;
 }

/* Curved Text */
.curved-text-container {
  text-align: center;
    margin-bottom: 10px;
}

.curved-text-svg {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.curved-text {
  fill: #fff;
  font-size: clamp(54px, 6vw, 62px);
  font-family: 'Cooper Black', sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  opacity: 0;
  animation: fadeInSlide 2s ease-out forwards;
}

@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Heading */
.hero h2 {
  font-size: clamp(34px, 5vw, 48px);
  color: #fff;
  margin-bottom: 1rem;
}

 

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-32px);
  }
}

/* Bubble Stats */
.circle {
  margin-bottom: 2rem;
}

.bub {
  width: clamp(90px, 20vw, 120px);
  height: clamp(90px, 20vw, 120px);
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.5),
    rgba(224, 247, 250, 0.4) 40%,
    rgba(224, 247, 250, 0.2) 80%,
    rgba(224, 247, 250, 0.05)
  );
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(1.5px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: bubbleFloat 4s ease-in-out infinite;
  opacity: 0.85;
}

.bub:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.12);
}

.bub p {
  margin: 0;
  font-size: clamp(14px, 3vw, 18px);
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}

@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* CTA Button */
.sketchy-btn {
  display: inline-block;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 3px solid #fff;
  border-radius: 60px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s, transform 0.3s;
  margin-top: 1.5rem;
}

.sketchy-btn:hover {
  background-color: #b2d6ff;
  color: #000;
  transform: translateY(2px);
}

/* Media Queries (Optional for Fine Tuning) */
@media (max-width: 768px) {
  .hero {
    padding: 3rem 1rem;
  }

  .curved-text-svg {
    max-width: 100%;
  }

  .hero-image {
    max-height: 300px;
  }
}