/* styles.css — copy exactly */

body { font-family: 'Inter', sans-serif; background: linear-gradient(#000322, 
#080b36, #030724, #260a8d); color: #e6eef8; margin:0; padding:0; }
.glass-card{
    background: rgba(16, 25, 47, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(215, 224, 227, 0.12);
    border-radius: 12px;
}
.glass-nav {
    background: rgba(8,10,20,0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,191,255,0.06);
}
.text-accent{ color:#00bfff; }
.bg-accent{ background:#00bfff; }
.hero-text-gradient{
    background: linear-gradient(90deg,#fff,#a0e9ff,#00bfff);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.video-poster{
    background-size:cover; background-position:center;
    border-radius:8px; position:relative; overflow:hidden;
}
.speak-button {
            /* Button gradient and shadow */
            background-image: linear-gradient(to right, #6d28d9, #8b5cf6);
            box-shadow: 0 4px 20px -5px rgba(139, 92, 246, 0.6);
           
        }
.play-btn{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,0.45); border-radius:999px; padding:14px;
    display:flex; align-items:center; justify-content:center;
}
.play-btn svg{ width:24px; height:24px; color:#fff; }
.loader{ width:40px; height:40px; border:4px solid rgba(255,255,255,0.15); border-top-color:#00bfff; border-radius:999px; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* small responsive tweaks if needed */
@media (max-width:640px){
  .hero-text-gradient{ font-size:2rem; }
}

/* START PATCH: global-ui-styles */
/* Hero gradient handled inline; other global styles here */

.glow-btn{ position:relative; transition: transform .18s ease; }
.glow-btn::after{ content:''; position:absolute; inset:-4px; border-radius:12px; pointer-events:none;
  background: linear-gradient(90deg, rgba(0,191,255,0.08), rgba(160,233,255,0.03));
  filter: blur(10px); opacity:0.95;
}
.hire-btn{ background: linear-gradient(90deg,#6c4cff,#a14bff); color:#fff; padding:8px 12px; border-radius:12px; box-shadow: 0 10px 30px rgba(108,76,255,0.12); }

/* footer wave: lightweight SVG background using CSS */
.footer-wave{
  height:140px; background: linear-gradient(180deg,#071230,#10203a); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="%23ffffff" d="M0,32 C150,80 350,120 600,100 C850,80 1050,20 1200,50 L1200,120 L0,120 Z"/></svg>');
  background-size:cover; margin-bottom:-40px;
}


/* social-circle demo */
.social-circle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:#0b1b3a; color:#fff; text-decoration:none; }

/* footer subscribe */
#footer-subscribe{ cursor:pointer; }

/* global-search styling */
#global-search-results{ z-index:60; }
#global-search-results .result{ display:flex; gap:8px; padding:8px; border-radius:8px; cursor:pointer; color:#e6eef8; }
#global-search-results .result:hover{ background:rgba(0,191,255,0.04); }

/* END PATCH: global-ui-styles */
/*
  CSS Styles for the Footer
  - Assumes a white page background (body { background-color: #fff; })
  - Works with the provided HTML structure and Tailwind classes.
*/

/* --- Main Footer --- */
.site-footer {
  position: relative;
  /* This is the dark blue background from the image */
  background-color: #08022c; 
  /* Sets the default text color for the footer */
  color: #d1d5db; /* like text-gray-300 */
  /* This padding creates space at the top for the wave to sit */
  padding-top: 120px; 
  overflow: hidden; /* Ensures wave clip-path doesn't overflow */
}

/* --- Footer Wave --- */
.footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px; /* Height of the wave area */
  
  /* This MUST be your page's background color. 
    I am assuming white.
  */
  background-color: #ffffff; 

  /* This CSS clip-path creates the wave shape.
    It tells the browser to only show the part of the
    div that matches this SVG path.
  */
  clip-path: path('M0,80 Q 350,150 700,100 T 1440,80 L 1440,0 L 0,0 Z');
  
  /* We move it down just a tiny bit to prevent any 
    thin lines from appearing on some screen resolutions.
  */
  transform: translateY(-1px);
}

/* --- Content Container --- */
/* Makes sure the footer content sits ON TOP of the wave div */
.site-footer .container {
  position: relative;
  z-index: 2;
}

/* --- Color Definitions --- */
/* Defines the bright blue accent color from the image */
.text-accent {
  color: #00bfff; /* Deep Sky Blue */
}

.bg-accent {
  background-color: #00bfff;
}

/* --- Links --- */
.site-footer a {
  color: #d1d5db; /* text-gray-300 */
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #ffffff; /* White on hover */
}

/* --- Social Icons --- */
.social-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;   /* 2.5rem */
  height: 40px;  /* 2.5rem */
  border-radius: 50%; /* Makes it a circle */
  
  /* This is the medium blue background for the icons.
    You can adjust this color.
  */
  background-color: #1d4ed8; /* blue-700 */
  color: #ffffff; /* White icon/text color */
  
  /* This hides the text ("YouTube", "Facebook", etc.)
    so that only an icon (if you add one) would show.
  */
  text-indent: -9999px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.social-circle i {
  color: #ffffff ;
  font-size: 20px;
}



/* --- Language Links --- */
/* Styles for the flag/language spans */
.site-footer .flex-wrap .text-sm {
  color: #d1d5db;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}


/* --- Newsletter Form --- */
#footer-email {
  background-color: #ffffff; /* White background */
  color: #111827; /* Dark text */
  border: 1px solid #d1d5db; /* Light gray border */
}

#footer-email::placeholder {
  color: #6b7280; /* gray-500 */
}

#footer-subscribe {
  /* The button text color from the image is black */
  color: #111827; 
  font-weight: 600;
  transition: background-color 0.3s ease;
}

#footer-subscribe:hover {
  background-color: #38cfff; /* Lighter blue on hover */
}

/* --- Bottom Bar --- */
/* Styles for the "© 2025..." bar */
.site-footer .border-t {
  border-color: rgba(255, 255, 255, 0.1); /* 10% white border */
}

.site-footer .text-gray-400 {
  color: #9ca3af; /* text-gray-400 */
}


.site-footer .text-gray-400 a:hover {
  color: #d1d5db;
}
#contact-form {
  background-image: url("assets/images/PLACEHOLDER_LOGO.png");
  
 
}