
/* variables */
:root{
  --clr-primary:#0073e6;
  --clr-primary-dark:#005bb5;
  --clr-gray:#f6f7fa;
  --clr-text:#222;
  --font-main:'Roboto',sans-serif;
}
/* reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-main);color:var(--clr-text);line-height:1.6;background:#fff;}
img{max-width:100%;display:block;height:auto;}
.container{width:min(90%,1200px);margin:0 auto;}
.section{padding:4rem 0;}
h2{font-size:2rem;margin-bottom:1rem;font-weight:700;}
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:4px;text-decoration:none;font-weight:500;transition:background .3s;}
.btn-primary{background:var(--clr-primary);color:#fff;}
.btn-primary:hover{background:var(--clr-primary-dark);}
.btn-outline{border:2px solid var(--clr-primary);color:var(--clr-primary);}
.btn-outline:hover{background:var(--clr-primary);color:#fff;}
/* navbar */
.navbar{position:sticky;top:0;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:1000;}
.navbar .nav-flex{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;}
.brand img{width:180px;}
nav ul{display:flex;gap:2rem;list-style:none;}
nav a{color:var(--clr-text);font-weight:500;text-decoration:none;}
nav a:hover{color:var(--clr-primary);}
.burger{display:none;background:none;border:none;font-size:1.5rem;}
/* hero */
.hero{height:90vh;background:url('../assets/hero.jpg') center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);}
.hero-content{position:relative;z-index:1;color:#fff;padding:0 1rem;}
.hero h1{font-size:clamp(2rem,6vw,3.5rem);margin-bottom:.5rem;}
.hero p{font-size:1.2rem;margin-bottom:1.5rem;}
/* services */
.card-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .3s;}
.card:hover{transform:translateY(-6px);}
.card-body{padding:1rem;}
.card h3{font-size:1.25rem;margin-bottom:.5rem;}
/* videos */
.video-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.video-wrapper{position:relative;padding-top:56.25%;}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
/* chatbot */
.chatbot-toggle{position:fixed;bottom:20px;right:20px;background:var(--clr-primary);border:none;border-radius:50%;width:60px;height:60px;color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.2);z-index:1001;}
/* contact */
.contact-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem;border:1px solid #ccc;border-radius:4px;margin-bottom:1rem;}
.footer{background:#0f1724;color:#cfd3dc;padding:2rem 0;font-size:.9rem;}
.footer-flex{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.social a{color:#cfd3dc;margin-left:1rem;font-size:1.1rem;}
.social a:hover{color:#fff;}
/* responsive nav */
@media(max-width:768px){
  nav{display:none;}
  nav.open{display:block;position:absolute;top:70px;right:0;background:#fff;width:200px;box-shadow:0 2px 6px rgba(0,0,0,.1);border-left:1px solid #eee;}
  nav.open ul{flex-direction:column;padding:1rem;}
  .burger{display:block;color:var(--clr-text);}
}
