:root {
    --bg:         #f5f0e8;
    --ink:        #1a1208;
    --muted:      #6b5c3e;
    --accent:     #c8431a;
    --accent2:    #2a6496;
    --sidebar-w:  260px;
    --toc-bg:     #fffdf7;
    --border:     #d4c9b0;
    --active-bg:  #c8431a;
    --active-fg:  #fff;
    --hover-bg:   #f0e8d8;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  a{
    border: none;
    outline: none;
    text-decoration: none;
   }
   
  body {
    font-family: Sans-Serif;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.8;
  }
  
  hr {margin:20px 0px;}
  
  img {
    width: 100%;
    height: auto;
  }
  
    .article ul li {
        font-size: 17px;
        line-height: 35px;
        color: #000;
        font-weight: 400;
        text-align: justify;
        border-radius: 15px;
        margin-left: 35px;
        padding: 2px 0;
        list-style: disc
    }

    .article ol li {
        font-size: 17px;
        line-height: 35px;
        color: #000;
        font-weight: 400;
        text-align: justify;
        border-radius: 15px;
        margin-left: 35px;
        padding: 2px 0;
        list-style: disc
    }

  .hero {
    background: linear-gradient(135deg, #1a2a4a 0%, #2a6496 60%, #1a4a6a 100%);
    color: #fff;
    padding: 52px 40px 48px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='28'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .hero-text { flex: 1; }

  .hero-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
    margin-bottom: 18px;
  }

  .hero-meta {
    font-size: 13px;
    color: rgb(255 255 255 / 80%);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
  }


  .hero-photo {
    /* flex-shrink: 0; */
    /* border-radius: 10px; */
    border-radius: 5px;
    border: 3px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
  }
  .hero-photo img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
  }
  /* Illustrated fallback (shown when no real image) */
  .hero-photo-fallback {
    width: 100%;
    height: auto;
    background: linear-gradient(160deg, #0d2137 0%, #1a4a7a 55%, #0a2744 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px;
    border-radius: 5px;
  }

  
  

  .layout {
    display: flex;
    align-items: flex-start;
    margin: 0 auto;
    padding: 50px 60px 60px;
    gap: 36px;
  }

  .toc-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    position: sticky;
    top: 15px;
    display: flex;
    flex-direction: column;
  }

  .quote-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 15px;
  }

  /* TOC box */
  .toc-box {
    background: var(--toc-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
  }
  .toc-header {
    background: var(--ink);
    color: #fff;
    padding: 12px 16px;
    font-size: 12.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .toc-list {
    list-style: none;
    padding: 8px 0;
    max-height: 40vh;
    overflow-y: auto;
  }
  .toc-list::-webkit-scrollbar { width: 3px; }
  .toc-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  .toc-item { display: block; }

  .toc-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 16px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    border-left: 3px solid transparent;
    transition: background .16s, color .16s, border-color .16s;
  }
  .toc-link:hover {
    background: var(--hover-bg);
    color: var(--ink);
    border-left-color: var(--border);
  }

  .toc-link.active {
    background: var(--active-bg);
    color: var(--active-fg);
    border-left-color: var(--accent);
    font-weight: 600;
  }
  .toc-link.active .toc-num {
    background: rgba(255,255,255,.22);
    color: #fff;
  }

  .toc-link.faq-link.active {
    background: var(--hover-bg) !important;
    color: var(--ink) !important;
    border-left-color: var(--border) !important;
    font-weight: 400 !important;
  }
  .toc-link.faq-link.active .toc-num {
    background: #e8e0d0 !important;
    color: #7a6a50 !important;
  }

  .toc-num {
    flex-shrink: 0;
    background: var(--hover-bg);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 1px;
    min-width: 20px;
    text-align: center;
  }

  .toc-link[data-level="3"] {
    padding-left: 30px;
    font-size: 12px;
  }
  .toc-link[data-level="3"] .toc-num { display: none; }

  /* Progress strip */
  .toc-progress {
    padding: 9px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--toc-bg);
  }
  .progress-bar-wrap {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }
  .progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width .1s linear;
  }

  .quote-form-box {
    background: linear-gradient(160deg, #1a2a4a 0%, #2a6496 100%);
    border-radius: 6px;
    padding: 20px 18px 22px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
  }
  .quote-form-box h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #fff;
  }
  .quote-form-box p {
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
    margin-bottom: 14px;
    line-height: 1.45;
  }
  .qf-field { margin-bottom: 9px; }
  .qf-field input,
  .qf-field textarea,
  .qf-field select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 12.5px;
    outline: none;
    transition: border .15s, background .15s;
    appearance: none;
    -webkit-appearance: none;
  }
  .qf-field textarea{height:100px;}
  .qf-field input::placeholder, .qf-field textarea::placeholder { color: rgba(255,255,255,.4); }
  .qf-field input:focus,
  .qf-field textarea:focus,
  .qf-field select:focus {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.15);
  }
  .qf-field select option { background: #1a2a4a; color: #fff; }
  .qf-btn {
    width: 100%;
    padding: 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    margin-top: 4px;
    transition: background .18s, transform .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .qf-btn svg{height: 20px; fill: white;}
  .qf-btn:hover { background: #a83414; transform: translateY(-1px); }
  .qf-btn:active { transform: translateY(0); }

  .article { flex: 1; min-width: 0; }

  .article h2 {
    font-size: 27px;
    font-weight: 700;
    color: var(--ink);
    margin: 30px 0 13px;
    padding-bottom: 0px;
    /* border-bottom: 2px solid var(--border); */
    scroll-margin-top: 28px;
  }
  .article h2:first-of-type { margin-top: 0; }

  .article h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 15px 0 10px;
    scroll-margin-top: 28px;
  }
  
  
  
  
  

  .article p {margin-bottom: 15px;color: #2d2210;}
  .article strong { color: var(--accent); font-weight: 700; }

  .block-quote {
    border-left: 4px solid var(--accent2);
    background: rgba(42,100,150,.06);
    padding: 15px 20px;
    margin: 15px 0px;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.7;
  }


  .services-box {
    margin-top: 12px;
    background: var(--toc-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
  }
  .services-header {
    background: var(--accent2);
    color: #fff;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .services-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .15s;
    cursor: pointer;
  }
  .service-item:last-child { border-bottom: none; }
  .service-item:hover { background: var(--hover-bg); }
  .service-info { flex: 1; }
  .service-name { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .service-arrow { font-size: 11px; color: var(--muted); }

  .author-card {
    margin-top: 12px;
    background: var(--toc-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
  }
  .author-card-header {
    background: var(--ink);
    color: #fff;
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: center;
  }
  .author-card-body {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a6496, #2a6496);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
  }
  .author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .author-role {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
  .author-bio {
    font-size: 11.5px;
    color: #4a3f2f;
    line-height: 1.55;
    text-align: center;
  }
  .author-stats {
    display: flex;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  .author-stat {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid var(--border);
  }
  .author-stat:last-child { border-right: none; }
  .author-stat-num {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--accent);
  }
  .author-stat-label {
    font-size: 9.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 1px;
  }

  @media (max-width: 900px) {
    .quote-sidebar { display: none; }
  }
  @media (max-width: 720px) {
    .hero {padding: 20px 15px;}
    .hero-inner {flex-direction: column-reverse;gap: 10px;}
    .layout {flex-direction: column;padding: 24px 16px 28px;gap: 15px;align-items: unset;}
    .toc-sidebar { width: 100%; position: static; order: 3;}
    .toc-list {max-height: 320px;}
    .quote-sidebar { display: block; width: 100%; position:unset;}
    .hero-photo img {height: auto;}
    .hero-meta {font-size: 12px; gap: 5px;}
    .article ul li {font-size: 17px;margin-left: 15px;text-align: left;}
    .article h1 {
    font-size: 18px;
    line-height: 32px;
    font-weight: 600;
    text-align: center;
}
    .article h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}
    .article h3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
}
    .article h4 {
    font-size: 16px;
    line-height: 25px;
    font-weight: 600;
}

.service-name {
    font-size: 16.5px;
    line-height: 2.2;
    font-weight: 300;
}

.service-arrow {
    font-size: 30px;
    line-height: 20px;
}

.author-card-header {
    padding: 10px 14px;
    font-size: 15px;
}

.author-name {
    font-size: 20px;
}

.author-bio {
    font-size: 14.5px;
}

.author-role {
    font-size: 14px;
    color: #000000;
    margin-top: 2px;
    font-weight: 600;
}

.author-stat-num {
    font-size: 18px;
    line-height: 22px;
}

.quote-form-box h3 {
    font-size: 20px;
}

.quote-form-box p {
    font-size: 15.5px;
}

.qf-field input, .qf-field select {
    padding: 12px 10px;
    font-size: 16.5px;
}

.article p {
    margin-bottom: 10px;
    color: #2d2210;
}

.hero-text {
    text-align: center;
}

.hero-meta {
    font-size: 14px;
    gap: 5px;
    display: unset !important;
}

  }
  
.article img {
    border: 5px solid #f5f5f5;
    border-radius: 10px;
    box-shadow: rgb(71 68 68 / 67%) 0 0 9px 0;
    margin: 10px 0;
}  
  
/* Hover Zoom Only Inside Blog */
.article img{
    cursor:pointer;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.article img:hover{
    transform: scale(1.05);
}
  
@media screen and (max-width: 768px) {
    
    .article img:hover{
      transform: scale(1.02) !important;
    }
    
    .article img {
     width: 100% !important;
     height: auto;
    }  
  
    
}  
      
.breadcrumb{
    display: block;
    align-items:center;
    flex-wrap:wrap;
    gap: 12px;
    font-size: 28px;
    line-height: 32px;
    font-weight: 800;
    margin: 5px 0 8px;
    color: #ffffff;
}

.breadcrumb a{
    color: #8ca2f2;
    font-size: 30px;
    text-decoration: none;
}


        
@media (max-width: 560px) {        
    .breadcrumb {
        align-items: unset;
        flex-wrap: unset;
        font-size: 17px;
        line-height: 26px;
        text-align: center;
    }      
  .breadcrumb a {
    font-size: 17px;
    text-decoration: none;
}
    
}   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  

footer{color:#d0d0d0;background:#fad33b;padding:10px 0 0;}
.copy-right{font-size:14px;}
.copy-right a{
    color: black;
    text-decoration: none;
}
.logodiv,.logof3 img{width:100%;}
.copy-right{background:#f9d547;text-transform:uppercase;text-align:center;color:#000000;font-size:12px;-webkit-animation-delay:.8s;animation-delay:.8s;padding:10px;}
.logodiv{text-align:center;}
@media (max-width: 767px){
.icon-wrap{width:46%!important;margin-bottom:0;padding:10px 0!important;}
.icon-wrap img{width:40%!important;margin-bottom:.5rem;display:unset;}
#why{padding:10px 0 30px!important;}
}
#why p,.icon-wrap p{font-size:16px;font-weight:400;}
#why{padding:20px 0;background:linear-gradient(to top,#ecf1e2,#fff);}
#why .container{padding:0 150px;}
#why p{max-width:720px;margin:5px auto 25px;line-height:30px;color:#000;}
.icon-wrap{width:20%;color:#333;margin-left:0;padding:15px;}
.icon-wrap img{width:50%;height:auto;margin-bottom:0;display:unset;}
.icon-wrap p{line-height:2.2rem;margin:0;}
@media (max-width: 767px){
#why .container {padding: 0;}    
.common_padding{padding:0 0 5px!important;}
.logodiv{margin-bottom:10px!important;display:flex;}
.logof3{width:33.33%!important;display:inline-block;margin:6px!important;}
.logof3 img{transform:scale(1) rotate(0)!important;}
}
.common_padding{background:linear-gradient(to top,#fad33a,#edf2e4);padding:0 0 20px;}
.logodiv{margin-bottom:20px;margin-top:0;}
.logof3{width:160px;display:inline-block;margin:10px 20px;}
.adgtopimg{width:93%;height:auto;}
.text-center{text-align:center!important;}
@media (max-width: 576px){
.hide-mob{display:none;}
}
@media screen and (max-width: 767px){
#why p,p{text-align:justify;}
.img-responsive{display:unset;width:100%!important;height:auto!important;}
#why p{font-size:15px;line-height:30px;color:#000;padding:0;font-weight:400;text-align-last:center;margin-bottom:7px;}
.hide-mob{display:none;}
}
p{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
.animate-text{opacity:1;transform:translateY(0);}
.fade-left-animation,.fade-right-animation{transform:translateX(0)!important;opacity:1;}
.zoom-rotate-animation{transition:transform 2s ease-in-out!important;transform:scale(1) rotate(0)!important;}
.bounce-animation{transition:transform 1s ease-in-out,opacity 1s ease-in-out;transform:translateX(0);opacity:1;}
@media only screen and (max-width: 600px){
.col-mob-6{width:50%!important;}
.col-mob-12{width:100%!important;}
}
.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
a{cursor:pointer;}
::placeholder{color:#000;opacity:1;}
.text-center{text-align:center!important;}
@media screen{
.row:after,.row:before{display:table;content:" ";}
.row:after{clear:both;}
::placeholder{color:#000;opacity:1;}
}
@media (max-width: 767px){
.copy-right{margin-bottom:0!important;}
}




























.header{
    background:#fff;
    border-bottom:1px solid #eee;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    position:relative;
    z-index:999;
}

.wrap{
    max-width:1200px;
    margin:auto;
    padding: 0px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    /* font-size:30px; */
    /* font-weight:800; */
    /* color:#111; */
}


.logo img {
    width: 200px;
    margin: 12px 0px 0px;
    /* border: 6px solid #fffdfd; */
    padding: 8px;
    border-radius: 5px;
    box-shadow: rgb(71 68 68 / 44%) 0 0 9px 0;
}


/* Navigation */
.nav{
    display:flex;
    align-items:center;
    gap:6px;
}

.nav>a,
.drop-btn{
    text-decoration:none;
    color:#333;
    padding: 10px 12px;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
    font-size: 18px;
    font-weight: 300;
}

.nav>a:hover,
.drop-btn:hover{
    background:#f5f5f5;
}

/* Dropdown */
.dropdown{
    position:relative;
}

.drop-btn{
    display:flex;
    align-items:center;
    gap:6px;
}

.arrow{
    width:14px;
    height:14px;
    transition:.25s;
}

.menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:260px;
    background:#fff;
    border:1px solid #eee;
    border-radius:12px;
    padding:8px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    z-index:9999;
}

.dropdown:hover .menu{
    display:block;
}

.menu a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#333;
    padding:10px;
    border-radius:10px;
    transition:.2s;
}

.menu a:hover{
    background:#f7f7f7;
}

.icon{
    width:36px;
    height:36px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.icon svg{
    width:18px;
    height:18px;
    fill:#333;
}

/* WhatsApp */
.whatsapp{
    background:#25D366;
    color:#fff !important;
    display:flex;
    align-items:center;
    gap:8px;
    padding: 6px 25px !important;
    border-radius:8px;
    font-weight:600;
    margin-left: 50px;
    box-shadow: rgb(71 68 68 / 44%) 0 0 9px 0;
    text-decoration:none;
}

.whatsapp:hover{
    background:#1fb959 !important;
}

.whatsapp svg{
    width:24px;
    height:24px;
    fill:currentColor;
    flex-shrink:0;
}
/* Hamburger */
.ham{
    display:none;
    cursor:pointer;
}

.ham svg{
    width:28px;
    height:28px;
    transition:.3s;
}

.ham.active svg{
    transform: rotate(180deg);
}

/* Mobile */
@media(max-width:860px){

    .ham{
        display:block;
    }

    .nav{
        display:none;
        position:absolute;
        top: 88px;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:stretch;
        padding:15px;
        border-top:1px solid #eee;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }

    .nav.open{
        display:flex;
    }

    .nav>a,
    .drop-btn{
        width:100%;
    }

    .dropdown:hover .menu{
        display:none;
    }

    .dropdown.open .menu{
        display:block;
        position:static;
        width:100%;
        border:none;
        box-shadow:none;
        padding-top:8px;
    }

    .dropdown.open .arrow{
        transform:rotate(180deg);
    }

    .whatsapp{
        justify-content:center;
        margin-top:6px;
        margin-left: 0px;
    }
}









        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
        
        
        
        
  .bottom-sections {margin: 30px 0px 0px;}

  /* Case Studies */
  .section-header {/* display: flex; */align-items: center;gap: 12px;margin-bottom: 15px;text-align: center;}
  .section-header h2 {font-size: 28px;font-weight: 900;color: var(--ink);margin: unset;line-height: 30px;}
  .section-header p {font-size: 17px;color: var(--muted);margin: 4px 0 0px;text-align-last: center;}

@media (max-width:767px){
  .section-header p {
      font-size: 13px;
      text-align-last: center;
  }
}


.case-slider-wrapper{
    position:relative;
    overflow:hidden;
    width:100%;
    padding-bottom:80px;
    margin:20px auto;
}

.case-studies-grid{
    display:flex;
    gap:24px;
    transition:transform .5s ease;
    will-change:transform;
}

.case-card{
    flex:0 0 calc((100% - 24px) / 2);
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    border:1px solid #eee;
    box-sizing:border-box;
}

.case-card-top{
    height:6px;
}

.case-card-body{
    padding:20px;
}

.case-tag{
    display:inline-block;
    padding:6px 12px;
    font-size:11px;
    font-weight:600;
    margin-bottom:10px;
    text-align: center;
}

.case-client{
    font-size:17px;
    font-weight:700;
    margin-bottom:5px;
    color:#111827;
}

.case-desc{
    font-size:13px;
    line-height:1.7;
    color:#4b5563;
    margin-bottom:20px;
}

.case-metrics{
    display:flex;
    gap:10px;
}

.case-metric{
    flex:1;
    text-align:center;
    background:#f8fafc;
    padding:9px 2px;
    border-radius:10px;
}

.case-metric-num{
    font-size:16px;
    font-weight:700;
}

.case-metric-label{
    font-size:11px;
    color:#6b7280;
    font-weight:600;
}

.case-footer{
    padding:10px 20px;
    border-top:1px solid #eee;
    font-size:13px;
    color:#374151;
}

.case-nav{
    position:absolute;
    bottom:15px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#111827;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:10;
}

#case-prev{
    left:50%;
    margin-left:-55px;
}

#case-next{
    left:50%;
    margin-left:10px;
}

/* MOBILE */
@media (max-width:767px){

    .case-studies-grid{
        gap:10px;
    }

    .case-footer {
        text-align: center;
    }

    .case-card{
        flex:0 0 100%;
        min-width:100%;
    }

    .case-card-body{
        padding:15px;
    }

    .case-slider-wrapper{
        padding-bottom: 90px;
    }
  
}



































.portfolio-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.portfolio-card img{
    width: 100%;
    display: block;
    border-radius: 10px;
    margin: 0px;
    padding: 0px;
}

/* Mobile */
@media (max-width: 767px){
    .portfolio-grid{
        grid-template-columns: 1fr;
    }
}









  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .testimonial-section {
    background: #082b67;
    padding: 35px 20px 10px;
    position: relative;
    overflow: hidden;
    margin: 20px 0px 10px;
    border-radius: 9px;
  }
  

  .testimonial-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: #ffffff;
  }

  .testimonial-container {
    max-width: 1300px;
    margin: auto;
    position: relative;
    z-index: 2;
  }

  .testimonial-subtitle {
    text-align: center;
    color: #ff8c2a;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
  }

  .testimonial-section h2 {
    text-align: center;
    color: #fff;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 15px;
  }

   .testimonial-section p {
    text-align: left;
    color: #e7e7e7;
    max-width: 760px;
    font-size: 18px;
    margin: 0 auto 30px;
    line-height: 1.8;
    text-align: center;
  }

  .testimonial-wrap {
    overflow: hidden;
  }

  .testimonial-slider {
    display: flex;
    gap: 30px;
    transition: .5s ease;
  }

  .testimonial-card {
    min-width: calc(33.333% - 20px);
    background: #fff;
    border: 2px solid #ff8c2a;
    border-radius: 22px;
    padding: 15px 15px 9px;
    position: relative;
    text-align: center;
  }

  .testimonial-card .avatar {
    position: relative;
    max-width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 5px solid #fff !important;
    box-shadow: 0 8px 20px rgb(0 0 0 / 24%) !important;
  }

  .testimonial-card .stars {
    color: #ffab00;
    text-align: center;
    font-size: 16px;
    margin-bottom: 0px;
  }

  .testimonial-card p {
    color: #38445e;
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 2px;
  }

  .testimonial-card h3 {
    color: #1f2945;
    font-size: 12px;
    margin-bottom: 0px;
    line-height: 15px;
    margin: 10px 0 0px;
    text-align: center;
  }

  .testimonial-card span {
    color: #666;
    font-size: 13px;
  }

  .testimonial-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 70px;
  }

  .testimonial-controls button {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid #8ea1c9;
    background: transparent;
    color: #8ea1c9;
    font-size: 22px;
    cursor: pointer;
  }

  .testimonial-controls button:hover {
    background: #fff;
  }

  @media(max-width:991px) {
    .testimonial-section h2 {
      font-size: 42px;
    }

    .testimonial-card {
      min-width: calc(50% - 15px);
    }
  }

  @media(max-width:768px) {
    .testimonial-section h2 {
      font-size: 22px;
    }

    .testimonial-section {
        margin: 20px 0px 10px;
    }
    .testimonial-card {
      min-width: 100%;
    }

    .testimonial-section p {
      margin-bottom: 12px;
      font-size: 14px;
    }
  }