.elementor-5376 .elementor-element.elementor-element-8f2679d{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:230px;--padding-left:0px;--padding-right:0px;}.elementor-5376 .elementor-element.elementor-element-8f2679d:not(.elementor-motion-effects-element-type-background), .elementor-5376 .elementor-element.elementor-element-8f2679d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://temetatech.com/wp-content/uploads/2026/01/nebulae-astronomy-cosmic-4k-wallpaper-preview.jpg");}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5376 .elementor-element.elementor-element-20cfe06 > .elementor-widget-container{padding:211px 50px 0px 50px;}.elementor-5376 .elementor-element.elementor-element-20cfe06{text-align:center;}.elementor-5376 .elementor-element.elementor-element-20cfe06 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:52px;font-weight:600;color:#FEFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5376 .elementor-element.elementor-element-fc08dd5 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-5376 .elementor-element.elementor-element-fc08dd5.elementor-element{--align-self:center;}.elementor-5376 .elementor-element.elementor-element-fc08dd5{text-align:center;font-family:"Roboto", Sans-serif;font-size:24px;font-weight:600;text-transform:none;font-style:italic;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#260CFA;}.elementor-5376 .elementor-element.elementor-element-fc08dd5 p{margin-block-end:17px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5376 .elementor-element.elementor-element-f756172 .elementor-button{background-color:#39C1D6;fill:#4D1616;color:#4D1616;border-radius:30px 30px 30px 30px;}.elementor-5376 .elementor-element.elementor-element-f756172 > .elementor-widget-container{padding:15px 0px 0px 0px;}.elementor-5376 .elementor-element.elementor-element-bb760f7{--display:flex;--min-height:0px;--overlay-opacity:0.6;}.elementor-5376 .elementor-element.elementor-element-bb760f7:not(.elementor-motion-effects-element-type-background), .elementor-5376 .elementor-element.elementor-element-bb760f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B0D17;background-image:url("https://temetatech.com/wp-content/uploads/2026/01/blue-space-background-z7sq7dgvzogq6u3f.jpg");}.elementor-5376 .elementor-element.elementor-element-bb760f7::before, .elementor-5376 .elementor-element.elementor-element-bb760f7 > .elementor-background-video-container::before, .elementor-5376 .elementor-element.elementor-element-bb760f7 > .e-con-inner > .elementor-background-video-container::before, .elementor-5376 .elementor-element.elementor-element-bb760f7 > .elementor-background-slideshow::before, .elementor-5376 .elementor-element.elementor-element-bb760f7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5376 .elementor-element.elementor-element-bb760f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0B0D17;--background-overlay:'';}.elementor-5376 .elementor-element.elementor-element-50a2a1a > .elementor-widget-container{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}@media(min-width:768px){.elementor-5376 .elementor-element.elementor-element-bb760f7{--content-width:1600px;}}/* Start custom CSS for button, class: .elementor-element-f756172 *//* Apply this to your Button Widget */
.elementor-5376 .elementor-element.elementor-element-f756172 .elementor-button {
    background: linear-gradient(90deg, #00E5FF, #007BFF);
    box-shadow: 0px 5px 15px rgba(0, 229, 255, 0.3);
    border: none;
    transition: 0.3s;
}

.elementor-5376 .elementor-element.elementor-element-f756172 .elementor-button:hover {
    box-shadow: 0px 8px 25px rgba(0, 229, 255, 0.6);
    transform: scale(1.05);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8f2679d *//* ================================
   HERO SECTION IMAGE DIM + TEXT HIGHLIGHT
   ================================ */

/* Main section (add this class to your hero section) */
.hero-cosmic {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Dark overlay to dim image */
.hero-cosmic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* Adjust darkness here */
  z-index: 1;
}

/* Ensure text stays above overlay */
.hero-cosmic * {
  position: relative;
  z-index: 2;
}

/* ================================
   TEXT HIGHLIGHT STYLES
   ================================ */

/* Main heading */
.hero-cosmic h1 {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.35);
  letter-spacing: 2px;
}

/* Subheading text */
.hero-cosmic p {
  color: #dbe4ff;
  font-size: 18px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Optional glow highlight */
.text-glow {
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 25px rgba(255, 215, 0, 0.4);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-50a2a1a *//* ======================================================
   BLUE COSMIC COLOR THEME
   ====================================================== */

:root {
  --cosmic-bg-dark: #050b1e;
  --cosmic-blue-1: #0a1f44;
  --cosmic-blue-2: #0f3c91;
  --cosmic-blue-3: #3fa9f5;
  --cosmic-blue-soft: #a8d8ff;
}


/* ======================================================
   COSMIC SECTION BACKGROUND
   ====================================================== */

.cosmic-vision {
  position: relative;
  overflow: hidden;
  color: #e6f2ff;
  background:
    radial-gradient(circle at top, rgba(63,169,245,0.15), transparent 60%),
    linear-gradient(
      180deg,
      var(--cosmic-bg-dark) 0%,
      #071a3d 50%,
      var(--cosmic-bg-dark) 100%
    );
}


/* ======================================================
   STAR FIELD
   ====================================================== */

.star-field {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.stars,
.stars2,
.stars3 {
  position: absolute;
  background: transparent;
  animation: twinkle 3s infinite alternate;
}

.stars {
  width: 2px;
  height: 2px;
  box-shadow:
    5vw 10vh #fff,
    25vw 60vh #fff,
    45vw 80vh #fff,
    65vw 70vh #fff,
    85vw 50vh #fff;
}

.stars2 {
  width: 3px;
  height: 3px;
  animation-duration: 4s;
  box-shadow:
    20vw 15vh #a8d8ff,
    60vw 25vh #a8d8ff,
    80vw 75vh #a8d8ff;
}

.stars3 {
  width: 4px;
  height: 4px;
  animation-duration: 5s;
  box-shadow:
    30vw 30vh #fff,
    55vw 65vh #fff,
    85vw 20vh #fff;
}

@keyframes twinkle {
  from { opacity: 0.3; }
  to { opacity: 1; }
}


/* ======================================================
   TEXT STYLES – FORCE BLUE
   ====================================================== */

.text-gradient-blue {
  background: linear-gradient(90deg, #6ecbff, #3fa9f5, #6ecbff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3fa9f5;
}

.cosmic-vision h1,
.cosmic-vision h3,
.cosmic-vision h4 {
  color: #3fa9f5;
}

.cosmic-vision p {
  color: #d6eaff;
}


/* ======================================================
   COSMIC CARD (NO YELLOW EVER)
   ====================================================== */

.card-cosmic {
  position: relative;
  z-index: 2;
  background: linear-gradient(
    135deg,
    rgba(15,60,145,0.35),
    rgba(10,31,68,0.6)
  );
  border: 1px solid rgba(63,169,245,0.35);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(63,169,245,0.15)!important;
  transition: all 0.4s ease;

  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover + Focus */
.card-cosmic:hover,
.card-cosmic:focus-within {
  transform: translateY(-6px);
  border-color: #3fa9f5;
  box-shadow: 0 15px 55px rgba(63,169,245,0.35), 0 0 60px rgba(63,169,245,0.25)!important;
}


/* ======================================================
   BOTTOM PANEL
   ====================================================== */

.cosmic-vision > div > div:last-child {
  background: linear-gradient(
    135deg,
    rgba(15,60,145,0.3),
    rgba(5,11,30,0.6)
  );
  border: 1px dashed rgba(168,216,255,0.3);
}


/* ======================================================
   REMOVE ALL FOCUS OUTLINES
   ====================================================== */

.cosmic-vision :focus,
.cosmic-vision :focus-visible,
.cosmic-vision :active {
  outline: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a39ae80 *//* ======================================================
   OUR VISION – BLUE COSMIC WORDPRESS SECTION
   Paste into: Appearance → Customize → Additional CSS
   ====================================================== */

/* SECTION BASE */
.cosmic-vision {
  position: relative;
  padding: 120px 20px 140px;
  text-align: center;
  background: linear-gradient(135deg, #050b1e 0%, #0a1f44 100%);
  overflow: hidden;
}

/* STAR PARTICLES */
.cosmic-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 75% 35%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,0.6), transparent);
  animation: cosmicStars 22s linear infinite;
  pointer-events: none;
}

@keyframes cosmicStars {
  from { transform: translateY(0); }
  to { transform: translateY(-120px); }
}

/* TITLE */
.cosmic-vision h2 {
  font-size: clamp(2.8rem, 6vw, 4.3rem);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #9fd6ff, #3fa9f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(63,169,245,0.4);
}

/* SUBTITLE */
.cosmic-vision p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.15rem;
  color: #cfe9ff;
  line-height: 1.8;
  opacity: 0.9;
}

/* FADE ANIMATION */
.cosmic-vision h2,
.cosmic-vision p {
  animation: visionFade 1.2s ease forwards;
  opacity: 0;
}

.cosmic-vision p {
  animation-delay: 0.25s;
}

@keyframes visionFade {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  .cosmic-vision {
    padding: 90px 16px 100px;
  }

  .cosmic-vision h2 {
    font-size: 2.4rem;
  }

  .cosmic-vision p {
    font-size: 1.05rem;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bb760f7 *//* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ================= ROOT VARIABLES ================= */
:root {
  --background: 240 20% 4%;
  --foreground: 210 40% 98%;
  --card: 240 15% 8%;
  --border: 240 20% 18%;
  --cosmic-purple: 270 60% 40%;
  --cosmic-blue: 220 70% 30%;
  --cosmic-gold: 38 92% 60%;
}

/* ================= BASE STYLES ================= */
* {
  box-sizing: border-box;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Outfit', sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ================= COSMIC BACKGROUND ================= */
.cosmic-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    hsl(240 30% 6%) 0%,
    hsl(var(--cosmic-purple) / 0.3) 50%,
    hsl(var(--cosmic-blue) / 0.2) 100%
  );
}

.cosmic-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    hsl(var(--cosmic-purple) / 0.4) 0%,
    hsl(320 60% 50% / 0.2) 50%,
    hsl(var(--cosmic-blue) / 0.3) 100%
  );
  opacity: 0.5;
  pointer-events: none;
}

/* ================= CARDS ================= */
.card-cosmic {
  background: linear-gradient(145deg, hsl(var(--card)), hsl(240 20% 12%));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  border-radius: 12px;
}

/* ================= TEXT EFFECTS ================= */
.text-gradient-gold {
  background: linear-gradient(
    135deg,
    hsl(var(--cosmic-gold)),
    hsl(38 80% 45%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================= ANIMATIONS ================= */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-twinkle {
  animation: twinkle 3s ease-in-out infinite;
}/* End custom CSS */