@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-Regular.ttf')}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-Italic.ttf');font-style:italic}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-Bold.ttf');font-weight:700}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-BoldItalic.ttf');font-weight:700;font-style:italic}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-SemiBold.ttf');font-weight:600}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-SemiBoldItalic.ttf');font-weight:600;font-style:italic}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-Light.ttf');font-weight:300}
@font-face{font-family:'Open Sans';src:url('../../../../../../etc.clientlibs/mchp/clientlibs/clientlib-site/resources/Open_Sans/OpenSans-LightItalic.ttf');font-weight:300;font-style:italic}
.mchp-design-tools{background:#2e4872;padding:48px 72px;text-align:center;color:#fff}
.mchp-design-tools .dt-heading{max-width:1280px;margin:0 auto 32px;color:#fff;font-weight:600;font-size:36px;line-height:44px}
.mchp-design-tools .dt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;max-width:1280px;margin:0 auto;padding-top:33px}
.mchp-design-tools .dt-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:72px 24px 56px;border-radius:4px;background:#54688b;color:#fff;text-decoration:none;transition:background .2s ease,transform .2s ease}
.mchp-design-tools .dt-icon{position:absolute;top:-33px;left:50%;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background-color .2s ease}
.mchp-design-tools .dt-icon img,.mchp-design-tools .dt-icon svg{width:32px;height:32px;max-width:32px;max-height:32px;color:#fff;fill:none;stroke:#fff}
.mchp-design-tools .dt-icon svg path,.mchp-design-tools .dt-icon svg circle,.mchp-design-tools .dt-icon svg rect,.mchp-design-tools .dt-icon svg line,.mchp-design-tools .dt-icon svg polyline,.mchp-design-tools .dt-icon svg polygon,.mchp-design-tools .dt-icon svg ellipse{stroke:#fff}
.mchp-design-tools .dt-icon svg [stroke="currentColor"]{stroke:#fff}
.mchp-design-tools .dt-icon--placeholder{opacity:.85}
.mchp-design-tools .dt-icon:has(.dt-icon--placeholder){outline:1px dashed rgba(255,255,255,0.4);outline-offset:-1px}
.mchp-design-tools .dt-card-title{font-weight:700;font-size:16px;line-height:1;margin-top:0}
.mchp-design-tools .dt-card-desc{font-weight:400;font-size:14px;line-height:1.2;margin-top:8px}
.mchp-design-tools .dt-cta-wrap{max-width:1280px;margin:32px auto 0}
.mchp-design-tools .dt-cta{display:inline-block;border:1px solid #fff;background:transparent;color:#fff;border-radius:4px;padding:12px 24px;min-width:193px;font-weight:600;font-size:16px;line-height:24px;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.mchp-design-tools .dt-card:hover,.mchp-design-tools .dt-card:focus-visible{background:rgba(255,255,255,0.25)}
.mchp-design-tools .dt-card:hover .dt-icon,.mchp-design-tools .dt-card:focus-visible .dt-icon{background:#157eac;transform:translateX(-50%) scale(1.05)}
.mchp-design-tools .dt-card:hover .dt-card-title,.mchp-design-tools .dt-card:focus-visible .dt-card-title{text-decoration:none}
.mchp-design-tools .dt-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mchp-design-tools .dt-cta:hover,.mchp-design-tools .dt-cta:focus-visible{background:#157eac;border-color:#157eac;color:#fff}
.mchp-design-tools .dt-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media only screen and (max-width:1243px){.mchp-design-tools .dt-grid{grid-template-columns:repeat(3,1fr);row-gap:56px}
}
@media only screen and (max-width:745px){.mchp-design-tools{padding:40px 32px}
}
@media only screen and (max-width:465px){.mchp-design-tools{padding:32px 20px}
.mchp-design-tools .dt-grid{grid-template-columns:repeat(2,1fr);row-gap:56px}
}