/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 17 Feb 2026, 22:48:45
    Author     : KanegoKekana
*/
:root{
      --bg-dark:#0f1322;
      --green:#3aa655;
      --green-dark:#2d8b45;
      --line:#e9edf5;
      --text:#1f2a44;
      --muted:#0b1224;
    }
    body{
        font-family:"Poppins",system-ui;
        background:#ffffff;
        color:#1f2a44;
    }

    a{text-decoration:none}
    

    /* Top info bar */
    .topbar{
      background:var(--bg-dark);
      color:#d6dcf0;
      font-size:12px;
    }
    .topbar .chip{
      display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
      opacity:.95;
    }
    .top-pill{
      width:22px;height:22px;border-radius:4px;
      display:grid;place-items:center;
      background:#1b2340;
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
    }
    .top-pill.green{background:#2aa84a;border-color:#2aa84a}

    /* Nav */
    .brand-mark{
      width:34px;height:34px;border-radius:50%;
      border:2px solid #101a33;
      overflow:hidden;
      display:grid;place-items:center;
    }
    .brand-mark img{width:100%;height:100%;object-fit:cover}
    .brand-name{
      font-weight:700;letter-spacing:.6px;font-size:18px;
    }
    .nav-link{
      font-size:13px;color:#4a5877!important;padding:.35rem .5rem!important;
    }
    .nav-link.active{color:navy!important;font-weight:600}
    .social-circle{
      width:30px;height:30px;border-radius:50%;
      display:grid;place-items:center;
      background:#0b1224;border:1px solid #0b1224;color:#0b1224;
      font-size:13px;
    }
    
    #about, #services, #projects, #contact{
  padding-top: 20px;
}
    
    .sticky-top{
        top: 0;
        z-index: 1050;
      }


    /* Hero */
    .hero{
        width:100%;
        min-height:500px;
        background:
        linear-gradient(rgba(7,10,20,.55), rgba(7,10,20,.55)),
        url('../img/hero.png') center/cover no-repeat;
        display:flex;
        align-items:center;
      }

    .hero h1{color:#fff;font-weight:700;line-height:1.15}
    .hero .sub{color:rgba(255,255,255,.78);font-size:12px;line-height:1.7}
    .hero .tags{color:rgba(255,255,255,.72);font-size:11px}
    .btn-green{
      background:var(--green);border-color:var(--green);color:#fff;
      font-weight:600;font-size:12px;border-radius:4px;
      box-shadow:0 12px 22px rgba(58,166,85,.25);
      padding:.55rem 1rem;
    }
    
   .about-text{
  position:relative;
  line-height:1.8;
}
.justify
{}
    
    /*--center image--*/
    .video-card{
        width:100%;
        height:250px;   /* or any height you want for the frame */
        overflow:hidden;
      }

      .video-img{
        width:100%;
        height:100%;
        object-fit:contain;   /* THIS shows the full image */
      }

    
    :root{
  --bs-success: #0b1224;           /* navy */
  --bs-success-rgb: 11,18,36;
}

/* main button */
.btn-success{
  background-color: #0b1224 !important;
  border-color: #0b1224 !important;
}

/* hover */
.btn-success:hover{
  background-color: #16203a !important;
  border-color: #16203a !important;
}

/* active */
.btn-check:checked + .btn-success,
.btn-success:active,
.btn-success.active{
  background-color: #060b17 !important;
  border-color: #060b17 !important;
}

/* focus glow */
.btn-success:focus{
  box-shadow: 0 0 0 .25rem rgba(11,18,36,.4) !important;
}

    
    .btn-green:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
    .hero-cam{
      filter:drop-shadow(0 20px 50px rgba(0,0,0,.55));
      opacity:.95;
      max-width:520px;
    }
    .hero-dots{
      position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
      display:flex;gap:8px;opacity:.85;
    }
    .hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
    .hero-dot.active{background:var(--green)}

    /* Sections */
    .section{padding:44px 54px}
    .muted-title{
      color: navy;
      font-size:11px;
      letter-spacing:.8px;
      text-transform:uppercase;
      margin:0 0 6px 0;
      font-weight:600;
    }
    .section h2{font-weight:700}

    /* Video card */
    .video-card{
      border-radius:6px;overflow:hidden;
      box-shadow:0 12px 30px rgba(16,24,40,.10);
      max-width:450px;
      height: 350px;
      position:relative;
    }
    .video-card img{
      width:100%;
      height:100%;
      object-fit:fill;
      filter:saturate(.9);
    }
    .video-overlay{
      position:absolute;inset:0;display:grid;place-items:center;
      background:rgba(0,0,0,.12);
    }
    .ring{
      width:66px;height:66px;border-radius:50%;
      display:grid;place-items:center;
      background:rgba(255,255,255,.25);
      border:1px solid rgba(255,255,255,.35);
      backdrop-filter: blur(3px);
    }
    .playbtn{
      width:44px;height:44px;border-radius:50%;
      display:grid;place-items:center;background:#fff;color:var(--green);
      font-size:16px;padding-left:2px;
    }

    /* Why section */
    .why{
      background:linear-gradient(180deg,#f7f9fd 0%, #ffffff 100%);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      text-align:center;
      padding:48px 54px;
    }
    .why-icon{
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      margin:0 auto 10px auto;
      background:#fff;border:1px solid #e6ebf6;color:#4a5877;
    }
    .why small{color:var(--muted);display:block;max-width:280px;margin:0 auto}

    /* Services cards */
    .service-card{
      border:1px solid #eef2f9;border-radius:10px;
      box-shadow:0 10px 24px rgba(16,24,40,.06);
      height:100%;
    }
    .service-card .icon{
      width:40px;height:40px;border-radius:10px;
      display:grid;place-items:center;
      background:#f3f6fb;border:1px solid #e6ebf6;color:#22335d;
      font-size:18px;
    }
    .service-card p{color:var(--muted);font-size:12px;line-height:1.6}

    /* Projects */
    .projects{
      padding:0;
      background:
        linear-gradient(180deg, rgba(12,16,28,.75) 0%, rgba(12,16,28,.75) 100%),
        url("assets/img/hero-bg.jpg") center/cover no-repeat;
      color:#fff;
    }
    .projects .inner{padding:42px 54px}
    .projects .sub{color:rgba(255,255,255,.75);font-size:12px}
    .project-thumb{
      border-radius:8px;overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
    }
    .project-thumb img{width:100%;height:200px;object-fit:cover}

    /* Contact */
    .contact{padding:46px 54px;background:#fff}
    .contact .info i{
        color:#060b17;
      }
      .form-control:focus{
        border-color:#060b17;
        box-shadow:0 0 0 .2rem rgba(6,11,23,.15);
      }
   
    .btn-submit{border-radius:8px}
    footer{
      border-top:1px solid var(--line);
      padding:16px 54px;
      font-size:12px;
      color:#6b768f;
      display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    }
    section{
        scroll-margin-top: 120px;
      }


    /* Responsive */
    @media (max-width: 992px){
      .section, .why, .projects .inner, .contact, footer{padding:28px 18px}
      .hero .container{padding-left:18px;padding-right:18px}
      .video-card{
    max-width:300px;
    width:100%;
    height:250px;
    margin-left:auto;
    margin-right:auto;
  }
  .cir{
       max-width:300px;
    width:100%;
   padding-bottom: 10px;
    margin-left:auto;
    margin-right:auto;
  }
    }