/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 25 2026 | 04:16:30 */
.section-heading{font-size: 52px !important;
    margin: 15px 0;
    color: #0c2c61 !important;
    font-weight: 700;}

.cta-btn3:focus, .cta-btn3:hover {
    color: #fff;
}
.page-id-46159{background-color: #fff !important;}
.cta-btn3 {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: #0f46c6;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 15px;
    border-radius: 14px;
    transition: .35s;
    white-space: nowrap;
}
/* ---------- Logo section ------------------- */
.certs-strip {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 1px 1px 10px 3px rgba(20, 35, 80, 0.2);
    padding: 30px clamp(24px, 5vw, 0px);
}
.certs-strip::before {
    left: 14px;
    bottom: 14px;
    border-top: none !important;
    border-right: none !important;
    border-bottom-left-radius: 10px;
}
.certs-strip::before, .certs-strip::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border: 2px solid #ff7a1a;
    opacity: 0.6;
}
.certs-dots.left {
    left: -3px;
}
.certs-dots {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.certs-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a1a;
}
.certs-dots.right {
    right: -3px;
}
.certs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    flex-wrap: wrap;
}
.cert-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 130px;
    padding: 8px 5px;
    border-right: 1px solid #e4e9f5;
}
.cert-badge img {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
}
.certs-strip::after {
    right: 14px;
    top: 14px;
    border-bottom: none;
    border-left: none;
    border-top-right-radius: 10px;
}
/* ----------------- Logo Section --------------- */
/* --------------- Introduction section --------- */
.secoc-section {
    position: relative;
   
    padding: 0px 0px 64px;
    overflow: hidden;
}
.practice-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #0d2a63;
}
.practice-line .bar {
    width: 4px;
    height: 24px;
    background: #1c4fd6;
    border-radius: 2px;
}
.cards-panel1 {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px -16px rgba(20, 35, 80, 0.2);
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.model-card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    box-shadow: 1px 1px 5px 5px #eee;
}
.card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}
.card.blue .card-icon {
    background: #1c4fd6;
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.25);
}
.card-icon svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
}.card.blue .card-line {
    background: #1c4fd6;
}

.card-line {
    flex: 1;
    height: 2px;
}
.card.teal .card-icon {
    background: #12a889;
}
.card.teal .card-line {
    background: #12a889;
}
.card.teal .card-number {
    background: #12a889;
}
.card-title {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--navy);
    line-height: 1.35;
    margin: 0 0 10px;
}
.card.teal .card-title-underline {
    background: #12a889;
}
.card-number {
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 5px 12px;
    border-radius: 6px;
    flex-shrink: 0;
}
.card.blue .card-number {
    background: #1c4fd6;
}
.card.blue .card-title-underline {
    background: #1c4fd6;
}
.card.orange .card-icon {
    background: #ff7a1a;
}
.card.orange .card-line {
    background: #ff7a1a;
}
.card.orange .card-number {
    background: #ff7a1a;
}
.card.orange .card-title-underline {
    background: #ff7a1a;
}
.card-title-underline {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 16px;
}
/* -------------- Introduction Section ---------------------- */

/* --------------- ctn button -------------------*/
.cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: #0f46c6;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 15px;
    border-radius: 14px;
    transition: .35s;
    white-space: nowrap;
}
.cta-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.4;
}
/* -------------------- ctn button  ---------------- */
/* ------------Capabilities Section ----------------- */

/* Grid */

.capabilities-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

/* Card */

.capability-card{

    background:#fff;
    border-radius:15px;
    padding:35px 20px 10px;
    box-shadow:0 12px 35px rgba(0,0,0,.07);
    transition:.35s;
    position:relative;
    overflow:hidden;

}

.capability-card .icon .fa{color: #334155 !important;}

.capability-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.capability-card:before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#ff6b00;

}

/* Icon */

.icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:25px;

}

.icon img{

    width:36px;

}

.capability-card h3{

    font-size:20px !important;
    font-weight: 400 !important;
    color:#0c2c61 !important;
    margin-bottom:15px;
    line-height:1.4;

}

.capability-card p{

    line-height:1.8;
    font-size:16px !important;

}

/* Responsive */

@media(max-width:1200px){

.capabilities-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.section-title h2{

font-size:32px;

}

.capabilities-grid{

grid-template-columns:1fr;

}

.capability-card{

padding:30px 25px;

}

}
/* --------------- End Capabilities section ----------- */
/* -------------- tabs section ------------------------ */

/* Tabs */

.tabs{

display:flex;
background:#fff;
box-shadow:0 10px 25px rgba(0,0,0,.08);
border-radius:15px 15px 0 0;
overflow:hidden;

}

.tab{

flex:1;
border:none;
background:#fff;
padding:15px;
cursor:pointer;
transition:.3s;
display:flex;
align-items:center;
justify-content:center;
gap:15px;
border: 1px solid #e5e2e2;

}

.tab img{

width:40px;

}



.tab.active{

background:#0b3d91;
color:#fff;

}

.tab.active span{

color:#fff;

}

.tab-content{

display:none;

}

.tab-content.active{

display:block;

}

.content{

display:grid;
grid-template-columns:2fr 1fr;
background:#fff;
box-shadow:0 20px 40px rgba(0,0,0,.08);
    padding: 40px 50px 20px;
align-items:center;

}

