.elementor-615 .elementor-element.elementor-element-8cda3b8{--display:flex;--min-height:521px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 0px 1px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#FFFFFF21;--border-color:#FFFFFF21;--margin-top:104px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:50px;--padding-right:0px;}.elementor-615 .elementor-element.elementor-element-8cda3b8:not(.elementor-motion-effects-element-type-background), .elementor-615 .elementor-element.elementor-element-8cda3b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D0B19;}.elementor-615 .elementor-element.elementor-element-ad75263{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:400;line-height:26px;}.elementor-615 .elementor-element.elementor-element-2566785{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-615 .elementor-element.elementor-element-642fb96 .elementor-button{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;}.elementor-615 .elementor-element.elementor-element-934b3e1 > .elementor-widget-container{margin:-2px 0px 0px 0px;}.elementor-615 .elementor-element.elementor-element-b2c2ea4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-615 .elementor-element.elementor-element-b2c2ea4:not(.elementor-motion-effects-element-type-background), .elementor-615 .elementor-element.elementor-element-b2c2ea4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0E0C1A;}.elementor-615 .elementor-element.elementor-element-fb40d8d{font-family:"Outfit", Sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#F0227A;}.elementor-615 .elementor-element.elementor-element-0971ccf .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:34px;font-weight:800;}.elementor-615 .elementor-element.elementor-element-5d433db{font-family:"Manrope", Sans-serif;font-size:16px;text-shadow:0px 0px 10px rgba(0,0,0,0.3);}/* Start custom CSS for container, class: .elementor-element-8cda3b8 */<div class="hero-container-glow">
  <div class="right-glow-orb"></div>

  <div class="hero-content">
    <h1 class="main-title">
      Website Design & <br>
      <span class="gradient-word">Development</span>
    </h1>
    
    <a href="#" class="view-btn">View All Services</a>
  </div>
</div>

<style>
/* Import Outfit from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;800&display=swap');

.hero-container-glow {
  position: relative;
  width: 100%;
  padding: 60px 20px;
  background-color: transparent; /* Blends with your section background */
  overflow: hidden; /* Keeps the glow from leaking out */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* THE GLOW EFFECT */
.right-glow-orb {
  position: absolute;
  top: 50%;
  right: -100px; /* Adjust this to move the glow left/right */
  transform: translateY(-50%);
  width: 450px;
  height: 450px;
  /* Pink to Purple gradient with low opacity */
  background: radial-gradient(circle, rgba(233, 30, 99, 0.12) 0%, rgba(189, 52, 254, 0.08) 45%, transparent 70%);
  filter: blur(70px);
  pointer-events: none; /* Makes sure you can still click things under it */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2; /* Sits above the glow */
}

/* Heading: 52px, Outfit, 800 Bold */
.main-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin: 0 0 30px 0 !important;
  letter-spacing: -0.01em !important;
}

.gradient-word {
  background: linear-gradient(90deg, #e91e63 0%, #bd34fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Button: 12px, Outfit, 600 Bold */
.view-btn {
  display: inline-flex;
  padding: 10px 22px;
  border-radius: 100px;
  /* Opaque White Border */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background-color: transparent !important;
  
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out;
}

/* Hover: Pink Border and Text */
.view-btn:hover {
  border-color: #e91e63 !important;
  color: #e91e63 !important;
  background-color: rgba(233, 30, 99, 0.05) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .main-title { font-size: 38px !important; }
  .right-glow-orb { width: 300px; height: 300px; right: -50px; }
}
</style>/* End custom CSS */