/* footer.css - Updated with precise gradients, glows, and grid lines */

/* Upper CTA Card Gradients & Grid */
.cta-card-bg {
  background:#0F0F24;
      border: 1px solid rgba(168, 85, 247, 0.24);

          border-radius: 16px;
}

.cta-grid-overlay {
 position: absolute;
    top: 20px !important;
    left: 110px !important;
    right: 110px !important;
    bottom: 20px !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
    background-image: url(./../img/free-trail-shape-3.png);
}

.free-trail__shape-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 660px;
    height: 304px;
    background: linear-gradient(98deg, #00E3F2 5.55%, #FF9B00 32.85%, #F00 57.49%, #BD00FF 86.75%);
    opacity: 0.1;
    filter: blur(75px);
    z-index: 1;
}

.cta-inner-shadow {
  box-shadow: -25px 0 35px -20px rgba(0, 0, 0, 0.75);
}

/* Star glows for CTA */
.star-glow-1 {
  position: absolute;
  top: 25%;
  left: 20%;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  z-index: 0;
}

.star-glow-2 {
  position: absolute;
  top: 35%;
  right: 25%;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  z-index: 0;
}

.star-glow-3 {
  position: absolute;
  bottom: 30%;
  left: 30%;
  width: 1.5px;
  height: 1.5px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  opacity: 0.5;
  z-index: 0;
}

/* ============================================================
   FOOTER — Right-Edge Deep Shadow / Glow Effect (Figma match)
   ============================================================ */
.footer-right-shadow {
  position: relative;
  overflow: hidden; 
  background-color: #020205; 
  z-index: 1; 
}

.footer-right-shadow::before {
    content: ""; 
    position: absolute;
    bottom: -115px;
    right: 170px; 
    height: 304px; 
    width: 659px;
    background: linear-gradient(260deg, #00E3F2 5.55%, #FF9B00 32.85%, #F00 57.49%, #BD00FF 86.75%);
    opacity: 0.1; 
    filter: blur(75px); 
    z-index: 0; 
}

/* ============================================================
   NEWSLETTER — Input placeholder & button (Figma match)
   ============================================================ */
.newsletter-input::placeholder {
  font-size: 0.75rem;  
  color: rgba(255, 255, 255, 0.3);
  opacity: 1;            
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Flush ocean-blue send button */
.newsletter-send-btn {
  background-color: #3882B8;       
  color: white;
  width: 72px;                    
  min-width: 72px;
  align-self: stretch;            
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;                
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.newsletter-send-btn:hover {
  background-color: #2b6c9c;
}

.newsletter-send-btn svg {
  width: 16px;
  height: 16px;
  transform: rotate(-45deg);       
  color: #ffffff;
}

/* ============================================================
   SOCIAL ICONS — crisp, small, white (Figma match)
   ============================================================ */
.footer-social-link {
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-social-link:hover {
  color: #ffffff;
  transform: scale(1.1);
}

.footer-social-link svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   FOOTER LINK TYPOGRAPHY — thin, silver-gray (Figma match)
   ============================================================ */
.footer-nav-link {
  color: #C7C3D6;                    
  font-size: 1rem;                 
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}

.footer-nav-link:hover {
  color: #ffffff;
}

/* Column headings */
.footer-col-heading {
  color: #ffffff;
  font-size: 1.5rem;             
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}


.footer-widget__email-form {
    position: relative;
    display: block;
    padding-top: 8px;
}

.footer-widget__email-box {
    position: relative;
    display: block;
}

.footer-widget__email-input-box {
    position: relative;
    display: block;
}

.footer-widget__email-input-box input[type="email"] {
    width: 100%;
    height: 50px;
    outline: none;
    border: 1px solid #4B4B70;
    background-color: #0F0F24;
    border-radius: 8px;
    font-size: 14px;
    color: #C7C3D6;
    padding-left: 25px;
    padding-right: 100px;
}


.footer-widget__btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 90px;
    border: none;
    font-size: 15px;
    color: #ffffff;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
    footer img{
    height: 40px;
  }



@media (max-width:767px) {
  .cta-grid-overlay{
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
  }

}