/*
 * style.css
 * Custom styles for Genosis Technologies Website
 */

/* 1. Custom Scroll Offset for Fixed Header */
html { 
    scroll-padding-top: 5rem; /* Adjusted for the header height */
}

/* 2. Define Brand Colors */
:root {
    --color-primary: #2563EB; /* Strong Blue (indigo-600) */
    --color-accent: #F97316; /* Bright Orange for CTAs (orange-500) */
    --color-primary-light: #60A5FA; /* Lighter Blue (blue-400) */
}

/* 3. Helper Classes (Used in index.html to apply colors) */
.bg-primary { 
    background-color: var(--color-primary); 
}
.text-primary { 
    color: var(--color-primary); 
}
.bg-accent { 
    background-color: var(--color-accent); 
}
.hover\:bg-accent:hover { 
    background-color: var(--color-accent); 
}

/* 4. Attractive Hero Section Styles */
.text-primary-gradient {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 5. Gradient Button Style */
.btn-gradient {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}
.btn-gradient:hover {
    background-position: right center; /* Change the direction of the transition on hover */
}


/* 6. Scroll-Triggered Animation Classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* 7. Certification Toggler Styles */
.cert-toggle-btn {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #374151; /* text-gray-700 */
    transition: all 0.3s ease;
}
.cert-toggle-btn:hover {
    background-color: #e5e7eb; /* bg-gray-200 */
}
.cert-toggle-btn.active-toggle-btn {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


/* 8. Scroll-to-Top Button Styles */
#scroll-to-top-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(20px);
}
#scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#scroll-to-top-btn:hover {
    transform: scale(1.1);
    background-color: var(--color-primary-light);
}

/* 9. [NEW] Why Choose Us Feature Card Hover Effect */
.feature-card {
    transition: all 0.3s ease-in-out;
}
.feature-card:hover {
    /* Per your request, the shadow is removed (or reduced) and it lifts up */
    transform: translateY(-5px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* This is shadow-md, down from shadow-lg */
}


/* 10. [NEW] Testimonial Slider Styles */
.testimonial-slider-container {
    overflow: hidden; /* This is crucial */
}
.testimonial-slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* This is the slide animation */
}
.testimonial-slide {
    width: 100%; /* Each slide takes 100% of the container width */
    flex-shrink: 0; /* Prevents slides from shrinking */
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    padding-left: 1rem;
    padding-right: 1rem;
}
.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #D1D5DB; /* bg-gray-300 */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-dot:hover {
    background-color: #9CA3AF; /* bg-gray-400 */
}
.slider-dot.active-dot {
    background-color: var(--color-primary);
}


/* 11. Optional Custom Font Import (Uncomment to use Poppins) */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap');
body {
    font-family: 'Poppins', sans-serif;
}
*/




























/* EXtra for fast loading */
/* ---------- Base / helpers ---------- */
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}

/* ---------- Container ---------- */
.container{ max-width:1200px; margin:0 auto; padding:56px 20px; }

/* ---------- Grid ---------- */
.hero-grid{ display:grid; grid-template-columns: 1fr 540px; gap:40px; align-items:center; }

/* LEFT */
.hero-left{ padding-right:10px; }
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:8px; color:var(--muted); font-size:14px; }
.logo{ width:36px; height:36px; background:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,0.04) }
.org{ font-weight:600 }

/* Title */
.hero-title{ font-size:56px; line-height:1.02; margin:6px 0 18px; font-weight:800; letter-spacing:-0.02em; color:var(--text) }
.hero-title .accent{ background:linear-gradient(90deg,var(--color-primary), var(--color-primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }

/* Copy */
.hero-copy{ color:var(--muted); max-width:560px; font-size:16px; margin-bottom:20px }

/* Buttons */
.ctas{ display:flex; gap:14px; align-items:center; margin-bottom:22px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:10px; font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:0; transition: transform .25s ease, box-shadow .25s ease, opacity .18s ease; box-shadow:0 8px 22px rgba(12,24,40,0.06) }
.btn:hover{ transform:translateY(-4px) }
.btn-primary{ background:linear-gradient(90deg,var(--color-accent), #ff8a3d); color:#fff }
.btn-outline{ background:#fff; color:var(--color-primary); border:1px solid rgba(37,99,235,0.12) }

/* Trusted logos */
.trusted{ display:flex; align-items:center; gap:18px; color:var(--muted); font-size:13px; margin-top:8px }
.trusted-logos{ display:flex; gap:12px; align-items:center }
.trusted-logos img{ height:20px; opacity:.65; filter:grayscale(1); transition: filter .25s ease, opacity .25s ease }
.trusted-logos img:hover{ filter:none; opacity:1 }

/* RIGHT */
.hero-right{ display:flex; justify-content:center; }
.hero-image-wrap{ position:relative; width:100%; max-width:480px; }
.hero-image{ border-radius:16px; box-shadow: 0 18px 40px rgba(12,24,40,0.08); display:block; width:100%; height:auto; object-fit:cover; transition: transform .5s ease }
.hero-image-wrap:hover .hero-image{ transform:scale(1.02) }

/* Floating cards */
.floating-card{
  position:absolute;
  background:#fff;
  border-radius:14px;
  padding:12px;
  width:260px;
  box-shadow:0 12px 30px rgba(12,24,40,0.12);
  display:flex; gap:12px; align-items:center; transform:translateY(0);
  transition: transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease;
}
.floating-card.top{ top:-18px; left:18px }
.floating-card.bottom{ right:12px; bottom:-18px }

/* small content inside*/
.float-left-icon img{ width:36px; height:36px; border-radius:8px; }
.float-title{ font-weight:700; font-size:14px; color:var(--text) }
.float-meta{ font-size:12px; color:var(--muted) }

/* float animations (gentle) */
@keyframes floatY { 0%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }
.animate-float{ animation: floatY 5s ease-in-out infinite }
.animate-float-delayed{ animation: floatY 6s ease-in-out 1s infinite }

/* ---------- animate-on-scroll (JS will add .is-visible) ---------- */
.animate-on-scroll{ opacity:0; transform: translateY(18px); transition: transform .6s ease, opacity .6s ease; will-change: transform, opacity }
.animate-on-scroll.is-visible{ opacity:1; transform: translateY(0) }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .container{ padding:44px 18px }
  .hero-grid{ grid-template-columns: 1fr 420px; gap:30px }
  .hero-title{ font-size:48px }
}
@media (max-width:800px){
  .container{ padding:28px 16px }
  .hero-grid{ grid-template-columns: 1fr; gap:22px }
  .hero-title{ font-size:34px }
  .ctas{ flex-direction:column; align-items:flex-start }
  .btn{ width:100% }
  .hero-right{ justify-content:flex-start }
  .floating-card.top{ left:6px; top:-10px }
  .floating-card.bottom{ right:6px; bottom:-10px }
  .floating-card, .hero-image{ width:100% }
}


/* hero section tusted by */