@charset "utf-8";
/* CSS Document */

 
    :root{--blue:#087fc2;--cyan:#35d7e2;--purple:#54247b;--yellow:#ffd400}
    *{box-sizing:border-box}
    body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#111}
    .top-line{height:9px;background:linear-gradient(90deg,#25dce5,#087fc2)}
    .navbar{min-height:66px;background:#fff}
    .brand{font-weight:800;color:var(--purple);font-size:21px;line-height:.9;letter-spacing:-1px}
    .brand small{display:block;font-size:7px;letter-spacing:.4px;text-align:right}
    .brand-mark{width:42px;height:48px;display:inline-flex;align-items:center;justify-content:center;
      background:conic-gradient(from 45deg,#1686c7 0 12.5%,#60328c 12.5% 25%,#ed2f8d 25% 37.5%,#f5c51d 37.5% 50%,#27b87b 50% 62.5%,#f18b2b 62.5% 75%,#1887c5 75% 87.5%,#60328c 87.5%);
      color:#fff;font-weight:900;font-size:28px;clip-path:polygon(28% 0,100% 0,100% 72%,72% 100%,0 100%,0 28%)}
    .navbar-nav .nav-link{font-size:16px;font-weight:600;color:#54247b!important;padding:13px 12px!important}
    .navbar-nav .nav-link.active{background:#087fc2;color:#fff!important}
    .socials a{display:inline-flex;width:35px;height:35px;align-items:center;justify-content:center;border-radius:50%;color:white;margin-left:4px;font-size:16px;text-decoration:none}
    .fb{background:#3d5c9b}.tw{background:#1da1f2}.ig{background:#222}.in{background:#0878a8}
    .hero {
  width: 100%;
  height: auto;
}
.hero img {
  width: 100%;
  height: auto;
  display: block;
}
.bba{--bs-gutter-x:0;}
    .eyebrow{display:inline-block;background:var(--yellow);color:#111;font-size:12px;font-weight:800;padding:4px 8px;transform:rotate(-2deg);margin-left:44px}
    .strap{display:table;background:#222;color:#fff;font-size:14px;padding:4px 8px;margin:0 0 4px}
    .hero h1{font-size:43px;font-weight:900;line-height:.88;margin:5px 0 18px;letter-spacing:1px}
    .hero h1 span{color:var(--yellow)}
    .hero p{font-size:13px;line-height:1.6;max-width:360px;margin-left:12px}
    .hero-person{position:absolute;right:7%;bottom:0;width:min(38%,390px);height:300px;display:flex;align-items:end;justify-content:center}
    .hero-person img{max-width:100%;max-height:100%;object-fit:contain;object-position:bottom}
    .idea{position:absolute;right:8%;top:16px;border:2px solid white;border-radius:50%;padding:13px 18px;text-align:center;font-size:12px;line-height:1.2;transform:rotate(5deg)}
    .wood-floor{height:42px;background:repeating-linear-gradient(90deg,#f6f4ee 0 90px,#ddd8ce 91px 93px);border-top:2px solid #e5e2dc}
    .section-title{font-size:28px;font-weight:600;text-align:center;margin-bottom:18px}
    .services{padding:24px 0 40px;background:#fff}
    .service-card{height:auto; text-align:center;color:white;padding:18px 15px 14px;background:linear-gradient(160deg,#087fc2,#3bdce2);transition:transform .2s}
.sicon{ width:100px;}

    .service-card:hover{transform:translateY(-4px)}
    .service-icon{height:54px;width:54px;border-radius:50%;background:rgba(255,255,255,.23);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:27px}
    .service-card h3{font-size:22px;font-weight:700;margin-bottom:12px}
    .service-card p{font-size:14px;line-height:1.6;margin:0}
    .gradient-section{background:linear-gradient(180deg,#087fc2,#3bdce2);color:#fff;text-align:center;padding:18px 0}
    .gradient-section h2{font-size:28px;margin:0 0 12px;font-weight:600}
    .gradient-section p{font-size:14px;line-height:1.65;margin:0 auto 10px;max-width: auto;}
    .read-btn{border:0;background:rgba(0,115,160,.35);color:#fff;padding:7px 15px;font-size:9px;font-weight:700;margin-top:10px}
    .why{padding:34px 0 42px}
    .why-item{text-align:center;padding:0 18px}
    .why-icon{font-size:32px;color:#63c3e5;margin-bottom:10px}
    .why-item h3{font-size:18px;font-weight:700;margin-bottom:14px}
    .why-item p{font-size:14px;line-height:1.7;color:#777;margin:0}
    .product{padding:18px 0 20px}
    .product p{max-width:auto;}
    footer{background:linear-gradient(180deg,#087fc2,#35d7e2);color:#fff;text-align:center;padding:9px 0 16px;font-size:10px}
    footer a{color:#fff;text-decoration:none;font-weight:700;padding:0 6px;border-right:1px solid rgba(255,255,255,.65)}
    footer a:last-child{border:0}
    .copyright{margin-top:15px}
    .back-top{position:fixed;right:12px;bottom:12px;background:#087cae;color:#fff;padding:8px 10px;text-decoration:none;z-index:5}
    @media(max-width:767px){
      .navbar-nav .nav-link{padding:9px 8px!important}
      .socials{padding:8px 0}
      .hero,.hero .container{min-height:430px}
      .hero-copy{padding-top:48px;max-width:100%;position:relative;z-index:2}
      .hero h1{font-size:36px}
      .hero p{max-width:270px}
      .hero-person{right:0;width:52%;height:220px;opacity:.95}
      .idea{right:4%;top:12px;font-size:10px}
      .service-card{margin-bottom:14px}
      .why-item{margin-bottom:25px}
    }