@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwQT9g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvvYwYL8g.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvmYwYL8g.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvuYwYL8g.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvhYwYL8g.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvtYwYL8g.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxzL3I-JCGChYJ8VI-L6OO_au7B6xTru2H-nKw7aw.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxzL3I-JCGChYJ8VI-L6OO_au7B6xTru2H_nKw7aw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxzL3I-JCGChYJ8VI-L6OO_au7B6xTru2HxnKw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrF3DmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrF3DmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrF3Dmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrc3PmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrc3PmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrc3Pmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxxL3I-JCGChYJ8VI-L6OO_au7B6xTj11HzhKg.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxxL3I-JCGChYJ8VI-L6OO_au7B6xTj1lHzhKg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxxL3I-JCGChYJ8VI-L6OO_au7B6xTj2FHz.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrK3LmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrK3LmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrK3Lmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrB3XmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrB3XmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrB3Xmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrY3TmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrY3TmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrY3Tmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrf3fmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrf3fmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrf3fmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrW3bmtIkGUrs.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrW3bmtYkGUrs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxyL3I-JCGChYJ8VI-L6OO_au7B6xTrW3bmu4kG.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxxL3I-JCGChYJ8VI-L6OO_au7B43Lj11HzhKg.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxxL3I-JCGChYJ8VI-L6OO_au7B43Lj1lHzhKg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 100; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxxL3I-JCGChYJ8VI-L6OO_au7B43Lj2FHz.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B497yz3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B497yz3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 200; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B497yz3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47rxz3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47rxz3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47rxz3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x7T2kn3.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x_T2kn3.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47b1z3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47b1z3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B47b1z3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0z3nWuZEC.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0z3jWuZEC.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0z3bWuQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTT7PB1QTsUX8KYth-orYadYY35Zlk.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTT7PB1QTsUX8KYth-orYadb435.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTW7PB1QTsUX8KYth-gCKSIUKw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTW7PB1QTsUX8KYth-gBqSI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTT7PB1QTsUX8KYth-o9YedYY35Zlk.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTT7PB1QTsUX8KYth-o9Yedb435.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvrGyEY2tbZX9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvrGyEYOtbQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTU7PB1QTsUX8KYthSQBLyM.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTU7PB1QTsUX8KYthqQBA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzEY2tbZX9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v16/aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter'; }

