:root{--brand:#0b63b6;--dark:#0b2130;--muted:#6b7280}
    *{box-sizing:border-box}
    body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;margin:0;color:var(--dark);line-height:1.45}
    a{color:inherit;text-decoration:none}
    header{background:linear-gradient(90deg,#f7fbff,#ffffff);border-bottom:1px solid #eef2f7}
    .container{max-width:1100px;margin:0 auto;padding:15px 0px;}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .logo{display:flex;align-items:center;gap:12px}
    .logo img{height:44px}
    nav ul{display:flex;gap:12px;align-items:center;margin:0;padding:0;list-style:none}
    .btn{background:#002726;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600}

    .hero{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center;padding:30px 0}
    .hero h1{font-size:32px;margin:0 0 12px}
    .hero p{color:var(--muted);margin:0 0 20px}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
    .card{background:#fff;border:1px solid #eef2f7;padding:14px;border-radius:10px;text-align:center}

    .services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
    .service{background: linear-gradient(180deg, #fff, #fff); padding: 15px 15px 10px 15px; border-radius: 12px;border: 2px solid #ededed;}
    .service h3{margin:0 0 8px;font-size:16px;width: 100%;}
    .service p{margin:0;color:var(--muted);font-size:14px;width: 100%;}

    .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
    .portfolio-item{height:120px;background:#f7fafc;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600}

    .contact{display:grid;grid-template-columns:1fr 380px;gap:24px;padding:15px 0px;}
    form{display:flex;flex-direction:column;gap:12px}
    input,textarea{padding:10px;border-radius:8px;border:1px solid #e6eef6}
    footer{border-top:1px solid #eef2f7;padding:0px 0;color:var(--muted)}

    @media (max-width:980px){.hero{grid-template-columns:1fr}.contact{grid-template-columns:1fr}.services{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:560px){.services{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:1fr}.nav{flex-direction:column;align-items:flex-start}.logo img{height:38px}}
    
    @media screen and (max-width: 600px) { .container{padding:15px;} }
    
    @media (max-width:560px) {
  nav ul {
    display:none;
    flex-direction:column;
    width:100%;
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:0px;
    margin-top: 5px;
    padding:10px;
  }
  #menu-toggle {
    display:block;
  }

  .container.nav { display: flex; flex-direction: row; align-items: center;}
}

@media (min-width:561px) { button#menu-toggle { display: none;} }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem; /* gutter spacing */
  margin-left: -0.75rem;
}

.col, .col-md-4, .col-md-8, .col-md-6 {
  position: relative;
  width: 100%;
  padding-right: 0.75rem; /* gutter padding */
  padding-left: 0.75rem;
}

@media (min-width: 768px) {
  .col-md-4 {
    flex: 0 0 auto;           /* Prevent from stretching */
    width: 33.33333333%;      /* 4/12 = 33.33% width */
  }

  .col-md-6 {
    flex: 0 0 auto;       /* fixed-width flex item */
    width: 50%;           /* 6/12 columns = 50% */
  }

  .col-md-8 {
    flex: 0 0 auto;           /* Fixed width column */
    width: 66.66666667%;      /* 8/12 = 66.66% width */
  }
}


.blog-left {
    background-color: #fbfbfb;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.blog-right {
    background-color: #fbfbfb;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.footer {
  background: #f7fafc;
  border-top: 1px solid #eef2f7;
  color: #374151;
  font-size: 15px;
  padding: 30px 0 0px;
}

.footer-grid {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.footer-logo {
  height: 48px;
  margin-bottom: 10px;
}

.footer-col h4 {
  font-size: 20px;
  color: #002726;
  margin-bottom: 10px;
      margin-top: 5px;
}

.footer-col p {
  color: #6b7280;
  line-height: 1.6;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.9;
}

.footer-col ul li a {
  color: #374151;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #0b63b6;
}

.footer .social {
  margin-top: 10px;
}

.social-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.social-links a {
  color: #0b63b6;
  font-weight: 500;
  text-decoration: none;
}

.social-links a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid #e5e7eb;
  margin-top: 15px;
  padding: 0px;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
}

.footer-bottom a {
  color: #002726;
  font-weight: 600;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.service-img { width: 100px;padding-top: 10px; height: fit-content;}
.service {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: flex-end;
    align-items: stretch;
    text-align: left;
  }
  
  #services { background-color: #f7fafc;padding: 0px 0px 30px 0px;}
  #pricing { background-color: #f7fafc;padding: 0px 0px 30px 0px;}
  #portfolio { padding: 15px 0px 40px 0px;}
  #contact { padding: 30px 15px 30px 15px;}
  
  
.zoom { transition: transform .2s;}
.zoom:hover {
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.01); 
}

 h1 { font-size: 36px !important;}
 h2 { font-size: 30px !important;}
 h3 { font-size: 20px !important;}
 .service p { font-size: 16px;}
 
/* svg divider top */

.custom-shape-divider-top-1762658345 {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: scaleY(-1.0);
}

.custom-shape-divider-top-1762658345 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 30px;
    transform: rotateY(180deg);
}

.custom-shape-divider-top-1762658345 .shape-fill {
    fill: #f7fafc;
}

/* svg divider top */

/* svg divider bottom */

.custom-shape-divider-top-1762658419 {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1762658419 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 30px;
}

.custom-shape-divider-top-1762658419 .shape-fill {
    fill: #f7fafc;
}

/* svg divider bottom */

.hero-img { width: 50px; height: 50px; }
.hero-no { text-align: left; }
.card { display: flex; gap: 5px; padding: 12px 10px;}
 
.blog-box-main{ 
  border:1px solid #eef2f7;
  border-radius:12px;
  overflow:hidden;
  background:#fff; 
  margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 768px) {  .footer-grid { gap: 20px;  }}


@media (min-width: 320px) and (max-width: 600.98px) {
nav {
    right: 15px;
    top: 15px;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: flex-end;
}
    #menu-toggle {
        width: 40px;
        height: 38px;
        font-size: 24px;
        line-height: 0px;
        border-radius: 0px !important;
        border: solid 2px #002726;
        color: #002726;
    }

    .nav ul {align-items: flex-start; width:200px;}
    
    .footer-bottom.container { display: flex; flex-direction: column;}
    .footer-bottom.container p { margin: 10px 0px 5px 0px;}
    .service { justify-content: flex-start;}
    .service-img { width: 92px; height: 102px; padding-top: 10px;}
    
}