:root{
    --brand-blue:#0d6efd;
    --brand-navy:#0b1f4d;
    --brand-orange:#f5a623;
    --brand-purple:#6f42c1;
    --ink:#1c2333;
    --muted:#6b7280;
  }
  body{ font-family:'Inter', sans-serif; color:var(--ink); }
  h1,h2,h3,h4,.brand-font{ font-family:'Poppins', sans-serif; }
  .navbar-brand{ font-weight:800; font-size:1.4rem; color:var(--brand-navy)!important; }
  .navbar-brand img { max-width: 200px;}
  .navbar-brand i{ color:var(--brand-orange); }
  .nav-link{ font-weight:500; color:var(--ink)!important; }
  .btn-brand{ background:var(--brand-blue); color:#fff; border:none; font-weight:600; }
  .btn-brand:hover{ background:#0b5ed7; color:#fff; }
  .btn-outline-brand{ border:2px solid var(--brand-blue); color:var(--brand-blue); font-weight:600; }

  /* HERO */
  .hero{
    position:relative;
    background: linear-gradient(180deg, #44A8F1 43%, #ff8c00 100%);
    overflow:hidden;
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .hero-overlay{
    background-image: url('../img/Website-Support-Company-bg3.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    inset: 0;
    position: absolute;
  }
  .hero .content{
    inset: 0;
    position: relative;
  }
  .hero .eyebrow{ letter-spacing:.06em; font-weight:600; color:var(--muted); font-size:.85rem; text-transform:uppercase;}
  .hero h1{ font-weight:800; font-size:3.9rem; line-height:1.15; }
  .hero .check-item{ font-weight:500; }
  .hero .check-item i{ color:#16a34a; margin-right:.5rem; }
  .hero-photo-wrap{
    position:relative;
    width:100%;
    margin:0 auto;
  }
  .hero-photo-wrap img{
    border-radius:50%;
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border:8px solid rgba(255,255,255,.5);
  }
  .play-btn{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:90px; height:90px;
    background:var(--brand-orange);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.8rem;
    box-shadow:0 0 0 12px rgba(255,255,255,.35);
  }

  /* LOGO STRIP */
  .logo-strip{ padding:2rem 0;  }
  .logo-strip .logo-item{ font-weight:700; color:#9aa0ab; font-size:1.1rem; opacity:.8; }

.logo-strip .feature-boxes {
  margin-top: 3rem;
}

.logo-strip .feature-boxes .feature-box {
  padding: 1.5rem;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid color-mix(in srgb, var(--brand-blue), transparent 80%);
  height: 100%;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 576px) {
  .logo-strip .feature-boxes .feature-box {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

.logo-strip .feature-boxes .feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.logo-strip .feature-boxes .feature-box .feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-strip .feature-boxes .feature-box .feature-icon i {
  font-size: 1.75rem;
  color: var(--heading-color);
}

.logo-strip .feature-boxes .feature-box .feature-content {
  flex: 1;
}

.logo-strip .feature-boxes .feature-box .feature-content .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.75rem;
}

.logo-strip.feature-boxes .feature-box .feature-content .feature-text {
  font-size: 0.95rem;
  color: var(--default-color);
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .logo-strip .feature-boxes .feature-box {
    padding: 1.25rem;
  }

  .logo-strip.feature-boxes .feature-box .feature-icon {
    width: 50px;
    height: 50px;
  }

  .logo-strip .feature-boxes .feature-box .feature-icon i {
    font-size: 1.5rem;
  }

  .logo-strip .feature-boxes .feature-box .feature-title {
    font-size: 1.125rem;
  }

  .logo-strip .feature-boxes .feature-box .feature-text {
    font-size: 0.875rem;
  }
}

  /* SECTION TITLES */
  .eyebrow-blue{ color:var(--brand-blue); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.85rem;}
  .section-title{ font-weight:800; }

  /* TESTIMONIAL CARDS */
  .review-card{ border:1px solid #eee; border-radius:10px; padding:1.25rem; height:100%; }
  .review-card .stars{ color:#f5a623; font-size:.85rem; }
  .review-card .name{ font-weight:700; }
  .review-card p.review-text{ font-size:.9rem; color:var(--muted); margin-bottom:.25rem; }
  .avatar{ width:44px;height:44px;border-radius:50%; object-fit:cover; }

  /* FEATURE BLOCKS */
  .icon-check-list li{ margin-bottom:.6rem; font-weight:500; }
  .icon-check-list i{ color:var(--brand-blue); margin-right:.5rem; }

  .illustration-box{
    background:linear-gradient(160deg,#eaf1ff,#f7f0ff);
    border-radius:16px;
    padding:2rem;
  }

  .support-photo{
    position:relative;
    border-radius:16px;
    overflow:hidden;
  }
  .support-photo img{ width:100%; height:100%; object-fit:cover; }

  .phone-mock{
    background:#111827;
    border-radius:36px;
    padding:14px;
    max-width:260px;
    transform:rotate(-8deg);
    box-shadow:0 20px 40px rgba(0,0,0,.2);
  }
  .phone-mock .screen{
    background:#38bdf8;
    border-radius:24px;
    aspect-ratio:9/18;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; text-align:center;
  }
  .phone-mock .screen .code{ font-size:4rem; font-weight:800; }

  /* SERVICES LIST */
  .service-list-col ul{ list-style:none; padding:0; }
  .service-list-col li{ margin-bottom:.6rem; font-weight:500; }
  .service-list-col i{ color:var(--brand-blue); margin-right:.5rem; }

  /* LIGHT BLUE TESTIMONIAL SECTION */
  .section-tint{ background:#eaf3ff; }
  .quote-bubble{
    background:#fff;
    border-radius:12px;
    padding:1.25rem;
    position:relative;
    height:100%;
  }
  .quote-bubble:after{
    content:"";
    position:absolute;
    bottom:-14px; left:30px;
    width:0;height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:14px solid #fff;
  }
  .stars-row i{ color:#f5a623; }

  /* DARK CTA */
  .section-dark{
    background:var(--brand-navy);
    color:#fff;
  }
  .section-dark .icon-feature i{ font-size:1.6rem; color:var(--brand-orange); margin-bottom:.5rem; }

  /* PRICING BAND */
  .section-photo-band{
    background-size:cover;
    background-position:center;
    background-image: linear-gradient(rgba(20,30,60,.75), rgba(20,30,60,.75)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1600&q=60');
    color:#fff;
  }

  footer{ background:#1f2430; color:#c9ced8; }
  footer h6{ color:#fff; font-weight:700; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; }
  footer a{ color:#c9ced8; text-decoration:none; font-size:.9rem; }
  footer a:hover{ color:#fff; }

  section{ padding:4.5rem 0; }
  @media(max-width:768px){
    .hero h1{ font-size:2.1rem; }
    section{ padding:3rem 0; }
  }
  
.page-hero{
    background: linear-gradient(180deg, #44A8F1 43%, #ff8c00 100%);
    padding: 4rem 0 3rem;
    color:#fff;
    text-align:center;
  }
  .page-hero h1{ font-weight:800; font-size:2.8rem; }
  .page-hero p{ font-size:1.1rem; opacity:.95; max-width:600px; margin:0 auto; }

  .section-tint{ background:#eaf3ff; }
  .eyebrow-blue{ color:var(--brand-blue); font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.85rem;}

  .value-card{
    background:#fff;
    border-radius:14px;
    padding:2rem;
    height:100%;
    border:1px solid color-mix(in srgb, var(--brand-blue), transparent 85%);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .value-card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(13,110,253,.12); }
  .value-card i{ font-size:2rem; color:var(--brand-blue); margin-bottom:1rem; }

  .stat-box{ text-align:center; }
  .stat-box .num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:2.6rem; color:var(--brand-navy); }
  .stat-box .label{ color:var(--muted); font-weight:600; }

  .team-photo{
    border-radius:16px;
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
  }
  
  .portfolio-image {
    height: 220px;
    }
    
    @media (max-width: 767px) {
        .portfolio-image {
            height: 200px;
        }
    }