/* cyrillic-ext */ @font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserratalternates/v18/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFCrxG6mA.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserratalternates/v18/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFA7xG6mA.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserratalternates/v18/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFCLxG6mA.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; } /* latin-ext */ @font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserratalternates/v18/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFCbxG6mA.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; } /* latin */ @font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/montserratalternates/v18/mFTiWacfw6zH4dthXcyms1lPpC8I_b0juU0xGITFB7xG.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; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmZiArmlw.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmQiArmlw.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmYiArmlw.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmXiArmlw.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* math */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVnoiArmlw.woff2) format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; } /* symbols */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVn6iArmlw.woff2) format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmbiArmlw.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; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmaiArmlw.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; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.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; } /* latin-ext */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.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; } /* latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.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; } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmZiArmlw.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmQiArmlw.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmYiArmlw.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmXiArmlw.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* math */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVnoiArmlw.woff2) format('woff2'); unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; } /* symbols */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVn6iArmlw.woff2) format('woff2'); unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF; } /* vietnamese */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmbiArmlw.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; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmaiArmlw.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; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiAo.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; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.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; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1xlFQ.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; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.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; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.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; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.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; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.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; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.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; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.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; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.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; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.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; } html{ scroll-behavior: smooth; } *, *:before, *:after{ margin:0; padding:0; outline:0; box-sizing: border-box; } ::-webkit-scrollbar { display: none; } body{ background-color:#f2f5ff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3cuse xlink:href='%23SvgjsSymbol1007' x='0' y='0'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsSymbol1007' x='720' y='0'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cpath d='M-1 0 a1 1 0 1 0 2 0 a1 1 0 1 0 -2 0z' id='SvgjsPath1004'%3e%3c/path%3e%3cpath d='M-3 0 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0z' id='SvgjsPath1005'%3e%3c/path%3e%3cpath d='M-5 0 a5 5 0 1 0 10 0 a5 5 0 1 0 -10 0z' id='SvgjsPath1001'%3e%3c/path%3e%3cpath d='M2 -2 L-2 2z' id='SvgjsPath1003'%3e%3c/path%3e%3cpath d='M6 -6 L-6 6z' id='SvgjsPath1002'%3e%3c/path%3e%3cpath d='M30 -30 L-30 30z' id='SvgjsPath1006'%3e%3c/path%3e%3c/defs%3e%3csymbol id='SvgjsSymbol1007'%3e%3cuse xlink:href='%23SvgjsPath1001' x='30' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='30' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='30' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='30' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='30' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='30' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='30' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='30' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='30' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='30' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='90' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='90' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='90' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='90' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='90' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='90' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='90' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='90' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='90' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='90' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='150' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='150' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='150' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='150' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='150' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='150' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='150' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='150' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='150' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='150' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='210' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='210' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='210' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='210' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='210' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='210' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='210' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='210' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='210' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='210' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='270' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='270' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='270' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='270' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='270' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='270' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='270' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='270' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='270' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='270' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='330' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='330' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='330' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='330' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='330' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='330' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='330' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='330' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='330' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='330' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='390' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='390' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='390' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='390' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='390' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='390' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='390' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='390' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='390' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='390' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='450' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='450' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='450' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='450' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='450' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='450' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='450' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='450' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='450' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='450' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='510' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='510' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='510' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='510' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='510' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='510' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='510' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='510' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='510' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='510' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='570' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='570' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='570' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='570' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='570' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='570' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='570' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='570' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='570' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='570' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='630' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='630' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='630' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='630' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='630' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='630' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='630' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='630' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='630' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1005' x='630' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='690' y='30' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='690' y='90' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='690' y='150' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='690' y='210' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='690' y='270' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1004' x='690' y='330' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1003' x='690' y='390' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1002' x='690' y='450' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1001' x='690' y='510' stroke='rgba(208%2c 216%2c 253%2c 1)'%3e%3c/use%3e%3cuse xlink:href='%23SvgjsPath1006' x='690' y='570' stroke='rgba(208%2c 216%2c 253%2c 1)' stroke-width='3'%3e%3c/use%3e%3c/symbol%3e%3c/svg%3e" ); } .menu{ position: fixed; background: linear-gradient(90deg, rgba(204,213,255,1) 0%, rgba(193,203,255,1) 22%, rgba(139,159,255,1) 100%); height: 75px; width: 100vw; display:flex; justify-content: space-between; align-items: center; box-shadow: 5px 0 10px black; z-index: 1000; } #modo_oscuro_movil{ display: none; } #imagen_modo{ width: 70px; cursor: pointer; } .logo{ font-size: 30px; color:#6E78B3; padding: 0 65px; font-weight: bold; font-family: 'Montserrat Alternates', sans-serif; } .img_logo1{ position: absolute; width:70px; transform: scaleX(-1); } .img_logo2{ position: absolute; left:290px; width:70px; } .menu_items{ display: flex; list-style: none; align-items: center; } .menu_items li{ border-radius:3px; margin: 0 10px; } .menu_items li a { padding:7px 13px; text-decoration: none; font-size: 20px; display: block; color: #6E78B3; font-weight: bold; font-family: 'Lato', sans-serif; font-family: 'Roboto', sans-serif; cursor: pointer; white-space: nowrap; } .menu_items a:hover, a.activate{ background-color: #e9ebf760; } .btm_menu{ display: none; margin-right: 30px; font-size: 25px; cursor: pointer; } ul.show{ top:65px; } /* cantidad de scrool para llegar a esas secciones */ #seccion-acerca-de{ scroll-margin-top:75px ; } #seccion-portafolio{ scroll-margin-top:75px ; } /* aca termina el scroll */ /* seccin inicio empieza aca */ .contenedor{ /* width: 90%; */ width: 100%; margin:0 auto; overflow:hidden; padding: 10px 0; font-weight: bold; font-family: 'Lato', sans-serif; } #wave_in{ margin-top: 75px; } #wave_1{ width: 100vw; } .contenedor_wave_1{ display: flex; height: 100%; margin-top:-20px; } #contenedor_logo{ width: 100%; display: flex; flex-wrap: wrap; } #logo_mockup{ object-fit: cover; isolation: unset; } #logo_mockup{ animation: float 3s linear infinite; } @keyframes float { 0%, 100%{ transform: translateY(0rem); } 50%{ transform: translateY(-1.5rem); } } .hero_main{ display: flex; align-items: center; justify-content: space-between; margin-top: -10vw; } .titulo{ font-size: 46px; color: black; font-family: 'Montserrat Alternates', sans-serif;; } .titulo_activado{ font-weight: 700; color: #6E79B4; } .copia{ font-size: 24px; color:black; margin: 15px 0; } .copia_activada{ font-weight: 700; } .contenedor-cta { display: flex; gap: 15px; /* Espacio entre botones */ flex-wrap: wrap; /* Para que se apilen en móviles si no hay espacio */ margin-top: 30px; } .cta { font-family: 'Montserrat Alternates', sans-serif; /* Usamos la fuente de los títulos */ font-weight: 700; font-size: 1rem; text-decoration: none; padding: 14px 28px; /* Un poco más estilizado que 20px 30px */ border-radius: 10px; /* Bordes completamente redondos (Pill shape) como tu estilo */ display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; /* Transición suave para hover */ cursor: pointer; border: 2px solid transparent; /* Preparamos el borde para el secundario */ letter-spacing: 0.5px; } /* --- Botón Primario: "Solicitar Presupuesto" (EL PROTAGONISTA) --- */ .cta.btn-primario { /* Usamos el degradado morado de tu marca (sacado de tu sección de contacto) */ background: linear-gradient(45deg, #7C8CE6, #4f5ca8); color: white; /* Sombra suave morada brillante */ box-shadow: 0 4px 15px rgba(124, 140, 230, 0.4); } .cta.btn-primario:hover { transform: translateY(-3px); /* Se eleva ligeramente */ box-shadow: 0 8px 25px rgba(124, 140, 230, 0.6); /* La sombra crece */ /* Hacemos el degradado un pelín más intenso al pasar el mouse */ background: linear-gradient(45deg, #6E78B3, #414c8f); } /* --- Botón Secundario: "Ver mas..." (EL DE APOYO) --- */ .cta.btn-secundario { background-color: transparent; /* Fondo transparente */ color: #6E78B3; /* Texto color morado marca */ border-color: #6E78B3; /* Borde color morado marca */ box-shadow: none; /* Sin sombra inicial para que sea más plano */ } .cta.btn-secundario:hover { background-color: #6E78B3; /* Al hacer hover, se rellena de morado */ color: white; /* El texto pasa a blanco */ transform: translateY(-3px); box-shadow: 0 4px 15px rgba(110, 120, 179, 0.3); /* Aparece una sombra sutil */ } /* --- Ajuste para móviles --- */ @media (max-width: 600px) { .cta { padding: 8px 4px; margin: 2px; } .contenedor-cta{ gap:0 }} .textos{ margin: 20px; background-color: #d0d8fd41; padding:20px; } /* Seccion servicios empieza aca */ /* el centrador sirve para hacer que las pagians ocupe full pero fijat el responsive por si als dudas */ /* empieza seccion acerca de mi */ #centrador-acerca-de{ width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content:space-around; background-position: center; background-image:url(../imagenes/acerca-de-degradado-2.webp); } #acerca-de-imagen{ animation: float 3s linear infinite; } #sector-acerca-de{ width: 45%; } main { max-width: 1000px; width: 90%; margin: 40px auto; } .titulo-acerca-de { color: #3a3a3a; font-weight: 700; text-align: center; margin: 60px 0; font-size: 46px; font-family: 'Montserrat Alternates', sans-serif;; } /*! =================================================*/ /*! ============= Categorias ============= */ /*! =================================================*/ #categoriasAcercaDe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 60px; background: #70ce702f; box-shadow: none; } .categoria-acerca-de { cursor: pointer; text-align: center; padding: 20px; border-radius: 10px; background: #70ce7048; font-weight: 700; color: grey; font-family: 'Lato', sans-serif; border: 2px solid transparent; transition: 0.1s ease all; } .categoria-acerca-de:hover { box-shadow: 0 9px 6px rgba(0, 0, 0, 0.2);; color: rgb(33, 119, 33); } .categoria-acerca-de svg { width: 64px; margin-bottom: 10px; } .categoria-acerca-de path { fill: grey; transition: 0.1s ease all; } .categoria-acerca-de.activa { border: 2px solid rgba(57, 163, 62, 0.322); color: rgb(33, 119, 33); background-color:#a8eca8cb ; } .categoria-acerca-de.activa path { fill: rgb(57, 163, 63) } /*! =================================================*/ /*! ============= Contenedor Preguntas ============= */ /*! =================================================*/ .contenedor-preguntas { display: none; grid-template-columns: 1fr; gap: 40px; } .contenedor-preguntas.activo { display: grid; } .contenedor-pregunta { background: #70ce7048; font-family: 'Lato', sans-serif; padding: 40px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; transition: 0.1s ease all; cursor: pointer; } .contenedor-pregunta:hover { box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);; color: green; } .contenedor-pregunta.activa { border: 2px solid rgb(57, 163, 63); color: green; background-color:#a8eca8cb ; } /*! =================================================*/ /*! ============= Preguntas ============= */ /*! =================================================*/ .pregunta { font-weight: 700; font-size: 20px; line-height: 20px; display: flex; justify-content: space-between; align-items: center; } .pregunta img { width: 14px; } .respuesta { color: #808080; line-height: 30px; max-height: 0; opacity: 0; transition: 0.1s ease all; } .contenedor-pregunta.activa .respuesta { opacity: 1; margin-top: 20px; } .contenedor-pregunta.activa img { transform: rotate(45deg); } /* termina seccion acerca de mi */ /* ========================================= PORTAFOLIO - ESTILOS BASE (TU DISEÑO ORIGINAL) ========================================= */ .header_xd { padding: 40px 0; border-radius: 30px; } :root { /* Paleta de Colores */ --color-blue-light: #e0e9ff; --color-blue-dark: #c0d1ff; --color-yellow-light: #fffce0; --color-yellow-dark: #fffaac; --text-dark: #333333; --text-gray: #555555; --card-bg: rgba(255, 255, 255, 0.6); --accent-blue: #6c8ffd; --accent-yellow: #ffc107; --font-primary: 'Poppins', sans-serif; --border-radius-large: 20px; --transition-speed: 0.3s; } /* Reset y Globales */ * { box-sizing: border-box; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 10; } .section-padding { padding: 100px 0; position: relative; } /* Títulos */ .section-title { font-family: 'Montserrat Alternates', sans-serif; text-align: center; font-size: 2.5em; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); } .section-subtitle { font-family: 'Poppins', sans-serif; text-align: center; font-size: 1.1em; color: var(--text-gray); margin-bottom: 50px; } /* Fondos de Sección */ .color-blue { background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue-dark)); } .color-yellow { background-image: url(../imagenes/fondo-portafolio-gradiante-2.webp); } .color-blue .section-title { color: var(--accent-blue); } .color-yellow .section-title { color: #dcb325; } /* Formas de Fondo */ .background-shape-top, .background-shape-bottom { position: absolute; left: 0; width: 100%; height: 100px; background-color: inherit; z-index: 5; } .background-shape-top { top: 0; border-bottom-left-radius: 50% 50px; border-bottom-right-radius: 50% 50px; transform: translateY(-50%); } .background-shape-bottom { bottom: 0; border-top-left-radius: 50% 50px; border-top-right-radius: 50% 50px; transform: translateY(50%); } /* Filtros */ .portfolio-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; } .filter-btn { font-family: 'Poppins', sans-serif; padding: 8px 20px; border: none; background: rgba(255,255,255,0.6); border-radius: 30px; cursor: pointer; font-weight: 500; color: var(--text-gray); transition: 0.3s; } .filter-btn:hover, .filter-btn.active { background-color: var(--accent-yellow); color: var(--text-dark); box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3); transform: scale(1.05); } /* ========================================= GRID DE PROYECTOS (ESTRUCTURA ORIGINAL) ========================================= */ .projects-grid { font-family: 'Poppins', sans-serif; display: grid; /* Grid flexible estándar */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; /* Scroll interno original */ max-height: 800px; overflow-y: auto; padding: 20px; scroll-behavior: smooth; background-color: rgba(106, 173, 255, 0.45); border-radius: var(--border-radius-large); } /* Scrollbar original */ .projects-grid::-webkit-scrollbar { width: 10px; } .projects-grid::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; margin: 10px 0; } .projects-grid::-webkit-scrollbar-thumb { background-color: #dcb325; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } .projects-grid::-webkit-scrollbar-thumb:hover { background-color: var(--accent-yellow); } /* Card Original */ .project-card { border-radius: var(--border-radius-large); overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: 0.3s; } .project-card.hidden { display: none; } /* Thumbnail Original */ .project-thumbnail { position: relative; height: 220px; overflow: hidden; background-color:#B6D4E8; } .project-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; } .project-card:hover .project-img { transform: scale(1.1); } /* Overlay Original */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .project-thumbnail:hover .overlay { opacity: 1; } .btn-view-details { background: transparent; border: 2px solid white; color: white; padding: 10px 25px; border-radius: 30px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.3s; font-family: var(--font-primary); } .btn-view-details:hover { background: white; color: var(--text-dark); } /* Footer Original */ .project-footer { padding: 20px; display: flex; justify-content: space-between; align-items: center; background: #fff; } .project-text h4 {font-family: 'Poppins'; font-size: 1.1em; margin-bottom: 5px; color: var(--text-dark); } .project-text span { font-family: 'Poppins';font-size: 0.85em; color: var(--text-gray); } .hidden-data { display: none; } /* Ajuste Testimonios (Tu código original) */ .project-card[data-category="clientes"] .project-img { object-fit: contain; background-color: #B6D4E8; } /* ========================================================================= MODIFICACIÓN ESPECÍFICA: TARJETAS DE DISEÑO GRÁFICO (Overlay Style) ========================================================================= */ /* 1. Ocultar footer solo en diseño (Texto pasa a la imagen) */ .project-card[data-category="design"] .project-footer { display: none; } /* 2. Ajuste del Overlay para mostrar texto */ .project-card[data-category="design"] .overlay { flex-direction: column; justify-content: flex-end; /* Texto abajo */ padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); opacity: 1; } /* 3. Textos dentro del overlay */ .design-info { text-align: center; color: white; margin-bottom: 15px; transition: transform 0.3s ease; } .project-card[data-category="design"]:hover .design-info { transform: translateY(0); } .design-title { display: block; font-family: 'Montserrat Alternates'; font-size: 1.3rem; font-weight: 700; margin-bottom: 5px; } .design-cat { display: block; font-family: 'Poppins'; font-size: 0.85rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; } /* 4. Botón ajustado para diseño */ .project-card[data-category="design"] .btn-view-details { font-size: 0.85rem; padding: 8px 20px; background-color: var(--accent-yellow); color: #333; border: none; font-weight: 700; } /* ========================================= MODAL (POPUP) Y GALERÍA ========================================= */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .modal.show { display: flex; opacity: 1; } .modal-content { font-family: 'Poppins'; background-color: #fff; width: 90%; max-width: 600px; border-radius: var(--border-radius-large); overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2); position: relative; transform: translateY(20px); transition: max-width 0.3s ease, transform 0.3s; margin: auto; } .modal.show .modal-content { transform: translateY(0); } .close-modal { position: absolute; top: 15px; right: 20px; color: white; font-size: 28px; font-weight: bold; cursor: pointer; z-index: 10; text-shadow: 0 2px 5px rgba(0,0,0,0.5); } .modal-header-img { height: 250px; width: 100%; background-color: #B6D4E8; background-size: cover; background-position: center; background-repeat: no-repeat; transition: height 0.3s ease; } .modal-body { padding: 30px; } .modal-body h3 { font-size: 1.8em; margin-bottom: 10px; } .modal-tags { display: flex; gap: 10px; margin-bottom: 20px; } .modal-tags span { font-size: 0.8em; background: #f0f0f0; padding: 5px 12px; border-radius: 15px; font-weight: 500; } .modal-body p { color: var(--text-gray); line-height: 1.6; margin-bottom: 30px; } .modal-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } .modal-buttons .btn-primary { background: var(--accent-yellow); color: #333; text-decoration: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px;} .modal-buttons .btn-secondary { border: 2px solid #eee; color: #333; text-decoration: none; padding: 10px 20px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px;} /* --- AJUSTES ESPECIALES: MODO DISEÑO GRÁFICO (JS ACTIVA ESTO) --- */ /* 1. Modal más ancho solo en diseño */ .modal-content.design-mode { max-width: 900px; width: 95%; } /* 2. Cabecera más alta para ver imagen completa */ .design-mode .modal-header-img { height: 400px; background-size: contain; /* Imagen entera */ background-color: #B6D4E8; } /* 3. Galería de imágenes (Grilla ordenada) */ /* Contenedor de la grilla */ .modal-gallery-grid { display: grid; /* Columnas automáticas de mínimo 160px para que se vean bien */ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } /* Tarjeta individual de imagen */ .modal-gallery-img { width: 100%; height: 160px; object-fit: cover; /* Bordes muy redondeados como en tu imagen de referencia */ border-radius: 20px; cursor: pointer; /* Efecto "Glass" y Sombra suave */ box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 6px 6px rgba(0,0,0,0.05); border: 4px solid #ffffff; /* Borde blanco grueso para separar */ background-color: #B6D4E8; /* Transición suave para todo */ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Efecto Hover: Levantar y Brillar */ .modal-gallery-img:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 30px rgba(108, 92, 231, 0.15); /* Sombra lila/azulada suave */ border-color:#B6D4E8 ; z-index: 2; } #m-gallery:empty { display: none; margin: 0; padding: 0; border: none; } /* Cambiar el color del título solo en automatizaciones */ .modal-content.automate-mode h3 { color: #6a1b9a; font-family: 'Montserrat Alternates', sans-serif; } /* Cambiar tags solo en automatizaciones */ .modal-content.automate-mode .modal-tags span { background-color: #e1bee7; color: #4a148c; } /* --- RESPONSIVE FINAL --- */ @media (max-width: 768px) { .section-title { font-size: 2em; } .projects-grid { grid-template-columns: 1fr; } /* 1 Columna en móvil */ .modal-content { width: 95%; margin: 10px auto; } /* Estilos específicos para el modal de Automatizaciones */ .modal-content.automate-mode { width: 85dvh; font-size: 13px; } .modal-content{ width: 85dvh; } .modal-content.design-mode { width: 75dvh; height:98dvh ; } /* Ajustes Móvil para Diseño */ .design-mode .modal-header-img { height: 150px; } .modal-gallery-grid { grid-template-columns: repeat(2, 1fr); } /* 2 col en galería móvil */ .modal-gallery-img { height: 50px; } /* Ajustes Móvil Modal Botones */ .modal-buttons { flex-direction: column; } .modal-buttons a { justify-content: center; width: 100%; } } /* ========================================= SECCIÓN SERVICIOS (ESTILO VIOLETA PASTEL) ========================================= */ .centrador-servicios { width: 100%; min-height: 100vh; /* Ocupa pantalla completa como tus otras secciones */ display: flex; align-items: center; justify-content: center; /* Fondo degradado suave violeta pastel */ background-image: url(../imagenes/portafolio-fondo-gradiante.webp); padding: 60px 20px; position: relative; } .contenido-servicios { max-width: 1200px; width: 100%; } .header-servicios { text-align: center; margin-bottom: 50px; } .titulo-servicios { font-family: 'Montserrat Alternates', sans-serif; font-size: 2.5rem; color: #6a1b9a; /* Violeta fuerte para contraste */ margin-bottom: 10px; } .subtitulo-servicios { font-family: 'Poppins', sans-serif; font-size: 1.2rem; color: #8e24aa; opacity: 0.8; } /* --- GRID DE TARJETAS --- */ .grid-servicios-violeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: center; /* Alineación vertical */ } /* --- TARJETA BASE (Card Violeta) --- */ .card-violeta { background: rgba(237, 155, 255, 0.356); /* Blanco vidrio */ backdrop-filter: blur(10px); border: 2px solid rgba(242, 188, 255, 0.873); border-radius: 25px; padding: 40px 30px; text-align: center; transition: all 0.3s ease; position: relative; box-shadow: 0 10px 25px rgba(106, 27, 154, 0.05); /* Sombra violeta muy suave */ } .card-violeta:hover { transform: translateY(-10px); background: rgba(205, 144, 255, 0.35); box-shadow: 0 15px 35px rgba(106, 27, 154, 0.15); border-color: #d1c4e9; } /* --- TARJETA DESTACADA (La del medio) --- */ .card-violeta.destacado { border: 2px solid #d293ff; /* Borde violeta medio */ background: linear-gradient(160deg, rgba(245, 198, 243, 0.9), #feefff47); transform: scale(1.05); z-index: 2; } .card-violeta.destacado:hover { transform: scale(1.05) translateY(-10px); } .popular-tag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #ab47bc; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; font-family: 'Lato', sans-serif; box-shadow: 0 5px 15px rgba(171, 71, 188, 0.4); } /* --- ELEMENTOS DE LA TARJETA --- */ .icon-bubble { width: 70px; height: 70px; background: #ede7f6; /* Lila muy pálido */ border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; font-size: 1.8rem; color: #8e24aa; transition: 0.3s; } .card-violeta:hover .icon-bubble { background: #8d24aa9f; color: white; } .card-violeta h3 { font-family: 'Montserrat Alternates', sans-serif; font-size: 1.5rem; color: #4a148c; margin-bottom: 15px; } .card-violeta .desc { font-family: 'Lato', sans-serif; font-size: 0.95rem; color: #4d4d4d; margin-bottom: 25px; line-height: 1.6; } .features-list { list-style: none; padding: 0; margin-bottom: 30px; text-align: left; } .features-list li { font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: #4d4d4d; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .features-list li i { color: #ab47bc; /* Check violeta */ } /* Precios */ .pricing { margin-bottom: 20px; display: flex; flex-direction: column; } .pricing .label { font-size: 0.8rem; color: #4d4d4d; text-transform: uppercase; } .pricing .amount { font-size: 1.8rem; font-weight: 800; color: #4a148c; font-family: 'Montserrat Alternates'; } body.dark-mode .pricing .amount { color: #e1bee7; } /* Botones */ .btn-violeta { display: block; width: 100%; padding: 12px; border-radius: 50px; text-decoration: none; font-weight: 700; font-family: 'Poppins', sans-serif; color: #8e24aa; border: 2px solid #b373c1; transition: 0.3s; } .btn-violeta:hover { background: #8e24aa; color: white; } /* Botón relleno para el destacado */ .btn-fill { background: #8d24aa9f; color: white; } .btn-fill:hover { background: #6a1b9a; border-color: #6a1b9a; box-shadow: 0 5px 15px rgba(106, 27, 154, 0.3); } /* RESPONSIVE */ @media (max-width: 900px) { .card-violeta.destacado { transform: scale(1); margin: 20px 0; } .card-violeta.destacado:hover { transform: translateY(-5px); } .centrador-servicios { height: auto; } /* Quitar altura fija en móvil */ } /* formulario de contacto */ #centrador-contacto { position: relative; width: 100%; min-height: 100vh; padding: 2rem; overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 0; background-image: url(../imagenes/contacto-fondo-gradiante-2.webp); } ::placeholder{ color: #6E79B4; font-weight:600; } #contacto{ z-index: -1; } .form { width: 100%; max-width: 820px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); z-index: 1000; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); } .contact-form { background-color: #D0D8FD; position: relative; } .circle { border-radius: 50%; background: linear-gradient(135deg, transparent 20%, #7C8CE6); position: absolute; } .circle.one { width: 130px; height: 130px; top: 130px; right: -40px; } .circle.two { width: 80px; height: 80px; top: 10px; right: 30px; } .contact-form:before { content: ""; position: absolute; width: 26px; height: 26px; background-color: #7C8CE6; transform: rotate(45deg); top: 50px; left: -13px; } form { padding: 2.3rem 2.2rem; z-index: 10; overflow: hidden; position: relative; font-family: 'Lato', sans-serif; } .title { color: #6E78B3; font-weight: 500; font-size: 1.5rem; line-height: 1; margin-bottom: 0.7rem; font-weight: bold; font-family: 'Montserrat Alternates', sans-serif; ; } .input-container { position: relative; margin: 1rem 0; } .input { width: 100%; outline: none; border: 2px solid #6E78B3; background: none; padding: 0.6rem 1.2rem; color: #6E78B3; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.5px; border-radius: 25px; transition: 0.3s; } #mensaje-enviado{ overflow: 2; } textarea.input { padding: 0.8rem 1.2rem; min-height: 150px; border-radius: 22px; resize: none; overflow-y: auto; font-family: 'Lato', sans-serif; } .input-container label { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); padding: 0 0.4rem; color: #6E78B3; font-size: 0.9rem; font-weight: 400; pointer-events: none; z-index: 1000; transition: 0.5s; } .input-container.textarea label { top: 1rem; transform: translateY(0); } .btn { padding: 0.6rem 1.3rem; background-color: #fff; border: 2px solid #fafafa; font-size: 0.95rem; color: #6E78B3; line-height: 1; border-radius: 25px; outline: none; cursor: pointer; transition: 0.3s; margin: 0; } .btn:hover { background-color: transparent; color: #fff; } .input-container span { position: absolute; top: 0; left: 25px; transform: translateY(-50%); font-size: 0.8rem; padding: 0 0.4rem; color: transparent; pointer-events: none; z-index: 500; } .input-container span:before, .input-container span:after { content: ""; position: absolute; width: 10%; opacity: 0; transition: 0.3s; height: 5px; background-color: #6E78B3; top: 50%; transform: translateY(-50%); } .input-container span:before { left: 50%; } .input-container span:after { right: 50%; } .input-container.focus label { top: 0; transform: translateY(-50%); left: 25px; font-size: 0.8rem; } .input-container.focus span:before, .input-container.focus span:after { width: 50%; opacity: 1; } .contact-info { padding: 2.3rem 2.2rem; position: relative; } .contact-info .title { color: #6E78B3; } .text { color: #333; margin: 1.5rem 0 2rem 0; font-family: 'Lato', sans-serif; } .information { display: flex; color: #555; margin: 0.7rem 0; align-items: center; font-size: 0.95rem; font-family: 'Lato', sans-serif; } .icon { width: 28px; margin-right: 0.7rem; } .curriculum_boton { width: 35px; height: 35px; border-radius: 5px; background: linear-gradient(45deg, #7C8CE6, #4f5ca8); color: #fff; text-align: center; line-height: 55px; margin-right: 0.5rem; transition: 0.3s; font-weight: bold; font-family: 'Montserrat Alternates', sans-serif; text-decoration: none; padding: 2%; ; } .social-media { padding: 2rem 0 0 0; } .social-media p { color: #333; font-family: 'Lato', sans-serif; } .social-icons { display: flex; margin-top: 0.5rem; } .social-icons a { width: 35px; height: 35px; border-radius: 5px; background: linear-gradient(45deg, #7C8CE6, #4f5ca8); color: #fff; text-align: center; line-height: 35px; margin-right: 0.5rem; transition: 0.3s; } .social-icons a:hover { transform: scale(1.05); } .contact-info:before { content: ""; position: absolute; width: 110px; height: 100px; border: 22px solid #7C8CE6; border-radius: 50%; bottom: -77px; right: 50px; opacity: 0.3; } /* Estilo del mensaje de agradecimiento */ #thankYouMessage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 55vh; font-family: 'Montserrat Alternates', sans-serif; color: #6E78B3; z-index: 1000; } #thankYouMessage h3 { font-size: 2rem; margin-bottom: 1rem; } #thankYouMessage p { font-size: 1.2rem; max-width: 600px; } /* Media queries para asegurar que el mensaje es responsive */ @media (max-width: 768px) { #thankYouMessage h3 { font-size: 1.5rem; } #thankYouMessage p { font-size: 1rem; } } @media (max-width: 480px) { #thankYouMessage h3 { font-size: 1.2rem; } #thankYouMessage p { font-size: 0.9rem; } } /* finaliza formulario de contacto */ /* boton whatsapp */ .container-boton-wp{ position: fixed; width: 55px; height: 53px; line-height: 55px; bottom: 30px; right: 30px; } .boton{ width: 65px; transition: ease 1s; } #wp-button{ z-index: 1000; } /* termia boton de whatsaapp */ /* //empieza footer */ footer{ width: 100%; bottom: 0; left: 0; padding: 2rem 8%; background-color: #0e0e0e; display: flex; justify-content: center; align-items: center; flex-direction: column; } .social-icons-container, .footer-menu-container{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .social-icon{ height: 50px; width: 50px; border-radius: 50px; border: 1px solid #f2f2f2; background-image: url(../iconos/facebook.png); background-position: center; background-size: 40%; background-repeat: no-repeat; margin:1rem; } .social-icon:hover{ background-color: #121212; filter: invert(1); } .social-icon:nth-of-type(2){ background-image: url(../iconos/instagram.png); } .social-icon:nth-of-type(3){ background-image: url(../iconos/twitter.png); } .social-icon:nth-of-type(4){ background-image: url(../iconos/gmail.png); } .footer-menu-container{ list-style-type: none; color: #f2f2f2; font-size: 18px; } .menu-item{ list-style-type: none; color: #f2f2f2; font-size: 18px; text-decoration: none; } .menu-item{ margin: 1rem 1.5rem; cursor: pointer; opacity: 0.6; } .menu-item:hover{ opacity: 1; } .copyright{ color: #f2f2f2; opacity: 0.3; text-align: center; } /* termina foooter */ /* tamaño notebook solucion de tamaño */ @media screen and (max-width:1366px) { #seccion-servicios{ scroll-margin-top:75px ; } #wave_in{ margin-top: 30px; } #wave_1{ width: 100vw; } .contenedor_wave_1{ display: flex; height: 100%; margin-top:-90px; } #logo_mockup{ width: 35vw; margin-top: -80px; } .centrador-servicios{ background-position: center; } .container{ margin-bottom: 40px; } #identidad-digital{ width: 90%; } #titulo-servicio3{ margin:30px; font-size: 25px; } #desarrollo-web{ width: 90%; } #titulo-servicio2{ margin:30px; font-size: 25px; white-space: nowrap; } #diseño{ width: 90%; } #titulo-servicio1{ margin:30px; font-size: 25px; white-space: nowrap; } #Layer_1{ width: 30%; } #svg-programador{ width: 30%; } #svg-diseño{ width: 30%; } #titulo-servicio3{ white-space: nowrap; } #contenedor_texto{ margin-bottom: 0px; } #p_servs{ font-size: 17px; } #titulo-seccion-servicios{ font-size: 30px; } #seccion_servicios{ margin-bottom: 75px; } .container .card{ width: 330px; height: 360px; } .container .card img{ width: 180px; height: 180px; } #sector-acerca-de{ margin-top: -200px; } .titulo-acerca-de{ color: transparent; } }.contenedor-img { position: relative; max-width: 60%; } /* adaptar tamaño de caractersticas de serviciso para notebook */ /* termina tamaño notebok */ /* empieza jquery de formulario de contactos */ @media (max-width: 850px) { .form { grid-template-columns: 1fr; z-index: 0; } .contact-info:before { bottom: initial; top: -75px; right: 65px; transform: scale(0.95); } .contact-form:before { top: -13px; left: initial; right: 70px; } .square { transform: translate(140%, 43%); height: 350px; } .big-circle { bottom: 75%; transform: scale(0.9) translate(-40%, 30%); right: 50%; } .text { margin: 1rem 0 1.5rem 0; } .social-media { padding: 1.5rem 0 0 0; } } .contenedor-img { position: relative; /* max-width: 85%; */ } @media (max-width: 480px) { .contact-info:before { display: none; } .square, .big-circle { display: none; } form, .contact-info { padding: 1.7rem 1.6rem; } .text, .information, .social-media p { font-size: 0.8rem; } .title { font-size: 1.15rem; } .social-icons a { width: 30px; height: 30px; line-height: 30px; } .icon { width: 23px; } .input { padding: 0.45rem 1.2rem; } .btn { padding: 0.45rem 1.2rem; } } /* termina jquery de formulario de contacto */ /* empieza media query de portafolio */ @media screen and (max-width: 700px) { .grid .item { width: calc(50% - 20px); } .header_xd .barra-busqueda { width: 100%; } } /* termina query de portafolii */ @media screen and (max-width:952px){ .logo{ font-size: 25px; padding-left: 40px; } .menu_items li a{ font-size: 16px; height: 40px; } #imagen_modo{ width: 70px; } .img_logo1{ width: 50px; } .img_logo2{ width:50px; left:220px; } .overlay .descripcion { max-width:90% ; padding:8px } .overlay .descripcion .btn-link { max-width:90% ; } } @media screen and (max-width:1100px){ .menu_items{ display: flex; list-style: none; margin-left:30px; } #imagen_modo{ width: 70px; } .menu_items li a { padding: 1px; text-decoration: none; font-size: 18px; display: block; color: #6E78B3; font-weight: bold; font-family: 'Lato', sans-serif; font-family: 'Roboto', sans-serif; cursor: pointer; } .logo{ font-size: 25px; padding-left: 45px; } .img_logo1{ width: 50px; } .img_logo2{ width:50px; left:230px; } .menu_items li:hover, li.activate{ background-color: #e9ebf760; } #logo_mockup{ width: 50vw; height:50vw ; margin-top: 0; } .contenedor{ flex-direction: column; } .textos { margin-top: 100px; padding:20px } .textos h1{ font-size: 50px; } .textos p{ font-size:30px ; } .hero_main{ height: auto; } .contenedor_wave_1{ display: flex; height: 100%; margin-top:-20px; } #wave_in{ margin-top: 75px; } #sector-acerca-de{ margin-top: 0; } .titulo-acerca-de{ color: #000; } } @media screen and (max-width:850px){ .menu{ height: 65px; width: 100%; } #modo_oscuro_movil{ display: block; } .btm_menu{ display:inline; position: absolute; padding-left: 20px; } .menu_items{ position:fixed; width: 60%; height:calc(100% - 65px); background-color:#aebefff3 ; top:-200vw; text-align: center; transition: all .4s; flex-direction: column; left:-30px } .menu_items li{ margin: 30px 0 0 0; line-height: 30px; } .menu_items li:hover{ background-color: #e9ebf7a2; } .menu_items li a { font-size: 20px; color: #6E78B3; font-weight: bold; width: 60vw; } #menu_movil_icono{ width: 40px; } .logo{ display: flex; font-size: 25px; padding-left: 110px; } .img_logo1{ display: flex; position: absolute; left: 60px; width:50px; transform: scaleX(-1); } .img_logo2{ display: flex; position: absolute; left:300px; width:50px; } .contenedor{ flex-direction: column; } .textos { margin-top: 100px; } .textos h1{ font-size: 30px; } .textos p{ font-size:20px ; } .hero_main{ margin-top: -100px; } #wave_in{ margin-top: 70px; } } /* acerca de seccion responsvie */ @media screen and (max-width: 820px){ #sector-acerca-de{ width: 100%; } #acerca-de-imagen{ display: none; } .categoriasAcercaDe { grid-template-columns: 1fr 1fr; } .categoria-acerca-de { padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px; height: 80%; } .categoria-acerca-de svg { width: 30px; margin-bottom: 0; } } @media screen and (max-width: 500px){ .categoriasAcercaDe { grid-template-columns: 1fr; } } @media screen and (width:280px ){ .menu{ height: 65px; } #imagen_modo{ display: none; } .btm_menu{ display:inline; position: absolute; padding-left: 20px; } .menu_items{ position:fixed; width: 58%; height:calc(100% - 65px); background-color: #828cbb79; top:-300vw; text-align: center; transition: all .4s; flex-direction: column; } .menu_items li{ margin: 30px 0 0 0; line-height: 30px; } .menu_items li:hover{ background-color: #e9ebf7a2; } .menu_items li a { font-size: 18px; color: #6E78B3; font-weight: bold; } #menu_movil_icono{ width: 30px; } .logo{ display: flex; font-size: 19px; padding-left: 94px; } .img_logo1{ display: flex; position: absolute; left: 55px; width:43px; transform: scaleX(-1); } .img_logo2{ display: flex; position: absolute; left:233px; width:43px; } } /* gracias a que le pusiste min-width en vez de mac width pudiste modificar la apriencia repsosnive del galaxy zfold */ /* el problema es que el ipad y ipad pro se ven mal por culpa de eso, si cambias a maxwidht ipadi pro y ipad se ven bien */ /* estaria para crear los modelos esos personalizados pero parece que se suman los padding asi que por eso recurriste a hacer */ /* esto, mañana segui probando */ @media screen and (width:320px){ .menu{ height: 65px; } .btm_menu{ display:inline; position: absolute; padding-left: 20px; } .menu_items{ position:fixed; width: 50%; height:calc(100% - 65px); background-color: #828cbb79; top:-300vw; text-align: center; transition: all .4s; flex-direction: column; } .menu_items li{ margin: 30px 0 0 0; line-height: 30px; } .menu_items li:hover{ background-color: #e9ebf7a2; } .menu_items li a { font-size: 18px; color: #6E78B3; font-weight: bold; } #menu_movil_icono{ width: 34px; } .logo{ display: flex; font-size: 22px; padding-left: 100px; } .img_logo1{ display: flex; position: absolute; left: 60px; width:43px; transform: scaleX(-1); } .img_logo2{ display: flex; position: absolute; left:262px; width:43px; } } @media screen and (max-width:420px){ #imagen_modo{ display:none } } /* aca ya empieza diseño aparte de la pagina, todo l ode arrriba es el menu */