.dd-mission-wrap {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:64px;
    align-items: start;
}
.mission-label,
.principles-label{
    color:var(--accent);
    font-size:12px;
    font-weight:700;
    margin:0 0 14px;
}
.dd-mission p{
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    margin:0;
}
.dd-mission-wrap .dd-principles {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 4px;
    margin-top: 0;
}
.principles-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
.principles-grid .each-principle{
border:var(--dd-hairline) solid var(--dd-color-card-border);
border-radius:6px;
padding:20px;
background: #1b1b1b;
display:flex;
gap: 16px;
flex-direction:row;
}
.abt-content h3,
.abt-content p {
    text-align: left;
} 
.icon{
width:34px;
height:34px;
margin-bottom:18px;
display:flex;
align-items:center;
justify-content:center;
}
.icon svg{width:32px;height:32px;display:block;}
.each-principle h3{
font-size: 20px;
font-weight: 500;
line-height: 1.4;
margin:0 0 4px;
}
.each-principle p{
font-size:16px;
line-height:1.6;
color:var(--muted);
margin:0;
}
.each-principle .icon {
width: 46px;
height:46px;
border-radius:8px;
background:var(--icon-bg);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:0;
margin-top: 0;
}
.each-principle .icon img {
    width: 26px;
    height: 26px;
}
.each-principle .icon svg {
    fill: var(--dd-text-on-light)
}
.abt-content {
    width: calc(100% - 65px);
}
@media (min-width: 0) and (max-width: 767.98px) {
.principles-grid {
grid-template-columns: repeat(1,1fr);
gap: 20px;
}
.principles-grid .each-principle {
    padding: 18px;
} 
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dd-mission-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
@media (max-width:991.98px){
.dd-mission-wrap{grid-template-columns:1fr;  gap: 30px;}

}



/* dimex difference */
.dd-difference h2{
    margin: 0 0 40px !important;
}
.dd-difference-main{
display:grid;
grid-template-columns: 1fr 600px;
gap:40px;
align-items:center;
}

/* left feature list */
.features{
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}
.feature{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: var(--dd-hairline) solid var(--dd-color-card-border);
    border-radius: 6px;
    padding: 20px;
    background: #1b1b1b;

}
.feature .icon{
width:32px;
height:32px;
flex:0 0 32px;
margin-top:2px;
}
.feature .icon svg{width:100%;height:100%;display:block;}
.feature h3{
font-size:16px;
font-weight:500;
margin:0 0 4px;
}
.feature p{
font-size:14px;
line-height:1.55;
color:var(--dd-text-muted-on-dark);
margin:0;
}

/* hub diagram */
.hub-section{
    width: 100%;
}

/* Our values */
.our-values { 
    color:var(--dd-text-on-light); 
    text-align:center; 
}
.our-values__eyebrow { 
    margin:0 0 .4rem; 
    color:var(--accent); 
    font-size:.75rem; 
    font-weight:700; 
}
.our-values__title { 
    margin:0 auto clamp(2rem, 4vw, 3.5rem); 
    color:var(--dd-text-on-light); 
    font-size:clamp(1.65rem, 3vw, 2.5rem); 
}
.our-values__grid { 
    display:grid; 
    grid-template-columns:repeat(6, minmax(0, 1fr)); 
    margin-top: 40px;
    gap: 16px;
}
.our-values__card { 
   position: relative;
   align-items: flex-start;
   border: var(--dd-hairline) solid var(--dd-color-card-border);
   border-radius: 6px;
   padding: 20px;
   background: #1b1b1b;
}
.our-values__card::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 2px;
    height: 60%;
    background-color: var(--dd-border-light);
    display: none;
}
.our-values__icon { 
    width:2.4rem; 
    height:2.4rem; 
    margin:0 auto 1rem; 
    fill:none; 
    stroke:var(--accent); 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    stroke-width:1.6; 
}
.our-values__card:last-child:after {
    display: none;
}

.our-values__card h3 { 
    margin:0 0 .5rem; 
    font-size:20px; 
    font-weight:500; 
}
.our-values__card p { 
    margin:0 auto; 
    font-size:16px;
    color: var(--muted); 
    line-height:1.45; 
}
@media (max-width: 767.98px) {
    .features {
        grid-template-columns: 1fr;
    }
    .our-values__grid {
        margin-top: 0;
    }
    .dd-mission p, .dd-mission h2 {
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
 .dd-difference-main {
    grid-template-columns: 1fr;
 }

}

@media (min-width: 768px) and (max-width:991.98px){
.main{
    grid-template-columns:1fr;
}
.hub-section{
    grid-template-columns:1fr;
    justify-items:center;gap:24px;
}
.hub-wrap{
    order:2;
}
.col:first-of-type{
    order:1;
}
.col:last-of-type{
    order:3;
}
.our-values__grid { 
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.our-values__card:nth-child(4) { 
    border-left:0; 
}
}
@media (max-width: 767.98px){
    .dd-difference h2{
        margin: 0 0 30px !important;
    }
    .dd-difference-main {
        grid-template-columns: 1fr;
    }
    .dd-difference-main .hub-section{
        display: none;
    }
    .our-values__card::after {
        display: none;
    }
    .our-values__grid { grid-template-columns:1fr }
}
@media (max-width:480px) {
.our-values__grid { grid-template-columns:1fr; }
.our-values__card { padding:1rem .5rem; 
.our-values__card:nth-child(odd) { border-left:0; }

}
}


@media (max-width: 768px) and (max-width: 1199.98px) {
    .hub-section {
        width: 80%;
        margin: 0 auto;
    } 
    .our-values__card:nth-child(3):after,
    .our-values__card:nth-child(6):after {
        display: none;
    }
}