/* Smooth scrolling (optional) */
html { scroll-behavior: smooth; }
.HireDeveloper span.hero-badge.servicefromPurple { border-color: rgba(168, 85, 247, 0.2); background: rgba(168, 85, 247, 0.08); color: rgba(168, 85, 247, 1); }
.about-offer .offer-item:hover { background: rgba(22, 27, 34, 1); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* Header CSS Start */
.uppercase { text-transform: uppercase; }
.site-header { background: #1d2025; padding: 13px 0; display: flex; align-items: center; }
.container { width: 100%; max-width: 1320px; margin: auto; padding: 0 20px; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.logo img { display: block; }
.main-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; }
.main-nav a { color: rgba(139, 149, 168, 1); text-decoration: none; transition: .3s; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.main-nav a:hover { color: #ffffff; }
.header-buttons { display: flex; gap: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: 5px; text-decoration: none; font-size: 14px; font-weight: 600; transition: .3s; }
.btn-outline { border: 1px solid #3d4148; color: #ffffff; background: transparent; }
.btn-outline:hover { background: #2c3138; }
.btn-primary { background: #ff7b21; color: #fff; }
.btn-primary:hover { background: #f06a0c; }
.header-buttons a.btn-outline { border: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; color: #fff; background: transparent; padding: 8px 20px; border-radius: 4px; display: flex; height: auto; }
.header-buttons a.btn-outline:hover { background: rgba(249, 115, 22, 1); }
.header-buttons a.btn-primary:hover { background: transparent; border-color: rgba(255, 255, 255, 0.08); }
.header-buttons a.btn-primary { display: flex; padding: 8px 20px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; color: #fff; border-radius: 4px; border: 1px solid rgba(249, 115, 22, 1); background: rgba(249, 115, 22, 1); height: auto; }

/* Header CSS End */

/* Footer CSS Start */
.site-footer { background: rgba(22, 27, 34, 1); color: #9da3af; padding: 65px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 70px; }
.footer-logo img { margin-bottom: 32px; }
.footer-about p { margin-bottom: 17px; max-width: 320px; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 19.5px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); }
.footer-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); }
.stars { color: #ff7b21; letter-spacing: 2px; }
.social-icons { display: flex; gap: 10px; }
.social-icons img { width: 18px; height: 18px; display: block; }
.social-icons a { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; border-radius: 4px; transition: .3s; }
.social-icons a:hover { background: #ff7b21; border-color: #ff7b21; color: #fff; }
.footer-links h4 { color: #fff; margin-bottom: 20px; font-family: DM Mono; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: rgba(139, 149, 168, 1); text-decoration: none; transition: .3s; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-bottom p { font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); }
.footer-partners { display: flex; flex-wrap: wrap; gap: 30px; }
.footer-rating .stars { margin: 0; }

/* Footer CSS End */

/* Home Page CSS Start */
.hero-section { background: #050b13; padding: 80px 0; }
.hero-section .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 27px; }
.hero-content .hero-badge { display: inline-block; background: rgba(255, 123, 33, .12); color: rgba(249, 115, 22, 1); border: 1px solid rgba(249, 115, 22, 0.25); padding: 4px 12px; border-radius: 100px; margin-bottom: 24px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.hero-content h1 { color: #fff; margin-bottom: 24px; font-family: Barlow Condensed; font-weight: 800; font-size: 96px; line-height: 96px; letter-spacing: -1.92px; }
.hero-content h1 span { color: rgba(249, 115, 22, 1); }
.hero-content p { color: rgba(139, 149, 168, 1); margin-bottom: 32px; max-width: 460px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 18px; line-height: 29.25px; letter-spacing: 0px; }
.hero-buttons { display: flex; gap: 15px; }
.hero-btn-primary, .hero-btn-secondary { background: rgba(249, 115, 22, 1); color: #fff; text-decoration: none; padding: 13px; border-radius: 4px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 200px; border: 1px solid rgba(249, 115, 22, 1); height: auto; max-height: 48px; }
.hero-btn-secondary { border: 1px solid #2c3138; background: transparent; max-width: max-content; }
.hero-image { flex-shrink: 0; }
.hero-image img { display: block; width: auto; }
.stats-section { background: #151a20; padding: 48px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-box h3 { color: #ff7b21; margin-bottom: 4px; font-family: Barlow Condensed; font-weight: 900; font-size: 36px; line-height: 40px; letter-spacing: 0px; text-align: center; }
.stat-box p { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; }
.services-section { background: #0b0f14; padding: 96px 0; }
.section-header { text-align: center; margin: 0 auto 64px; }
.small-title { color: #ff7b21; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; margin: 0 0 16px 0; display: block; }
.section-header h2 { color: #fff; margin: 0 0 16px 0; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 56px; line-height: 84px; letter-spacing: 0px; text-align: center; }
.section-header p { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0px; text-align: center; width: 100%; max-width: 576px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.service-card { background: #141a20; padding: 30px; border: 1px solid #1f262d; }
.service-card .icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #1f262d; color: #ff7b21; margin-bottom: 20px; font-size: 18px; border: 1px solid rgba(249, 115, 22, 0.2); border-radius: 4px; }
.service-card h3 { color: #fff; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 18px; line-height: 28px; letter-spacing: 0px; margin: 0 0 12px 0; }
.service-card p { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-size: 14px; line-height: 22.75px; letter-spacing: 0px; }
.process-section { background: rgba(22, 27, 34, 1); padding: 96px 0; }
.process-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; }
.process-left h2 { color: rgba(240, 242, 245, 1); margin: 0 0 24px 0; max-width: 550px; font-family: Barlow Condensed; font-weight: 700; font-size: 56px; line-height: 84px; letter-spacing: 0px; }
.process-left p { color: rgba(139, 149, 168, 1); margin-bottom: 32px; max-width: 530px; font-family: Inter; font-weight: 400; font-size: 16px; line-height: 28.8px; letter-spacing: 0px; }
.process-right { display: flex; flex-direction: column; }
.process-left a.btn-primary { padding: 12px 24px; border-radius: 4px; font-family: Inter; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; text-decoration: none; min-height: 44px; display: inline-block; }
.process-item { display: flex; align-items: center; gap: 20px; background: #12161c; border-bottom: 1px solid #232931; padding: 24px; cursor: pointer; transition: .3s; }
.process-item:hover { background: #202534; }
.process-item.active { background: rgba(26, 32, 48, 1); }
.process-number { color: rgba(255, 255, 255, 0.08); transition: .3s; font-family: Barlow Condensed; font-weight: 900; font-size: 30px; line-height: 30px; letter-spacing: 0px; }
.process-item.active .process-number { color: #ff7b21; }
.process-text h3 { color: rgba(240, 242, 245, 1); margin: 0; font-family: Inter; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
body { margin: 0; background: #0b0f14; color: #fff; }
.case-studies { padding: 96px 0; background: rgba(22, 27, 34, 1); }
.container {  /* max-width: 1100px; */
margin: auto; }
.process-section span.small-title { text-align: left; }
.header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.tag { color: #ff7a18; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 12px 0; }
.header h2 { margin: 0 0  0; font-family: Barlow Condensed; font-weight: 800; font-size: 64px; line-height: 64px; letter-spacing: 0px; width: 100%; max-width: 320px; }
.view-all { color: #ff8618; display: flex; align-items: center; gap: 12px; transition: .3s; font-family: Inter; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; text-decoration: none; }
.tabs { display: flex; gap: 8px; margin-bottom: 34.5px; flex-wrap: wrap; }
.tabs button { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); color: #aaa; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: 0.3s; font-family: Inter; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; }
.tabs button.active { background: #ff7a18; color: #fff; }
.case-card { display: grid; grid-template-columns: 1fr 1fr; background: #11161d; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.case-image { position: relative; }
.case-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.revenue-badge { position: absolute; bottom: 32px; left: 31px; color: rgba(249, 115, 22, 1); padding: 0; border-radius: 10px; font-family: Barlow Condensed; font-weight: 900; font-size: 48px; line-height: 48px; letter-spacing: 0px; }
.revenue-badge span { display: block; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.6); }
.case-content { padding: 40px; }
.category { color: rgba(139, 149, 168, 1); font-family: DM Mono; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 8px 0; }
.case-content h3 { font-family: Barlow Condensed; font-weight: 800; font-size: 40px; line-height: 60px; letter-spacing: 0px; margin: 0 0 16px 0; }
.case-content p { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-size: 14px; line-height: 22.75px; letter-spacing: 0px; margin: 0 0 24px 0; }
.tags { margin: 0 0 42px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tags span { background: rgba(22, 27, 34, 1); padding: 4px 12px; border-radius: 6px; color: rgba(139, 149, 168, 1); border: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.btn { display: inline-block; background: #ff7a18; color: #000; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s; }
.btn:hover { opacity: 0.85; }
.case-content a.btn { padding: 10px 20px; color: #fff; border-radius: 4px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; }
.why-magento { background: rgba(8, 11, 16, 1); padding: 97px 0; }
.why-magento-wrapper { display: flex; background: rgba(15, 19, 24, 1); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.why-content { padding: 48px; }
.section-tag { display: block; color: #ff8a1f; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 16px 0; }
.why-content h2 { color: #fff; font-family: Barlow Condensed; font-weight: 700; font-size: 48px; line-height: 72px; letter-spacing: 0px; margin: 0  0 24px 0; }
.section-description { color: rgba(139, 149, 168, 1); max-width: 100%; margin-bottom: 32px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 16px; line-height: 26px; letter-spacing: 0px; }
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li { display: flex; align-items: center; gap: 12px; color: rgba(240, 242, 245, 1); margin-bottom: 12px; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.why-list .icon { width: 22px; height: 22px; border-radius: 50%; background: #1d1f23; border: 1px solid rgba(255, 138, 0, .4); color: #ff8a00; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.testimonial-column { width: 50%; padding: 48px; position: relative; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.testimonial-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.testimonialSwiper { overflow: hidden; }
.testimonial-card { background: rgba(22, 27, 34, 1); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); padding: 20px; transition: .35s; }
.testimonial-card:hover { border-color: #ff8a00; transform: translateY(-3px); }
.stars { color: #ff8a00; margin-bottom: 12px; }
.testimonial-text { color: rgba(240, 242, 245, 1); margin-bottom: 16px; font-family: Inter; font-weight: 400; font-style: Italic; font-size: 14px; line-height: 22.75px; letter-spacing: 0px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 44px; height: 44px; border-radius: 50%; background: #ff8a00; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.testimonial-author h4 { color: #fff; margin: 0; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.testimonial-author span { display: block; margin-top: 0; color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.testimonialSwiper .swiper-slide { display: flex; flex-direction: column; gap: 20px; }
.testimonial-pagination { position: relative; }
.testimonial-pagination .swiper-pagination-bullet { width: 7px; height: 7px; background: #666; opacity: 1; margin: 0 4px; }
.testimonial-pagination .swiper-pagination-bullet-active { width: 22px; border-radius: 20px; background: #ff8a00; }
.testimonial-card + .testimonial-card { margin-top: 0; }
:root { --pricing-bg: #12141b; --pricing-card-bg: #181b23; --pricing-border: #2a2e38; --pricing-orange: rgba(249, 115, 22, 1); --pricing-white: #ffffff; --pricing-muted: #9a9ea8; --pricing-muted-2:#6f7480; --cta-orange: rgba(249, 115, 22, 1); --cta-orange-glow: #e85f27; --cta-white: #ffffff; --faq-bg: #12141b; --faq-item-bg: #181b23; --faq-border: #262a33; --faq-orange: rgba(249, 115, 22, 1); --faq-white: #ffffff; --faq-muted: #c7cad0; --contact-bg: #12141b; --contact-card-bg: #181b23; --contact-field-bg: #1e212b; --contact-border: #2a2e38; --contact-orange: rgba(249, 115, 22, 1); --contact-white: #ffffff; --contact-muted: #9a9ea8; --stack-bg: #12141b; --stack-panel-bg: #181b23; --stack-border: #262a33; --stack-orange: rgba(249, 115, 22, 1); --stack-orange-bg: #2a1c15; --stack-white: #ffffff; --stack-muted: #9a9ea8; --team-bg: #12141b; --team-card-bg: #181b23; --team-border: #262a33; --team-orange: rgba(249, 115, 22, 1); --team-white: #ffffff; --team-muted: #9a9ea8; --team-star: rgba(249, 115, 22, 1); --engage-bg: #12141b; --engage-card-bg: #181b23; --engage-panel-bg: #1c1f28; --engage-border: #262a33; --engage-blue: #3f5cf0; --engage-blue-dark: #263066; --engage-white: #ffffff; --engage-muted: #9a9ea8; --why-bg: #12141b; --why-card-bg: #181b23; --why-border: #262a33; --why-orange: rgba(249, 115, 22, 1); --why-icon-bg: #2a1c15; --why-white: #ffffff; --why-muted: #9a9ea8; --onboard-bg: #12141b; --onboard-card-bg: #181b23; --onboard-border: #262a33; --onboard-orange: rgba(249, 115, 22, 1); --onboard-muted: #9a9ea8; --about-bg: #12141b; --about-card-bg: #181b23; --about-row-bg: #1c1f28; --about-border: #262a33; --about-orange: rgba(249, 115, 22, 1); --about-white: #ffffff; --about-muted: #9a9ea8; --svc-bg: #12141b; --svc-card-bg: #181b23; --svc-border: #262a33; --svc-orange: rgba(249, 115, 22, 1); --svc-white: #ffffff; --svc-muted: #9a9ea8; --svc-icon-orange-bg: #2a1c15; --svc-icon-blue-bg: #172033; --svc-icon-teal-bg: #142926; --svc-icon-purple-bg: #241a33; --svc-icon-pink-bg: #331825; --svc-icon-green-bg: #182b1e; --svc-icon-blue: #5c8bff; --svc-icon-teal: #2fd6b3; --svc-icon-purple: #b26bff; --svc-icon-pink: #ff5ca8; --svc-icon-green: #4fd67a; --wc-bg: #12141b; --wc-card-bg: #181b23; --wc-border: #262a33; --wc-orange: rgba(249, 115, 22, 1); --wc-icon-bg: #2a1c15; --wc-white: #ffffff; --wc-muted: #9a9ea8; --phase-bg: #12141b; --phase-card-bg: #181b23; --phase-border: #262a33; --phase-orange: rgba(249, 115, 22, 1); --phase-white: #ffffff; --phase-muted: #9a9ea8; --clients-bg: #12141b; --clients-border: #262a33; --clients-orange: rgba(249, 115, 22, 1); --clients-white: #ffffff; --clients-muted: #9a9ea8; --blog-bg: #0d0f14; --blog-card-bg: #181b23; --blog-border: #262a33; --trust-bg: #12141b; --trust-card-bg: #181b23; --trust-border: #262a33; --trust-orange: rgba(249, 115, 22, 1); --trust-icon-bg: #2a1c15; --trust-white: #ffffff; --trust-muted: #9a9ea8; --dp-bg: #12141b; --dp-card-bg: #181b23; --dp-hover-bg: #241a12; --dp-border: #262a33; --dp-orange: rgba(249, 115, 22, 1); --dp-white: #ffffff; --dp-muted: #9a9ea8; --pf-bg: #12141b; --pf-card-bg: #181b23; --pf-hover-bg: #1e2129; --pf-border: #262a33; --pf-orange: rgba(249, 115, 22, 1); --pf-white: #ffffff; --pf-muted: #9a9ea8; --cs-bg: #12141b; --cs-card-bg: #181b23; --cs-panel-bg: #1c1f28; --cs-border: #262a33; --cs-orange: rgba(249, 115, 22, 1); --cs-orange-bg: #2a1c15; --cs-white: #ffffff; --cs-muted: #9a9ea8; --ce-bg: #12141b; --ce-list-bg: #181b23; --ce-row-bg: #1c1f28; --ce-border: #262a33; --ce-orange: rgba(249, 115, 22, 1); --ce-white: #ffffff; --ce-muted: #9a9ea8; --hero-bg: #0d0f14; --hero-orange: rgba(249, 115, 22, 1); --hero-purple: #b26bff; --hero-white: #ffffff; --hero-muted: #9a9ea8; --hero-border: #262a33; --sh-bg: #0d0f14; --sh-card-bg: #181b23; --sh-border: #262a33; --sh-orange: rgba(249, 115, 22, 1); --sh-green: #4fd67a; --sh-white: #ffffff; --sh-muted: #9a9ea8; --sp-bg: #12141b; --sp-card-bg: #181b23; --sp-border: #262a33; --sp-orange: rgba(249, 115, 22, 1); --sp-white: #ffffff; --sp-muted: #9a9ea8; --sp-blue: #5c8bff; --sp-purple: #b26bff; --as-bg: #12141b; --as-card-bg: #181b23; --as-row-bg: #1c1f28; --as-border: #262a33; --as-orange: rgba(249, 115, 22, 1); --as-blue: #5c8bff; --as-green: #4fd67a; --as-white: #ffffff; --as-muted: #9a9ea8; --ss-bg: #12141b; --ss-card-bg: #181b23; --ss-border: #262a33; --ss-orange: rgba(249, 115, 22, 1); --ss-white: #ffffff; --ss-muted: #9a9ea8; --ss-icon-orange-bg: #2a1c15; --ss-icon-blue-bg: #172033; --ss-icon-green-bg: #182b1e; --ss-icon-purple-bg: #241a33; --ss-icon-teal-bg: #142926; --ss-icon-blue: #5c8bff; --ss-icon-green: #4fd67a; --ss-icon-purple: #b26bff; --ss-icon-teal: #2fd6b3; --pl-bg: #12141b; --pl-card-bg: #181b23; --pl-border: #262a33; --pl-orange: rgba(249, 115, 22, 1); --pl-icon-bg: #2a1c15; --pl-white: #ffffff; --pl-muted: #9a9ea8; --cs-bg: #12141b; --cs-card-bg: #181b23; --cs-metric-bg: #1c1f28; --cs-border: #262a33; --cs-orange: rgba(249, 115, 22, 1); --cs-white: #ffffff; --cs-muted: #9a9ea8; --cmp-bg: #12141b; --cmp-table-bg: #15171f; --cmp-row-bg: #181b23; --cmp-border: #262a33; --cmp-orange: rgba(249, 115, 22, 1); --cmp-blue: #5c8bff; --cmp-purple: #b26bff; --cmp-gray: #9a9ea8; --cmp-white: #ffffff; --cmp-muted: #6b7078; --cmp-cat-bg: #1a2035; --st-bg: #12141b; --st-border: #262a33; --st-orange: rgba(249, 115, 22, 1); --st-icon-bg: #23262f; --st-active-bg: #1c130d; --st-white: #ffffff; --st-muted: #9a9ea8; }
.pricing-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.pricing-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.pricing-eyebrow { display: block; color: var(--pricing-orange); margin-bottom: 16px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.pricing-title { color: var(--pricing-white); margin: 0 0 16px; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 56px; line-height: 84px; letter-spacing: 0px; text-align: center; }
.pricing-subtitle { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0px; text-align: center; }
.pricing-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 0; border-radius: 0; overflow: hidden; background: rgba(15, 19, 24, 1); }
.pricing-card { padding: 32px; border-right: 1px solid var(--pricing-border); display: flex; flex-direction: column; }
.pricing-card:last-child { border-right: none; }
.pricing-card-popular { background: #1b1e28; border-top: 3px solid var(--pricing-orange); margin-top: -1px; padding-top: 29px; position: relative; }
.plan-label { display: block; color: rgba(139, 149, 168, 1); font-family: DM Mono; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 12px 0; }
.popular-top-row { display: flex; justify-content: space-between; align-items: center; }
.popular-badge { background: var(--pricing-orange); color: var(--pricing-white); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.plan-price { margin: 14px 0 10px; display: flex; align-items: baseline; gap: 6px; }
.testimonial-header .section-tag { margin: 0; }
.price-amount { color: var(--pricing-white); font-size: 32px; font-weight: 800; }
.price-period { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.plan-desc { color: var(--pricing-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 22px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 28px; flex-grow: 1; }
.plan-features li { color: #d4d6db; padding: 7px 0; position: relative; padding-left: 24px; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; color: var(--pricing-orange); font-size: 11px; font-weight: 700; border: 1px solid var(--pricing-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; }
.plan-btn { width: 100%; padding: 13px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s ease; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; }
.plan-btn:hover { opacity: 0.85; }
.plan-btn-outline { background: transparent; border: 1px solid #3a3e48; color: var(--pricing-white); }
.plan-btn-solid { background: var(--pricing-orange); border: none; color: var(--pricing-white); }
.case-studies .header { align-items: flex-start; flex-wrap: wrap; margin-bottom: 56px; }
.customization-serviceAbout .offer-icon { display: flex; }
.why-magento .swiper-pagination-bullets.swiper-pagination-horizontal { width: auto; }
.customization-serviceAbout .offer-content { display: flex; flex-direction: column; }
.customization-serviceAbout .offer-content strong { font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; margin: 0 0 2px 0; }
.customization-serviceAbout .offer-content span { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); }
@media (max-width:860px) {
	.pricing-grid { grid-template-columns: 1fr; }
	.pricing-card { border-right: none; border-bottom: 1px solid var(--pricing-border); }
	.pricing-card-popular { margin-top: 0; border-top: 3px solid var(--pricing-orange); }
	.pricing-title { font-size: 30px; }
}
.footer-partners span { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); }
.cta-section { position: relative; background: rgba(249, 115, 22, 1); padding: 122px 0; overflow: hidden; box-sizing: border-box; }
.cta-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.cta-glow-left { width: 340px; height: 340px; top: -120px; left: -80px; }
.cta-glow-right { width: 420px; height: 420px; bottom: -160px; right: -100px; background: radial-gradient(circle, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 70%); }
.cta-content { position: relative; margin: 0 auto; text-align: center; }
.cta-badge { display: inline-block; background: rgba(255, 255, 255, 0.15); color: var(--cta-white); font-size: 12.5px; font-weight: 600; padding: 7px 18px; border-radius: 20px; margin-bottom: 26px; }
.cta-badge::before { content: ''; display: inline-block; width: 6px; height: 6px; background-color: rgba(255, 255, 255, 1); border-radius: 50%; margin-right: 8px }
.cta-title { color: var(--cta-white); margin: 0 0 16px; text-transform: uppercase; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 96px; line-height: 91.2px; letter-spacing: 0px; text-align: center; }
.cta-subtitle { color: rgba(255, 255, 255, 0.9); max-width: 880px; margin: 0 auto 40px; font-family: Inter; font-weight: 400; font-size: 18px; line-height: 28px; letter-spacing: 0px; text-align: center; }
.cta-actions { display: flex; justify-content: center; gap: 14px; }
.customization-service .cta-actions.hero-buttons { justify-content: flex-start; }
.cta-btn { padding: 16px 15px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; width: 100%; max-width: 260px; }
.cta-btn:hover { opacity: 0.88; }
.cta-btn-solid { background: var(--cta-white); border: none; color: var(--cta-orange); }
.cta-btn-outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.7); color: var(--cta-white); }
.faq-section { background: rgba(22, 27, 34, 1); padding: 97px 0; box-sizing: border-box; }
.faq-header { text-align: center; margin-bottom: 56px; }
.faq-eyebrow { display: block; color: var(--faq-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.faq-title { color: var(--faq-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-size: 56px; line-height: 84px; letter-spacing: 0px; text-align: center; }
.faq-list { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item { background: rgba(15, 19, 24, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; padding: 28px 24px; color: var(--faq-white); text-align: left; cursor: pointer; font-family: Inter; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.faq-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 4px; background: #23262f; color: var(--faq-white); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 400; transition: transform 0.25s ease, background 0.25s ease; border: 1px solid rgba(255, 255, 255, 0.08); }
.faq-item-open .faq-icon { background: var(--faq-orange); transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 20px; }
.faq-item-open .faq-answer { max-height: 200px; padding: 0 20px 20px; }
.faq-answer p { margin: 0; color: var(--faq-muted); font-size: 13.5px; line-height: 1.6; }
.contact-section { background: #080b10; padding: 96px 0; box-sizing: border-box; }
.contact-grid { margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }

  /* ---- Left info column ---- */
.contact-eyebrow { display: block; color: var(--contact-orange); margin-bottom: 16px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.contact-title { color: var(--contact-white); margin: 0 0 24px; font-family: Barlow Condensed; font-weight: 800; font-size: 56px; line-height: 58.8px; letter-spacing: 0px; }
.contact-subtitle { color: rgba(139, 149, 168, 1); margin: 0 0 40px; max-width: 500px; font-family: Inter; font-weight: 400; font-size: 14px; line-height: 22.75px; letter-spacing: 0px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.contact-detail-item { display: flex; align-items: center; gap: 14px; }
.contact-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; background: rgba(249, 115, 22, 0.1); display: flex; align-items: center; justify-content: center; font-size: 15px; border: 1px solid rgba(249, 115, 22, 0.2); }
.contact-detail-text { display: flex; flex-direction: column; }
.contact-detail-label { color: rgba(139, 149, 168, 1); margin-bottom: 2px; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.contact-detail-value { color: rgba(240, 242, 245, 1); font-family: Inter; font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.contact-socials { display: flex; gap: 10px; }
.social-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(139, 149, 168, 1); display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; }
.contact-form-card .wpcf7-form p, .contact-form-card .wpcf7-form .form-row { margin: 0 0 18px; }
.contact-form-card .wpcf7-form br { display: none; }
.contact-form-card .form-row p { display: flex; gap: 20px; align-items: flex-start; margin: 0 0 0; }
.contact-form-card .wpcf7-form-control-wrap { display: flex; flex-direction: column; width: 100%; }
.contact-form-card .form-row .wpcf7-form-control-wrap { flex: 1; }
.contact-form-card .wpcf7-form-control-wrap .wpcf7-form-control-wrap { display: block; width: 100%; margin: 0; }
.contact-form-card .wpcf7-form label { display: block; color: rgba(139, 149, 168, 1); margin-bottom: 8px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.contact-form-card .wpcf7-form-control { background: rgba(22, 27, 34, 1); border-radius: 6px; color: rgba(240, 242, 245, 0.5); padding: 11px 14px; width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; line-height: 100%; letter-spacing: 0px; }
.contact-form-card .wpcf7-form-control::placeholder { color: #6b7078; }
.contact-form-card .wpcf7-form-control:focus { outline: none; border-color: var(--contact-orange); }
.contact-form-card select.wpcf7-form-control { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L5 6L10 0Z' fill='%239a9ea8'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.contact-form-card textarea.wpcf7-form-control { min-height: 90px; resize: vertical; }
.contact-form-card .wpcf7-submit { background: var(--contact-orange); border: none; color: var(--contact-white); padding: 16px 5px; border-radius: 6px; cursor: pointer; width: 100%; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; }
.contact-form-card .wpcf7-submit:hover { opacity: 0.88; }
.contact-form-card .wpcf7-spinner { display: none; }
.contact-form-card .form-footnote { color: rgba(139, 149, 168, 1); margin: 14px 0 0 !important; font-family: Inter; font-weight: 400; line-height: 16px; letter-spacing: 0px; text-align: center; }

/* Home Page CSS End */

/* Hire magento developer page css */
.team-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.team-header { margin: 0 auto 56px; display: flex; justify-content: space-between; align-items: flex-start; }
.team-eyebrow { display: block; color: var(--team-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.team-title { color: rgba(240, 242, 245, 1); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 61.55px; letter-spacing: 0px; }
.team-viewall { color: rgba(249, 115, 22, 1); text-decoration: none; white-space: nowrap; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.team-viewall .arrow { display: inline-block; margin-left: 2px; }
.team-grid { max-width: 1183px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.team-card { background: rgba(15, 19, 24, 1); border-right: 1px solid #292d34; padding: 24px; display: flex; flex-direction: column; }
.team-card:last-child { border: 0; }
.team-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.team-avatar { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--team-white); font-size: 14px; font-weight: 700; }
.team-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; }
.team-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.team-status-available { color: #4fd67a; }
.team-status-available .dot { background: #4fd67a; }
.team-status-engaged { color: #9a9ea8; }
.team-status-engaged .dot { background: #9a9ea8; }
.team-name { color: var(--team-white); margin: 0 0 4px; font-family: Inter; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0px; }
.team-role { color: rgba(139, 149, 168, 1); margin: 0 0 12px; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.team-badge { display: inline-block; padding: 5px 10px; border-radius: 5px; margin-bottom: 16px; width: fit-content; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0px; border: 1px solid transparent; }
.team-badge-orange { background: rgba(249, 115, 22, 0.08); color: rgba(249, 115, 22, 1); border: 1px solid rgba(249, 115, 22, 0.16); }
.team-badge-blue { background: rgba(59, 130, 246, 0.08); color: rgba(59, 130, 246, 1); border: 1px solid rgba(59, 130, 246, 0.16); }
.team-badge-green { background: rgba(16, 185, 129, 0.08); color: rgba(16, 185, 129, 1); border: 1px solid rgba(16, 185, 129, 0.16); }
.team-badge-purple { background: rgba(168, 85, 247, 0.08); color: rgba(168, 85, 247, 1); border: 1px solid rgba(168, 85, 247, 0.16); }
.team-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-bottom: 16px; }
.team-exp { color: rgba(139, 149, 168, 1); font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.team-rate { color: rgba(249, 115, 22, 1); font-weight: 700; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.team-rating { color: var(--team-star); font-size: 13px; letter-spacing: 1px; margin-bottom: 16px; }
.team-projects { color: rgba(139, 149, 168, 1); margin-left: 4px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.team-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; flex-grow: 1; align-items: flex-start; }
.skill-tag { background: rgba(22, 27, 34, 1); color: rgba(139, 149, 168, 1); padding: 2px 8px; border-radius: 5px; height: auto; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.team-hire-btn { background: rgba(249, 115, 22, 1); border: none; color: var(--team-white); padding: 10px 0; border-radius: 6px; cursor: pointer; width: 100%; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.team-hire-btn:hover { opacity: 0.88; }

  /* same page second section */
.stack-section { background: #080b10; padding: 96px 0; box-sizing: border-box; }
.stack-grid { margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }

  /* ---- Left column ---- */
.stack-eyebrow { display: block; color: var(--stack-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.stack-title { color: var(--stack-white); margin: 0 0 24px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 56px; letter-spacing: 0px; max-width: 380px; }
.stack-subtitle { color: rgba(139, 149, 168, 1); margin: 0 0 32px; max-width: 340px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.stack-tabs { display: flex; flex-direction: column; gap: 4px; }
.stack-tab { display: flex; align-items: center; gap: 10px; background: none; border: none; border-left: 2px solid transparent; padding: 12px 14px; color: var(--stack-muted); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; border-radius: 4px; font-family: inherit; }
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stack-muted); }
.tab-arrow { margin-left: auto; color: var(--stack-muted); font-size: 15px; }
.stack-tab-active { background: rgba(249, 115, 22, 0.1); color: rgba(249, 115, 22, 1); border: 1px solid rgba(249, 115, 22, 0.25); }
.stack-tab-active .tab-dot { background: var(--stack-orange); }
.stack-tab-active .tab-arrow { color: var(--stack-orange); }

  /* ---- Right column ---- */
.stack-panel { display: flex; flex-direction: column; gap: 32px; }
.stack-items { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0px; }
.stack-item { display: flex; align-items: center; gap: 10px; background: rgba(15, 19, 24, 1); border: 0; border-right: 1px solid #1c1f23; border-bottom: 1px solid #1c1f23; border-radius: 0; padding: 20px; color: var(--stack-white); font-size: 13.5px; font-weight: 600; }
.stack-item:nth-child(3n) { border-right: 0; }
.stack-item:nth-last-child(-n+3) { border-bottom: 0; }
.stack-item .item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stack-orange); flex-shrink: 0; }
.stack-full { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 20px; }
.stack-full-label { display: block; color: rgba(139, 149, 168, 1); margin-bottom: 16px; font-family: DM Mono; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.stack-full-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.full-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(22, 27, 34, 1); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(139, 149, 168, 1); padding: 7px 12px; border-radius: 20px; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; }
.tag-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

  /* fourth section */
.engage-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.engage-header { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.engage-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.engage-title { color: rgba(240, 242, 245, 1); margin: 0 0 12px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; }
.engage-subtitle { color: rgba(139, 149, 168, 1); margin: 0 auto 64px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; max-width: 512px; }
.engage-toggle { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.toggle-btn { background: none; color: rgba(139, 149, 168, 1); padding: 10px 20px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.toggle-btn-active { background: rgba(59, 130, 246, 1); border-color: rgba(59, 130, 246, 1); color: var(--engage-white); }
.engage-card { margin: 0 auto; background: rgba(15, 19, 24, 1); border: 1px solid rgba(59, 130, 246, 0.19); border-radius: 16px; display: grid; grid-template-columns: 1.4fr 1fr; position: relative; }
.engage-card::before { content: ''; position: absolute; width: 85%; height: 2px; background: rgba(59, 130, 246, 1); border-bottom-left-radius: 16px; left: 10px; }
.engage-card-left { padding: 40px; border-right: 1px solid var(--engage-border); }
.engage-card-right { padding: 40px; }
.engage-card-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.engage-icon { width: 48px; height: 48px; border-radius: 10px; background: rgba(59, 130, 246, 0.08); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; border: 1px solid rgba(59, 130, 246, 0.14); color: rgba(59, 130, 246, 1); }
.engage-plan-heading { flex-grow: 1; }
.engage-plan-title { color: var(--engage-white); font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 20px; leading-trim: NONE; line-height: 28px; letter-spacing: 0px; }
.engage-plan-sub { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.engage-popular-badge { background: rgba(59, 130, 246, 0.08); color: rgba(59, 130, 246, 1); padding: 4px 12px; border-radius: 4px; white-space: nowrap; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.engage-popular-badge.hidden { visibility: hidden; }
.engage-price { color: rgba(59, 130, 246, 1); margin-bottom: 16px; font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 36px; leading-trim: NONE; line-height: 40px; letter-spacing: 0px; }
.engage-desc { color: rgba(139, 149, 168, 1); margin: 0 0 24px; max-width: 560px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.engage-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checklist-item { display: flex; align-items: center; gap: 12px; color: rgba(240, 242, 245, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.checklist-item .check-icon { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--engage-blue); color: var(--engage-blue); font-size: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.engage-next-title { color: rgba(240, 242, 245, 1); margin: 0 0 24px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.engage-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.step-item { display: flex; align-items: center; gap: 12px; }
.step-number { width: 24px; height: 24px; border-radius: 50%; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.14); color: rgba(59, 130, 246, 1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.step-label { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.engage-cta-btn { width: 100%; background: rgba(59, 130, 246, 1); border: none; color: var(--engage-white); padding: 14px 10px; border-radius: 4px; cursor: pointer; height: 48px; margin-bottom: 12px; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.engage-cta-btn:hover { opacity: 0.88; }
.engage-download-btn { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(139, 149, 168, 1); padding: 12px 10px; border-radius: 6px; cursor: pointer; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.engage-summary-row { max-width: 1184px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.engage-summary-card { display: flex; align-items: center; justify-content: space-between; background: rgba(15, 19, 24, 1); border: 0; padding: 20px; cursor: pointer; font-family: inherit; text-align: left; }
.engage-summary-active { background: rgba(59, 130, 246, 0.03); }
.summary-text { display: flex; flex-direction: column; gap: 3px; }
.summary-title { color: var(--engage-white); font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.summary-sub { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.summary-arrow { color: rgba(139, 149, 168, 1); font-size: 24px; }

  /* fifth section */
.why-section { background: #080b10; padding: 96px 0; box-sizing: border-box; }
.why-grid { margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; }
.why-grid .why-content { padding: 0 45px 0 0; }

  /* ---- Left image column ---- */
.why-image-col { display: flex; align-items: center; justify-content: center; }
.why-image { width: 100%; height: auto; display: block; border-radius: 10px; }

  /* ---- Right content column ---- */
.why-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 16px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.why-grid h2.why-title { font-family: "Barlow Condensed"; font-weight: 800; font-size: 56px; line-height: 58.8px; letter-spacing: 0px; margin-bottom: 40px; }
.why-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.why-card { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 16px; display: flex; align-items: flex-start; gap: 16px; }
.why-icon { min-width: 36px; height: 36px; border-radius: 10px; background: rgba(249, 115, 22, 0.1); color: var(--why-orange); border: 1px solid rgba(249, 115, 22, 0.2); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.why-card-title { color: var(--why-white); font-size: 14.5px; font-weight: 700; margin: 0 0 8px; }
.why-card-desc { color: var(--why-muted); font-size: 12.5px; line-height: 1.55; margin: 0; }

  /* sixth section */
.onboard-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.onboard-header { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.onboard-eyebrow { display: block; color: var(--onboard-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.onboard-title { color: var(--onboard-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; }
.onboard-grid { max-width: 1183px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.onboard-card { background: rgba(15, 19, 24, 1); border: 0; padding: 32px; display: flex; flex-direction: column; border-right: 1px solid #292d34; }
.onboard-card:last-child { border: 0; }
.onboard-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.onboard-bignum { color: rgba(255, 255, 255, 0.08); font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 60px; leading-trim: NONE; line-height: 60px; letter-spacing: 0px; }
.onboard-badge { width: 36px; height: 36px; border-radius: 50%; background: rgba(249, 115, 22, 0.1); color: rgba(249, 115, 22, 1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(249, 115, 22, 0.25); font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.onboard-card-title { color: var(--onboard-white); margin: 0 0 12px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.onboard-card-desc { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

  /* Hire magento developer page css end */

  /* Magento2 Web Development page css start */

  /* second section */
.WebDevelopment .hero-image { padding: 0; }
.WebDevelopment.HireDeveloper .hero-content .aboutDeveloper { max-width: 100%; }
.about-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.about-grid { margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 81px; align-items: center; }

  /* ---- Left column ---- */
.cta-subtitle.maxfiveeight { max-width: 580px; }
.about-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 16px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.about-title { color: var(--about-white); margin: 0 0 24px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 56px; letter-spacing: 0px; }
.about-paragraph { color: rgba(139, 149, 168, 1); margin: 0 0 24px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; width: 100%; max-width: 552px; }
.about-actions { display: flex; gap: 16px; margin-top: 53px; }
.about-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.about-btn:hover { opacity: 0.88; }
.about-btn-solid { background: var(--about-orange); border: none; color: var(--about-white); }
.about-btn-outline { background: transparent; border: 1px solid var(--about-border); color: var(--about-white); }
.download-icon { font-size: 12px; }

  /* ---- Right column ---- */
.offer-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.offer-eyebrow { color: rgba(249, 115, 22, 1); white-space: nowrap; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.offer-line { flex-grow: 1; height: 1px; background: var(--about-border); }
.offer-list { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; }
.offer-item { display: flex; align-items: center; gap: 12px; padding: 16px 24px; color: rgba(240, 242, 245, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; line-height: 22.75px; letter-spacing: 0px; }
.offer-item:last-child { border-bottom: none; }
.offer-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--about-orange); color: var(--about-orange); font-size: 10px; display: flex; align-items: center; justify-content: center; }

  /* Third section */
.services-section { background: rgba(8, 11, 16, 1); padding: 96px 0; box-sizing: border-box; }
.services-header { margin: 0 auto 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.services-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.services-title { color: rgba(240, 242, 245, 1); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 61.55px; letter-spacing: 0px; }
.services-subtitle { color: rgba(139, 149, 168, 1); max-width: 330px; margin: 0; text-align: left; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.Webdeveloper .services-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 0; border-radius: 0; overflow: hidden; background: rgba(15, 19, 24, 1); }
.Webdeveloper .service-card { padding: 24px; border: 0; border-right: 1px solid var(--svc-border); border-bottom: 1px solid var(--svc-border); background: rgba(15, 19, 24, 1); }
.service-card:nth-child(4n) { border-right: none; }
.service-card:nth-last-child(-n+4) { border-bottom: none; }
.service-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.service-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #1f262d; color: #ff7b21; margin-bottom: 0px; border-radius: 10px; border: 1px solid rgba(249, 115, 22, 0.2); }
.service-icon-orange { background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.16); }
.service-icon-blue { background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.16); }
.service-icon-teal { background: var(--svc-icon-teal-bg); border: 1px solid rgba(16, 185, 129, 0.16); }
.service-icon-purple { background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.16); }
.service-icon-pink { background: rgba(236, 72, 153, 0.08); border: 1px solid rgba(236, 72, 153, 0.16); }
.service-icon-green { background: rgba(132, 204, 22, 0.08); border: 1px solid rgba(132, 204, 22, 0.16); }
.service-icon-yellows { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.16); }
.service-icon-skyblue { background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.16); }
.service-tag { color: rgba(139, 149, 168, 1); font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; padding: 2px 8px; background: rgba(22, 27, 34, 1); border-radius: 4px; }
.service-title { color: var(--svc-white); font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.service-desc { color: var(--svc-muted); font-size: 12px; line-height: 1.55; margin: 0; }

  /* fourth section */
.stats-section.magento2 { background: rgba(249, 115, 22, 1); padding: 64px 0; }
.stat-box .counter.magento2 { color: #fff; margin-bottom: 4px; font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 48px; leading-trim: NONE; line-height: 48px; letter-spacing: 0px; text-align: center; }
.stat-box .magento2 { color: #fff; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; margin: 0; }

  /* fifth section */
.whychoose-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.whychoose-grid { margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center; }

  /* ---- Left content column ---- */
.whychoose-eyebrow { display: block; color: var(--wc-orange); margin-bottom: 16px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.whychoose-title { color: var(--wc-white); margin: 0 0 16px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 56px; letter-spacing: 0px; }
.whychoose-subtitle { color: rgba(139, 149, 168, 1); max-width: 530px; margin: 0 0 40px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.whychoose-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.whychoose-card { background: rgba(15, 19, 24, 1); border-radius: 14px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; gap: 16px; }
.whychoose-icon { min-width: 36px; height: 36px; border-radius: 8px; background: rgba(249, 115, 22, 0.1); color: var(--wc-orange); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin-bottom: 12px; border: 1px solid rgba(249, 115, 22, 0.2); }
.whychoose-card-title { color: var(--wc-white); margin: 0 0 4px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.whychoose-card-desc { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

  /* ---- Right image column ---- */
.whychoose-image-col { display: flex; align-items: center; justify-content: center; }
.whychoose-image { width: 100%; height: auto; display: block; border-radius: 10px; }

  /* Sixth Section */
.phase-section { background: rgba(8, 11, 16, 1); padding: 96px 0; box-sizing: border-box; }
.phase-header { text-align: center; margin: 0 auto 64px; }
.phase-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.phase-title { color: var(--phase-white); margin: 0 0 12px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; }
.phase-subtitle { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; max-width: 512px; margin: 0 auto; }
.phase-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 0; border-radius: 0; overflow: hidden; }
.phase-card { background: rgba(15, 19, 24, 1); padding: 32px; border-right: 1px solid var(--phase-border); border-bottom: 1px solid var(--phase-border); cursor: default; transition: background 0.3s ease, border-color 0.3s ease; border-top: 2px solid transparent; }
.phase-card:nth-child(3n) { border-right: none; }
.phase-card:nth-last-child(-n+3) { border-bottom: none; }
.phase-card:hover { background: rgba(249, 115, 22, 0.05); border-color: rgba(249, 115, 22, 0.05); border-top: 2px solid rgba(249, 115, 22, 1); }
.phase-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.phase-bignum { color: #262a33; transition: color 0.3s ease; font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 48px; leading-trim: NONE; line-height: 48px; letter-spacing: 0px; }
.phase-card:hover .phase-bignum { color: rgba(242, 101, 43, 0.45); }
.phase-duration { background: rgba(22, 27, 34, 1); border: 0; color: var(--phase-muted); padding: 4px 10px; border-radius: 4px; white-space: nowrap; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.phase-card-title { color: var(--phase-white); margin: 0 0 8px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.phase-card-desc { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

  /* eight and nine section */
.clients-section { background: rgba(8, 11, 16, 1); padding: 40px 0 80px 0; box-sizing: border-box; }
.clients-header { text-align: center; margin-bottom: 48px; }
.clients-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 14px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.clients-title { color: var(--clients-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 48px; leading-trim: NONE; line-height: 72px; letter-spacing: 0px; text-align: center; }
.clients-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; background: rgba(15, 19, 24, 1); }
.client-cell { display: flex; align-items: center; justify-content: center; padding: 30px 15px; color: var(--clients-muted); border-right: 1px solid #1c1f23; border-bottom: 1px solid #1c1f23; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0.7px; }
.client-cell:nth-child(4n) { border-right: none; }
.client-cell:nth-last-child(-n+4) { border-bottom: none; }

  /* ---- Section 2: Blog ---- */
.blog-section { padding: 96px 0; background: rgba(22, 27, 34, 1); }
.blog-header { margin: 0 auto 56px; display: flex; justify-content: space-between; align-items: flex-start; }
.blog-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 14px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.blog-title { color: var(--clients-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 61.55px; letter-spacing: 0px; }
.blog-viewall { color: rgba(249, 115, 22, 1); text-decoration: none; white-space: nowrap; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.blog-viewall .arrow { margin-left: 2px; }
.blog-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.blog-card { display: block; background: var(--blog-card-bg); border: 1px solid var(--blog-border); border-radius: 10px; padding: 22px; text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease; }
.blog-card:hover { border-color: rgba(242, 101, 43, 0.4); transform: translateY(-3px); }
.blog-tag { display: inline-block; padding: 4px 10px; border-radius: 5px; margin-bottom: 16px; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.blog-tag-orange { background: rgba(249, 115, 22, 0.1); color: rgba(249, 115, 22, 1); }
.blog-tag-brown { background: rgba(184, 110, 60, 0.18); color: #d68a4c; }
.blog-tag-red { background: rgba(224, 71, 63, 0.15); color: #e0473f; }
.blog-card-title { color: var(--clients-white); margin: 0 0 16px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 19.25px; letter-spacing: 0px; }
.blog-meta { display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(139, 149, 168, 1); font-size: 14px; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }

  /* Magento2 Web Development page css end */

  /* magento extension development page css start*/

  /* first section  */
.hero-section { background: #080b10; padding: 80px 0; box-sizing: border-box; }
.hero-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

  /* ---- Badges ---- */
.hero-badges { display: flex; gap: 10px; margin-bottom: 28px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; padding: 7px 14px; border-radius: 20px; border: 1px solid transparent; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hero-orange); }
.hero-badge-orange { background: rgba(242, 101, 43, 0.12); border-color: rgba(242, 101, 43, 0.35); color: var(--hero-orange); }
.hero-badge-purple { background: rgba(178, 107, 255, 0.12); border-color: rgba(178, 107, 255, 0.35); color: var(--hero-purple); }

  /* ---- Title ---- */
.hero-title { color: var(--hero-white); font-size: 56px; font-weight: 900; line-height: 1.02; letter-spacing: -1px; margin: 0 0 26px; text-transform: uppercase; }
.hero-caption-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hero-caption-line { width: 34px; height: 2px; background: var(--hero-orange); }
.hero-caption-text { color: var(--hero-muted); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.hero-desc { color: var(--hero-muted); font-size: 14.5px; line-height: 1.7; max-width: 460px; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 12px; margin-bottom: 40px; }
.hero-btn { display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 6px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease; }
.hero-btn:hover { opacity: 0.88; }
.hero-btn-solid { background: var(--hero-orange); border: none; color: var(--hero-white); }
.hero-btn-outline { background: transparent; border: 1px solid var(--hero-border); color: var(--hero-white); }
.play-icon { font-size: 10px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-num { color: var(--hero-orange); font-size: 24px; font-weight: 800; }
.hero-stat-label { color: var(--hero-muted); font-size: 11.5px; }
.hero-stats h3 { font-family: Barlow Condensed; font-weight: 900; font-size: 24px; line-height: 24px; letter-spacing: 0px; margin: 0 0 2px 0; color: rgba(249, 115, 22, 1); }
.hero-stats span { font-family: Inter; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); }
.HireDeveloper span.hero-badge.servicefrom { border-color: rgba(16, 185, 129, 0.2); background: rgba(16, 185, 129, 0.08); color: rgba(16, 185, 129, 1); }
.HireDeveloper .hero-content .hero-badge { margin-bottom: 32px; }
.HireDeveloper .hero-content h1 { margin: 0 0 12px 0; text-transform: uppercase; }
.HireDeveloperWrapper p.dashad { display: inline-block; width: 80px; height: 4px; background: rgba(249, 115, 22, 1); border-radius: 4px; margin: 0; }
.HireDeveloperWrapper p { font-family: DM Mono; font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 0.6px; margin: 0; color: rgba(139, 149, 168, 1); }
.HireDeveloperWrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 0 28px 0; }
.HireDeveloper .hero-content .aboutDeveloper { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 16px; leading-trim: NONE; line-height: 26px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); margin: 0 0 40px 0; }
.HireDeveloper .hero-buttons { gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.HireDeveloper .hero-buttons .hero-btn-primary { font-family: Inter; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0px; text-align: center; min-height: 54px; }
.HireDeveloper .hero-buttons .hero-btn-secondary { border: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; min-height: 54px; }
span.hero-badge.dotsBefore:before { content: ''; display: inline-block; width: 6px; height: 6px; background: rgba(255, 137, 4, 1); border-radius: 100%; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
span.hero-badge.dotsBefore { padding-left: 26px; position: relative; margin-right: 8px; }
.HireDeveloper .hero-stats { gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.customization-service .hero-content h1 { font-size: 88px; line-height: 79.2px; }

  /* ---- Right image column ---- */
.hero-image-col { display: flex; align-items: center; justify-content: center; }
.hero-image { width: 100%; height: auto; display: block; border-radius: 10px; }

  /* second section */
.custext-section { background: var(--ce-bg); padding: 80px 40px; box-sizing: border-box; }
.custext-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: start; }

  /* ---- Left column ---- */
.custext-eyebrow { display: block; color: var(--ce-orange); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 16px; }
.custext-title { color: var(--ce-white); font-size: 30px; font-weight: 800; line-height: 1.25; margin: 0 0 22px; }
.custext-paragraph { color: var(--ce-muted); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; }
.custext-actions { display: flex; gap: 12px; margin-top: 26px; }
.custext-btn { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s ease; }
.custext-btn:hover { opacity: 0.88; }
.custext-btn-solid { background: var(--ce-orange); border: none; color: var(--ce-white); }
.custext-btn-outline { background: transparent; border: 1px solid var(--ce-border); color: var(--ce-white); }
.download-icon { font-size: 12px; }

  /* ---- Right column ---- */
.custext-list { background: var(--ce-list-bg); border: 1px solid var(--ce-border); border-radius: 10px; overflow: hidden; }
.custext-list-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ce-border); }
.custext-header-icon { font-size: 15px; }
.custext-header-title { color: var(--ce-white); font-size: 13.5px; font-weight: 700; }
.custext-item { display: flex; align-items: center; gap: 12px; padding: 15px 20px; color: #d4d6db; font-size: 13px; border-bottom: 1px solid var(--ce-border); }
.custext-item:last-child { border-bottom: none; }
.custext-item:nth-child(even) { background: var(--ce-row-bg); }
.item-icon { flex-shrink: 0; color: var(--ce-orange); font-size: 13px; width: 18px; text-align: center; }

  /* third section */
.catsec-section { background: #080b10; padding: 96px 0; box-sizing: border-box; }
.catsec-header { margin: 0 auto 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.catsec-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.catsec-title { color: var(--cs-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 61.55px; letter-spacing: 0px; }
.catsec-subtitle { color: rgba(139, 149, 168, 1); max-width: 330px; margin: 0; text-align: left; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.catsec-body { margin: 0 auto; display: grid; grid-template-columns: 0.85fr 2.15fr; border: 0; border-radius: 0; overflow: hidden; }

  /* ---- Sidebar ---- */
.catsec-sidebar { background: rgba(15, 19, 24, 1); border-right: 1px solid var(--cs-border); padding: 0; display: flex; flex-direction: column; gap: 0; }
.catsec-tab { display: flex; align-items: center; gap: 12px; background: none; border: none; border-left: 2px solid transparent; padding: 17px 20px; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.2s ease; }
.catsec-tab:hover { background: rgba(255, 255, 255, 0.03); }
.catsec-tab-active { background: rgba(249, 115, 22, 0.05); border-right: 2px solid var(--cs-orange); }
.catsec-tab-icon { width: 28px; height: 28px; border-radius: 4px; background: rgba(22, 27, 34, 1); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; color: rgba(139, 149, 168, 1); }
.catsec-tab-active .catsec-tab-icon { background: rgba(249, 115, 22, 0.13); }
.catsec-tab-text { display: flex; flex-direction: column; gap: 2px; }
.catsec-tab-title { color: var(--cs-white); font-size: 12.5px; font-weight: 700; }
.catsec-tab-active .catsec-tab-title { color: var(--cs-orange); }
.catsec-tab-count { color: var(--cs-muted); font-size: 10.5px; }

  /* ---- Right panel ---- */
.catsec-panel { background: rgba(15, 19, 24, 1); padding: 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; border-top: 2px solid rgba(249, 115, 22, 1); }
.catsec-panel-header { grid-column: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.catsec-panel-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(249, 115, 22, 0.09); border: 1px solid rgba(249, 115, 22, 0.16); color: rgba(249, 115, 22, 1); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.catsec-panel-title { color: var(--cs-white); margin: 0; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 24px; leading-trim: NONE; line-height: 36px; letter-spacing: 0px; }
.catsec-panel-count { color: rgba(139, 149, 168, 1); margin: 0; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.catsec-panel-desc { grid-column: 1; color: rgba(139, 149, 168, 1); line-height: 1.6; margin: 0 0 32px 0; max-width: 400px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.catsec-cta-btn { grid-column: 1; align-self: start; background: var(--cs-orange); border: none; color: var(--cs-white); padding: 12px 24px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.catsec-cta-btn:hover { opacity: 0.88; }
.catsec-side { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 24px; }
.catsec-built-label { display: block; color: rgba(139, 149, 168, 1); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; margin-bottom: 16px; font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.catsec-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.catsec-chip { display: flex; align-items: center; gap: 10px; background: rgba(22, 27, 34, 1); border: 1px solid rgba(249, 115, 22, 0.13); color: var(--cs-white); padding: 12px 16px; border-radius: 6px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.catsec-chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-orange); flex-shrink: 0; }
.catsec-delivery { background: rgba(22, 27, 34, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 18px; }
.catsec-delivery-label { display: block; color: rgba(139, 149, 168, 1); margin-bottom: 8px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.catsec-delivery-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.catsec-delivery-time { color: rgba(249, 115, 22, 1); font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 24px; leading-trim: NONE; line-height: 32px; letter-spacing: 0px; }
.catsec-delivery-note { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

  /* fourth section */
.portfolio-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.portfolio-header { margin: 0 auto 56px; display: flex; justify-content: space-between; align-items: flex-start; }
.portfolio-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.portfolio-title { color: var(--pf-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 61.55px; letter-spacing: 0px; }
.portfolio-viewall { color: var(--pf-orange); text-decoration: none; white-space: nowrap; margin-top: 0; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.portfolio-viewall .arrow { margin-left: 2px; }
.portfolio-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; overflow: hidden; }
.portfolio-card { background: rgba(15, 19, 24, 1); padding: 28px; border-right: 1px solid var(--pf-border); border-bottom: 1px solid var(--pf-border); transition: background 0.3s ease; }
.portfolio-card:nth-child(3n) { border-right: none; }
.portfolio-card:nth-last-child(-n+3) { border-bottom: none; }
.portfolio-card:hover { background: var(--pf-hover-bg); }
.portfolio-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.portfolio-avatar { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 1px solid; }
.portfolio-tag { background: rgba(22, 27, 34, 1); color: var(--pf-muted); padding: 4px 10px; border-radius: 4px; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.portfolio-card-title { color: var(--pf-white); margin: 0 0 4px; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 20px; leading-trim: NONE; line-height: 30px; letter-spacing: 0px; }
.portfolio-card-sub { margin: 0 0 14px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.portfolio-stack { display: block; color: var(--pf-muted); font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }

  /* fifth section */
.devprocess-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.devprocess-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.devprocess-eyebrow { display: block; color: var(--dp-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.devprocess-title { color: var(--dp-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; }
.devprocess-subtitle { color: var(--dp-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.devprocess-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; overflow: hidden; }
.devprocess-card { background: rgba(15, 19, 24, 1); padding: 32px; border-right: 1px solid var(--dp-border); border-bottom: 1px solid var(--dp-border); cursor: default; transition: background 0.3s ease, border-top-color 0.3s ease; }
.devprocess-card:nth-child(3n) { border-right: none; }
.devprocess-card:nth-last-child(-n+3) { border-bottom: none; }
.devprocess-card:hover { background: rgba(249, 115, 22, 0.05); border-top-color: var(--dp-orange); }
.devprocess-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.devprocess-bignum { color: rgba(255, 255, 255, 0.08); transition: color 0.3s ease; font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 48px; leading-trim: NONE; line-height: 48px; letter-spacing: 0px; }
.devprocess-duration { background: rgba(22, 27, 34, 1); color: var(--dp-muted); padding: 4px 10px; border-radius: 4px; white-space: nowrap; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.devprocess-card-title { color: var(--dp-white); margin: 0 0 8px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.devprocess-card-desc { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

  /* sixth section */
.trust-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.trust-header { text-align: center; max-width: 100%; margin: 0 auto 64px; }
.trust-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.trust-title { color: var(--trust-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; }
.trust-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-card { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 28px; }
.trust-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.2); color: rgba(249, 115, 22, 1); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.trust-card-title { color: var(--trust-white); margin: 0 0 8px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 18px; leading-trim: NONE; line-height: 27px; letter-spacing: 0px; }
.trust-card-desc { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }

  /* magento extension development page css end */

  /* magento seo packages css start */

  /* first section */
.seohero-section { background: #080b10; padding: 80px 0; box-sizing: border-box; }
.seohero-content { max-width: 700px; margin: 0 auto; text-align: center; }
.seohero-badges { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.seohero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sh-orange); }
.seohero-badge-orange { background: rgba(242, 101, 43, 0.12); border-color: rgba(242, 101, 43, 0.35); color: var(--sh-orange); }
.seohero-badge-green { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); color: rgba(16, 185, 129, 1); }
.seohero-title { color: var(--sh-white); margin: 0 0 32px; text-transform: uppercase; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 96px; leading-trim: NONE; line-height: 86.4px; letter-spacing: 0px; text-align: center; }
.seohero-desc { color: rgba(139, 149, 168, 1); margin: 0 auto 32px; max-width: 672px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 16px; line-height: 26px; letter-spacing: 0px; text-align: center; }
.seohero-actions { display: flex; justify-content: center; gap: 16px; margin-bottom: 56px; }
.seohero-btn { display: flex; align-items: center; gap: 8px; padding: 17px 32px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.seohero-btn:hover { opacity: 0.88; }
.seohero-btn-solid { background: var(--sh-orange); border: none; color: var(--sh-white); }
.seohero-btn-outline { background: transparent; border: 1px solid var(--sh-border); color: var(--sh-white); }
.seohero-stats { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; background: rgba(15, 19, 24, 1); }
.seohero-stat { padding: 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-right: 1px solid #1c1f23; }
.seohero-stat:last-child { border-right: none; }
.seohero-stat-num { color: var(--sh-orange); font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 24px; leading-trim: NONE; line-height: 32px; letter-spacing: 0px; text-align: center; }
.seohero-stat-label { color: rgba(139, 149, 168, 1); font-size: 11px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }

  /* second section */
.seoplans-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.seoplans-header { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.seoplans-eyebrow { display: block; color: var(--sp-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.seoplans-title { color: var(--sp-white); margin: 0 0 12px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 64px; leading-trim: NONE; line-height: 96px; letter-spacing: 0px; text-align: center; }
.seoplans-subtitle { color: rgba(139, 149, 168, 1); margin: 0 auto; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; max-width: 577px; }
.seoplans-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan-card { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 24px; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease; }
.plan-card:hover { transform: translateY(-2px); }
.plan-card-selected { background: rgba(26, 32, 48, 1); box-shadow: 0px 0px 30px 0px rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.31); }
.plan-tier { display: block; color: rgba(107, 114, 128, 1); margin-bottom: 8px; font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 12px 0; }
.price-amount { font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 48px; leading-trim: NONE; line-height: 48px; letter-spacing: 0px; }
.plan-accent-gray { color: var(--sp-white); }
.plan-accent-blue { color: var(--sp-blue); }
.plan-accent-orange { color: var(--sp-orange); }
.plan-accent-purple { color: var(--sp-purple); }
.price-period { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0px; }
.plan-desc { color: var(--sp-muted); font-size: 12px; line-height: 1.55; margin: 0 0 20px; min-height: 55px; }
.plan-keyword-pill { display: inline-flex; align-items: center; padding: 13.5px 12px; border-radius: 10px; margin-bottom: 18px; width: 100%; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; border: 1px solid rgba(107, 114, 128, 0.13); gap: 8px; margin-bottom: 20px; }
.plan-pill-gray { background: rgba(107, 114, 128, 0.05); color: var(--sp-muted); border-top: 1px solid rgba(107, 114, 128, 0.13); }
.plan-pill-blue { background: rgba(59, 130, 246, 0.05); color: rgba(59, 130, 246, 1); border: 1px solid rgba(59, 130, 246, 0.13); }
.plan-pill-blue svg path { stroke: rgba(59, 130, 246, 1); }
.plan-pill-orange { background: rgba(242, 101, 43, 0.12); color: var(--sp-orange); border: 1px solid rgba(242, 101, 43, 0.3); }
.plan-pill-orange svg path { stroke: var(--sp-orange); }
.plan-pill-purple { background: rgba(178, 107, 255, 0.12); color: var(--sp-purple); border: 1px solid rgba(178, 107, 255, 0.3); }
.plan-pill-purple svg path { stroke: var(--sp-purple); }
.plan-cta { display: block; width: 100%; padding: 10px 10px; border-radius: 6px; cursor: pointer; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.plan-cta:hover { opacity: 0.88; }
.plan-cta-outline { background: #0f1318; border: 1px solid rgba(107, 114, 128, 0.25); color: rgba(107, 114, 128, 1); }
.plan-cta-outline-purple { background: transparent; border: 1px solid rgba(178, 107, 255, 0.4); color: var(--sp-purple); }
.plan-cta-solid { background: var(--sp-orange); border: none; color: var(--sp-white); }
button.plan-cta.plan-cta-outline.BuyPlanBlue { background: #0f1318; border: 1px solid rgba(59, 130, 246, 0.25); color: rgba(59, 130, 246, 1); }

  /* third section */
.cmp-section { background: #080b10; padding: 80px 0; box-sizing: border-box; }
.cmp-header { text-align: center; margin-bottom: 48px; }
.cmp-eyebrow { display: block; color: var(--cmp-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.cmp-title { color: var(--cmp-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 84px; letter-spacing: 0px; text-align: center; }
.cmp-table-wrap { margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; }
.cmp-table { width: 100%; border-collapse: collapse; background: var(--cmp-table-bg); }
.cmp-table thead th { padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #161b22; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.cmp-th-feature { text-align: left !important; color: var(--cmp-muted) !important; font-size: 11px !important; letter-spacing: 0.5px; width: 26%; }
.cmp-th-price { display: block; margin-top: 4px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-th-small .cmp-th-price { color: rgba(107, 114, 128, 1); }
.cmp-th-medium .cmp-th-price { color: rgba(59, 130, 246, 1); }
.cmp-th-large .cmp-th-price { color: var(--cmp-orange); }
.cmp-th-enterprise .cmp-th-price { color: var(--cmp-purple); }
.cmp-th-large { border-top: 2px solid var(--cmp-orange); color: var(--cmp-orange); background: rgba(249, 115, 22, 0.04) !important; }
.cmp-table td { padding: 18px 16px; color: rgba(139, 149, 168, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-table thead th.cmp-th-feature { font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(139, 149, 168, 1); }

/* .cmp-table tbody tr:nth-child(even) td { background: var(--cmp-row-bg); } */
.cmp-feature-cell { text-align: left !important; color: #d4d6db; }
.cmp-large-col { background: rgba(242, 101, 43, 0.05); }
.cmp-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 700; }
.cmp-check.cmp-check-small { border: 1px solid rgba(107, 114, 128, 0.19); background: rgba(107, 114, 128, 0.09); padding: 1px; color: rgba(107, 114, 128, 1); }
span.cmp-check.cmp-check-medium { border: 1px solid rgba(59, 130, 246, 0.19); background: rgba(59, 130, 246, 0.09); padding: 1px; color: rgba(59, 130, 246, 1); }
span.cmp-check.cmp-check-large { border: 1px solid rgba(249, 115, 22, 0.19); background: rgba(249, 115, 22, 0.09); padding: 1px; color: rgba(249, 115, 22, 1); }
span.cmp-check.cmp-check-enterprise { border: 1px solid rgba(168, 85, 247, 0.19); background: rgba(168, 85, 247, 0.09); padding: 1px; color: rgba(168, 85, 247, 1); }
.cmp-check-gray { background: rgba(154, 158, 168, 0.15); color: var(--cmp-gray); }
.cmp-check-blue { background: rgba(92, 139, 255, 0.15); color: var(--cmp-blue); }
.cmp-check-orange { background: rgba(242, 101, 43, 0.15); color: var(--cmp-orange); }
.cmp-check-purple { background: rgba(178, 107, 255, 0.15); color: var(--cmp-purple); }
.cmp-dash { color: var(--cmp-muted); }
.cmp-value-blue { color: var(--cmp-blue); font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-value-orange { color: var(--cmp-orange); font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-value-purple { color: var(--cmp-purple); font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-value-white { color: rgba(107, 114, 128, 1); font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-category-row td { background: #1a2030; color: var(--cmp-orange); text-align: left; cursor: pointer; padding: 12px 18px; user-select: none; font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.cmp-category-toggle { float: right; color: rgba(249, 115, 22, 1); border: 1px solid rgba(249, 115, 22, 0.2); background: rgba(249, 115, 22, 0.1); width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 4px; }
.cmp-row-hidden { display: none; }
.cmp-cta-row td { background: rgba(22, 27, 34, 1); border-bottom: none; padding: 16px; }
.cmp-cta-row td.cmp-cta-label { font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; color: rgba(240, 242, 245, 1); letter-spacing: 0px; }
.cmp-cta-label { text-align: left !important; color: var(--cmp-white); font-weight: 700; font-size: 13px; }
.cmp-cta-btn { width: 100%; padding: 10px; border-radius: 4px; cursor: pointer; border: none; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.cmp-cta-btn:hover { opacity: 0.85; }
.cmp-cta-gray { background: rgba(107, 114, 128, 1); color: var(--cmp-white); }
.cmp-cta-blue { background: rgba(59, 130, 246, 1); color: var(--cmp-white); }
.cmp-cta-orange { background: var(--cmp-orange); color: var(--cmp-white); }
.cmp-cta-purple { background: rgba(168, 85, 247, 1); color: var(--cmp-white); }
.cmp-footnote { color: rgba(139, 149, 168, 1); margin: 24px auto 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }

/* fourth section */
.seo-packages { background: rgba(22, 27, 34, 1); padding: 96px 0; overflow: hidden; }
.seo-packages .container { margin: auto; }
.seo-packages-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 64px; }
.seo-packages-left { width: 50%; }
.seo-packages-right { width: 50%; }
.seo-packages-right img { width: 100%; display: block; }
.section-tag { display: inline-block; color: #ff8a1f; margin-bottom: 16px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.seo-packages h2 { color: #ffffff; margin-bottom: 24px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 56px; letter-spacing: 0px; }
.seo-packages-left>p { color: rgba(139, 149, 168, 1); margin-bottom: 40px; max-width: 650px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.feature-list { display: flex; flex-direction: column; gap: 16px; }
.feature-box { display: flex; align-items: flex-start; gap: 16px; background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 16px; transition: .35s ease; }
.feature-box:hover { border-color: #ff8a1f; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0, 0, 0, .25); }
.feature-icon { width: 36px; height: 36px; background: rgba(255, 138, 31, .08); border: 1px solid rgba(255, 138, 31, .15); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #ff8a1f; font-size: 18px; flex-shrink: 0; }
.feature-content h4 { color: #fff; margin-bottom: 4px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.feature-content p { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

/* fifth section */
.client-brands { background: #090d13; padding: 80px 0; }
.section-heading { text-align: center; margin-bottom: 48px; }
.section-heading .section-tag { display: inline-block; color: #ff8615; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.section-heading h2 { color: #fff; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 48px; leading-trim: NONE; line-height: 72px; letter-spacing: 0px; text-align: center; }
.brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(15, 19, 24, 1); }
.brand-item { height: 80px; display: flex; align-items: center; justify-content: center; color: rgba(139, 149, 168, 1); border-right: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05); transition: .35s ease; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0.7px; }
.brand-item:nth-child(4), .brand-item:nth-child(8) { border-right: none; }
.brand-item:nth-child(n+5) { border-bottom: none; }
.brand-item:hover { background: #161c24; color: #ffffff; }

/* seventh section */
.blog-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 56px; }
.heading-left .section-tag { display: inline-block; color: #ff8618; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 22px; }
.heading-left h2 { color: #fff; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 56px; letter-spacing: 0px; }

/* .view-all { color: #ff8618; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; transition: .3s; } */

/* .view-all:hover { gap: 18px; } */
.webDeveloper .blog-grid { margin: 0; max-width: 100%; gap: 0; border: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.blog-card { background: rgba(15, 19, 24, 1); transition: .35s; }

/* .blog-card:hover { transform: translateY(-8px); border-color: #ff8618; } */
.blog-image { position: relative; overflow: hidden; }
.blog-image img { width: 100%; height: 245px; object-fit: cover; display: block; transition: .5s; }
.blog-card:hover img { transform: scale(1.08); }
.blog-category { position: absolute; top: 18px; left: 18px; background: #1d1b22; color: #ff8618; border: 1px solid rgba(255, 134, 24, .35); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.blog-content { padding: 28px; }
.blog-content h3 { margin-bottom: 28px; }
.blog-content h3 a { color: #fff; font-size: 28px; line-height: 1.4; font-weight: 700; transition: .3s; }
.blog-content h3 a:hover { color: #ff8618; }
.blog-meta { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .05); color: #8e98a4; font-size: 14px; }
.webDeveloper .blog-card { border-radius: 0; border: 0; padding: 34px 32px; }
.webDeveloper .blog-card:nth-child(2) { border: 1px solid #292d34; border-top: 0; border-bottom: 0; }
.BlogSectionImageWrapper article.blog-card { border: 0; padding: 0; border-radius: 0; }
.BlogSectionImageWrapper .blog-content { padding: 24px; }
.BlogSectionImageWrapper .blog-content h3 { margin-bottom: 16px; }
.BlogSectionImageWrapper .blog-content h3 a { color: #fff; transition: .3s; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 19.25px; letter-spacing: 0px; text-decoration: unset; width: 100%; display: block; }
.BlogSectionImageWrapper .blog-card:hover { transform: unset; }
.BlogSectionImageWrapper span.blog-category { padding: 5px 11px; border: 1px solid rgba(249, 115, 22, 0.3); background: rgba(8, 11, 16, 0.85); font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.BlogSectionImageWrapper .blog-image img { height: 180px; }

  /* magento seo packages css end */

  /* Ecommerce SEO Service page css start */

  /* Second Section */
.aboutseo-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.aboutseo-grid { margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }

  /* ---- Left column ---- */
.aboutseo-eyebrow { display: block; color: rgba(249, 115, 22, 1); margin-bottom: 16px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.aboutseo-title { color: var(--as-white); margin: 0 0 24px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 56px; leading-trim: NONE; line-height: 56px; letter-spacing: 0px; }
.aboutseo-paragraph { color: var(--as-muted); margin: 0 0 20px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.aboutseo-highlight { color: var(--as-orange); font-weight: 700; }
.aboutseo-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--as-orange); border: none; color: var(--as-white); padding: 13px 24px; border-radius: 6px; cursor: pointer; margin-top: 10px; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.aboutseo-btn:hover { opacity: 0.88; }

  /* ---- Right column: dashboard card ---- */
.dashboard-card { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; position: relative; overflow: hidden; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin: 0 -24px 24px -24px; padding: 0 24px 20px; }
.dashboard-title { color: rgba(139, 149, 168, 1); font-family: DM Mono; font-weight: 500; font-style: Medium; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.dashboard-live { display: flex; align-items: center; gap: 6px; background: rgba(16, 185, 129, 0.1); color: rgba(16, 185, 129, 1); padding: 2px 8px; border-radius: 12px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--as-green); }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: transparent; border: 0; border-radius: 8px; padding: 0; margin-bottom: 24px; padding-bottom: 24px; }
.dashboard-stat:nth-child(2):before { content: ''; display: block; height: 100px; width: 1px; background: rgba(255, 255, 255, 0.08); position: absolute; right: 0; top: -24px; }
.dashboard-stat:nth-child(2):after { content: ''; display: block; height: 105px; width: 1px; background: rgba(255, 255, 255, 0.08); position: absolute; left: 0; top: -24px; }
.dashboard-stat:nth-child(2) { position: relative; }
.dashboard-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-num { font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 30px; leading-trim: NONE; line-height: 36px; letter-spacing: 0px; text-align: center; margin-bottom: 2px; }
.stat-orange { color: var(--as-orange); }
.stat-blue { color: var(--as-blue); }
.stat-green { color: var(--as-green); }
.stat-label { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; }
.dashboard-list-label { display: block; color: rgba(139, 149, 168, 1); margin-bottom: 16px; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.dashboard-list { display: flex; flex-direction: column; gap: 2px; }
.dashboard-row { display: flex; align-items: center; gap: 12px; padding: 0 0 12px 0; }
.rank-badge { width: 24px; height: 24px; border-radius: 4px; background: #23262f; color: var(--as-muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.rank-badge-orange { background: rgba(242, 101, 43, 0.18); color: var(--as-orange); }
.rank-keyword { flex-grow: 1; color: rgba(240, 242, 245, 1); font-size: 12px; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.rank-move { color: var(--as-green); font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.dashboard-accent-bar { height: 2px; background: linear-gradient(90deg, #F97316 0%, rgba(0, 0, 0, 0) 60%); border-radius: 2px; margin-top: 0; width: 100%; position: absolute; bottom: 0; left: 0; }

  /* third section */
.seosvc-section { background: var(--ss-bg); padding: 80px 40px; box-sizing: border-box; }
.seosvc-header { max-width: 1180px; margin: 0 auto 36px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.seosvc-eyebrow { display: block; color: var(--ss-orange); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 14px; }
.seosvc-title { color: var(--ss-white); font-size: 28px; font-weight: 800; line-height: 1.25; margin: 0; }
.seosvc-subtitle { color: var(--ss-muted); font-size: 13px; line-height: 1.6; max-width: 260px; margin: 0 0 6px; text-align: right; }
.seosvc-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ss-border); border-radius: 10px; overflow: hidden; background: var(--ss-card-bg); }
.seosvc-card { padding: 22px; border-right: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); }
.seosvc-card:nth-child(4n) { border-right: none; }
.seosvc-card:nth-last-child(-n+4) { border-bottom: none; }
.seosvc-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.seosvc-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.seosvc-icon-orange { background: var(--ss-icon-orange-bg); color: var(--ss-orange); }
.seosvc-icon-blue { background: var(--ss-icon-blue-bg); color: var(--ss-icon-blue); }
.seosvc-icon-green { background: var(--ss-icon-green-bg); color: var(--ss-icon-green); }
.seosvc-icon-purple { background: var(--ss-icon-purple-bg); color: var(--ss-icon-purple); }
.seosvc-icon-teal { background: var(--ss-icon-teal-bg); color: var(--ss-icon-teal); }
.seosvc-tag { color: var(--ss-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; }
.seosvc-title-sm { color: var(--ss-white); font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.seosvc-desc { color: var(--ss-muted); font-size: 12px; line-height: 1.55; margin: 0; }

  /* fourth section */
.pillars-section { background: rgba(22, 27, 34, 1); padding: 96px 0; box-sizing: border-box; }
.pillars-header { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.pillars-eyebrow { display: block; color: var(--pl-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.pillars-title { color: var(--pl-white); margin: 0 0 12px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; }
.pillars-subtitle { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; max-width: 512px; margin: 0 auto; }
.pillars-wrap { margin: 0 auto; overflow: hidden; background: rgba(15, 19, 24, 1); }
.pillars-row { display: grid; }
.pillars-row-4 { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--pl-border); }
.pillars-row-3 { grid-template-columns: repeat(3, 1fr); }
.pillar-card { background: rgba(15, 19, 24, 1); padding: 32px; border-right: 1px solid #292d34; }
.pillars-row-4 .pillar-card:last-child, .pillars-row-3 .pillar-card:last-child { border-right: none; }
.pillar-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.2); color: var(--pl-orange); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 20px; }
.pillar-bignum { display: block; color: rgba(255, 255, 255, 0.08); margin-bottom: 8px; font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 36px; leading-trim: NONE; line-height: 40px; letter-spacing: 0px; }
.pillar-title { color: var(--pl-white); margin: 0 0 8px; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.pillar-desc { color: rgba(139, 149, 168, 1); margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 19.5px; letter-spacing: 0px; }

  /* fifth section */
.cases-section { background: #080b10; padding: 96px 0; box-sizing: border-box; }
.cases-header { margin: 0 auto 56px; display: flex; justify-content: space-between; align-items: flex-start; }
.cases-eyebrow { display: block; color: var(--cs-orange); margin-bottom: 12px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.cases-title { color: var(--cs-white); margin: 0; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 61.55px; letter-spacing: 0px; }
.cases-viewall { color: var(--cs-orange); text-decoration: none; white-space: nowrap; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.cases-tabs { margin: 0 auto 41px; display: flex; gap: 8px; }
.cases-tab { background: rgba(15, 19, 24, 1); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(139, 149, 168, 1); padding: 10px 20px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.cases-tab-active { background: var(--cs-orange); border-color: var(--cs-orange); color: var(--cs-white); }
.cases-card { margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; display: grid; grid-template-columns: 0.9fr 1.1fr; }
.cases-left { padding: 32px; border-right: 1px solid var(--cs-border); display: flex; flex-direction: column; justify-content: center; background: rgba(22, 27, 34, 1); border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.cases-category { color: rgba(139, 149, 168, 1); margin-bottom: 12px; font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.cases-stat { color: var(--cs-orange); margin-bottom: 8px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 112px; leading-trim: NONE; line-height: 100.8px; letter-spacing: 0px; }
.cases-stat-label { color: var(--cs-white); margin: 0 0 24px; font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 20px; leading-trim: NONE; line-height: 28px; letter-spacing: 0px; }
.cases-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cases-tag { background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.14); color: var(--cs-orange); padding: 4px 12px; border-radius: 4px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; }
.cases-right { padding: 48px; background: rgba(15, 19, 24, 1); border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.cases-client-name { color: var(--cs-white); margin: 0 0 16px; font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 40px; leading-trim: NONE; line-height: 60px; letter-spacing: 0px; }
.cases-desc { color: rgba(139, 149, 168, 1); margin: 0 0 24px; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 22.75px; letter-spacing: 0px; }
.cases-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.cases-metric { background: rgba(22, 27, 34, 1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.metric-label { color: rgba(139, 149, 168, 1); font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; margin-bottom: 2px; }
.metric-value { color: var(--cs-white); font-family: Barlow Condensed; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; }
.cases-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-orange); border: none; color: var(--cs-white); padding: 12px 20px; border-radius: 4px; cursor: pointer; transition: opacity 0.2s ease; font-family: Inter; font-weight: 700; font-style: Bold; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; }
.cases-cta:hover { opacity: 0.88; }
section.pricing-section.pricing-sectionSEO { padding: 96px 0; background: #080b10; }
.pricing-headerSEO h2.pricing-title { font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 61.55px; leading-trim: NONE; line-height: 92.32px; letter-spacing: 0px; text-align: center; margin-bottom: 12px; }
.pricing-headerSEO .pricing-subtitle { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; text-align: center; max-width: 512px; margin: 0 auto; }
.pricing-grid.pricing-gridSEO { gap: 24px; background: transparent; }
.pricing-gridSEO .pricing-card { padding: 32px; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 19, 24, 1); border-radius: 14px; }
.pricing-gridSEO .price-amount { font-family: Barlow Condensed; font-weight: 900; font-style: Black; font-size: 60px; leading-trim: NONE; line-height: 60px; letter-spacing: 0px; }
.pricing-gridSEO .plan-desc { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; min-height: unset; margin-bottom: 32px; color: rgba(139, 149, 168, 1); }
.pricing-gridSEO .pricing-card.pricing-card-popular { margin-top: 0; padding-top: 32px; box-shadow: 0px 0px 40px 0px rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.4); background: rgba(26, 32, 48, 1); }
.pricing-gridSEO .popular-badge { font-family: Inter; font-weight: 700; font-style: Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; color: rgba(249, 115, 22, 1); padding: 2px 8px; background: rgba(249, 115, 22, 0.15); }
.pricing-gridSEO .popular-top-row .plan-label { margin: 0 0 0px 0; }
.PriceBottomSEO { margin: 24px 0 0 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; color: rgba(139, 149, 168, 1); }

  /* Ecommerce SEO Service page css end */

  /* Magento Development process css start */

  /* second section */
.cta-subtitle.fiveSevenSix { max-width: 576px; }
.stepper-section { background: var(--st-bg); padding: 70px 40px; box-sizing: border-box; }
.stepper-header { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.stepper-eyebrow { display: block; color: var(--st-orange); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 14px; }
.stepper-title { color: var(--st-white); font-size: 28px; font-weight: 800; margin: 0; }
.stepper-track { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.stepper-line { position: absolute; top: 34px; left: 34px; right: 34px; height: 0; border-top: 2px dashed var(--st-border); z-index: 0; }
.stepper-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 90px; }
.stepper-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--st-icon-bg); border: 1px solid var(--st-border); color: var(--st-muted); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.stepper-label { color: var(--st-muted); font-size: 12px; font-weight: 600; }
.stepper-num { color: #4a4e58; font-size: 10px; }
.stepper-step-active { background: var(--st-active-bg); border: 1px solid rgba(242, 101, 43, 0.4); border-radius: 12px; padding: 14px 10px 14px; margin-top: -14px; }
.stepper-step-active .stepper-icon { background: var(--st-orange); border-color: var(--st-orange); color: var(--st-white); }
.stepper-step-active .stepper-label { color: var(--st-orange); font-weight: 700; }
.stepper-step-active .stepper-num { color: rgba(242, 101, 43, 0.6); }

  /* third section */
.phase-process { --bg: #0b0b0f; --panel: #131318; --panel-alt: #16161c; --border: #232329; --orange: #e0632c; --orange-soft: rgba(224, 99, 44, 0.12); --text: #f4f3f1; --text-dim: #9a99a3; --text-faint: #5f5e68; --green: #35c98f; --radius: 10px; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 64px 88px 80px; box-sizing: border-box; }
.phase-process *, .phase-process *::before, .phase-process *::after { box-sizing: border-box; }

    /* ---------- Header ---------- */
.phase-process .phase-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; gap: 40px; }
.phase-process .eyebrow { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 14px; }
.phase-process .phase-header h1 { font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -0.5px; margin: 0; max-width: 560px; }
.phase-process .header-note { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; max-width: 230px; text-align: left; margin-bottom: 6px; }

    /* ---------- Layout ---------- */
.phase-process .phase-layout { display: grid; grid-template-columns: 272px 1fr; gap: 24px; align-items: start; }

    /* ---------- Sidebar ---------- */
.phase-process .phase-sidebar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.phase-process .phase-tab { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: 8px; padding: 12px 14px; cursor: pointer; text-align: left; color: var(--text); font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease; }
.phase-process .phase-tab:hover { background: #1a1a21; }
.phase-process .phase-tab.active { background: linear-gradient(90deg, var(--orange-soft), rgba(224, 99, 44, 0.05)); border-left-color: var(--orange); border-color: rgba(224, 99, 44, 0.35); }
.phase-process .tab-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 7px; background: #1e1e25; display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.phase-process .phase-tab.active .tab-icon { background: var(--orange); color: #1a0d05; }
.phase-process .tab-icon svg { width: 16px; height: 16px; }
.phase-process .tab-text { flex: 1 1 auto; min-width: 0; }
.phase-process .tab-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.phase-process .tab-title .tab-num { color: var(--text-faint); font-weight: 700; font-size: 12px; }
.phase-process .phase-tab.active .tab-title .tab-num { color: var(--orange); }
.phase-process .tab-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.phase-process .tab-arrow { flex: 0 0 auto; color: var(--text-faint); font-size: 15px; opacity: 0; transition: opacity 0.15s ease; }
.phase-process .phase-tab.active .tab-arrow { opacity: 1; color: var(--orange); }

    /* ---------- Content panel ---------- */
.phase-process .phase-content { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px 24px; min-height: 420px; display: flex; flex-direction: column; }
.phase-process .content-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.phase-process .content-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.phase-process .content-icon svg { width: 22px; height: 22px; }
.phase-process .content-heading { flex: 1 1 auto; }
.phase-process .content-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.phase-process .content-meta .tag-foundation { color: var(--orange); font-weight: 700; }
.phase-process .content-heading h2 { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -0.3px; }
.phase-process .duration-badge { flex: 0 0 auto; background: #1c1c23; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; white-space: nowrap; }
.phase-process .content-desc { color: var(--text-dim); font-size: 14px; line-height: 1.7; max-width: 620px; margin: 0 0 22px; }
.phase-process .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex: 1 1 auto; }
.phase-process .deliverables-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); margin: 0 0 12px; }
.phase-process .deliverables-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.phase-process .deliverables-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #d8d7dc; line-height: 1.4; }
.phase-process .check-icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--orange); }
.phase-process .check-icon svg { width: 100%; height: 100%; }

    /* ---------- Terminal ---------- */
.phase-process .terminal { background: #0e0e12; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; align-self: start; }
.phase-process .terminal-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #17171d; border-bottom: 1px solid var(--border); }
.phase-process .terminal-dot { width: 9px; height: 9px; border-radius: 50%; }
.phase-process .terminal-dot.red { background: #ff5f57; }
.phase-process .terminal-dot.yellow { background: #febc2e; }
.phase-process .terminal-dot.green { background: #28c840; }
.phase-process .terminal-title { color: var(--text-faint); font-size: 11.5px; margin-left: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.phase-process .terminal-body { padding: 14px 16px; font-size: 12.5px; line-height: 1.9; }
.phase-process .terminal-body .line-cmd { color: #e7e6ea; }
.phase-process .terminal-body .line-cmd::before { content: "$ "; color: var(--text-faint); }
.phase-process .terminal-body .line-step { color: var(--text-faint); }
.phase-process .terminal-body .line-step::before { content: "-- "; }
.phase-process .terminal-body .line-done { color: var(--green); }
.phase-process .terminal-body .line-done::before { content: "\2713 "; }

    /* ---------- Footer ---------- */
.phase-process .content-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.phase-process .nav-btn { font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 7px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-faint); }
.phase-process .nav-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.phase-process .nav-btn.next { background: var(--orange); border-color: var(--orange); color: #1a0d05; }
.phase-process .nav-btn.next:hover:not(:disabled) { background: #ef7039; }
.phase-process .nav-btn.prev:hover:not(:disabled) { color: var(--text); border-color: #3a3a42; }
.phase-process .pagination { color: var(--text-faint); font-size: 12.5px; }
.phase-process .footer-center { flex: 1; }

    /* fourth section */
.eng-principles { --bg: #0b0b0f; --card: #121217; --border: #212127; --orange: #e0632c; --text: #f4f3f1; --text-dim: #9a99a3; --text-faint: #6d6c76; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 70px 88px 90px; box-sizing: border-box; }
.eng-principles *, .eng-principles *::before, .eng-principles *::after { box-sizing: border-box; }
.eng-principles .ep-header { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.eng-principles .eyebrow { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 16px; }
.eng-principles .ep-header h2 { font-size: 34px; line-height: 1.25; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 20px; }
.eng-principles .ep-sub { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin: 0; }
.eng-principles .ep-grid { max-width: 864px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); background: var(--border); gap: 1px; }
.eng-principles .ep-card { background: var(--card); padding: 26px 28px 28px; }
.eng-principles .ep-icon { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.eng-principles .ep-icon svg { width: 18px; height: 18px; }
.eng-principles .ep-icon.orange { background: rgba(224, 99, 44, 0.16); color: #e88a5f; }
.eng-principles .ep-icon.blue { background: rgba(78, 133, 219, 0.16); color: #6ea3ec; }
.eng-principles .ep-icon.green { background: rgba(58, 176, 122, 0.16); color: #5cc99a; }
.eng-principles .ep-icon.purple { background: rgba(139, 92, 246, 0.16); color: #a98bf5; }
.eng-principles .ep-icon.gold { background: rgba(196, 148, 46, 0.18); color: #d8ab55; }
.eng-principles .ep-icon.pink { background: rgba(219, 78, 122, 0.16); color: #ea7fa3; }
.eng-principles .ep-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.1px; }
.eng-principles .ep-card p { font-size: 13px; line-height: 1.7; color: var(--text-faint); margin: 0; }

    /* fifth section */

/* .clients-section { --bg: #0b0b0f; --card: #121217; --card-alt: #17171d; --border: #212127; --orange: #e0632c; --text: #f4f3f1; --text-dim: #9a99a3; --text-faint: #6d6c76; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 70px 88px 90px; box-sizing: border-box; } */
.clients-section *, .clients-section *::before, .clients-section *::after { box-sizing: border-box; }
.clients-section .cs-header { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.clients-section .eyebrow { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 16px; }
.clients-section .cs-header h2 { font-size: 34px; line-height: 1.25; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 20px; }
.clients-section .cs-sub { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin: 0; }

    /* Brand grid */
.clients-section .brand-grid { max-width: 864px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); background: var(--border); gap: 1px; }
.clients-section .brand-card { background: var(--card); padding: 22px; display: flex; align-items: center; gap: 12px; }
.clients-section .brand-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.clients-section .brand-avatar.orange { background: rgba(224, 99, 44, 0.18); color: #ef9464; }
.clients-section .brand-avatar.blue { background: rgba(78, 133, 219, 0.18); color: #6ea3ec; }
.clients-section .brand-avatar.green { background: rgba(58, 176, 122, 0.18); color: #5cc99a; }
.clients-section .brand-avatar.purple { background: rgba(139, 92, 246, 0.18); color: #a98bf5; }
.clients-section .brand-avatar.gold { background: rgba(196, 148, 46, 0.2); color: #d8ab55; }
.clients-section .brand-avatar.pink { background: rgba(219, 78, 122, 0.18); color: #ea7fa3; }
.clients-section .brand-avatar.teal { background: rgba(45, 155, 165, 0.2); color: #5cc7d0; }
.clients-section .brand-avatar.olive { background: rgba(107, 142, 46, 0.2); color: #a2c95c; }
.clients-section .brand-name { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.clients-section .brand-cat { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

    /* Stats bar */
.clients-section .stats-bar { max-width: 864px; margin: 32px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card-alt); border: 1px solid var(--border); }
.clients-section .stat { text-align: center; padding: 30px 20px 26px; border-left: 1px solid var(--border); }
.clients-section .stat:first-child { border-left: none; }
.clients-section .stat-value { color: var(--orange); font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; }
.clients-section .stat-label { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.clients-section .stat-note { font-size: 12px; color: var(--text-faint); }

  /* Magento Development process css end */

  /* magento 2 migration & update css start */

  /* third section */
.upgrade-stages { --bg: #0b0b0f; --panel: #131318; --panel-alt: #17171d; --border: #232329; --orange: #e0632c; --orange-soft: rgba(224, 99, 44, 0.12); --text: #f4f3f1; --text-dim: #9a99a3; --text-faint: #6d6c76; --green: #35c98f; --radius: 10px; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 64px 88px 80px; box-sizing: border-box; }
.upgrade-stages *, .upgrade-stages *::before, .upgrade-stages *::after { box-sizing: border-box; }

    /* Header */
.upgrade-stages .us-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 26px; }
.upgrade-stages .eyebrow { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 14px; }
.upgrade-stages .us-header h1 { font-size: 34px; line-height: 1.2; font-weight: 800; letter-spacing: -0.5px; margin: 0; max-width: 560px; }
.upgrade-stages .header-note { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; max-width: 220px; margin-bottom: 6px; }

    /* Pill tabs */
.upgrade-stages .stage-tabs { display: flex; gap: 10px; margin-bottom: 24px; }
.upgrade-stages .stage-tab { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.upgrade-stages .stage-tab svg { width: 14px; height: 14px; }
.upgrade-stages .stage-tab:hover { border-color: #33333b; color: var(--text); }
.upgrade-stages .stage-tab.active { background: var(--orange); border-color: var(--orange); color: #1a0d05; }

    /* Layout */
.upgrade-stages .stage-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.upgrade-stages .stage-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 32px 30px; }
.upgrade-stages .panel-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.upgrade-stages .panel-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.upgrade-stages .tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.upgrade-stages .tag.stage { background: var(--orange-soft); color: var(--orange); }
.upgrade-stages .tag.kind { background: #1c1c23; color: var(--text-dim); border: 1px solid var(--border); }
.upgrade-stages .panel-top h2 { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -0.3px; }
.upgrade-stages .panel-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.upgrade-stages .panel-icon svg { width: 20px; height: 20px; }
.upgrade-stages .info-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.upgrade-stages .info-box { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.upgrade-stages .info-label { font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.upgrade-stages .info-value { font-size: 14px; font-weight: 700; color: var(--orange); }
.upgrade-stages .info-value.plain { color: var(--text); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 13px; }
.upgrade-stages .panel-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.75; margin: 0 0 20px; max-width: 620px; }
.upgrade-stages .deliverables-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.upgrade-stages .deliverables-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #d8d7dc; line-height: 1.4; }
.upgrade-stages .check-icon { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; color: var(--orange); }
.upgrade-stages .check-icon svg { width: 100%; height: 100%; }
.upgrade-stages .cta-btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13.5px; font-weight: 700; background: var(--orange); color: #1a0d05; border: none; border-radius: 7px; padding: 11px 18px; cursor: pointer; }
.upgrade-stages .cta-btn:hover { background: #ef7039; }

    /* Right column */
.upgrade-stages .stage-side { display: flex; flex-direction: column; gap: 16px; }
.upgrade-stages .terminal { background: #0e0e12; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.upgrade-stages .terminal-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--panel-alt); border-bottom: 1px solid var(--border); }
.upgrade-stages .terminal-dot { width: 9px; height: 9px; border-radius: 50%; }
.upgrade-stages .terminal-dot.red { background: #ff5f57; }
.upgrade-stages .terminal-dot.yellow { background: #febc2e; }
.upgrade-stages .terminal-dot.green { background: #28c840; }
.upgrade-stages .terminal-title { color: var(--text-faint); font-size: 11.5px; margin-left: 4px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.upgrade-stages .terminal-body { padding: 14px 16px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; line-height: 1.85; min-height: 180px; }
.upgrade-stages .terminal-body .line-cmd { color: #e7e6ea; }
.upgrade-stages .terminal-body .line-cmd::before { content: "$ "; color: var(--text-faint); }
.upgrade-stages .terminal-body .line-step { color: var(--text-faint); }
.upgrade-stages .terminal-body .line-step::before { content: "\2192 "; }
.upgrade-stages .terminal-body .line-done { color: var(--green); }
.upgrade-stages .terminal-body .line-done::before { content: "\2713 "; }
.upgrade-stages .include-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.upgrade-stages .include-box .include-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.upgrade-stages .include-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upgrade-stages .include-box li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-dim); }
.upgrade-stages .include-box li::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

    /* fifth section */
.timeline-section { --bg: #0b0b0f; --panel: #121217; --border: #212127; --orange: #e0632c; --text: #f4f3f1; --text-dim: #9a99a3; --text-faint: #6d6c76; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding: 70px 88px 90px; box-sizing: border-box; }
.timeline-section *, .timeline-section *::before, .timeline-section *::after { box-sizing: border-box; }
.timeline-section .tl-header { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.timeline-section .eyebrow { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; margin: 0 0 16px; }
.timeline-section .tl-header h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 16px; }
.timeline-section .tl-sub { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; margin: 0; }
.timeline-section .tl-list { max-width: 640px; margin: 0 auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.timeline-section .tl-row { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.timeline-section .tl-row:last-child { border-bottom: none; }
.timeline-section .tl-num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff; }
.timeline-section .tl-num.c1 { background: #e0632c; }
.timeline-section .tl-num.c2 { background: #3f7fe0; }
.timeline-section .tl-num.c3 { background: #2fb579; }
.timeline-section .tl-num.c4 { background: #8b5cf6; }
.timeline-section .tl-num.c5 { background: #e0a72c; }
.timeline-section .tl-num.c6 { background: #e0468f; }
.timeline-section .tl-num.c7 { background: #22b8c4; }
.timeline-section .tl-title { flex: 1 1 auto; font-size: 14px; font-weight: 700; }
.timeline-section .tl-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 20px; border: 1px solid; }
.timeline-section .tl-badge.c1 { color: #ef9464; border-color: rgba(224, 99, 44, 0.4); background: rgba(224, 99, 44, 0.1); }
.timeline-section .tl-badge.c2 { color: #6ea3ec; border-color: rgba(63, 127, 224, 0.4); background: rgba(63, 127, 224, 0.1); }
.timeline-section .tl-badge.c3 { color: #5cc99a; border-color: rgba(47, 181, 121, 0.4); background: rgba(47, 181, 121, 0.1); }
.timeline-section .tl-badge.c4 { color: #a98bf5; border-color: rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.1); }
.timeline-section .tl-badge.c5 { color: #e0b45c; border-color: rgba(224, 167, 44, 0.4); background: rgba(224, 167, 44, 0.1); }
.timeline-section .tl-badge.c6 { color: #ea7fa3; border-color: rgba(224, 70, 143, 0.4); background: rgba(224, 70, 143, 0.1); }
.timeline-section .tl-badge.c7 { color: #5cd6e0; border-color: rgba(34, 184, 196, 0.4); background: rgba(34, 184, 196, 0.1); }
.contact-form-card { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 19, 24, 1); padding: 32px; border-radius: 16px; }

  /* magento 2 migration & update css end  */
@media screen and (min-width:320px) and (max-width:767px) {
	.footer-top { grid-template-columns: 1fr; gap: 20px; }
	.process-content, .contact-grid { grid-template-columns: 1fr; }
	.hero-content h1 { color: #fff; font-size: 24px; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width:992px) {
	.hero-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }
	.customization-service.hero-section .container { gap: 44px; }
}

/* =========================================================
DEVELOPER CARD
========================================================= */
.hero-image { position: relative; width: 100%; margin: 0 auto; padding: 43px 20px 0px 50px; box-sizing: border-box; overflow: visible; }
.developer-card { position: relative; width: 100%; max-width: 580px; margin: 0 auto; background: #0d1218; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; overflow: hidden; box-sizing: border-box; }
.developer-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #f97316 0%, #ff4f4f 50%, rgba(255, 79, 79, 0) 85%); z-index: 2; }
.developer-tabs { display: flex; align-items: stretch; justify-content: flex-start; width: 100%; height: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-sizing: border-box; }
.developer-tabs .tab { position: relative; width: 186px; flex: 0 0 186px; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: rgba(139, 149, 168, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; text-align: center; cursor: pointer; box-sizing: border-box; }
.developer-tabs .tab.active { color: rgba(249, 115, 22, 1); background: rgba(249, 115, 22, 0.04); }
.developer-tabs .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 2px; background: rgba(249, 115, 22, 1); }
.developer-body { padding: 24px; box-sizing: border-box; }
.developer-top { display: grid; grid-template-columns: 64px
	minmax(0, 1fr)
auto; column-gap: 18px; align-items: start; }
.developer-avatar { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: linear-gradient(135deg, #ff7518 0%, #ff4d4d 100%); color: #ffffff; box-sizing: border-box; font-family: Barlow Condensed; font-weight: 900; font-size: 18px; line-height: 28px; letter-spacing: 0px; }
.developer-info { min-width: 0; }
.developer-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.developer-name-row h3 { margin: 0; padding: 0; color: rgba(240, 242, 245, 1); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 0; }
.available { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 999px; background: rgba(0, 180, 120, 0.15); color: #00b978; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; }
.developer-info > p { margin: 1px 0 0; padding: 0; color: rgba(139, 149, 168, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; }
.top-rated { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 4px 10px; border: 1px solid rgba(249, 115, 22, 0.35); border-radius: 4px; background: rgba(249, 115, 22, 0.08); color: rgba(249, 115, 22, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; box-sizing: border-box; }
.developer-price { text-align: right; padding: 0; }
.developer-price strong { display: block; margin: 0; color: rgba(249, 115, 22, 1); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0; white-space: nowrap; }
.developer-price small { display: block; margin: 0; color: rgba(139, 149, 168, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; white-space: nowrap; }
.developer-rating { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.developer-rating .stars { color: #f97316; font-size: 15px; line-height: 16px; letter-spacing: 1px; white-space: nowrap; margin: 0; }
.developer-rating > span { color: rgba(139, 149, 168, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; white-space: nowrap; }
.developer-skills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.developer-skills span { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; background: rgba(22, 27, 34, 1); color: rgba(139, 149, 168, 1); font-family: "DM Mono", monospace; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; white-space: nowrap; box-sizing: border-box; }
.hire-btn { width: 100%; height: 48px; margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 0; border-radius: 4px; background: rgba(249, 115, 22, 1); color: #ffffff; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0; text-decoration: none; box-sizing: border-box; transition: background 0.25s ease, transform 0.25s ease; }
.hire-btn:hover { background: #ff7f25; color: #ffffff; }
.start-badge { position: absolute; top: 22px; right: 5px; z-index: 10; width: 161px; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(22, 27, 34, 1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); box-sizing: border-box; }
.start-badge .badge-icon { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(249, 115, 22, 0.15); color: #f97316; font-size: 18px; line-height: 1; }
.start-badge .badge-icon img { width: 18px; height: 18px; }
.start-badge > div { min-width: 0; }
.start-badge strong { display: block; margin: 0; color: rgba(240, 242, 245, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.start-badge small { display: block; margin: 0; color: rgba(139, 149, 168, 1); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; }
.nda-card { position: absolute; left: 0; bottom: -43px; z-index: 10; width: 142px; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(249, 115, 22, 1); box-shadow: 0 8px 28px rgba(249, 115, 22, 0.30), 0 8px 30px rgba(0, 0, 0, 0.25); box-sizing: border-box; }
.nda-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 18px; line-height: 1; }
.nda-icon svg { width: 18px; height: 18px; }
.nda-card > div:last-child { min-width: 0; }
.nda-card strong { display: block; margin: 0; color: #ffffff; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.nda-card small { display: block; margin: 0; color: rgba(255, 255, 255, 0.7); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; white-space: nowrap; }
@media (max-width:991px) {
	.hero-image { max-width: 626px; padding-left: 28px; padding-right: 28px; }
}
@media (max-width:640px) {
	.hero-image { width: 100%; max-width: 100%; min-height: auto; padding: 50px 16px 75px; }
	.developer-card { width: 100%; max-width: 100%; }
	.developer-tabs { height: 56px; }
	.developer-tabs .tab { width: 50%; flex: 0 0 50%; }
	.developer-body { padding: 22px 18px; }
	.developer-top { grid-template-columns: 54px
	minmax(0, 1fr); column-gap: 14px; }
	.developer-avatar { width: 54px; height: 54px; border-radius: 12px; font-size: 16px; }
	.developer-price { grid-column: 2; margin-top: 12px; text-align: left; }
	.developer-rating { margin-top: 22px; }
	.developer-skills { margin-top: 18px; }
	.hire-btn { margin-top: 22px; }
	.start-badge { top: 0; right: 10px; }
	.nda-card { left: 10px; bottom: 5px; }
}

/* Header responsive */

/* ============================================================
HEADER - MOBILE / TABLET NAV
Add this block right after the existing "Header CSS" section
============================================================ */

.site-header .container { position: relative; }

/* ---- Hamburger button ---- */
.header-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: transparent; border: 1px solid #3d4148; border-radius: 6px; cursor: pointer; padding: 0; z-index: 1002; flex-shrink: 0; }
.header-toggle span { display: block; width: 18px; height: 2px; background: #ffffff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }

/* animate to an X when open */
.header-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-toggle.is-active span:nth-child(2) { opacity: 0; }
.header-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Close button inside drawer ---- */
.nav-close { display: none; position: absolute; top: 18px; right: 20px; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; color: #ffffff; font-size: 22px; line-height: 1; cursor: pointer; }

/* ---- Overlay behind the drawer ---- */
.nav-overlay { position: fixed; inset: 0; background: rgba(5, 8, 12, .7); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 999; }
.nav-overlay.is-open { opacity: 1; visibility: visible; }

/* buttons shown only inside the mobile drawer, hidden on desktop */
.mobile-header-buttons { display: none; }

/* ============================================================
Tablet & mobile (<= 991px)
============================================================ */
@media only screen and (max-width:991px) {
	.header-toggle { display: flex; }
	
					/* hide the desktop-row login/quote buttons; they reappear inside the drawer */
	.site-header > .container > .header-buttons { display: none; }
	.main-nav { position: fixed; top: 0; right: -100%; width: min(320px, 85vw); height: 100vh; height: 100dvh; background: #12161c; border-left: 1px solid rgba(255, 255, 255, 0.08); padding: 90px 28px 32px; box-sizing: border-box; overflow-y: auto; transition: right .35s ease; z-index: 1001; }
	.main-nav.is-open { right: 0; }
	.nav-close { display: flex; }
	.main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
	.main-nav li { width: 100%; }
	.main-nav a { display: block; width: 100%; padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; }
	.mobile-header-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; width: 100%; }
	.mobile-header-buttons .btn { width: 100%; height: 48px; }
	
					/* lock page scroll while drawer is open */
	body.nav-open { overflow: hidden; }
}
@media only screen and (max-width:420px) {
	.main-nav { width: 88vw; padding: 80px 22px 28px; }
}

/* customization-services tab start */
.service-card-section { position: relative; width: 100%; max-width: 582px; margin: 0 auto; font-family: 'Inter', sans-serif; }
.service-card-section * { box-sizing: border-box; }
.service-card-section .card { position: relative; background: rgba(22, 27, 34, 1); border-radius: 16px; padding: 0 24px 24px; overflow: visible; }
.service-card-section .tabs { display: flex; align-items: center; gap: 4px; height: 43px; margin: 0 -24px 20px; padding: 0; background: rgba(22, 27, 34, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px 16px 0 0; overflow-x: auto; scrollbar-width: none; }
.service-card-section .tabs::-webkit-scrollbar { display: none; }
.service-card-section .tab { position: relative; background: transparent; border: none; height: 100%; padding: 0 16px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; line-height: 16px; text-align: center; color: rgba(139, 149, 168, 1); white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.service-card-section .tab:hover { color: rgba(200, 205, 215, 1); }
.service-card-section .tab:focus-visible { outline: 2px solid rgba(249, 115, 22, 1); outline-offset: -2px; }
.service-card-section .tab.active { color: rgba(249, 115, 22, 1); background: rgba(249, 115, 22, 0.03); }
.service-card-section .tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(249, 115, 22, 1); border-radius: 2px; }
.service-card-section .header-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.service-card-section .icon-box { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(160deg, rgba(249, 115, 22, 0.12), rgba(249, 115, 22, 0.04)); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(249, 115, 22, 0.16); }
.service-card-section .icon-box svg { width: 22px; height: 22px; }
.service-card-section .heading-group h1 { margin: 0 0 8px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: 0; color: rgba(240, 242, 245, 1); }
.service-card-section .badge-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(249, 115, 22, 0.07); font-family: 'DM Mono', monospace; font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0; color: rgba(249, 115, 22, 1); }
.service-card-section .description { margin: 0 0 20px; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 22.75px; letter-spacing: 0; color: rgba(139, 149, 168, 1); }
.service-card-section .feature-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.service-card-section .feature-list li { display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(240, 242, 245, 1); }
.service-card-section .check { flex: 0 0 auto; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; }
.service-card-section .cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(249, 115, 22, 1); border: none; border-radius: 10px; padding: 10px 16px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; line-height: 16px; text-align: center; color: rgba(255, 255, 255, 1); cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.service-card-section .cta:hover { filter: brightness(1.08); }
.service-card-section .cta:active { transform: translateY(1px); }
.service-card-section .cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.service-card-section .cta img { width: 14px; height: 14px; }
.service-card-section .float-badge { position: absolute; display: flex; align-items: center; gap: 10px; white-space: nowrap; z-index: 2; }
.service-card-section .float-badge .icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.service-card-section .float-badge .label { display: flex; flex-direction: column; line-height: 16px; }
.service-card-section .badge-top { top: -28px; right: -18px; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(249, 115, 22, 1); box-shadow: 0px 8px 28px 0px rgba(249, 115, 22, 0.3); }
.service-card-section .badge-top .icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, 0.15); }
.service-card-section .badge-top .icon svg { width: 12px; height: 13px; }
.service-card-section .badge-top .label strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 1); }
.service-card-section .badge-top .label span { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.7); }
.service-card-section .badge-bottom { gap: 10px; bottom: -20px; left: -21px; padding: 10px 14px; border-radius: 12px; background: rgba(22, 27, 34, 1); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.4); }
.service-card-section .badge-bottom .icon svg { width: 32px; height: 32px; }
.service-card-section .badge-bottom .label strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; line-height: 16px; color: rgba(240, 242, 245, 1); }
.service-card-section .badge-bottom .label span { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(139, 149, 168, 1); }
.service-card-section .panel { animation: scs-fade .15s ease; }
@keyframes scs-fade {
	from { opacity: 0; transform: translateY(3px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (max-width:640px) {
	.service-card-section .card { padding: 0 20px 20px; margin-top: 30px; margin-bottom: 30px; }
	.service-card-section .tabs { margin: 0 -20px 20px; padding: 0 20px; }
	.service-card-section .tab { padding: 0 12px; }
	.service-card-section .header-row { gap: 12px; }
	.service-card-section .icon-box { width: 42px; height: 42px; }
	.service-card-section .heading-group h1 { font-size: 15px; line-height: 22px; }
	.service-card-section .badge-top, .service-card-section .badge-bottom { position: static; display: inline-flex; }
	.service-card-section .badge-top { margin-bottom: 16px; }
	.service-card-section .badge-bottom { margin-top: 16px; }
}
@media (prefers-reduced-motion:reduce) {
	.service-card-section .cta, .service-card-section .tab, .service-card-section .panel { animation: none; transition: none; }
}

/* customization-services tab end */
.CustomizationServicesGrid .service-card ul { margin: 20px 0 0 0; }
.CustomizationServicesGrid .service-card ul li { font-family: Inter; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; color: rgba(139, 149, 168, 1); margin: 0 0 8px 0; margin-left: 17px; }
.services-grid.CustomizationServicesGrid { grid-template-columns: repeat(3, 1fr); }
.services-grid.CustomizationServicesGrid .service-card:nth-last-child(-n+3) { border-bottom: none; }
.services-grid.CustomizationServicesGrid .service-card:nth-child(4n) { border-right: 1px solid var(--svc-border); }
.services-grid.CustomizationServicesGrid .service-card:nth-child(3n) { border-right: none; }
.services-grid.CustomizationServicesGrid .service-card:nth-last-child(-n+3) { border-bottom: none; }
.services-grid.CustomizationServicesGrid .service-card:nth-last-child(-n+4) { border-bottom: 1px solid var(--svc-border); }
section.phase-section.CustomizePhaseWrapper { background: rgba(22, 27, 34, 1); }
.cta-subtitle.CustomizationServieWrapper { max-width: 576px; }
.feature-bar-inner .feature { display: flex; align-items: center; gap: 8px; font-family: Inter; font-weight: 600; font-style: Semi Bold; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 0px; text-align: center; color: rgba(255, 255, 255, 0.8); }
.feature-bar-inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 32px; max-width: 1100px; margin: 0 auto; margin-top: 40px; }
.cases-left.CustomizationLeft { padding: 0;position: relative; }
.cases-left.CustomizationLeft img { border-top-left-radius: 15px; border-bottom-left-radius: 15px;height: 100%; }
.cases-left.CustomizationLeft .cases-stat-label { font-family: Barlow Condensed; font-weight: 800; font-style: ExtraBold; font-size: 80px; leading-trim: NONE; line-height: 72px; letter-spacing: 0px; margin: 0 0 4px 0; }
.customizationMagetoAbsoulate .cases-category { margin: 0; font-family: Inter; font-weight: 400; font-style: Regular; font-size: 14px; leading-trim: NONE; line-height: 20px; letter-spacing: 0px; color: rgba(255, 255, 255, 0.7); }
.customizationMagetoAbsoulate { position: absolute; left: 32px; bottom: 32px; }
.cases-right.CustomizationRight { padding: 40px; }
.caseStudyCustomzationHeading h3 { font-family: DM Mono; font-weight: 400; font-style: Regular; font-size: 12px; leading-trim: NONE; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(139, 149, 168, 1); }
.caseStudyCustomzationHeading { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.CustomizationSectionWrapper .cases-tabs { margin: 0 auto 32px; }
section.services-section.storeMigrationService { background: rgba(22, 27, 34, 1); }
.StoreMigration .hero-image img { width: 100%; }
section.hero-section.HireDeveloper.WebDevelopment.customization-service.StoreMigration .aboutDeveloper { width: 100%; max-width: 512px; }
.ClientRatingWrapper .stars{margin: 0;}.StoreMigrateFAQWrapper{background: #080b10;}