.left h3{
font-weight: 400 !important;
font-size:22px !important;
margin-bottom:25px;

}

.left ul{

padding-left:20px;

}

.left li{margin-bottom:5px; font-size: 14px !important;}

.right img{

width:100%;
border-radius:15px;

}




/* Mobile */

@media(max-width:991px){

.tabs{

flex-direction:column;

}

.tab{

justify-content:flex-start;

}

.content{

grid-template-columns:1fr;

}

.right{

margin-top:30px;

}



}
.tabs .fa{color: #1f1f6a;}
.tabs .active .fa{color: #fff;}
.tab span { text-align: left; color: #1f1f6a; font-size: 18px; font-weight: 400 !important; line-height: 1.3;}
.tabs .active span{text-align: left !important;}
.left ul{ list-style:none;
    padding:0;
    margin:0;}
.left ul li{
    position:relative;
    padding-left:38px;
    margin-bottom:8px;
    line-height:1.7;
    color:#444;
    font-size:16px !important;

}

/* Circle */

.left ul li::before{

    content:"";
    position:absolute;
    left:0;
    top:4px;

    width:22px;
    height:22px;

    border:2px solid #ff6b00;
    border-radius:50%;
    background:#fff;

}

/* Tick */

.left ul li::after{

    content:"✓";

    position:absolute;
    left:6px;
    top:3px;

    color:#ff6b00;
    font-size:13px;
    font-weight:700;}
 


/* -------------- End tab section ------------------ */
/* -------------- pdf section ---------------------- */
 :root{
    --ink:#14213d;
    --blue:#0d1b3e;
    --blue-light:#5b8def;
    --blue-pale:#eaf0ff;
    --grey-text:#4a5568;
    --card-border:#e7ebf3;
    --sidebar:#0d1b3d;
    --bg-top:#eef2fb;
    --bg-bottom:#e3eaf9;
    --glow:#7aa2ff;
  }


  .hero{

    margin:0 auto;
    padding:60px 60px 80px;
    display:grid;
    grid-template-columns: 1fr 1.35fr;
    gap:36px;
    align-items:center;
    position:relative;
    overflow:hidden;
  }

  /* =============== LEFT COLUMN =============== */
  .eyebrow{
    font-size:13px;
    font-weight:800;
    letter-spacing:1.2px;
    color:var(--blue);
    margin-bottom:10px;
  }
  .eyebrow-rule{
    width:52px;
    height:3px;
    background:linear-gradient(90deg, var(--blue), var(--blue-light));
    margin-bottom:26px;
    border-radius:2px;
  }

  .headline{
    font-size:52px;
    font-weight:900;
    line-height:1.08;
    letter-spacing:-1px;
    margin:0 0 22px 0;
    color:var(--ink);
    position:relative;
  }
  .headline .quote-line{
    display:block;
    background: linear-gradient(90deg, #000614, #000c21 60%, #000818);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .sparkle{
    position:absolute;
    top:6px;
    right:-6px;
    width:26px;
    height:26px;
    color:var(--blue-light);
  }

  .body-copy p{
    font-size:16px;
    line-height:1.65;
    color:var(--grey-text);
    margin:0 0 18px 0;
    max-width:520px;
  }

  .demo-callout{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:28px 0 26px 0;
  }
  .clock-badge{
    flex:0 0 auto;
    width:46px;
    height:46px;
    border-radius:12px;
    border:2px solid var(--blue);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--blue);
  }
  .clock-badge svg{width:22px;height:22px;}
  .demo-callout p{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:var(--grey-text);
  }
  .demo-callout strong{
    display:block;
    color:var(--blue);
    font-size:16px;
    margin-bottom:2px;
  }

  .cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--blue);
    color:#fff;
    font-size:17px;
    font-weight:700;
    border:none;
    border-radius:12px;
    padding:16px 28px;
    cursor:pointer;
    box-shadow:0 14px 26px -10px rgba(47,93,245,0.55);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cta-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -10px rgba(47,93,245,0.6); }
  .cta-btn svg{width:18px;height:18px;}

  /* =============== MIDDLE COLUMN: FEATURE CARDS =============== */
  .feature-stack{
    display:flex;
    flex-direction:column;
    gap:26px;
    position:relative;
    z-index:2;
  }

  .feature-card{
    background:#ffffff;
    border-radius:16px;
    border:1px solid var(--card-border);
    padding:18px 20px;
    box-shadow:0 16px 30px -18px rgba(20,33,61,0.25);
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
  }
  .feature-icon{
    width:38px;
    height:38px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .feature-icon svg{width:20px;height:20px;}
  .fi-blue{ background:#e8f0ff; color:#2f5df5; }
  .fi-green{ background:#e8f8ee; color:#22a34d; }
  .fi-purple{ background:#f1ecfe; color:#7b4fe0; }
  .fi-orange{ background:#fdeee7; color:#e0632f; }
  .fi-teal{ background:#e6f8f8; color:#1fa3a3; }

  .feature-card h3{
    margin:0;
    font-size:15.5px;
    font-weight:800;
    color:var(--ink);
    line-height:1.25;
  }
  .feature-card p{
    margin:0;
    font-size:13px;
    line-height:1.4;
    color:var(--grey-text);
  }

  /* dotted connectors */
  .connector{
    position:absolute;
    right:-36px;
    top:50%;
    width:60px;
    height:2px;
    border-top:2px dotted #a9bdf0;
    z-index:1;
  }
  .connector::after{
    content:'';
    position:absolute;
    right:-4px;
    top:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blue);
  }

  /* =============== RIGHT COLUMN: LAPTOP MOCKUP =============== */
  .laptop-wrap{
    position:relative;
    z-index:2;
  }

  .laptop-screen{
    background:#0a0f1e;
    border-radius:18px;
    padding:12px;
    box-shadow:0 40px 80px -30px rgba(20,30,70,0.5);
  }

  .screen-inner{
    background:#f4f6fb;
    border-radius:10px;
    overflow:hidden;
    display:grid;
    grid-template-columns:190px 1fr;
    min-height:560px;
  }

  /* sidebar */
  .sidebar{
    background:var(--sidebar);
    color:#c7d0ea;
    padding:22px 16px;
    display:flex;
    flex-direction:column;
  }
  .sidebar .logo{
    color:#fff;
    font-weight:800;
    font-size:19px;
    margin-bottom:26px;
  }
  .sidebar .logo span{ color:var(--blue-light); }

  .nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    font-size:13.5px;
    margin-bottom:4px;
    color:#aab6d9;
  }
  .nav-item svg{width:16px;height:16px;flex:0 0 auto;}
  .nav-item.active{
    background:var(--blue);
    color:#fff;
  }

  /* top bar */
  .content-area{ padding:20px 24px; }
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
  }
  .topbar .assistant-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    color:var(--ink);
    font-size:15px;
  }
  .topbar .assistant-label svg{width:16px;height:16px;color:var(--blue);}
  .topbar-icons{
    display:flex;
    align-items:center;
    gap:14px;
    color:#7b869e;
  }
  .topbar-icons svg{width:17px;height:17px;}
  .avatar{
    width:28px;height:28px;border-radius:50%;
    background:linear-gradient(135deg,#8fb3ff,#4d7dff);
  }

  .panel{
    background:#fff;
    border-radius:12px;
    border:1px solid var(--card-border);
    padding:16px;
  }

  .panel-title{
    font-size:12.5px;
    font-weight:800;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
  }
  .panel-title svg{width:14px;height:14px;color:var(--blue);}

  /* customer profile row */
  .profile-row{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap:14px;
    margin-bottom:14px;
  }
  .profile-card{ display:flex; gap:12px; align-items:center; }
  .brand-badge{
    width:44px;height:44px;border-radius:10px;
    background:#eef1f7;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:800;color:#333;
    text-align:center;
    flex:0 0 auto;
  }
  .profile-card .name{ font-size:14px; font-weight:800; color:var(--ink); }
  .profile-card .sub{ font-size:11.5px; color:var(--grey-text); }
  .profile-card .loc{ font-size:11px; color:#9aa5bd; margin-top:2px; }

  .car-photo{
    border-radius:10px;
    overflow:hidden;
    height:100px;
    background:linear-gradient(180deg,#cfe0f5 0%, #eef3fb 55%, #dfe6ef 100%);
    position:relative;
  }
  .car-photo svg{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    height:auto;
    color:#1e2a44;
    overflow:visible;
  }

  /* two-column: insights / recommendation */
  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
  }

  .check-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#334;
    margin-bottom:8px;
  }
  .check-item svg{width:14px;height:14px;color:#22a34d;flex:0 0 auto;}

  .reco-box{
    background:var(--blue-pale);
    border-radius:8px;
    padding:12px;
    font-size:12px;
    color:#233;
    line-height:1.45;
    margin-bottom:10px;
  }
  .gen-btn{
    width:100%;
    background:#fff;
    border:1.5px solid var(--blue);
    color:var(--blue);
    font-weight:700;
    font-size:12px;
    padding:9px;
    border-radius:8px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:6px;
  }

  /* recommended solution / pricing */
  .rec-solution{ display:flex; gap:10px; align-items:center; }
  .rec-solution .thumb{
    width:70px;height:50px;border-radius:8px;
    background:linear-gradient(135deg,#dfe6f0,#c7d2e2);
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    color:#334;
  }
  .rec-solution .thumb svg{width:36px;height:36px;}
  .rec-solution .name{ font-size:12.5px; font-weight:800; color:var(--ink); }
  .rec-solution .tag{ font-size:11px; color:var(--grey-text); margin:2px 0 4px; }
  .link-arrow{ font-size:11.5px; color:var(--blue); font-weight:700; text-decoration:none; }

  .price-row{ display:flex; align-items:center; gap:10px; }
  .price-icon{
    width:40px;height:40px;border-radius:50%;
    background:var(--blue-pale);
    display:flex;align-items:center;justify-content:center;
    color:var(--blue);
    flex:0 0 auto;
  }
  .price-icon svg{width:18px;height:18px;}
  .price-label{ font-size:11px; color:var(--grey-text); }
  .price-value{ font-size:17px; font-weight:800; color:var(--ink); }
  .price-sub{ font-size:10.5px; color:#9aa5bd; margin-bottom:4px; }

  /* sales collateral */
  .collateral-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
  }
  .collateral-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }
  .collateral-item{
    display:flex;
    gap:8px;
    align-items:center;
    background:#f8f9fc;
    border:1px solid var(--card-border);
    border-radius:8px;
    padding:8px 10px;
  }
  .collateral-item .file-icon{
    width:26px;height:26px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .collateral-item .file-icon svg{width:14px;height:14px;}
  .fi-pdf{ background:#fdeaea; color:#d94848; }
  .fi-mp4{ background:#eaf0fd; color:#3f6fe0; }
  .fi-xlsx{ background:#e8f8ee; color:#22a34d; }
  .collateral-item .fname{ font-size:11.5px; font-weight:700; color:var(--ink); }
  .collateral-item .ftype{ font-size:10px; color:#9aa5bd; }

  /* ambient background glow */
  .glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
    opacity:0.35;
  }
  .glow-1{ width:420px; height:420px; background:var(--glow); right:-80px; bottom:-140px; }
  .glow-2{ width:260px; height:260px; background:#c9d6ff; left:-60px; top:-60px; }

  @media (max-width:1200px){
    .hero{ grid-template-columns:1fr; }
    .connector{ display:none; }
  }
/* ----------------- End pdf section --------------- */
/*------------ Key segment section ------------------*/
.vehicle-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 20px;
    position: relative;
}
.connector {
    position: absolute;
    top: 50%;
    height: 2px;
    border-top: 2px dashed #b9c6e6;
    z-index: -1;
}
.vehicle-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 1px 1px 18px 5px rgb(13 27 76 / 28%);
    padding: 34px 14px 20px;
    text-align: center;
    position: relative;
    margin: 0 8px;
}
.num-pill {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #dbe6fb;
    color: #0c2c61;
    font-weight: 700;
    width: 34px;
    height: 22px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vehicle-icon img {
    width: 70px;
    height: 70px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e8541e;
}
.vehicle-icon span svg {
    width: 50px;
    height: 50px;
}
.vehicle-card .vname {
    font-weight: 700;
}
/* ------------- End key segment section -------------- */
/* =========================================================
   BENEFITS SECTION
========================================================= */
 :root{
    --navy:#0b1f4d;
    --navy-soft:#1a2f63;
    --ink:#1b2333;
    --grey-text:#5b6478;
    --card-bg:#ffffff;
    --border:#eef0f5;
    --dealers:#ff8a1e;
    --customers:#2d5bff;
    --providers:#0fb6a6;
    --bg:#f4f6fb;
  }
 

 
  .heading-wrap{
    text-align:center;
    margin-bottom:64px;
  }
 
 

 
  .subtitle{
    font-size:17px;
    color:var(--grey-text);
    max-width:620px;
    margin:0 auto;
    line-height:1.6;
  }
 
  .columns{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
    align-items:start;
  }
 
  .col{
    background:var(--card-bg);
    border-radius:20px;
    border:1px solid var(--border);
    box-shadow:0 24px 50px -30px rgba(11,31,77,0.18);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
 
  .col-head{
    padding:30px 28px 24px;
    display:flex;
    align-items:center;
    gap:14px;
  }
 
  .col-head .icon-badge{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }
  .col-head .icon-badge svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;}
 
  .col-head h2{
    margin:0;
    font-size:24px;
    font-weight:800;
    color:var(--ink);
  }
  
 
  .dealers .icon-badge{ background:var(--dealers); }
  .customers .icon-badge{ background:var(--customers); }
  .providers .icon-badge{ background:var(--providers); }
 
  .col-accent{
    height:4px;
    width:100%;
  }
  .dealers .col-accent{ background:linear-gradient(90deg,var(--dealers),#ffb35c); }
  .customers .col-accent{ background:linear-gradient(90deg,var(--customers),#6f8dff); }
  .providers .col-accent{ background:linear-gradient(90deg,var(--providers),#5fe0d2); }
 
  .item-list{
    padding:8px 24px 26px;
    display:flex;
    flex-direction:column;
  }
 
  .item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px 4px;
    border-bottom:1px solid var(--border);
  }
  .item:last-child{ border-bottom:none; }
 
  .item .item-icon{
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .item .item-icon svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;}
 
  .dealers .item-icon{ background:var(--dealers); }
  .customers .item-icon{ background:var(--customers); }
  .providers .item-icon{ background:var(--providers); }
 
  .item p{
    margin:0;
    line-height:1.5;
    color:var(--ink);
    padding-top:2px;
  }
 
  @media (max-width:1100px){
    .columns{ grid-template-columns:1fr; }
    h1{ font-size:34px; }
  }
/* --------------- End benefit section --------------- */
/*=========================================
        FAQ SECTION
=========================================*/

.faq-section{
    padding:50px 0 30px;
    position:relative;
}


/*=========================================
Heading
=========================================*/

.faq-heading{
    text-align:center;
    margin-bottom:60px;
}

.faq-heading span{
    display:inline-block;
    color:#ff6b00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    position:relative;
    padding:0 25px;
}

.faq-heading span:before,
.faq-heading span:after{
    content:"";
    position:absolute;
    width:40px;
    height:2px;
    background:#ff6b00;
    top:50%;
}

.faq-heading span:before{
    left:-30px;
}

.faq-heading span:after{
    right:-30px;
}

.faq-heading h2{
    margin:20px 0 15px;
    color:#12396d;
    font-size:42px;
    font-weight:700;
}

.faq-heading p{
    max-width:760px;
    margin:auto;
    line-height:1.8;
    font-size:17px;
}

/*=========================================
FAQ Wrapper
=========================================*/

.faq-wrapper{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/*=========================================
FAQ Card
=========================================*/

.faq-item{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;
}

.faq-item:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

/*=========================================
Question
=========================================*/

.faq-question{

    width:100%;

    background:none;

    border:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 20px;

    cursor:pointer;

    text-align:left;
}

/*=========================================
Left Side
=========================================*/

.faq-left{

    display:flex;

    align-items:center;

    gap:22px;

}

.faq-number{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#eef4ff;

    color:#0d4eb3;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    flex-shrink:0;

    transition:.35s;

}

.faq-item:hover .faq-number{

    background:#ff6b00;

    color:#fff;

}

.faq-left h3{

    margin:0;

    color:#12396d;

    font-size:18px;

    font-weight:500;

    line-height:1.5;

}

/*=========================================
Plus Icon
=========================================*/

.faq-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff5ee;

    color:#ff6b00;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:600;

    border:2px solid #ffe2d0;

    transition:.35s;

}

.faq-item.active .faq-icon{

    background:#ff6b00;

    color:#fff;

    border-color:#ff6b00;

}

/*=========================================
Answer
=========================================*/

.faq-answer{

    display:none;

    padding:0 35px 30px 112px;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-answer p{

    margin:0;

    color:#666;

    line-height:1.9;

    font-size:16px;

}
.faq-question:hover, .faq-question:focus{background-color: transparent !important;border-color: transparent !important;}

/*=========================================
Divider
=========================================*/

.faq-item.active{

    border-left:5px solid #ff6b00;

}

/*=========================================
Responsive
=========================================*/

@media(max-width:991px){

.faq-heading h2{

font-size:34px;

}
.faq-question:hover, .faq-question:focus{background-color: transparent !important;border-color: transparent !important;}

.faq-question{

padding:22px;

}

.faq-answer{

padding:0 22px 25px 90px;

}

}

@media(max-width:767px){

.faq-section{

padding:70px 0;

}

.faq-heading h2{

font-size:30px;

}

.faq-heading p{

font-size:15px;

}

.faq-question{

padding:18px;

}
.faq-question:hover, .faq-question:focus{background-color: transparent !important;border-color: transparent !important;}

.faq-left{

gap:15px;

align-items:flex-start;

}

.faq-left h3{

font-size:17px;

}

.faq-number{

width:46px;

height:46px;

font-size:15px;

}

.faq-icon{

width:38px;

height:38px;

font-size:22px;

}

.faq-answer{

padding:0 18px 20px 78px;

}

}
/* ------------- question section -------------- */
/* =========================================================
   AUTO ECOMMERCE SECTION
========================================================= */

.auto-ecommerce-section {
    width: 100%;
    padding: 70px 30px 80px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
}

.auto-ecommerce-container {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 55px;

    position: relative;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.auto-ecommerce-visual {
    position: relative;
    width: 100%;
    min-height: 610px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.orange-shape {
    position: absolute;

    width: 430px;
    height: 700px;

    background: #ff920d;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 0;
}

.auto-ecommerce-image {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 820px;

    height: auto;

    display: block;

    border-radius: 0;

    object-fit: contain;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.auto-ecommerce-content {
    position: relative;
    z-index: 3;

    padding: 20px 20px 20px 0;
}


/* =========================================================
   KICKER
========================================================= */

.section-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #102f68;

    font-size: 18px;
    font-weight: 700;

    margin-bottom: 10px;
}

.section-kicker span {
    width: 38px;
    height: 3px;

    display: inline-block;

    background: #ff7419;
}


/* =========================================================
   HEADING
========================================================= */

.auto-ecommerce-content h2 {
    margin: 0;

    color: #102f68;

    font-size: clamp(52px, 5vw, 82px);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -3px;
}

.auto-ecommerce-content h2 strong {
    display: block;

    color: #f36f17;

    font-weight: 800;
}


/* =========================================================
   ORANGE LINE
========================================================= */

.orange-line {
    width: 42px;
    height: 3px;

    background: #ff7419;

    margin: 25px 0 22px;
}


/* =========================================================
   INTRO
========================================================= */

.intro-text {
    max-width: 680px;

    margin: 0 0 27px;

    color: #243858;

    font-size: 18px;

    line-height: 1.65;
}


/* =========================================================
   CONTENT POINT
========================================================= */

.content-point {
    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 18px;

    align-items: start;

    margin-bottom: 25px;
}

.content-point p {
    margin: 0;

    color: #263957;

    font-size: 17px;

    line-height: 1.65;
}

.content-point strong {
    color: #142f5c;
    font-weight: 800;
}


/* =========================================================
   POINT ICON
========================================================= */

.point-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #ff7419;

    font-size: 24px;

    box-shadow:
        0 5px 25px rgba(24, 55, 100, 0.12);
}

.point-icon span {
    font-size: 26px;
}


/* =========================================================
   FEATURE STRIP
========================================================= */

.auto-ecommerce-features {
    width: 100%;
    max-width: 1380px;

    margin: 55px auto 0;

    padding: 20px 10px;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 8px 35px rgba(21, 55, 100, 0.10);

    box-sizing: border-box;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.feature-item {
    position: relative;

    text-align: center;

    padding: 15px 20px 20px;

    border-right: 1px solid #dce3ee;
}

.feature-item:last-child {
    border-right: none;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.feature-icon {
    width: 74px;
    height: 74px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 30px;

    background: #f7faff;

    border: 1px solid #d6e1f5;
}

.feature-icon.blue {
    color: #153c78;
    border-color: #bfd0f1;
}

.feature-icon.orange {
    color: #ff7419;
    border-color: #ffd0b5;
}

.feature-icon.gold {
    color: #f5a623;
    border-color: #f5d8a6;
}

.feature-icon.green {
    color: #009c85;
    border-color: #bce7de;
}

.feature-icon.purple {
    color: #925be8;
    border-color: #dbc8fa;
}


/* =========================================================
   FEATURE HEADING
========================================================= */

.feature-item h3 {
    margin: 0 0 10px;

    color: #102f68;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   FEATURE DESCRIPTION
========================================================= */

.feature-item p {
    margin: 0;

    color: #273b5b;

    font-size: 15px;

    line-height: 1.5;
}


/* =========================================================
   BOTTOM ACCENT
========================================================= */

.feature-item i {
    display: block;

    width: 38px;
    height: 3px;

    margin: 18px auto 0;

    background: #183d78;
}

.feature-item:nth-child(3) i {
    background: #ff7419;
}

.feature-item:nth-child(4) i {
    background: #f5a623;
}

.feature-item:nth-child(5) i {
    background: #009c85;
}

.feature-item:nth-child(6) i {
    background: #925be8;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .auto-ecommerce-section {
        padding: 55px 20px 60px;
    }

    .auto-ecommerce-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .auto-ecommerce-visual {
        min-height: 520px;
    }

    .orange-shape {
        width: 330px;
        height: 600px;
    }

    .auto-ecommerce-content h2 {
        font-size: 55px;
    }

    .intro-text {
        font-size: 16px;
    }

    .content-point p {
        font-size: 15px;
    }

    .auto-ecommerce-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    .feature-item:nth-child(3) {
        border-right: none;
    }

    .feature-item:nth-child(n+4) {
        border-top: 1px solid #dce3ee;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .auto-ecommerce-container {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .auto-ecommerce-visual {
        min-height: auto;
    }

    .orange-shape {
        width: 300px;
        height: 500px;
    }

    .auto-ecommerce-image {
        max-width: 700px;
    }

    .auto-ecommerce-content {
        padding: 0 10px;
    }

    .auto-ecommerce-content h2 {
        font-size: 58px;
    }

    .auto-ecommerce-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-item:nth-child(2),
    .feature-item:nth-child(4),
    .feature-item:nth-child(6) {
        border-right: none;
    }

    .feature-item:nth-child(3) {
        border-right: 1px solid #dce3ee;
    }

    .feature-item:nth-child(n+3) {
        border-top: 1px solid #dce3ee;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .auto-ecommerce-section {
        padding: 35px 15px 45px;
    }

    .auto-ecommerce-container {
        gap: 25px;
    }


    /* Image */

    .auto-ecommerce-visual {
        min-height: auto;

        margin: 0 -5px;
    }

    .orange-shape {
        width: 220px;
        height: 380px;
    }

    .auto-ecommerce-image {
        width: 100%;
        max-width: 100%;
    }


    /* Kicker */

    .section-kicker {
        font-size: 14px;

        gap: 8px;

        margin-bottom: 8px;
    }

    .section-kicker span {
        width: 25px;
        height: 2px;
    }


    /* Heading */

    .auto-ecommerce-content h2 {
        font-size: clamp(42px, 13vw, 58px);

        letter-spacing: -2px;

        line-height: 0.98;
    }


    /* Line */

    .orange-line {
        margin: 18px 0;
    }


    /* Text */

    .intro-text {
        font-size: 15px;

        line-height: 1.6;

        margin-bottom: 22px;
    }


    .content-point {
        grid-template-columns: 45px 1fr;

        gap: 12px;

        margin-bottom: 20px;
    }

    .content-point p {
        font-size: 14px;

        line-height: 1.6;
    }


    /* Point icon */

    .point-icon {
        width: 45px;
        height: 45px;

        font-size: 18px;
    }


    /* Features */

    .auto-ecommerce-features {
        margin-top: 35px;

        padding: 10px 0;

        grid-template-columns: 1fr 1fr;

        border-radius: 15px;
    }


    .feature-item {
        padding: 18px 10px;

        border-right: 1px solid #dce3ee;
    }

    .feature-item:nth-child(even) {
        border-right: none;
    }

    .feature-item:nth-child(n+3) {
        border-top: 1px solid #dce3ee;
    }


    /* Feature icon */

    .feature-icon {
        width: 55px;
        height: 55px;

        font-size: 22px;

        margin-bottom: 10px;
    }


    /* Feature title */

    .feature-item h3 {
        font-size: 14px;

        line-height: 1.3;

        margin-bottom: 7px;
    }


    /* Feature text */

    .feature-item p {
        font-size: 12px;

        line-height: 1.45;
    }


    .feature-item i {
        width: 28px;

        margin-top: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .auto-ecommerce-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auto-ecommerce-content h2 {
        font-size: 40px;
    }

    .feature-item {
        padding-left: 7px;
        padding-right: 7px;
    }

    .feature-item h3 {
        font-size: 13px;
    }

    .feature-item p {
        font-size: 11.5px;
    }
}


<!--- Magento service page ------------->
/* =========================================================
   MAGENTO SERVICES SECTION
========================================================= */

.magento-services {
  width: 100%;
  padding: 75px 25px 90px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbfcff 55%,
      #fffaf5 100%
    );

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  box-sizing: border-box;

  overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.magento-container {
  width: 100%;
  max-width: 1450px;

  margin: 0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.magento-intro {
  max-width: 1150px;

  margin: 0 auto 50px;

  text-align: center;
}


/* Brand */

.magento-brand {
  display: inline-block;

  margin-bottom: 14px;

  color: #f36f21;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: 1.5px;

  position: relative;
}

.magento-brand::after {
  content: "";

  display: block;

  width: 36px;
  height: 3px;

  margin: 7px auto 0;

  background: #f36f21;

  border-radius: 5px;
}


/* Main heading */

.magento-intro h2 {
  margin: 0;

  color: #102653;

  font-size: clamp(38px, 4.5vw, 62px);

  line-height: 1.12;

  font-weight: 800;

  letter-spacing: -1.5px;
}

.magento-intro h2 span {
  color: #f36f21;
}


/* Heading line */

.magento-title-line {
  width: 145px;
  height: 4px;

  margin: 24px auto;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #143c91,
      #f36f21
    );
}


/* Intro bold paragraph */

.magento-intro h3 {
  max-width: 950px;

  margin: 0 auto 17px;

  color: #182846;

  font-size: 18px;

  line-height: 1.55;

  font-weight: 700;
}


/* Intro paragraph */

.magento-intro p {
  max-width: 1050px;

  margin: 0 auto 22px;

  color: #4b5870;

  font-size: 16px;

  line-height: 1.7;
}


/* Service intro */

.magento-intro strong {
  display: block;

  color: #102653;

  font-size: 17px;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.magento-services-grid {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 28px;

  align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.magento-card {

  position: relative;

  min-height: 355px;

  padding: 32px 32px 35px;

  background: #ffffff;

  border-radius: 18px;

  border: 1px solid #e5eaf2;

  box-sizing: border-box;

  overflow: hidden;

  box-shadow:
    0 12px 35px
    rgba(20, 45, 90, 0.08);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* Hover */

.magento-card:hover {

  transform: translateY(-7px);

  box-shadow:
    0 20px 45px
    rgba(20, 45, 90, 0.14);
}


/* =========================================================
   CARD COLOR BACKGROUNDS
========================================================= */

.consulting-card {
  background:
    linear-gradient(
      135deg,
      #ffffff 60%,
      #fff5eb 100%
    );

  border-bottom:
    5px solid #ff7518;
}


.design-card {
  background:
    linear-gradient(
      135deg,
      #ffffff 60%,
      #f1f5ff 100%
    );

  border-bottom:
    5px solid #1649ba;
}


.migration-card {
  background:
    linear-gradient(
      135deg,
      #ffffff 60%,
      #effbf9 100%
    );

  border-bottom:
    5px solid #07998e;
}


.managed-card {
  background:
    linear-gradient(
      135deg,
      #ffffff 60%,
      #f5f0ff 100%
    );

  border-bottom:
    5px solid #7650c9;
}


/* =========================================================
   ICON
========================================================= */

.magento-icon {

  width: 72px;
  height: 72px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  margin-bottom: 22px;

  font-size: 27px;

  font-weight: 700;

  position: relative;

  z-index: 2;
}


/* Consulting */

.consulting-card .magento-icon {

  color: #f36f21;

  background: #fff0e2;

  border:
    1px solid #ffd8ba;
}


/* Design */

.design-card .magento-icon {

  color: #1649ba;

  background: #e9efff;

  border:
    1px solid #cedaff;
}


/* Migration */

.migration-card .magento-icon {

  color: #078f84;

  background: #e6f7f4;

  border:
    1px solid #c4ebe5;
}


/* Managed */

.managed-card .magento-icon {

  color: #7650c9;

  background: #f0eaff;

  border:
    1px solid #ddd0ff;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.magento-card-content {

  position: relative;

  z-index: 3;

  max-width: 90%;
}


/* Card heading */

.magento-card h3 {
    margin: 0;
    color: #102653 !important;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 750;
    text-align: left;
}


/* Small line */

.card-line {

  width: 35px;
  height: 3px;

  margin: 12px 0 16px;

  border-radius: 5px;
}


/* Card lines */

.consulting-card .card-line {
  background: #f36f21;
}

.design-card .card-line {
  background: #1649ba;
}

.migration-card .card-line {
  background: #07998e;
}

.managed-card .card-line {
  background: #7650c9;
}


/* Description */

.magento-card-content > p {

  margin: 0 0 18px;

  color: #4d5870;

  font-size: 15px;

  line-height: 1.6;

  max-width: 430px;
}


/* =========================================================
   LIST
========================================================= */

.magento-card ul {

  margin: 0;

  padding: 0;

  list-style: none;
}

.magento-card li {

  position: relative;

  padding-left: 27px;

  margin-bottom: 10px;

  color: #243451;

  font-size: 14px;

  line-height: 1.45;
}


/* Checkmark */

.magento-card li::before {

  content: "✓";

  position: absolute;

  left: 0;
  top: 0;

  width: 17px;
  height: 17px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  font-size: 11px;

  font-weight: 800;
}


/* Check colors */

.consulting-card li::before {

  color: #f36f21;

  background: #fff0e2;
}

.design-card li::before {

  color: #1649ba;

  background: #e9efff;
}

.migration-card li::before {

  color: #07998e;

  background: #e6f7f4;
}

.managed-card li::before {

  color: #7650c9;

  background: #f0eaff;
}


/* =========================================================
   DECORATIVE ILLUSTRATIONS
========================================================= */

.card-illustration {

  position: absolute;

  right: 25px;

  bottom: 25px;

  width: 150px;

  height: 130px;

  opacity: 0.14;

  pointer-events: none;
}


/* Consulting */

.illustration-person {

  position: absolute;

  right: 35px;
  bottom: 10px;

  font-size: 100px;

  color: #f36f21;
}

.illustration-board {

  position: absolute;

  right: 0;
  top: 0;

  width: 100px;
  height: 65px;

  border: 5px solid #f36f21;

  border-radius: 8px;
}


/* Design */

.browser-window {

  position: absolute;

  right: 0;
  top: 20px;

  width: 135px;
  height: 90px;

  border:
    5px solid #1649ba;

  border-radius: 8px;
}

.browser-window span {

  display: inline-block;

  width: 15px;
  height: 15px;

  margin: 12px 3px;

  border: 3px solid #1649ba;
}


/* Migration */

.migration-art .cloud {

  position: absolute;

  right: 20px;
  top: 0;

  color: #07998e;

  font-size: 80px;
}

.database {

  position: absolute;

  right: 10px;
  bottom: 5px;

  width: 80px;
  height: 50px;

  border:
    5px solid #07998e;

  border-radius: 50%;
}


/* Managed */

.managed-art {

  right: 30px;

  opacity: 0.12;
}

.monitor {

  position: absolute;

  width: 100px;
  height: 65px;

  right: 20px;
  top: 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #7650c9;

  border:
    5px solid #7650c9;

  border-radius: 8px;

  font-size: 25px;
}

.support-dot {

  position: absolute;

  width: 25px;
  height: 25px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #7650c9;

  border:
    3px solid #7650c9;

  font-weight: 700;
}

.dot-1 {
  top: 5px;
  left: 15px;
}

.dot-2 {
  bottom: 5px;
  left: 5px;
}

.dot-3 {
  right: 0;
  bottom: 5px;
}


/* =========================================================
   MAKE MANAGED CARD WIDER
========================================================= */

.managed-card {

  grid-column: 1 / 3;

  min-height: 300px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .magento-services {

    padding:
      60px 20px 70px;
  }

  .magento-services-grid {

    gap: 20px;
  }

  .magento-card {

    padding:
      28px 24px 30px;
  }

  .magento-card h3 {

    font-size: 21px;
  }

  .magento-card-content {

    max-width: 100%;
  }

  .card-illustration {

    opacity: 0.08;
  }
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 850px) {

  .magento-services {

    padding:
      55px 20px 65px;
  }


  /* Intro */

  .magento-intro {

    margin-bottom: 40px;
  }

  .magento-intro h2 {

    font-size: 42px;
  }

  .magento-intro h3 {

    font-size: 16px;
  }

  .magento-intro p {

    font-size: 15px;
  }


  /* Grid */

  .magento-services-grid {

    grid-template-columns: 1fr;

    max-width: 680px;

    margin: 0 auto;

    gap: 22px;
  }


  /* Reset managed width */

  .managed-card {

    grid-column: auto;
  }


  /* Card */

  .magento-card {

    min-height: auto;

    padding:
      30px;
  }


  /* Illustration */

  .card-illustration {

    opacity: 0.08;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .magento-services {

    padding:
      45px 15px 55px;
  }


  /* Intro */

  .magento-intro {

    text-align: left;

    margin-bottom: 35px;
  }

  .magento-brand {

    font-size: 13px;
  }

  .magento-intro h2 {

    font-size: 31px;

    line-height: 1.18;

    letter-spacing: -0.7px;
  }


  .magento-title-line {

    margin:
      18px 0;
  }


  .magento-intro h3 {

    font-size: 15px;

    line-height: 1.55;
  }


  .magento-intro p {

    font-size: 14px;

    line-height: 1.65;
  }


  .magento-intro strong {

    font-size: 15px;
  }


  /* Cards */

  .magento-services-grid {

    gap: 20px;
  }


  .magento-card {

    padding:
      25px 20px 28px;

    border-radius: 16px;
  }


  /* Icon */

  .magento-icon {

    width: 60px;
    height: 60px;

    margin-bottom: 18px;

    font-size: 22px;
  }


  /* Heading */

  .magento-card h3 {

    font-size: 21px;
  }


  .card-line {

    margin:
      9px 0 13px;
  }


  /* Description */

  .magento-card-content > p {

    font-size: 14px;

    line-height: 1.55;
  }


  /* List */

  .magento-card li {

    font-size: 13px;

    padding-left: 25px;

    margin-bottom: 9px;
  }


  /* Hide illustrations on mobile */

  .card-illustration {

    display: none;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .magento-services {

    padding-left: 12px;
    padding-right: 12px;
  }

  .magento-intro h2 {

    font-size: 28px;
  }

  .magento-card {

    padding:
      22px 17px 25px;
  }

  .magento-card h3 {

    font-size: 19px;
  }

  .magento-card-content > p {

    font-size: 13px;
  }

  .magento-card li {

    font-size: 12px;
  }
}