@charset "UTF-8";

/* latin */
@font-face {
  font-family: "Alibaba PuHuiTi 3";
  src: url("../fonts/AlibabaPuHuiTi-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0391-0392, U+0394, U+0399, U+03B1-03B5, U+03B7, U+03BC, U+03C9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2030, U+2032, U+2103, U+2109, U+2122, U+2160-2163, U+2165-2166, U+2190-2193, U+2248, U+2260, U+2264-2265, U+3000-3003, U+3007-3017, U+301D-301E, U+3021-3029, U+303E, U+FF01-FF5E;
}

/* core */
@font-face {
  font-family: "Alibaba PuHuiTi 3";
  src: url("../fonts/AlibabaPuHuiTi-core.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+4E00-4E01, U+4E03, U+4E09-4E0B, U+4E0D-4E0E, U+4E13-4E14, U+4E19-4E1A, U+4E1C-4E1D, U+4E22, U+4E24-4E25, U+4E2A, U+4E2D, U+4E30, U+4E39-4E3B, U+4E45, U+4E48-4E49, U+4E4B-4E4C, U+4E50, U+4E59, U+4E5D, U+4E5F-4E60, U+4E66, U+4E73, U+4E86, U+4E89, U+4E8B-4E8C, U+4E8E, U+4E91-4E92, U+4E94, U+4E9A-4E9B, U+4EA4, U+4EA7, U+4EAB-4EAC, U+4EBA, U+4EC0, U+4EC5, U+4ECA-4ECB, U+4ECD-4ECE, U+4ED3-4ED4, U+4ED6, U+4ED8-4ED9, U+4EE3, U+4EE5, U+4EEC, U+4EF2, U+4EF6-4EF7, U+4EFB, U+4EFD, U+4EFF, U+4F01, U+4F0F-4F10, U+4F17-4F18, U+4F1A, U+4F20, U+4F24, U+4F30, U+4F3C, U+4F46, U+4F4E, U+4F53, U+4F55, U+4F5B-4F5C, U+4F69, U+4F73, U+4F7F, U+4F8B, U+4F9B, U+4F9D, U+4FA7, U+4FB5, U+4FBF, U+4FC3, U+4FDD, U+4FE1, U+4FEE, U+500D, U+501F, U+503C, U+5047, U+504F, U+505A, U+505C, U+5065, U+5076, U+50A8, U+50AC, U+50CF, U+5141, U+5145, U+5148-5149, U+514B, U+514D, U+5165, U+5168, U+516B-516D, U+5170-5171, U+5173, U+5176-5177, U+5185, U+518C-518D, U+5192, U+5199, U+519C, U+51AC, U+51B0, U+51B3, U+51B5, U+51B7, U+51BB, U+51C0, U+51C6, U+51CF, U+51DD, U+51E0-51E1, U+51ED, U+51FA-51FB, U+5200, U+5206-5207, U+5212, U+5217, U+5219-521B, U+5220, U+5224, U+5229, U+522B, U+5230, U+5236, U+523A, U+5242, U+524D, U+5267, U+526F, U+529B, U+529E-52A1, U+52A8-52A9, U+52BF, U+52FF, U+5305, U+5316-5317, U+5339-533A, U+533F, U+5341, U+5347, U+534E-534F, U+5355, U+5357, U+5361, U+5370-5371, U+5373, U+5377, U+5382, U+5386, U+538B, U+539F, U+53BB, U+53C2, U+53C8-53CD, U+53D1, U+53D4, U+53D6-53D8, U+53E0, U+53E3, U+53E5-53E6, U+53EA-53EB, U+53EF-53F0, U+53F2-53F3, U+53F6-53F8, U+5404, U+5408, U+540C-540E, U+5410-5411, U+5417, U+5426, U+5429, U+542B, U+542F, U+5438, U+544A, U+5458, U+5468, U+5473, U+547C-547D, U+548C, U+5496, U+54A8, U+54AF, U+54C1, U+54C8, U+54CD, U+54EA, U+552E, U+5546, U+5561, U+5584, U+5609, U+5668, U+56DB, U+56DE, U+56E0, U+56E2, U+56F4, U+56FA, U+56FD-56FE, U+571F, U+5723, U+5728, U+5730, U+5733, U+573A, U+573E, U+5740, U+5747, U+5766, U+5783, U+578B, U+57CE, U+57FA, U+5851, U+586B, U+5883, U+589E, U+58EB-58EC, U+58EE, U+58F0, U+58F3, U+5904, U+5907, U+590D, U+5916, U+591A, U+591F, U+5927, U+5929, U+5931, U+5934, U+5957, U+5965, U+597D, U+5982, U+59C6, U+59CB, U+59D3-59D4, U+5A01, U+5B50, U+5B57-5B58, U+5B5F, U+5B63, U+5B66, U+5B81, U+5B83, U+5B88-5B89, U+5B8C, U+5B98, U+5B9A, U+5B9E, U+5BA1-5BA2, U+5BA4, U+5BB3, U+5BB6, U+5BB9, U+5BC6, U+5BCC, U+5BF9, U+5BFB-5BFC, U+5C06, U+5C0F, U+5C11, U+5C14, U+5C18, U+5C31, U+5C3C, U+5C3F, U+5C42, U+5C48, U+5C4A, U+5C51, U+5C55, U+5C5E, U+5C65, U+5C71, U+5DE5-5DE6, U+5DEE, U+5DF1-5DF2, U+5DF4, U+5E02-5E03, U+5E08, U+5E0C, U+5E26, U+5E2E, U+5E38, U+5E62, U+5E72-5E74, U+5E76, U+5E7F, U+5E86, U+5E8F, U+5E93-5E95, U+5E9A, U+5E9F, U+5EA6, U+5EB7, U+5EF6-5EF7, U+5EFA, U+5F00, U+5F02-5F03, U+5F0F, U+5F15, U+5F17, U+5F25, U+5F3A, U+5F52-5F53, U+5F55, U+5F62, U+5F71, U+5F80, U+5F84-5F85, U+5F88, U+5F8B, U+5F97, U+5FAA, U+5FAE, U+5FC3, U+5FC5, U+5FD7, U+5FEB, U+6001, U+600E, U+601D, U+6025, U+6027, U+603B, U+6069, U+606F, U+6076, U+6089, U+60A8, U+60C5, U+60EF-60F0, U+6108, U+610F, U+6208, U+620A, U+6210-6211, U+6216, U+6237, U+6240, U+624D-624E, U+6251, U+6253, U+6258, U+6267, U+626B, U+6270, U+6279, U+627E-6280, U+6284, U+628A, U+6291, U+6293, U+6295, U+6297, U+62A4-62A5, U+62AB, U+62C5, U+62C9, U+62CC, U+62E9, U+62EC, U+62FC, U+6301-6302, U+6307, U+6309, U+6325, U+635F, U+636E, U+6377, U+6388, U+6392, U+63A5, U+63A7-63A8, U+63AA, U+63CF-63D0, U+63D2, U+63E1, U+641C, U+6491, U+64A4, U+64C5, U+64CD, U+652F, U+6536, U+6539, U+653B, U+653E-653F, U+6545, U+6548, U+654C, U+654F, U+6551, U+6563, U+656C, U+6570, U+6574, U+6587, U+6599, U+659C, U+65AD, U+65AF-65B0, U+65B9, U+65BD, U+65CB, U+65E0, U+65E5, U+65E7, U+65E9, U+65F6, U+660E, U+6613-6614, U+661F, U+662F, U+663E, U+666E-6670, U+6676, U+6682, U+66A8, U+66F2, U+66F4, U+66FF-6700, U+6708-6709, U+670D, U+671F, U+6728, U+672A-672C, U+672F, U+673A, U+6740, U+6742-6743, U+6746, U+6750, U+675C, U+675F, U+6761, U+6765, U+6768, U+676F, U+677E-677F, U+6784, U+6790, U+6797, U+679C, U+67AF, U+67B6, U+67D0, U+67D3, U+67E0, U+67E5, U+67F3-67F4, U+6807, U+6811, U+6821, U+6837-6839, U+683C, U+6842, U+6846, U+6848, U+6863, U+6865, U+68A8, U+68AF-68B0, U+68B3, U+68C0, U+68C9, U+68D2, U+68D5, U+68EE, U+6930, U+695A, U+6982, U+6A1F, U+6A21, U+6A59, U+6AAC, U+6B21-6B22, U+6B27, U+6B3A, U+6B3E, U+6B62-6B65, U+6B7B, U+6B8A-6B8B, U+6B96, U+6BB5, U+6BCD, U+6BCF, U+6BD2, U+6BD4, U+6BDB, U+6C0F, U+6C11, U+6C14, U+6C16, U+6C1F, U+6C22, U+6C26-6C28, U+6C2E-6C30, U+6C34, U+6C40, U+6C42, U+6C5E, U+6C60, U+6C7D, U+6C99, U+6C9F, U+6CA1, U+6CA5, U+6CAA, U+6CB8-6CB9, U+6CC4, U+6CCA, U+6CD5, U+6CDB, U+6CE1, U+6CE8, U+6D01, U+6D0B, U+6D17, U+6D1B, U+6D25, U+6D3B, U+6D41, U+6D4B, U+6D4F, U+6D53, U+6D77-6D78, U+6D82, U+6D88-6D89, U+6D95, U+6DA6, U+6DB2, U+6DB5, U+6DC0, U+6DE4, U+6DF1, U+6DF7, U+6DFB, U+6E05, U+6E10, U+6E23, U+6E38, U+6E7F, U+6E90, U+6EB6, U+6ED1, U+6EE1, U+6EE5, U+6F02, U+6F06, U+6F0F, U+6FB3, U+6FC0, U+706B, U+706D, U+7070, U+7075, U+7094, U+70B8-70B9, U+70BC, U+70C3, U+70DF, U+70E7, U+70ED, U+70EF, U+70F7, U+7126, U+7136, U+7164, U+7167, U+718F, U+7194, U+719F, U+71C3, U+71D5, U+71E5, U+7206, U+722C, U+7236, U+7247-7248, U+724C, U+7269, U+7279, U+72B6, U+72C4, U+72EC, U+731B, U+7387, U+739B, U+73AB, U+73AF-73B0, U+73E0, U+7403, U+7406, U+745F, U+7470, U+74DC, U+74E6, U+7518, U+751C, U+751F, U+7528, U+7531-7533, U+7535, U+754C, U+754F, U+7559, U+755C, U+7591, U+75DB, U+761F, U+7624, U+764C, U+7678, U+767B, U+767D-767E, U+7684, U+76AE, U+76CA, U+76D0-76D1, U+76D6, U+76DF, U+76EE, U+76F4, U+76F8, U+7701, U+770B, U+771F, U+773C, U+7740, U+775B, U+777F, U+7792, U+77E5, U+77ED-77EE, U+77F3, U+77FE-77FF, U+7801-7802, U+7814, U+7837, U+7840, U+7845, U+7852, U+785D, U+786B-786C, U+786E, U+787C, U+788E, U+7898, U+78B1, U+78B3, U+78F7, U+78FA, U+793A, U+7981, U+798F, U+79BB, U+79BE, U+79C1, U+79CB, U+79CD, U+79D1, U+79EF-79F0, U+79FB, U+7A00, U+7A0B, U+7A33, U+7A3B, U+7A57, U+7A76, U+7A7A, U+7A81, U+7ACB, U+7AD9, U+7ADE, U+7AE0, U+7AEF, U+7B26, U+7B2C, U+7B49, U+7B52, U+7B56, U+7B7E, U+7B80, U+7B94, U+7B97, U+7BA1, U+7BAD, U+7BB1, U+7BC7, U+7BE1, U+7C73, U+7C7B, U+7C7D, U+7C89, U+7C92, U+7C97, U+7C9F, U+7CBE, U+7CCA, U+7CD6, U+7CDC, U+7CE0, U+7CFB, U+7D20, U+7D22, U+7D27, U+7D2B, U+7D2F, U+7E41, U+7EA2, U+7EA4, U+7EA6-7EA7, U+7EAF, U+7EBF, U+7EC4, U+7EC6-7EC8, U+7ECD, U+7ECF, U+7ED3, U+7ED5, U+7ED9, U+7EDC-7EDD, U+7EDF, U+7EE7, U+7EED, U+7EF4, U+7EFF, U+7F16, U+7F29, U+7F3A, U+7F51, U+7F57, U+7F6E, U+7F72, U+7F8E, U+7FC1, U+7FFB, U+8003, U+8005, U+800C, U+804C, U+8054, U+805A, U+8089, U+80A4-80A5, U+80AA, U+80B2, U+80C3, U+80C6, U+80E1, U+80F0, U+80F6, U+80FA, U+80FD, U+8102, U+8111, U+811A, U+812F, U+8131, U+8150, U+8170, U+818F, U+81EA, U+81F3-81F4, U+8212, U+822A, U+822C, U+8272, U+827E, U+8282, U+82A5-82A6, U+82AC, U+82B1, U+82B3, U+82E5-82E6, U+82EF, U+82F1, U+82F9, U+8302-8303, U+8305, U+8335, U+8346, U+8349, U+8367, U+836F, U+8389, U+83B1, U+83B7, U+83CA, U+83CC, U+83DC, U+83E0, U+83F2, U+8404, U+840E, U+841D, U+8424-8425, U+843D, U+8461, U+8471, U+8475, U+84B8, U+84DD, U+84EC, U+8521, U+852C, U+85E4, U+85FB, U+865A, U+866B, U+867D, U+8680-8681, U+869C, U+86CB, U+8721, U+8747, U+879F, U+87BA, U+884C-884D, U+8865, U+8868, U+88AB, U+88AD, U+88C2, U+88C5, U+897F, U+8981, U+8986, U+89C1-89C2, U+89C4, U+89C8, U+89D2, U+89E3, U+89E6, U+8A00, U+8B66, U+8BA1-8BA2, U+8BA4, U+8BA9, U+8BAE, U+8BB0, U+8BB8, U+8BBA, U+8BBC, U+8BBE-8BBF, U+8BC1, U+8BC4, U+8BC6, U+8BC8-8BC9, U+8BCD, U+8BD1, U+8BD5, U+8BDA, U+8BDD, U+8BE2, U+8BE5-8BE6, U+8BED, U+8BEF, U+8BF4, U+8BF7, U+8BFB, U+8C03, U+8C22, U+8C31, U+8C37, U+8C46, U+8C61, U+8D1F, U+8D22-8D23, U+8D27-8D28, U+8D2D, U+8D38-8D39, U+8D44, U+8D5B, U+8D76-8D77, U+8D85, U+8D8A, U+8DB3, U+8DDF, U+8DE8, U+8DEF, U+8E2A, U+8EAB, U+8F66, U+8F6C, U+8F6E-8F6F, U+8F7B, U+8F7D, U+8F83, U+8F93, U+8F96, U+8F9B, U+8FB9, U+8FBE, U+8FC1, U+8FC7, U+8FCE, U+8FD0, U+8FD4, U+8FD8-8FD9, U+8FDB, U+8FDD-8FDE, U+8FED, U+8FF0, U+8FF7, U+8FFD, U+9001-9002, U+9009, U+900F-9010, U+9012, U+9014, U+901A, U+901F-9020, U+9047, U+904D, U+9053, U+9075, U+907F, U+9093, U+90A3, U+90AE, U+90BB, U+90E8, U+90FD, U+914D, U+9152, U+915A, U+915E, U+916E, U+9176, U+9178, U+9187, U+918B, U+9192, U+919A-919B, U+91C7, U+91CA, U+91CC-91CF, U+91D1, U+9274, U+9488, U+9492, U+9499, U+94A0-94A1, U+94A8, U+94B1, U+94BE, U+94C0-94C2, U+94C5, U+94DC-94DD, U+94EC, U+94F6, U+94FE, U+9500, U+9508, U+950C, U+9511, U+9517, U+9519, U+9521, U+952E, U+9530, U+9541, U+954D, U+955C, U+9570, U+957F, U+95E8, U+95EA, U+95ED-95EE, U+95F4, U+9605, U+961F, U+9632-9633, U+963B, U+963F, U+9644-9645, U+964D, U+9650, U+9662, U+9664, U+9669, U+9686, U+968F-9690, U+969C, U+96BE, U+96C4, U+96C6, U+96F7, U+9700, U+9709, U+971C, U+9732, U+9752, U+975B, U+975E, U+9760, U+9762, U+9776, U+9875-9876, U+9879-987B, U+987E, U+9891, U+9897-9898, U+989C-989D, U+98CE, U+98DF, U+9988, U+998F, U+9996, U+9999, U+9A6C, U+9A8C, U+9AA4, U+9AD8, U+9C7C, U+9C9C, U+9EA6, U+9EBB, U+9EC4, U+9ED1, U+9F20, U+9F50;
}

/* common */
@font-face {
  font-family: "Alibaba PuHuiTi 3";
  src: url("../fonts/AlibabaPuHuiTi-common.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+4E07-4E08, U+4E11, U+4E16, U+4E18, U+4E1B, U+4E27, U+4E2B, U+4E32, U+4E34, U+4E38, U+4E3D-4E3E, U+4E43, U+4E4D-4E4F, U+4E52-4E54, U+4E56, U+4E58, U+4E5E, U+4E61, U+4E70-4E71, U+4E7E, U+4E88, U+4E8F, U+4E95, U+4EA1-4EA2, U+4EA5-4EA6, U+4EA8-4EA9, U+4EAD-4EAE, U+4EB2, U+4EBF, U+4EC1, U+4EC6-4EC7, U+4ED1, U+4ED5, U+4ED7, U+4EDF, U+4EE4, U+4EEA, U+4EF0, U+4F0A, U+4F0D-4F0E, U+4F11, U+4F19, U+4F1E-4F1F, U+4F26, U+4F2A, U+4F2F, U+4F34, U+4F36, U+4F38, U+4F3A, U+4F43, U+4F4D, U+4F4F-4F51, U+4F59, U+4F60, U+4F63, U+4F6C, U+4F6F-4F70, U+4F84, U+4F88, U+4F8D, U+4F97, U+4FA0, U+4FA3, U+4FA5-4FA6, U+4FA8-4FA9, U+4FAE-4FAF, U+4FC4, U+4FCA, U+4FCF-4FD0, U+4FD7-4FD8, U+4FDE, U+4FE9, U+4FED, U+4FEF, U+4FF1, U+4FFA, U+5012, U+5014, U+5018-501A, U+5021, U+5026, U+502A, U+503A, U+503E, U+5077, U+507F-5080, U+5085, U+5088, U+508D, U+50A3, U+50B2, U+50BB, U+50DA, U+50E7, U+50F3, U+50F5, U+50FB, U+5112, U+5121, U+513F, U+5143-5144, U+5146, U+5151, U+5154, U+515A, U+515C, U+5162, U+5174-5175, U+5178-5179, U+517B-517D, U+5180, U+5188-5189, U+5195, U+5197, U+519B, U+51A0, U+51A4, U+51AF, U+51B2, U+51B6, U+51C4, U+51C9, U+51CB-51CC, U+51D1, U+51DB, U+51E4, U+51EF-51F0, U+51F3, U+51F6, U+51F8-51F9, U+51FD, U+51FF, U+5201, U+5203, U+520A, U+5211, U+5218, U+521D, U+5228, U+522E, U+5237-5239, U+523B, U+523D, U+5241, U+5243, U+524A, U+5250-5251, U+5254, U+5256, U+5265, U+5269-526A, U+5272, U+527F, U+5288, U+529D, U+52A3, U+52AA-52AB, U+52B1-52B3, U+52C3, U+52C7, U+52C9, U+52CB, U+52D2, U+52D8, U+52DF, U+52E4, U+52FA, U+52FE, U+5300, U+5306, U+5308, U+5319, U+531D, U+5320-5321, U+5323, U+532A, U+533B, U+5343, U+5348-534A, U+5351-5353, U+5356, U+535A, U+535C, U+535E, U+5360, U+5362, U+5364, U+5367, U+536B, U+536F, U+5374-5375, U+5378, U+537F, U+5384-5385, U+5389, U+538C, U+5395, U+5398, U+539A, U+53A2, U+53A6, U+53A8-53A9, U+53BF, U+53C1, U+53D9, U+53DB, U+53E4, U+53EC-53EE, U+53F9, U+53FC, U+5401, U+5403, U+5409-540A, U+540F, U+5413, U+5415, U+541B, U+541D-5420, U+5427-5428, U+542C-542E, U+5431, U+5434-5435, U+5439, U+543B-543C, U+543E, U+5440, U+5446, U+5448, U+5450, U+5455, U+545B-545C, U+5462, U+5475, U+5478, U+547B, U+5480, U+5486, U+548B, U+548E-5490, U+5492, U+5495, U+5499, U+54AC, U+54B1, U+54B3, U+54B8, U+54BD, U+54C0, U+54C4, U+54C6-54C7, U+54C9, U+54CE, U+54D1, U+54D7, U+54DF, U+54E5-54E6, U+54E8-54E9, U+54ED-54EE, U+54F2, U+54FA, U+54FC, U+5501, U+5506-5507, U+5509, U+5510, U+5524, U+552C, U+552F, U+5531, U+553E, U+5543-5544, U+554A, U+5564-5566, U+556A, U+556E, U+5578, U+557C, U+5580, U+5582, U+5587, U+5589-558A, U+5598, U+559C-559D, U+55A7, U+55B3, U+55B7, U+55BB, U+55C5, U+55D3, U+55DC, U+55E1, U+55E3, U+55FD, U+560E, U+5618, U+561B, U+5631-5632, U+5634, U+5636, U+563B, U+563F, U+564E, U+566A, U+566C, U+5676, U+568E-568F, U+56A3, U+56B7, U+56BC, U+56CA, U+56DA, U+56E4, U+56ED, U+56F0-56F1, U+5703, U+5706, U+5708, U+572D, U+574A, U+574D-5751, U+5757, U+575A-575B, U+575D-5761, U+5764, U+576A, U+576F, U+5777, U+5782, U+5784, U+5792, U+579B, U+57A2-57A3, U+57A6, U+57AB, U+57AE, U+57C2-57C3, U+57CB, U+57D4, U+57DF-57E0, U+57F9, U+5802, U+5806, U+5811, U+5815, U+5821, U+5824, U+582A, U+5830, U+5835, U+584C, U+5854, U+5858, U+585E, U+5885, U+5892-5893, U+5899, U+589F, U+58A8-58A9, U+58C1, U+58D5, U+58E4, U+58F6, U+58F9, U+590F, U+5915, U+591C, U+592A-592B, U+592E-592F, U+5937-593A, U+5944, U+5947-5949, U+594B, U+594E-594F, U+5951, U+5954, U+5956, U+5960, U+5962, U+5973-5974, U+5976, U+5978-5979, U+5984, U+5986-5988, U+598A, U+5992-5993, U+5996, U+5999, U+59A5, U+59A8, U+59AE, U+59B9, U+59BB, U+59D0-59D1, U+59DA, U+59DC, U+59E5, U+59E8, U+59EC, U+59FB, U+59FF, U+5A03-5A04, U+5A07, U+5A18, U+5A1C, U+5A1F-5A20, U+5A25, U+5A29, U+5A31, U+5A36, U+5A46, U+5A49, U+5A5A, U+5A6A, U+5A74, U+5A76, U+5A7F, U+5A92, U+5A9A, U+5AB3, U+5AC1-5AC2, U+5AC9, U+5ACC, U+5AE1, U+5AE9, U+5B54-5B55, U+5B59, U+5B5C-5B5D, U+5B64, U+5B69-5B6A, U+5B70, U+5B75, U+5B7A, U+5B7D, U+5B85, U+5B87, U+5B8B, U+5B8F, U+5B97, U+5B99, U+5B9B-5B9D, U+5BA0, U+5BA3, U+5BA6, U+5BAA-5BAB, U+5BB0, U+5BB4-5BB5, U+5BBD-5BBF, U+5BC2, U+5BC4-5BC5, U+5BC7, U+5BD0, U+5BD2-5BD3, U+5BDD-5BDF, U+5BE1, U+5BE5, U+5BE8, U+5BF8, U+5BFA, U+5BFF, U+5C01, U+5C04, U+5C09-5C0A, U+5C16, U+5C1A, U+5C1D, U+5C24, U+5C27, U+5C38-5C3A, U+5C3D-5C3E, U+5C40-5C41, U+5C45, U+5C49, U+5C4B, U+5C4E-5C4F, U+5C60-5C61, U+5C6F, U+5C79, U+5C7F, U+5C81-5C82, U+5C94, U+5C97, U+5C9B, U+5CA9, U+5CAD, U+5CB3, U+5CB8, U+5CBF, U+5CD9, U+5CE1, U+5CE6, U+5CE8, U+5CEA, U+5CED, U+5CF0, U+5CFB, U+5D07, U+5D0E, U+5D14, U+5D16, U+5D29, U+5D2D, U+5D4C, U+5DCD, U+5DDD-5DDE, U+5DE1-5DE2, U+5DE7-5DE9, U+5DEB, U+5DF3, U+5DF7, U+5DFE, U+5E01, U+5E05-5E06, U+5E10, U+5E15-5E16, U+5E18, U+5E1A-5E1D, U+5E27, U+5E2D, U+5E3D, U+5E42, U+5E45, U+5E4C, U+5E55, U+5E78, U+5E7B-5E7D, U+5E84, U+5E87, U+5E8A, U+5E90, U+5E97, U+5E99, U+5E9C, U+5E9E, U+5EA7, U+5EAD, U+5EB6, U+5EB8, U+5EC9-5ECA, U+5ED3, U+5ED6, U+5F04, U+5F0A, U+5F13, U+5F18, U+5F1B, U+5F1F-5F20, U+5F26-5F27, U+5F2F, U+5F31, U+5F39, U+5F5D, U+5F64, U+5F66, U+5F69-5F6A, U+5F6C-5F6D, U+5F70, U+5F79, U+5F7B-5F7C, U+5F81, U+5F8A, U+5F90, U+5F92, U+5F98, U+5FA1, U+5FB7, U+5FBD, U+5FC6, U+5FCC-5FCD, U+5FD8-5FD9, U+5FE0, U+5FE7, U+5FF1, U+5FF5, U+5FFB, U+5FFD, U+5FFF-6000, U+6002, U+6012, U+6014-6016, U+601C, U+6020, U+6028, U+602A, U+602F, U+6043, U+604B, U+604D, U+6050, U+6052, U+6055, U+6062, U+6064, U+6068, U+606B-606D, U+6070, U+6073, U+607C, U+607F, U+6084, U+608D, U+6094, U+609F-60A0, U+60A3, U+60A6, U+60AC, U+60AF, U+60B2, U+60B8, U+60BC, U+60CA-60CB, U+60D1, U+60D5, U+60DC, U+60DF-60E0, U+60E6-60E9, U+60EB, U+60ED-60EE, U+60F3, U+60F6, U+60F9-60FA, U+6101, U+6109, U+611A, U+611F, U+6124, U+6127, U+613F, U+6148, U+614C, U+614E, U+6151, U+6155, U+6162, U+6167-6168, U+6170, U+6177, U+618B, U+618E, U+61A8, U+61BE, U+61C2, U+61C8, U+61CA, U+61D2, U+61E6, U+620C-620F, U+6212, U+6218, U+621A, U+622A, U+622E, U+6233-6234, U+623F, U+6241, U+6247, U+624B, U+6252, U+6254, U+625B, U+6263, U+6266, U+6269, U+626C-626F, U+6273, U+6276, U+627C, U+6289, U+6292, U+6296, U+6298, U+629A-629B, U+62A0-62A2, U+62A8, U+62AC, U+62B1, U+62B5, U+62B9, U+62BC-62BD, U+62BF, U+62C2, U+62C4, U+62C6-62C8, U+62CD-62CE, U+62D0, U+62D2-62D4, U+62D6, U+62D8-62D9, U+62DB-62DC, U+62DF, U+62E2-62E3, U+62E5-62E8, U+62ED, U+62EF, U+62F1, U+62F3-62F4, U+62F7, U+62FD-62FF, U+630E, U+6311, U+6316, U+631A-631B, U+631D-6321, U+6323-6324, U+6328, U+632A-632B, U+632F, U+633A, U+633D, U+6342, U+6345-6346, U+6349, U+634C-6350, U+6355, U+635E, U+6361-6363, U+6367, U+6376, U+637B, U+6380, U+6382, U+6387, U+6389, U+638C, U+638F-6390, U+6396, U+6398, U+63A0, U+63A2-63A3, U+63A9, U+63B3, U+63B7-63B8, U+63BA, U+63C9, U+63CD, U+63D6, U+63E3, U+63E9-63EA, U+63ED, U+63F4, U+63FD, U+6400-6402, U+6405, U+640F-6410, U+6413-6414, U+641E, U+642A, U+642C-642D, U+643A, U+643D, U+6444, U+6446-6448, U+644A, U+6454, U+6458, U+6467, U+6469, U+6478-6479, U+6482, U+6485, U+6487, U+6492, U+6495, U+649E, U+64A9, U+64AC-64AE, U+64B0, U+64B5, U+64BC, U+64C2, U+64CE, U+64D2, U+64DE, U+64E6, U+6500, U+6512, U+6518, U+652B, U+6556, U+6559, U+655B, U+655D-655E, U+6562, U+6566, U+6572, U+6577, U+658B-658C, U+6591, U+6597, U+659F, U+65A1, U+65A4-65A5, U+65A7, U+65A9, U+65C1, U+65C5, U+65CF, U+65D7, U+65E2, U+65E6, U+65E8, U+65EC-65ED, U+65F1, U+65F7, U+65FA, U+6602, U+6606, U+660C, U+660F, U+6620, U+6625, U+6627-6628, U+662D, U+663C, U+6643, U+664B-664C, U+6652-6653, U+6655, U+665A, U+6664, U+6666, U+6668, U+6674, U+667A, U+667E, U+6687, U+6691, U+6696-6697, U+66AE, U+66B4, U+66D9, U+66DD, U+66F0, U+66F3, U+66F9, U+66FC, U+66FE, U+670B, U+6714, U+6717, U+671B, U+671D, U+672D, U+6731, U+6734-6735, U+673D, U+6749, U+674E-674F, U+6751, U+6756, U+6760, U+676D, U+6770, U+6781, U+6789, U+6795, U+679A, U+679D, U+67A2-67A3, U+67AA-67AB, U+67B7, U+67C4, U+67CF, U+67D1-67D2, U+67D4, U+67DC, U+67DE, U+67EC, U+67EF, U+67F1, U+67FF, U+6805, U+6808, U+680B, U+680F, U+6813, U+6816-6817, U+682A, U+683D, U+6843, U+6845, U+684C, U+6851, U+6876, U+6C61, U+6CBB-6CBC, U+6CBF, U+6CF0, U+6CFC, U+6D12, U+6D46, U+6E29, U+6EF4, U+6F5C, U+707E, U+70AD, U+7130, U+7259, U+732E, U+738B, U+73BB, U+7410, U+7483, U+74F6, U+751A, U+7530, U+753B, U+756A, U+7597, U+75C7, U+77E2, U+7812, U+7834, U+7956, U+7968, U+7A3F, U+7ADF, U+7B11, U+7B54, U+7C98, U+7EA0, U+7EB3, U+7EFC, U+7F8A, U+7FE0, U+8001, U+80BE, U+80CC, U+80DE, U+817A, U+81ED, U+8239, U+82D4, U+82DB, U+830E, U+8350, U+83AB, U+849C, U+86D4, U+86E4, U+871C, U+89C6, U+8BB2, U+8BF8, U+8C01, U+8C13, U+8C28, U+8C41, U+8D1D, U+8D25, U+8D56, U+8D64, U+8D8B, U+8F85, U+8FDC, U+8FDF, U+9000, U+9540, U+9636, U+96FE, U+97E9, U+9881, U+9884, U+9886, U+997C, U+9A7B, U+9AA8, U+9CD6, U+9E26, U+9ECE, U+9F99;
}

/* extra */
@font-face {
  font-family: "Alibaba PuHuiTi 3";
  src: url("../fonts/AlibabaPuHuiTi-extra.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+6850, U+6853-6854, U+6868-6869, U+6881, U+6885-6886, U+6897, U+68A2, U+68A6-68A7, U+68AD, U+68CB, U+68CD, U+68D8, U+68DA, U+68E0, U+68F1, U+68F5, U+68FA, U+6905, U+690D-690E, U+6912, U+692D, U+693D, U+693F, U+6954, U+695E, U+6977, U+697C, U+6986, U+6994, U+699C, U+69A8, U+69B4, U+69B7, U+69D0, U+69DB, U+69FD, U+6A0A, U+6A2A, U+6A31, U+6A47, U+6A61, U+6A71, U+6A80, U+6A84, U+6B20, U+6B23, U+6B32, U+6B47, U+6B49, U+6B4C, U+6B66-6B67, U+6B6A, U+6B79, U+6B7C, U+6B83, U+6B86, U+6B89, U+6BB4, U+6BB7, U+6BBF, U+6BC1, U+6BC5, U+6BCB, U+6BD5-6BD7, U+6BD9, U+6BE1, U+6BEB, U+6BEF, U+6C13, U+6C1B, U+6C38, U+6C41, U+6C47, U+6C49, U+6C50, U+6C55, U+6C57, U+6C5B, U+6C5D, U+6C5F, U+6C64, U+6C6A, U+6C70, U+6C72, U+6C79, U+6C7E, U+6C81-6C83, U+6C88-6C89, U+6C8F, U+6C9B, U+6CA4, U+6CA6-6CA7, U+6CAB, U+6CAE, U+6CB3, U+6CBD-6CBE, U+6CC5, U+6CC9, U+6CCC, U+6CDE, U+6CE2-6CE3, U+6CE5, U+6CEA, U+6CF3, U+6CF5, U+6CFB, U+6CFD, U+6D1E, U+6D2A, U+6D31-6D32, U+6D3C-6D3E, U+6D45, U+6D47, U+6D4A, U+6D4E, U+6D51, U+6D59-6D5A, U+6D66, U+6D69-6D6A, U+6D6E, U+6D74, U+6D85, U+6D8C, U+6D8E, U+6D9B, U+6D9D, U+6D9F, U+6DA1, U+6DA3-6DA4, U+6DA7-6DAA, U+6DAF, U+6DB8, U+6DC4, U+6DC6, U+6DCB-6DCC, U+6DD1, U+6DD6, U+6DD8, U+6DE1, U+6DEB-6DEC, U+6DEE, U+6DF3, U+6DF9, U+6E0A, U+6E0D, U+6E14, U+6E17, U+6E1D, U+6E20-6E21, U+6E24, U+6E2D, U+6E2F, U+6E34, U+6E3A, U+6E43, U+6E4D, U+6E56, U+6E58, U+6E5B, U+6E7E, U+6E83, U+6E85, U+6E89, U+6E9C, U+6EA2, U+6EAA, U+6EAF, U+6EBA, U+6EC1, U+6EC7, U+6ECB, U+6ED3-6ED4, U+6EDA, U+6EDE, U+6EE4, U+6EE6, U+6EE8-6EE9, U+6F13-6F14, U+6F20, U+6F2B, U+6F31, U+6F33, U+6F3E, U+6F4D, U+6F58, U+6F5E, U+6F66, U+6F6D-6F6E, U+6F84, U+6F88, U+6F8E, U+6F9C, U+6FA1, U+6FD2, U+7011, U+704C, U+706F, U+7076, U+7078, U+707C, U+707F, U+7089-708A, U+708E, U+7092, U+7095, U+7099, U+70AC, U+70AE-70AF, U+70B3, U+70BD, U+70C1-70C2, U+70C8, U+70D8-70D9, U+70DB, U+70E4, U+70E6, U+70E9, U+70EB-70EC, U+70F9, U+70FD, U+7109-710A, U+7115, U+7119-711A, U+714C, U+714E, U+715E, U+716E, U+717D, U+7184, U+718A, U+7199, U+71AC, U+71CE, U+722A, U+7231, U+7235, U+7237-7239, U+723D, U+725B, U+725F, U+7261-7262, U+7267, U+7272, U+7275, U+727A, U+7280-7281, U+728A, U+72AC, U+72AF, U+72B9, U+72C2, U+72C8, U+72D0, U+72D7, U+72D9, U+72DE, U+72E0-72E1, U+72ED-72EE, U+72F0-72F1, U+72F8, U+72FC, U+730E, U+7316, U+731C, U+7329-732B, U+7334, U+733E-733F, U+736D, U+7384, U+7389, U+7396, U+73A9, U+73B2, U+73CA, U+73CD, U+73D0, U+73ED, U+7405, U+7409, U+7422, U+7433-7436, U+743C, U+745A, U+745E, U+7476, U+74E2-74E4, U+74EE, U+74F7, U+7504, U+7525, U+7529, U+752B, U+752D, U+7537-7538, U+7545, U+7554, U+7565-7566, U+7574, U+7578, U+7586, U+758F, U+7599-759A, U+759F, U+75A1, U+75A4-75A5, U+75AB, U+75AE-75AF, U+75B2, U+75B5, U+75B9, U+75BC-75BE, U+75C5, U+75C8-75CA, U+75D2, U+75D4-75D5, U+75D8, U+75DE, U+75E2, U+75EA, U+75F0, U+75F4, U+75F9, U+7601, U+7626, U+7629-762B, U+7634, U+7638, U+7663, U+7682, U+7686-7687, U+768B, U+7691, U+7696, U+76B1, U+76BF, U+76C2, U+76C5-76C6, U+76C8, U+76CE-76CF, U+76D2, U+76D4, U+76D7-76D8, U+76DB, U+76EF, U+76F2, U+76FC, U+76FE, U+7709, U+7720, U+7728-7729, U+772F, U+7736-7737, U+773A, U+7741, U+7761, U+7763, U+7766, U+776B-776C, U+7779, U+7784-7785, U+778E, U+77A5, U+77A7, U+77A9-77AA, U+77AC, U+77B3, U+77BB, U+77D7, U+77DB, U+77E3, U+77E9, U+77EB, U+77FD, U+780C-780D, U+7816, U+781A, U+7827, U+7830, U+7838, U+783E, U+7855, U+7877, U+7889, U+788C-788D, U+7891, U+7897, U+789F, U+78A7, U+78B0, U+78B4, U+78BE, U+78C1, U+78C5, U+78CA-78CB, U+78D0, U+78D5, U+78E8, U+7901, U+793C, U+793E, U+7941, U+7948, U+795D-795F, U+7965, U+796D, U+7977-7978, U+7984, U+79B9, U+79BD, U+79C0, U+79C3, U+79C6, U+79C9, U+79D2, U+79D8, U+79DF, U+79E4, U+79E6-79E7, U+79E9, U+79F8, U+79FD, U+7A0D-7A0E, U+7A17, U+7A1A, U+7A20, U+7A3C-7A3D, U+7A46, U+7A74, U+7A77, U+7A7F, U+7A83-7A84, U+7A8D, U+7A91-7A92, U+7A96-7A98, U+7A9C-7A9D, U+7A9F, U+7AA5, U+7ABF, U+7AD6, U+7AE3, U+7AE5, U+7AED, U+7AF9, U+7AFF, U+7B06, U+7B0B, U+7B14, U+7B1B, U+7B28, U+7B3A, U+7B3C, U+7B4B, U+7B4F-7B51, U+7B5B, U+7B77, U+7B79, U+7B8D, U+7B95, U+7BA9, U+7BC6, U+7BD3, U+7BD9, U+7BEE, U+7BF1, U+7BF7, U+7C07, U+7C27, U+7C3F, U+7C4D, U+7C95, U+7CA4-7CA5, U+7CAA, U+7CAE, U+7CB1, U+7CB3, U+7CB9, U+7CD5, U+7CD9, U+7CDF, U+7CEF, U+7D0A, U+7D6E, U+7E82, U+7EAA-7EAC, U+7EB1-7EB2, U+7EB5-7EBA, U+7EBD, U+7EC3, U+7EC5, U+7ECA, U+7ECE, U+7ED1-7ED2, U+7ED8, U+7EDA, U+7EDE, U+7EE2-7EE3, U+7EE5-7EE6, U+7EE9-7EEA, U+7EF0, U+7EF3, U+7EF5, U+7EF7-7EF8, U+7EFD, U+7F00, U+7F04-7F06, U+7F09, U+7F0E, U+7F13-7F15, U+7F18, U+7F1A, U+7F1D, U+7F20, U+7F28, U+7F2E, U+7F34, U+7F38, U+7F50, U+7F55, U+7F5A, U+7F62, U+7F69-7F6A, U+7F8C, U+7F94, U+7F9A, U+7F9E, U+7FA1, U+7FA4, U+7FB9, U+7FBD, U+7FC5, U+7FCC, U+7FD4, U+7FD8, U+7FDF, U+7FF0-7FF1, U+7FFC, U+8000, U+800D, U+8010, U+8015, U+8017-8019, U+802A, U+8033, U+8036, U+8038, U+803B, U+803D, U+803F, U+8042, U+804A-804B, U+8058, U+806A, U+8083-8084, U+8086-8087, U+808B-808C, U+8096, U+8098, U+809A-809B, U+809D, U+80A0-80A2, U+80A9, U+80AE-80AF, U+80BA, U+80BF-80C1, U+80CE, U+80D6, U+80DA, U+80DC, U+80EF, U+80F3, U+80F8, U+8106, U+8109-810A, U+810F-8110, U+8113, U+8116, U+8138, U+813E, U+8146, U+814A-814B, U+8151, U+8154-8155, U+8165, U+816E, U+8179, U+817B, U+817E-8180, U+818A, U+8198, U+819B-819D, U+81A8, U+81B3, U+81C0, U+81C2-81C3, U+81C6, U+81E3, U+81FB-81FC, U+8200, U+8205-8206, U+820C-820D, U+8214, U+821C, U+821E-821F, U+8230-8231, U+8235-8237, U+8247, U+8258, U+826F-8270, U+8273, U+827A, U+828B, U+828D, U+8292, U+829C-829D, U+82AD, U+82AF, U+82B9, U+82BD, U+82C7, U+82CD, U+82CF, U+82D1, U+82D7, U+82DE-82DF, U+82EB, U+8301, U+8304, U+8327-8328, U+832B-832C, U+8336, U+8338-8339, U+8352, U+8354, U+835A, U+8361, U+8363-8364, U+836B, U+8377, U+8386, U+838E, U+83B2, U+83B9, U+83BD, U+83C7, U+83CF, U+83E9, U+83F1, U+840C-840D, U+8427-8428, U+8457, U+845B, U+8463, U+846B-846C, U+8482, U+848B, U+8499, U+84B2, U+84C4, U+84C9, U+84D1, U+84D6, U+84DF, U+8511, U+8513, U+8517, U+851A, U+852B, U+8537, U+853C-853D, U+8549-854A, U+8574, U+857E, U+8584, U+859B, U+85AA, U+85AF, U+85C9, U+85CF-85D0, U+85D5, U+85E9, U+8611, U+8638, U+864E-8651, U+865E, U+8671, U+8679, U+867E, U+8682, U+868A, U+868C, U+8695, U+86A4, U+86C0, U+86C6-86C7, U+86CA, U+86D9, U+86DB, U+86EE, U+86F0, U+86F9, U+86FE, U+8700, U+8702, U+8712, U+8715, U+8717-8718, U+8749, U+874E, U+8757, U+8774, U+8776, U+878D, U+87F9, U+8815, U+8822, U+8840, U+8845, U+8854, U+8857, U+8859, U+8861, U+8863, U+886B-886C, U+8870, U+8877, U+8881, U+8884, U+888B, U+888D, U+8892, U+8896, U+889C, U+88B1, U+88C1, U+88D4-88D5, U+88D9, U+88E4, U+88F3-88F4, U+88F8-88F9, U+8902, U+8910, U+8912, U+8925, U+892A, U+8944, U+895F, U+89C5, U+89C9, U+8A79, U+8A89-8A8A, U+8A93, U+8B6C, U+8BA3, U+8BA5, U+8BA8, U+8BAB, U+8BAD, U+8BAF, U+8BB3, U+8BB6, U+8BB9, U+8BBD, U+8BC0, U+8BC5, U+8BCA, U+8BCC, U+8BD7, U+8BDB, U+8BDE, U+8BE1, U+8BE3, U+8BE7, U+8BEB-8BEC, U+8BF1-8BF2, U+8BF5, U+8BFA, U+8BFD-8BFE, U+8C05-8C06, U+8C08, U+8C0A-8C0B, U+8C0D-8C0E, U+8C10, U+8C17, U+8C1A, U+8C1C, U+8C23-8C24, U+8C26, U+8C29, U+8C2C-8C2D, U+8C30, U+8C34, U+8C4C, U+8C62, U+8C6A-8C6B, U+8C79-8C7A, U+8C89, U+8C8C, U+8D1E, U+8D21, U+8D24, U+8D26, U+8D29-8D2C, U+8D2E-8D31, U+8D34-8D35, U+8D37, U+8D3A, U+8D3C, U+8D3E-8D3F, U+8D41-8D43, U+8D4A-8D4C, U+8D4E-8D50, U+8D54, U+8D58, U+8D5A, U+8D5E, U+8D60-8D63, U+8D66, U+8D6B, U+8D70, U+8D74-8D75, U+8D81, U+8D9F, U+8DA3, U+8DB4, U+8DBE, U+8DC3, U+8DCB-8DCC, U+8DD1, U+8DDD, U+8DEA, U+8DF3, U+8DF5, U+8DFA, U+8E0A, U+8E0C, U+8E0F, U+8E1E, U+8E22, U+8E29, U+8E44, U+8E48, U+8E4B, U+8E66, U+8E6C-8E6D, U+8E72, U+8E7F, U+8E81, U+8E87, U+8EAC, U+8EAF, U+8EB2, U+8EBA, U+8F67-8F69, U+8F70, U+8F74, U+8F7F, U+8F86, U+8F88-8F8A, U+8F90-8F91, U+8F95, U+8F97, U+8F99, U+8F9C, U+8F9E-8F9F, U+8FA3, U+8FA8-8FA9, U+8FAB, U+8FB0-8FB1, U+8FBD, U+8FC2, U+8FC4-8FC5, U+8FC8, U+8FD1, U+8FE2, U+8FEA-8FEB, U+8FF8-8FF9, U+9003, U+9006, U+900A, U+9017, U+901B, U+901D-901E, U+9022, U+902E, U+9038, U+903B-903C, U+903E, U+9041-9042, U+904F, U+9057, U+9063, U+9065, U+906D-906E, U+9080, U+9091, U+90A2, U+90A6, U+90AA, U+90AF, U+90B1, U+90B5, U+90B9, U+90C1, U+90CA, U+90CE, U+90D1, U+90DD, U+90E1, U+90E7, U+90ED, U+90F4, U+90F8, U+9102, U+9119, U+9149, U+914B-914C, U+9157, U+915D, U+9163, U+9165, U+916A, U+916C, U+9171, U+9175, U+9177, U+917F, U+9189, U+91C9, U+91DC, U+9489, U+948E, U+9493, U+949D-949F, U+94A2, U+94A5-94A7, U+94A9, U+94AE, U+94B3, U+94B5, U+94BB, U+94C3, U+94C6, U+94E1, U+94E3, U+94ED, U+94F0-94F2, U+94F8, U+94FA, U+9501, U+9504-9505, U+950B, U+9510, U+951A, U+9523-9526, U+9528, U+952D, U+952F, U+9539, U+953B, U+9547, U+954A, U+9550-9551, U+9563, U+956D, U+9576, U+95EF-95F0, U+95F2, U+95F7-95FB, U+95FD, U+9600-9602, U+9609, U+960E, U+9610-9611, U+9614, U+961C, U+962E, U+9634-9635, U+9640, U+9646-9648, U+964B-964C, U+9655, U+965B, U+9661, U+9668, U+966A, U+9675-9677, U+9685, U+968B, U+9694, U+9698-9699, U+96A7, U+96B6, U+96C0-96C1, U+96C5, U+96C7, U+96CC-96CD, U+96CF, U+96D5, U+96E8, U+96EA, U+96F6, U+96F9, U+9704, U+9707, U+970D, U+9713, U+9716, U+971E, U+9738-9739, U+9756, U+9759, U+9761, U+9769, U+9773-9774, U+978B, U+978D, U+9798, U+97A0, U+97AD, U+97E6-97E7, U+97ED, U+97F3, U+97F5-97F6, U+9877, U+987D, U+987F, U+9882, U+9885, U+9887-9888, U+988A, U+9890, U+9893, U+9896, U+98A0, U+98A4, U+98A7, U+98D8, U+98DE, U+9910, U+9965, U+996D-9972, U+9975-9976, U+997A, U+997F, U+9981, U+9985-9986, U+998B, U+9992, U+9A6D-9A71, U+9A73-9A74, U+9A76, U+9A79, U+9A7C, U+9A7E, U+9A82, U+9A84, U+9A86-9A87, U+9A8B, U+9A8F, U+9A91, U+9A97, U+9A9A, U+9AA1, U+9AB8, U+9AD3, U+9B03, U+9B3C, U+9B41-9B42, U+9B44, U+9B4F, U+9B54, U+9C81, U+9C8D, U+9CA4, U+9CB8, U+9CC3, U+9CDE, U+9E1F, U+9E21, U+9E23, U+9E25, U+9E2D, U+9E2F, U+9E33, U+9E35, U+9E3D, U+9E3F, U+9E43, U+9E45, U+9E4A, U+9E4F, U+9E64, U+9E70, U+9E7F, U+9E93, U+9ECD, U+9ED4, U+9ED8, U+9F0E, U+9F13, U+9F3B, U+9F7F, U+9F84, U+9F8B, U+9F9A, U+9F9F;
}

/* special */
@font-face {
  font-family: "Alibaba PuHuiTi 3";
  src: url("../fonts/AlibabaPuHuiTi-special.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+5416, U+5421, U+5432, U+544B, U+5464, U+5494, U+54AA, U+54CC, U+54D2, U+54DA, U+5511, U+5549, U+5576, U+5583, U+5594, U+55B9, U+55EA, U+560C, U+5627, U+5641, U+567B, U+5B62, U+5DEF, U+62D7, U+67B8, U+6849, U+6988, U+69F2, U+6A44, U+6A7C, U+6C18-6C19, U+6C29-6C2A, U+6EB4, U+73C0, U+73DE, U+7425, U+7490, U+749C, U+7519, U+753E, U+7747, U+781C, U+78B2, U+7AFA, U+7F2C, U+7F42, U+7F9F, U+7FA7, U+7FB0, U+7FE1, U+809F, U+80BC, U+80C2, U+80CD, U+80E9, U+80F2, U+8112, U+8132, U+8148, U+8159, U+81A6, U+8290, U+8298, U+82AA, U+82B4, U+82B8, U+82C4, U+82CA, U+82CE, U+82F7, U+8309, U+831A, U+8334, U+83A0, U+83A8, U+83B0, U+83C1, U+83EA, U+8418, U+841C, U+848E, U+84BD, U+853B, U+8548, U+85B0, U+85DC, U+86A8, U+8731, U+8765, U+87A8, U+87FB, U+8D6D, U+9150, U+916F-9170, U+918C, U+9240, U+9398, U+93FB, U+9487, U+948C, U+9490, U+9495, U+949B, U+94AF, U+94B4, U+94BC-94BD, U+94C8, U+94CA-94CD, U+94D1-94D2, U+94DF, U+94EA, U+94EF, U+94F5, U+94F7, U+9502, U+9506-9507, U+9536, U+9549, U+9553, U+955D, U+9565, U+9567-9568, U+9571, U+9608, U+9AB7, U+9AC5, U+9E9D, U+9EB8, U+9ECF;
}


/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Alibaba PuHuiTi 3", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-font: "Alibaba PuHuiTi 3", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --nav-font: "Alibaba PuHuiTi 3", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #545454; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #e96b56; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #444444;  /* The default color of the main navmenu links */
  --nav-hover-color: #e96b56; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #e96b56; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #3c3c3c;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #565656;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  background-color: var(--background-color);
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.header .topbar {
  background-color: var(--background-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--accent-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--default-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
  color: var(--default-color);
}

.header .topbar .contact-info i a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--accent-color);
}

.header .topbar .topbar-wechat {
  gap: 5px;
  color: var(--default-color);
  font-size: 14px;
  line-height: 1;
}

.header .topbar .topbar-wechat i {
  color: var(--accent-color);
  font-size: 14px;
}

@media (max-width: 767px) {
  .header .topbar > .container {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .header .topbar .contact-info {
    min-width: 0;
  }

  .header .topbar .topbar-phone-secondary {
    display: none !important;
  }

  .header .topbar .topbar-phone-shanghai {
    margin-left: 10px !important;
  }

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span,
  .header .topbar .topbar-wechat {
    font-size: 12px;
    white-space: nowrap;
  }

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    padding-left: 4px;
  }

  .header .topbar .social-links {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .header .topbar .topbar-wechat {
    gap: 4px;
  }
}

@media (max-width: 374px) {
  .header .topbar > .container {
    gap: 6px;
    padding-right: 7px;
    padding-left: 7px;
  }

  .header .topbar .topbar-phone-shanghai {
    margin-left: 7px !important;
  }

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span,
  .header .topbar .topbar-wechat {
    font-size: 11px;
  }
}

.header .branding {
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo .site-logo {
  display: block;
  width: auto;
  height: 29px;
  max-height: 29px;
  margin: 0;
}

@media (max-width: 575px) {
  .header .logo .site-logo {
    height: 23px;
    max-height: 23px;
  }
}

.header .logo h1 {
  font-size: 26px;
  padding: 0 0 0 8px;
  margin: 11px 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 8px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 14px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo .footer-brand-logo {
  width: auto;
  height: 28px;
  max-height: 28px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .footer-wechat img {
  display: block;
  width: 160px;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
}

.footer .footer-wechat-label {
  width: 160px;
  max-width: 100%;
  margin: 10px 0 0;
  color: var(--default-color);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
}

.footer .footer-contact-icon {
  display: inline-block;
  color: #ffffff;
  font-size: 2.4em;
  line-height: 1;
  vertical-align: -0.1em;
}

.footer .footer-contact-icon-wechat {
  color: #ffffff;
}

.footer .footer-wechat-contact {
  display: flex;
  align-items: center;
}

.footer .footer-wechat-id {
  font-size: 1.5em;
  line-height: 1;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .copyright-protection {
  display: grid;
  grid-template-columns: 44px minmax(0, max-content);
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 16px auto 0;
  padding: 16px 20px;
  color: #e6c17a;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.9;
  text-align: left;
}

.footer .copyright-protection-copy {
  min-width: 0;
}

.footer .copyright-protection-copy p {
  width: auto;
  max-width: none;
  color: #e6c17a;
  text-align: left;
}

.footer .copyright-protection-copy p + p {
  margin-top: 2px;
}

.footer .copyright-protection-copy p strong {
  color: #f0ce8d;
  font-weight: 700;
}

.footer .copyright-protection-shield {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: #e6c17a;
  justify-self: start;
}

.footer .copyright-protection-shield i {
  font-size: 44px;
  line-height: 1;
}

.footer .copyright-protection-shield span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #2f2f2f;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -54%);
}

@media (max-width: 767px) {
  .footer .copyright-protection {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-content: stretch;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 12px;
    font-size: 12px;
    line-height: 1.75;
  }

  .footer .copyright-protection-shield {
    width: 34px;
    height: 38px;
  }

  .footer .copyright-protection-shield i {
    font-size: 34px;
  }

  .footer .copyright-protection-shield span {
    font-size: 13px;
  }
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Floating WeChat And Scroll Top Tools
--------------------------------------------------------------*/
.floating-tools {
  position: fixed;
  top: 50%;
  right: 18px;
  bottom: auto;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transform: translateY(-50%);
}

.floating-wechat {
  position: relative;
}

.floating-tool-button {
  display: inline-flex;
  width: 46px;
  height: 46px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(41, 62, 78, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(25, 43, 57, 0.16);
  transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.3s ease, transform 0.3s ease;
}

.floating-wechat-button {
  color: #25a866;
  background: rgba(255, 255, 255, 0.97);
  cursor: pointer;
}

.floating-wechat-button i {
  font-size: 23px;
  line-height: 1;
}

.floating-wechat-button:hover,
.floating-wechat-button:focus-visible,
.floating-wechat:focus-within .floating-wechat-button {
  color: #ffffff;
  background: #25a866;
  border-color: #25a866;
  box-shadow: 0 13px 32px rgba(37, 168, 102, 0.28);
  outline: none;
  transform: translateY(-2px);
}

.floating-wechat-panel {
  position: absolute;
  right: calc(100% + 14px);
  bottom: 0;
  width: 188px;
  padding: 13px 13px 12px;
  visibility: hidden;
  color: #30475b;
  text-align: center;
  background: rgba(255, 255, 255, 0.985);
  border: 1px solid #dfe6ea;
  border-radius: 15px;
  box-shadow: 0 18px 48px rgba(25, 43, 57, 0.19);
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px) scale(0.98);
  transform-origin: right bottom;
  transition: visibility 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.floating-wechat-panel::after {
  position: absolute;
  right: -7px;
  bottom: 15px;
  width: 13px;
  height: 13px;
  background: #ffffff;
  border-top: 1px solid #dfe6ea;
  border-right: 1px solid #dfe6ea;
  content: "";
  transform: rotate(45deg);
}

.floating-wechat:hover .floating-wechat-panel,
.floating-wechat:focus-within .floating-wechat-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.floating-wechat-panel img {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 8px;
  border-radius: 8px;
}

.floating-wechat-panel strong,
.floating-wechat-panel span {
  display: block;
}

.floating-wechat-panel strong {
  margin-bottom: 2px;
  color: #243e55;
  font-size: 14px;
  font-weight: 700;
}

.floating-wechat-panel span {
  color: #7b8892;
  font-size: 12px;
}

.scroll-top {
  position: relative;
  visibility: hidden;
  opacity: 0;
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border-color: transparent;
  transform: translateY(8px);
}

.scroll-top i {
  color: var(--contrast-color);
  font-size: 24px;
  line-height: 0;
}

.scroll-top:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  border-color: transparent;
  box-shadow: 0 13px 32px color-mix(in srgb, var(--accent-color), transparent 70%);
  transform: translateY(-2px);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 575px) {
  .floating-tools {
    top: 50%;
    right: 12px;
    bottom: auto;
    gap: 8px;
  }

  .floating-tool-button {
    width: 43px;
    height: 43px;
    border-radius: 11px;
  }

  .floating-wechat-panel {
    right: calc(100% + 10px);
    width: 170px;
    padding: 10px 10px 9px;
  }

  .floating-wechat-panel img {
    width: 148px;
    height: 148px;
    margin-bottom: 7px;
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1,
.page-title .page-heading {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Call To Action 4 Section
--------------------------------------------------------------*/
.call-to-action-4 .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 5rem;
}

@media (max-width: 992px) {
  .call-to-action-4 .hero-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
}

.call-to-action-4 .content-wrapper .badge-wrapper {
  margin-bottom: 1.5rem;
}

.call-to-action-4 .content-wrapper .badge-wrapper .promo-badge {
  display: inline-block;
  background: linear-gradient(45deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  color: var(--contrast-color);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.call-to-action-4 .content-wrapper .badge-wrapper .promo-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

.call-to-action-4 .content-wrapper h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .call-to-action-4 .content-wrapper h1 {
    font-size: 2.2rem;
  }
}

.call-to-action-4 .content-wrapper p {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.call-to-action-4 .action-section .main-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.call-to-action-4 .action-section .hero-search-form {
  width: 100%;
  max-width: 650px;
  margin-bottom: 1.25rem;
}

.call-to-action-4 .action-section .hero-search-form .form-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  overflow: hidden;
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-radius: 60px;
  box-shadow: 0 12px 30px rgba(34, 52, 70, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.call-to-action-4 .action-section .hero-search-form .form-wrapper:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 14px 34px rgba(34, 52, 70, 0.1), 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.call-to-action-4 .action-section .hero-search-form .search-icon {
  position: absolute;
  left: 23px;
  z-index: 1;
  color: var(--accent-color);
  font-size: 20px;
  pointer-events: none;
}

.call-to-action-4 .action-section .hero-search-form .search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 62px;
  padding: 0 18px 0 56px;
  color: var(--default-color);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.call-to-action-4 .action-section .hero-search-form .search-input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.call-to-action-4 .action-section .hero-search-form .search-submit {
  display: flex;
  flex: 0 0 78px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 78px;
  color: var(--contrast-color);
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 12%));
  border: 0;
  font-size: 22px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.call-to-action-4 .action-section .hero-search-form .search-submit:hover {
  background: color-mix(in srgb, var(--accent-color), black 12%);
}

.call-to-action-4 .action-section .hero-search-form .search-submit:hover i {
  transform: translateX(3px);
}

.call-to-action-4 .action-section .hero-search-form .search-submit i {
  transition: transform 0.3s ease;
}

.call-to-action-4 .action-section .hero-search-form .search-submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 58%);
  outline-offset: -5px;
}

.call-to-action-4 .action-section .hero-search-form .trust-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  font-size: 0.88rem;
}

.call-to-action-4 .action-section .hero-search-form .trust-indicators i {
  color: var(--accent-color);
}

@media (max-width: 576px) {
  .call-to-action-4 .action-section .hero-search-form .form-wrapper {
    min-height: 58px;
  }

  .call-to-action-4 .action-section .hero-search-form .search-input {
    height: 56px;
    padding-left: 49px;
    font-size: 14px;
  }

  .call-to-action-4 .action-section .hero-search-form .search-icon {
    left: 19px;
    font-size: 18px;
  }

  .call-to-action-4 .action-section .hero-search-form .search-submit {
    flex-basis: 62px;
    width: 62px;
  }

  .call-to-action-4 .action-section .hero-search-form .trust-indicators {
    align-items: flex-start;
    text-align: left;
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  .call-to-action-4 .action-section .main-actions {
    flex-direction: column;
  }
}

.call-to-action-4 .action-section .main-actions .btn {
  padding: 15px 35px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 60px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
}

.call-to-action-4 .action-section .main-actions .btn i {
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

.call-to-action-4 .action-section .main-actions .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.call-to-action-4 .action-section .main-actions .btn:hover::before {
  left: 100%;
}

.call-to-action-4 .action-section .main-actions .btn.btn-explore {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border: none;
  color: var(--contrast-color);
}

.call-to-action-4 .action-section .main-actions .btn.btn-explore:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.call-to-action-4 .action-section .main-actions .btn.btn-deals {
  background: transparent;
  border: 3px solid var(--accent-color);
  color: var(--accent-color);
}

.call-to-action-4 .action-section .main-actions .btn.btn-deals:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px) scale(1.05);
}

.call-to-action-4 .action-section .quick-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--surface-color), transparent 50%);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
}

@media (max-width: 576px) {
  .call-to-action-4 .action-section .quick-contact {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

.call-to-action-4 .action-section .quick-contact .contact-label {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

.call-to-action-4 .action-section .quick-contact .contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.call-to-action-4 .action-section .quick-contact .contact-link:hover {
  color: color-mix(in srgb, var(--accent-color), black 20%);
  transform: translateX(3px);
}

.call-to-action-4 .action-section .quick-contact .contact-link i {
  font-size: 1.1rem;
}

.call-to-action-4 .action-section .quick-contact .wechat-contact {
  position: relative;
}

.call-to-action-4 .action-section .quick-contact .wechat-qr-popup {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% + 16px);
  width: 204px;
  padding: 11px 11px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
  border-radius: 14px;
  background: var(--surface-color);
  box-shadow: 0 16px 40px rgba(34, 52, 70, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.call-to-action-4 .action-section .quick-contact .wechat-qr-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
  border-left: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
  background: var(--surface-color);
  transform: translateX(-50%) rotate(45deg);
}

.call-to-action-4 .action-section .quick-contact .wechat-qr-popup img {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 8px;
}

.call-to-action-4 .action-section .quick-contact .wechat-qr-popup span {
  display: block;
  margin-top: 7px;
  color: var(--default-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.call-to-action-4 .action-section .quick-contact .wechat-contact:hover .wechat-qr-popup,
.call-to-action-4 .action-section .quick-contact .wechat-contact:focus-within .wechat-qr-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.call-to-action-4 .action-section .quick-contact .contact-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 5px;
  border-radius: 4px;
}

.call-to-action-4 .visual-element {
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.call-to-action-4 .visual-element .hero-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

@media (max-width: 768px) {
  .call-to-action-4 .visual-element .hero-image {
    height: 350px;
  }
}

.call-to-action-4 .visual-element .image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 2rem;
  display: flex;
  justify-content: space-around;
}

.call-to-action-4 .visual-element .image-overlay .stat-item {
  text-align: center;
}

.call-to-action-4 .visual-element .image-overlay .stat-item .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--contrast-color);
}

.call-to-action-4 .visual-element .image-overlay .stat-item .stat-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.call-to-action-4 .visual-element:hover .hero-image {
  transform: scale(1.05);
}

.call-to-action-4 .newsletter-section {
  margin-bottom: 5rem;
}

.call-to-action-4 .newsletter-section .newsletter-card {
  background: var(--surface-color);
  border-radius: 25px;
  padding: 2.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.call-to-action-4 .newsletter-section .newsletter-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .call-to-action-4 .newsletter-section .newsletter-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}

.call-to-action-4 .newsletter-section .newsletter-content .newsletter-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.call-to-action-4 .newsletter-section .newsletter-content .newsletter-icon i {
  font-size: 2rem;
  color: var(--contrast-color);
}

.call-to-action-4 .newsletter-section .newsletter-content .newsletter-text h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.call-to-action-4 .newsletter-section .newsletter-content .newsletter-text p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
  font-size: 1.1rem;
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 576px) {
  .call-to-action-4 .newsletter-section .newsletter-form .form-wrapper {
    flex-direction: column;
  }
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .email-input {
  flex: 1;
  padding: 18px 25px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 60px 0 0 60px;
  font-size: 1rem;
  background: var(--surface-color);
  transition: all 0.3s ease;
}

@media (max-width: 576px) {
  .call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .email-input {
    border-radius: 60px;
    margin-bottom: 1rem;
  }
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .email-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .email-input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .subscribe-btn {
  padding: 18px 25px;
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
  border-radius: 0 60px 60px 0;
  color: var(--contrast-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

@media (max-width: 576px) {
  .call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .subscribe-btn {
    border-radius: 60px;
    width: 100%;
  }
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .subscribe-btn:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateX(2px);
}

.call-to-action-4 .newsletter-section .newsletter-form .form-wrapper .subscribe-btn i {
  font-size: 1.2rem;
}

.call-to-action-4 .newsletter-section .newsletter-form .trust-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.call-to-action-4 .newsletter-section .newsletter-form .trust-indicators i {
  color: var(--accent-color);
}

.call-to-action-4 .benefits-showcase .benefits-header {
  text-align: center;
  margin-bottom: 0;
}

.call-to-action-4 .benefits-showcase .benefits-header p {
  font-size: inherit;
  color: inherit;
}

.call-to-action-4 .benefits-showcase .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.call-to-action-4 .benefits-showcase .benefit-card {
  background: var(--surface-color);
  color: inherit;
  text-decoration: none;
  padding: 2.5rem;
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 95%);
}

.call-to-action-4 .benefits-showcase .benefit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-visual {
  position: relative;
  margin-bottom: 2rem;
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-visual .benefit-icon-wrap {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-visual .benefit-icon-wrap i {
  font-size: 2.5rem;
  color: var(--contrast-color);
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-visual .benefit-document-icon {
  background: transparent;
  border-radius: 0;
  color: #ea6c56;
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-visual .benefit-document-icon svg {
  width: 82px;
  height: 82px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.call-to-action-4 .benefits-showcase .benefit-card:hover {
  background: #ea6c56;
  border-color: #ea6c56;
}

.call-to-action-4 .benefits-showcase .benefit-card:hover .benefit-document-icon {
  color: var(--contrast-color);
}

.call-to-action-4 .benefits-showcase .benefit-card:hover .benefit-content h4,
.call-to-action-4 .benefits-showcase .benefit-card:hover .benefit-content p {
  color: var(--contrast-color);
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-visual .benefit-pattern {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color), transparent 90%) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-content h4 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.call-to-action-4 .benefits-showcase .benefit-card .benefit-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.6;
  margin: 0;
}

.call-to-action-4 input[type=email] {
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.call-to-action-4 input[type=email]:focus {
  border-color: var(--accent-color);
}

.call-to-action-4 input[type=email]::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon.why-icon {
  width: 82px;
  height: 82px;
  background: transparent;
  border-radius: 0;
}

.services .service-item .icon.why-icon i {
  color: #ea6c56;
  font-size: 72px;
  line-height: 1;
}

.services .service-item .icon.why-icon::before {
  display: none;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--surface-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Cards Section
--------------------------------------------------------------*/
.cards .card-item {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 50px 30px;
  transition: all ease-in-out 0.3s;
  height: 100%;
  position: relative;
}

.cards .card-item span {
  color: var(--accent-color);
  display: block;
  font-size: 28px;
  font-weight: 700;
}

.cards .card-item h4 {
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
}

.cards .card-item h4 a {
  color: var(--heading-color);
}

.cards .card-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
  padding: 0;
}

.cards .card-item:hover {
  background: var(--accent-color);
  padding: 30px 30px 70px 30px;
}

.cards .card-item:hover span,
.cards .card-item:hover h4,
.cards .card-item:hover h4 a,
.cards .card-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Slider Section
--------------------------------------------------------------*/
.slider .img-bg {
  min-height: 500px;
  position: relative;
}

.slider .img-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slider .slides {
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
}

.slider h3 {
  font-size: 24px;
  font-weight: 700;
}

.slider h4 {
  font-size: 18px;
  font-weight: 300;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.slider .home-knowledge-article {
  display: block;
  color: var(--default-color);
  text-decoration: none;
}

.slider .home-knowledge-article h3 {
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.slider .home-knowledge-article:hover h3,
.slider .home-knowledge-article:focus-visible h3 {
  color: var(--accent-color);
}

.slider .home-knowledge-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--accent-color);
  font-weight: 700;
}

.slider .home-knowledge-readmore i {
  transition: transform 0.3s ease;
}

.slider .home-knowledge-article:hover .home-knowledge-readmore i {
  transform: translateX(4px);
}

.slider .swiper {
  margin: 188px 140px 72px 140px;
  overflow: hidden;
}

.slider .swiper-wrapper {
  height: auto;
}

.slider .swiper-button-prev:after,
.slider .swiper-button-next:after {
  font-size: 24px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.slider .swiper-button-prev {
  left: 80px;
}

.slider .swiper-button-next {
  right: 80px;
}

.slider .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.slider .swiper-pagination .swiper-pagination-bullet {
  background-color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 1200px) {
  .slider .swiper {
    margin: 60px 60px 40px 60px;
  }

  .slider .swiper-button-prev,
  .slider .swiper-button-next {
    display: none;
  }
}

@media (max-width: 575px) {
  .slider .swiper {
    margin: 40px 40px 20px 40px;
  }
}

/*--------------------------------------------------------------
# Testimonials 3 Section
--------------------------------------------------------------*/
.testimonials-3 .swiper-wrapper {
  height: auto !important;
}

.testimonials-3 .testimonial-card {
  background: var(--surface-color);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.testimonials-3 .testimonial-card:hover {
  border-color: var(--accent-color);
}

.testimonials-3 .testimonial-content {
  padding: 40px 30px 30px;
  position: relative;
  flex-grow: 1;
}

.testimonials-3 .testimonial-content p {
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.testimonials-3 .testimonial-content .quote-icon {
  position: absolute;
  top: 15px;
  left: 30px;
  font-size: 42px;
  color: color-mix(in srgb, var(--accent-color), transparent 85%);
  z-index: 0;
  opacity: 0.8;
}

.testimonials-3 .testimonial-profile {
  padding: 20px 30px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
  border-top: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
}

.testimonials-3 .rating {
  margin-bottom: 15px;
}

.testimonials-3 .rating i {
  color: #ffc107;
  margin-right: 3px;
  font-size: 14px;
}

.testimonials-3 .profile-info {
  display: flex;
  align-items: center;
}

.testimonials-3 .profile-info img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--background-color);
  margin-right: 15px;
}

.testimonials-3 .profile-info div {
  flex: 1;
}

.testimonials-3 .profile-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
}

.testimonials-3 .profile-info h4 {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

.testimonials-3 .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.testimonials-3 .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  opacity: 1;
}

.testimonials-3 .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  width: 25px;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .testimonials-3 .testimonial-content {
    padding: 30px 20px 20px;
  }

  .testimonials-3 .testimonial-content p {
    font-size: 15px;
  }

  .testimonials-3 .testimonial-content .quote-icon {
    font-size: 36px;
    left: 20px;
  }

  .testimonials-3 .testimonial-profile {
    padding: 15px 20px;
  }

  .testimonials-3 .profile-info img {
    width: 45px;
    height: 45px;
  }
}

/*--------------------------------------------------------------
# Call To Action 5 Section
--------------------------------------------------------------*/
.call-to-action-5 {
  position: relative;
  padding: 100px 0;
  isolation: isolate;
}

.call-to-action-5 .container {
  position: relative;
}

.call-to-action-5 h2 {
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.call-to-action-5 .lead {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto;
}

.call-to-action-5 .cta-section-title {
  position: relative;
  z-index: 1;
}

.call-to-action-5 .cta-section-title h2 {
  font-size: 32px;
  font-weight: 700;
}

.call-to-action-5 .cta-section-title p {
  max-width: none;
  margin-bottom: 0;
  color: var(--default-color);
  font-size: 16px;
}

.call-to-action-5 h2,
.call-to-action-5 .lead,
.call-to-action-5 .cta-buttons {
  position: relative;
  z-index: 1;
}

.call-to-action-5 .btn {
  padding: 12px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.call-to-action-5 .btn:hover {
  transform: translateY(-2px);
}

.call-to-action-5 .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.call-to-action-5 .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.call-to-action-5 .btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.call-to-action-5 .btn-outline-primary:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.call-to-action-5 .scribble {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1 !important;
  animation: float 6s ease-in-out infinite;
}

.call-to-action-5 .scribble::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.call-to-action-5 .scribble-1 {
  width: 150px;
  height: 150px;
  top: -30px;
  left: 5%;
  animation-delay: 0s;
}

.call-to-action-5 .scribble-1::before {
  clip-path: path("M75,0 C90,25 110,25 125,50 C140,75 160,75 150,100 C140,125 110,125 75,150 C40,125 10,125 0,100 C-10,75 10,75 25,50 C40,25 60,25 75,0");
}

.call-to-action-5 .scribble-2 {
  width: 120px;
  height: 120px;
  top: 20%;
  right: 10%;
  animation-delay: -2s;
}

.call-to-action-5 .scribble-2::before {
  clip-path: path("M60,0 C80,20 100,20 100,40 C100,60 80,80 60,120 C40,80 20,60 20,40 C20,20 40,20 60,0");
}

.call-to-action-5 .scribble-3 {
  width: 100px;
  height: 100px;
  bottom: -20px;
  left: 15%;
  animation-delay: -4s;
}

.call-to-action-5 .scribble-3::before {
  clip-path: path("M50,0 C70,15 85,15 90,35 C95,55 85,70 50,100 C15,70 5,55 10,35 C15,15 30,15 50,0");
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@media (max-width: 768px) {
  .call-to-action-5 {
    padding: 60px 0;
  }

  .call-to-action-5 h2 {
    font-size: 2.5rem;
  }

  .call-to-action-5 .lead {
    font-size: 1.1rem;
  }

  .call-to-action-5 .cta-buttons .btn {
    display: block;
    width: 100%;
    margin: 10px 0;
  }

  .call-to-action-5 .scribble {
    transform: scale(0.7);
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.about .content .lead {
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.about .content>p {
  margin-bottom: 2rem;
  line-height: 1.6;
}

.about .features-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about .feature-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.about .icon-wrapper {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about .icon-wrapper i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.about .feature-content {
  flex: 1;
}

.about .feature-content h5 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.about .feature-content p {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.about .image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.about .grid-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.about .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about .grid-item.grid-large {
  grid-row: span 2;
}

.about .grid-item.grid-large img {
  height: 100%;
  min-height: 500px;
}

.about .grid-item.grid-small img {
  height: 240px;
}

.about .stats-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about .stat-item {
  text-align: center;
}

.about .stat-item h4 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.25rem;
  line-height: 1;
}

.about .stat-item p {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0;
  color: var(--heading-color);
}

@media (max-width: 992px) {
  .about .content h3 {
    font-size: 1.625rem;
  }

  .about .image-grid {
    margin-bottom: 2rem;
  }

  .about .image-grid .grid-item.grid-large img {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .about .image-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about .image-grid .grid-item.grid-large {
    grid-row: span 1;
  }

  .about .image-grid .grid-item.grid-large img {
    min-height: 300px;
  }

  .about .image-grid .grid-item.grid-small img {
    height: 200px;
  }

  .about .stats-card {
    flex-direction: row;
    justify-content: space-around;
    padding: 1.5rem 1rem;
  }

  .about .stat-item h4 {
    font-size: 1.875rem;
  }
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills {
  padding: 100px 0;
}

.skills .skills-showcase {
  position: relative;
}

.skills .skill-tile {
  position: relative;
  background: var(--surface-color);
  border-radius: 20px;
  padding: 32px;
  height: 100%;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.skills .skill-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 40%));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.skills .skill-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.skills .skill-tile:hover::before {
  opacity: 1;
}

.skills .skill-tile:hover .icon-wrapper {
  background: var(--accent-color);
  transform: scale(1.1);
}

.skills .skill-tile:hover .icon-wrapper i {
  color: var(--contrast-color);
}

.skills .skill-tile:hover .capability-tag {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.skills .skill-tile.featured {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 30%));
  transform: scale(1.02);
}

.skills .skill-tile.featured::before {
  display: none;
}

.skills .skill-tile.featured .icon-wrapper {
  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
}

.skills .skill-tile.featured .icon-wrapper i {
  color: var(--contrast-color);
}

.skills .skill-tile.featured .tile-body h4 {
  color: var(--contrast-color);
}

.skills .skill-tile.featured .tile-body p {
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
}

.skills .skill-tile.featured .capability-tag {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--contrast-color), transparent 82%);
  border-color: color-mix(in srgb, var(--contrast-color), transparent 65%);
}

.skills .skill-tile.featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.skills .skill-tile.featured:hover .icon-wrapper {
  background: var(--contrast-color);
}

.skills .skill-tile.featured:hover .icon-wrapper i {
  color: var(--accent-color);
}

.skills .skill-tile.featured:hover .capability-tag {
  color: var(--accent-color);
  background: var(--contrast-color);
  border-color: var(--contrast-color);
}

.skills .skill-tile .tile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.skills .skill-tile .icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.skills .skill-tile .icon-wrapper i {
  font-size: 1.5rem;
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.skills .skill-tile .capability-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 68%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.skills .skill-tile .tile-body {
  margin-bottom: 0;
}

.skills .skill-tile .tile-body h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
  line-height: 1.3;
}

.skills .skill-tile .tile-body p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
  line-height: 1.6;
}

.skills .credentials-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 64px;
  padding: 40px 48px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 25%));
  border-radius: 24px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--accent-color), transparent 60%);
}

@media (max-width: 992px) {
  .skills .credentials-bar {
    flex-wrap: wrap;
    gap: 32px;
    padding: 32px;
  }
}

@media (max-width: 576px) {
  .skills .credentials-bar {
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
  }
}

.skills .credentials-bar .divider {
  width: 1px;
  height: 48px;
  background: color-mix(in srgb, var(--contrast-color), transparent 70%);
}

@media (max-width: 992px) {
  .skills .credentials-bar .divider {
    display: none;
  }
}

.skills .credentials-bar .credential-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (max-width: 576px) {
  .skills .credentials-bar .credential-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.skills .credentials-bar .credential-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skills .credentials-bar .credential-icon i {
  font-size: 1.5rem;
  color: var(--contrast-color);
}

.skills .credentials-bar .credential-info {
  display: flex;
  flex-direction: column;
}

.skills .credentials-bar .credential-info .credential-number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--contrast-color);
  line-height: 1.2;
  font-family: var(--heading-font);
}

.skills .credentials-bar .credential-info .credential-label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .skills {
    padding: 80px 0;
  }

  .skills .skill-tile {
    padding: 24px;
  }

  .skills .skill-tile .icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .skills .skill-tile .icon-wrapper i {
    font-size: 1.25rem;
  }

  .skills .skill-tile .capability-tag {
    min-height: 30px;
    padding: 0 11px;
    font-size: 0.75rem;
  }

  .skills .skill-tile .tile-body h4 {
    font-size: 1rem;
  }

  .skills .skill-tile.featured {
    transform: scale(1);
  }

  .skills .skill-tile.featured:hover {
    transform: translateY(-8px);
  }

  .skills .credentials-bar {
    margin-top: 48px;
  }

  .skills .credentials-bar .credential-icon {
    width: 48px;
    height: 48px;
  }

  .skills .credentials-bar .credential-icon i {
    font-size: 1.25rem;
  }

  .skills .credentials-bar .credential-info .credential-number {
    font-size: 1.5rem;
  }
}

/*--------------------------------------------------------------
# Team 2 Section
--------------------------------------------------------------*/
.team-2 .team-card {
  background: var(--surface-color);
  border-radius: 20px;
  padding: 30px 25px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 30px rgba(54, 144, 231, 0.08);
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.team-2 .team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(54, 144, 231, 0.15);
}

.team-2 .team-card:hover .image-wrapper .social-links {
  opacity: 1;
  visibility: visible;
}

.team-2 .image-wrapper {
  position: relative;
  margin-bottom: 25px;
}

.team-2 .image-wrapper img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  transition: all 0.3s ease;
}

.team-2 .image-wrapper .social-links {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.team-2 .image-wrapper .social-links a {
  width: 35px;
  height: 35px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.team-2 .image-wrapper .social-links a:hover {
  background: var(--heading-color);
  transform: scale(1.1);
}

.team-2 .content h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.team-2 .content .position {
  color: var(--accent-color);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 15px;
}

.team-2 .content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .team-2 .team-card {
    padding: 25px 20px;
    margin-bottom: 20px;
  }

  .team-2 .image-wrapper img {
    width: 100px;
    height: 100px;
  }

  .team-2 .image-wrapper .social-links {
    width: 100px;
    height: 100px;
    gap: 8px;
  }

  .team-2 .image-wrapper .social-links a {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .team-2 .content h4 {
    font-size: 20px;
  }

  .team-2 .content .position {
    font-size: 13px;
  }

  .team-2 .content p {
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Clients 2 Section
--------------------------------------------------------------*/
.clients-2 .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients-2 .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.clients-2 .swiper-wrapper {
  height: auto;
}

.clients-2 .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients-2 .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients-2 .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Hero 3 Section
--------------------------------------------------------------*/
.hero-3 {
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}

.hero-3 .visual-block {
  position: relative;
  padding: 20px;
}

.hero-3 .visual-block .image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.hero-3 .visual-block .image-wrapper img {
  border-radius: 18px;
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.hero-3 .visual-block .image-wrapper:hover img {
  transform: scale(1.03);
}

.hero-3 .visual-block .accent-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 1rem 1.25rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
}

@media (max-width: 576px) {
  .hero-3 .visual-block .accent-badge {
    padding: 0.75rem 1rem;
  }
}

.hero-3 .visual-block .accent-badge .badge-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--contrast-color), transparent 80%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-3 .visual-block .accent-badge .badge-icon i {
  font-size: 1.25rem;
  color: var(--contrast-color);
}

.hero-3 .visual-block .accent-badge .badge-info {
  display: flex;
  flex-direction: column;
}

.hero-3 .visual-block .accent-badge .badge-info .badge-title {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.9;
}

.hero-3 .visual-block .accent-badge .badge-info .badge-value {
  font-size: 1.375rem;
  font-weight: 700;
}

.hero-3 .intro-content {
  padding-left: 2rem;
}

@media (max-width: 992px) {
  .hero-3 .intro-content {
    padding-left: 0;
  }
}

.hero-3 .intro-content .tagline {
  display: inline-block;
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hero-3 .intro-content h1 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .hero-3 .intro-content h1 {
    font-size: 2rem;
  }
}

.hero-3 .intro-content p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 540px;
}

.hero-3 .action-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .hero-3 .action-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hero-3 .action-buttons .btn-launch {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 13px 34px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-3 .action-buttons .btn-launch:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--contrast-color);
}

.hero-3 .action-buttons .btn-outline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 50%);
  color: var(--accent-color);
  padding: 11px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-3 .action-buttons .btn-outline i {
  font-size: 1.25rem;
}

.hero-3 .action-buttons .btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
  transform: translateY(-3px);
}

.hero-3 .metrics-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .hero-3 .metrics-row {
    flex-direction: column;
  }
}

.hero-3 .metrics-row .metric-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 14px;
  background: var(--surface-color);
  transition: all 0.3s ease;
}

.hero-3 .metrics-row .metric-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0 5px 20px color-mix(in srgb, var(--accent-color), transparent 85%);
  transform: translateY(-2px);
}

.hero-3 .metrics-row .metric-card>i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.hero-3 .metrics-row .metric-card .metric-info {
  display: flex;
  flex-direction: column;
}

.hero-3 .metrics-row .metric-card .metric-info strong {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.hero-3 .metrics-row .metric-card .metric-info span {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 992px) {
  .hero-3 {
    padding: 120px 0 60px;
  }
}

/*--------------------------------------------------------------
# Services 2 Section
--------------------------------------------------------------*/
.services-2 .service-item {
  background-color: var(--surface-color);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services-2 .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services-2 .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services-2 .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services-2 .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services-2 .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services-2 .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services-2 .service-item:hover .icon {
  background: var(--surface-color);
}

.services-2 .service-item:hover .icon i {
  color: var(--accent-color);
}

.services-2 .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services-2 .service-item:hover h3,
.services-2 .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Steps Section
--------------------------------------------------------------*/
.steps .steps-grid {
  padding: 16px 0;
}

.steps .step-panel {
  height: 100%;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.steps .step-panel:hover {
  border-color: color-mix(in srgb, var(--default-color) 24%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--default-color) 8%, transparent);
}

.steps .step-panel.active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 3%, var(--surface-color));
}

.steps .step-panel.active .step-number {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.steps .step-panel.active .step-icon i {
  color: var(--accent-color);
}

.steps .step-panel.active .step-tag {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.steps .step-panel.active:hover {
  border-color: var(--accent-color);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.steps .step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.steps .step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading-color);
  background: var(--surface-color);
  font-family: var(--heading-font);
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
}

.steps .step-line {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--default-color) 10%, transparent);
}

.steps .step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.steps .step-icon {
  margin-bottom: 16px;
}

.steps .step-icon i {
  font-size: 24px;
  color: color-mix(in srgb, var(--default-color) 50%, transparent);
  transition: color 0.2s ease;
}

.steps .step-panel:hover .step-icon i {
  color: var(--accent-color);
}

.steps .step-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.steps .step-body p {
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
  margin-bottom: 0;
}

.steps .step-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
}

.steps .step-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  background: color-mix(in srgb, var(--default-color) 6%, transparent);
  color: color-mix(in srgb, var(--default-color) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .steps .step-panel {
    padding: 20px;
  }

  .steps .step-body h3 {
    font-size: 16px;
  }

  .steps .step-body p {
    font-size: 13px;
  }

  .steps .step-header {
    margin-bottom: 20px;
  }

  .steps .step-footer {
    margin-top: 20px;
    padding-top: 12px;
  }
}

/*--------------------------------------------------------------
# Cards 2 Section
--------------------------------------------------------------*/
.cards-2 .feature-card {
  position: relative;
  background: var(--surface-color);
  border-radius: 20px;
  padding: 32px 28px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.cards-2 .feature-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 40%));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cards-2 .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-color), transparent 88%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.cards-2 .feature-card:hover::after {
  transform: scaleX(1);
}

.cards-2 .feature-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(-5deg);
}

.cards-2 .feature-card:hover .card-visual img {
  transform: scale(1.08);
}

.cards-2 .feature-card:hover .link-action {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding-right: 24px;
}

.cards-2 .feature-card:hover .link-action i {
  transform: translateX(4px);
}

.cards-2 .feature-card.highlight {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 96%), var(--surface-color));
  border-color: var(--accent-color);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.cards-2 .feature-card.highlight::after {
  transform: scaleX(1);
  height: 4px;
}

.cards-2 .feature-card.highlight .icon-wrapper {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.cards-2 .feature-card.highlight .icon-wrapper i {
  color: var(--contrast-color);
}

.cards-2 .feature-card.highlight .link-action {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.cards-2 .feature-card .icon-wrapper {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.cards-2 .feature-card .icon-wrapper i {
  font-size: 28px;
  color: var(--accent-color);
}

.cards-2 .feature-card .badge-popular {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.cards-2 .feature-card .card-content {
  flex: 0 0 auto;
  margin-bottom: 24px;
}

.cards-2 .feature-card .card-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 12px;
  line-height: 1.3;
}

.cards-2 .feature-card .card-content p {
  font-size: 14px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.cards-2 .feature-card .card-visual {
  flex: 1;
  margin-bottom: 24px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cards-2 .feature-card .card-visual img {
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cards-2 .feature-card .link-action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cards-2 .feature-card .link-action span {
  margin-right: 6px;
}

.cards-2 .feature-card .link-action i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.cards-2 .feature-card .link-action:hover {
  text-decoration: none;
}

@media (max-width: 992px) {
  .cards-2 .feature-card {
    padding: 28px 24px 24px;
  }

  .cards-2 .feature-card .icon-wrapper {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
  }

  .cards-2 .feature-card .icon-wrapper i {
    font-size: 26px;
  }

  .cards-2 .feature-card .card-content {
    margin-bottom: 20px;
  }

  .cards-2 .feature-card .card-content h3 {
    font-size: 18px;
  }

  .cards-2 .feature-card .card-visual {
    margin-bottom: 20px;
    padding: 12px;
  }

  .cards-2 .feature-card .card-visual img {
    max-height: 120px;
  }
}

@media (max-width: 576px) {
  .cards-2 .feature-card {
    padding: 24px 20px 20px;
  }

  .cards-2 .feature-card .badge-popular {
    top: 12px;
    right: 12px;
    padding: 3px 12px;
    font-size: 11px;
  }

  .cards-2 .feature-card .icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .cards-2 .feature-card .icon-wrapper i {
    font-size: 24px;
  }

  .cards-2 .feature-card .card-content h3 {
    font-size: 17px;
  }

  .cards-2 .feature-card .card-content p {
    font-size: 13px;
  }

  .cards-2 .feature-card .card-visual img {
    max-height: 100px;
  }

  .cards-2 .feature-card .link-action {
    padding: 9px 16px;
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Testimonials 4 Section
--------------------------------------------------------------*/
.testimonials-4 .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials-4 .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.testimonials-4 .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials-4 .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials-4 .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials-4 .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials-4 .testimonial-item .quote-icon-left,
.testimonials-4 .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials-4 .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials-4 .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials-4 .testimonial-item p {
  font-style: italic;
  margin: 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq {
  background-color: color-mix(in srgb, var(--surface-color), #f8f9fa 50%);
}

.faq .faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq .faq-item {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  margin-bottom: 24px;
  padding: 32px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--default-color), transparent 95%);
}

.faq .faq-item:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.faq .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-item .question-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.faq .faq-item .icon-wrapper {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.faq .faq-item .icon-wrapper i {
  color: var(--accent-color);
  font-size: 24px;
}

.faq .faq-item .content-wrapper {
  flex: 1;
  min-width: 0;
}

.faq .faq-item .question {
  color: var(--heading-color);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
  font-family: var(--heading-font);
}

.faq .faq-item .answer p {
  color: var(--default-color);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .faq .faq-item {
    padding: 24px 20px;
  }

  .faq .faq-item .question-wrapper {
    gap: 16px;
  }

  .faq .faq-item .icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .faq .faq-item .icon-wrapper i {
    font-size: 20px;
  }

  .faq .faq-item .question {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .faq .faq-item .answer p {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .faq .faq-item {
    padding: 20px 16px;
  }

  .faq .faq-item .question-wrapper {
    gap: 12px;
  }

  .faq .faq-item .icon-wrapper {
    width: 36px;
    height: 36px;
  }

  .faq .faq-item .icon-wrapper i {
    font-size: 18px;
  }

  .faq .faq-item .question {
    font-size: 15px;
  }

  .faq .faq-item .answer p {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Call To Action 7 Section
--------------------------------------------------------------*/
.call-to-action-7 {
  position: relative;
  padding: 100px 0;
  isolation: isolate;
}

.call-to-action-7 .container {
  position: relative;
}

.call-to-action-7 h2 {
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.call-to-action-7 .lead {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 1.25rem;
  max-width: 800px;
  margin: 0 auto;
}

.call-to-action-7 .cta-section-title {
  position: relative;
  z-index: 1;
}

.call-to-action-7 .cta-section-title h2 {
  font-size: 32px;
  font-weight: 700;
}

.call-to-action-7 .cta-section-title p {
  max-width: none;
  margin-bottom: 0;
  color: var(--default-color);
  font-size: 16px;
}

.call-to-action-7 h2,
.call-to-action-7 .lead,
.call-to-action-7 .cta-buttons {
  position: relative;
  z-index: 1;
}

.call-to-action-7 .btn {
  padding: 12px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.call-to-action-7 .btn:hover {
  transform: translateY(-2px);
}

.call-to-action-7 .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.call-to-action-7 .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.call-to-action-7 .btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.call-to-action-7 .btn-outline-primary:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.call-to-action-7 .scribble {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1 !important;
  animation: float 6s ease-in-out infinite;
}

.call-to-action-7 .scribble::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.call-to-action-7 .scribble-1 {
  width: 150px;
  height: 150px;
  top: -30px;
  left: 5%;
  animation-delay: 0s;
}

.call-to-action-7 .scribble-1::before {
  clip-path: path("M75,0 C90,25 110,25 125,50 C140,75 160,75 150,100 C140,125 110,125 75,150 C40,125 10,125 0,100 C-10,75 10,75 25,50 C40,25 60,25 75,0");
}

.call-to-action-7 .scribble-2 {
  width: 120px;
  height: 120px;
  top: 20%;
  right: 10%;
  animation-delay: -2s;
}

.call-to-action-7 .scribble-2::before {
  clip-path: path("M60,0 C80,20 100,20 100,40 C100,60 80,80 60,120 C40,80 20,60 20,40 C20,20 40,20 60,0");
}

.call-to-action-7 .scribble-3 {
  width: 100px;
  height: 100px;
  bottom: -20px;
  left: 15%;
  animation-delay: -4s;
}

.call-to-action-7 .scribble-3::before {
  clip-path: path("M50,0 C70,15 85,15 90,35 C95,55 85,70 50,100 C15,70 5,55 10,35 C15,15 30,15 50,0");
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@media (max-width: 768px) {
  .call-to-action-7 {
    padding: 60px 0;
  }

  .call-to-action-7 h2 {
    font-size: 2.5rem;
  }

  .call-to-action-7 .lead {
    font-size: 1.1rem;
  }

  .call-to-action-7 .cta-buttons .btn {
    display: block;
    width: 100%;
    margin: 10px 0;
  }

  .call-to-action-7 .scribble {
    transform: scale(0.7);
  }
}

/*--------------------------------------------------------------
# Contact 2 Section
--------------------------------------------------------------*/
.contact-2 .intro-block h3 {
  font-size: 34px;
  font-weight: 800;
  color: var(--heading-color);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.contact-2 .intro-block p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 0;
  max-width: 560px;
}

.contact-2 .social-bar {
  display: flex;
  gap: 10px;
}

.contact-2 .social-bar .social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.contact-2 .social-bar .social-icon:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
  transform: scale(1.1);
}

.contact-2 .social-bar .social-icon i {
  font-size: 16px;
}

.contact-2 .info-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

.contact-2 .info-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px;
  background: var(--surface-color);
  border-radius: 12px;
  border-left: 4px solid var(--accent-color);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 94%);
  transition: all 0.3s ease;
}

.contact-2 .info-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--default-color), transparent 88%);
}

.contact-2 .info-card .icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.contact-2 .info-card .icon-circle i {
  font-size: 22px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.contact-2 .info-card:hover .icon-circle {
  background: var(--accent-color);
}

.contact-2 .info-card:hover .icon-circle i {
  color: var(--contrast-color);
}

.contact-2 .info-card .info-details h5 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--heading-color);
}

.contact-2 .info-card .info-details p {
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--default-color);
  font-weight: 500;
}

.contact-2 .info-card .info-details p a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-2 .info-card .info-details p a:hover {
  color: var(--accent-color);
}

.contact-2 .info-card .contact-wechat-qr {
  display: block;
  width: 120px;
  height: 120px;
  margin-top: 12px;
  border-radius: 8px;
}

.contact-2 .info-card .info-details .availability {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  font-style: italic;
}

.contact-2 .form-panel {
  background: var(--surface-color);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 10px 50px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.contact-2 .form-panel .form-intro {
  margin-bottom: 30px;
}

.contact-2 .form-panel .form-intro .form-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 30px;
}

.contact-2 .form-panel .form-intro .form-badge i {
  font-size: 18px;
  color: var(--accent-color);
}

.contact-2 .form-panel .form-intro .form-badge span {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-color);
}

.contact-2 .form-panel .form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.contact-2 .form-panel .php-email-form .form-control {
  border: none;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 0;
  padding: 12px 4px;
  font-size: 15px;
  color: var(--default-color);
  background: transparent;
  transition: all 0.3s ease;
}

.contact-2 .form-panel .php-email-form .form-control:focus {
  border-bottom-color: var(--accent-color);
  box-shadow: none;
  outline: none;
}

.contact-2 .form-panel .php-email-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.contact-2 .form-panel .php-email-form textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.contact-2 .consulting-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.contact-2 .consultation-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  border-radius: 10px;
}

.contact-2 .consulting-captcha {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.contact-2 .consulting-form .invalid-feedback {
  display: block;
}

.contact-2 .form-panel .btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 2px solid var(--accent-color);
  background: transparent;
  color: var(--accent-color);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-2 .form-panel .btn-submit:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
  transform: translateY(-2px);
}

.contact-2 .form-panel .btn-submit i {
  font-size: 20px;
  transition: transform 0.3s ease;
}

.contact-2 .form-panel .btn-submit:hover i {
  transform: translateX(4px);
}

.contact-2 .stats-strip {
  display: flex;
  justify-content: center;
  background: var(--accent-color);
  border-radius: 16px;
  overflow: hidden;
}

.contact-2 .stats-strip .stat-block {
  flex: 1;
  text-align: center;
  padding: 28px 20px;
  position: relative;
  transition: background 0.3s ease;
}

.contact-2 .stats-strip .stat-block:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: color-mix(in srgb, var(--contrast-color), transparent 70%);
}

.contact-2 .stats-strip .stat-block:hover {
  background: color-mix(in srgb, var(--accent-color), #000 10%);
}

.contact-2 .stats-strip .stat-block .stat-value {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--contrast-color);
  font-family: var(--heading-font);
  margin-bottom: 4px;
}

.contact-2 .stats-strip .stat-block .stat-text {
  font-size: 13px;
  color: color-mix(in srgb, var(--contrast-color), transparent 25%);
  font-weight: 500;
}

@media (max-width: 992px) {
  .contact-2 .intro-block {
    text-align: center;
    margin-bottom: 20px;
  }

  .contact-2 .intro-block p {
    max-width: 100%;
  }

  .contact-2 .social-bar {
    justify-content: center;
    margin-bottom: 10px;
  }

  .contact-2 .info-panel {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contact-2 .info-card {
    flex: 1;
    min-width: 200px;
  }

  .contact-2 .form-panel {
    padding: 30px 28px;
  }
}

@media (max-width: 768px) {
  .contact-2 .intro-block h3 {
    font-size: 28px;
  }

  .contact-2 .info-panel {
    flex-direction: column;
  }

  .contact-2 .info-card {
    min-width: 100%;
  }

  .contact-2 .form-panel {
    padding: 28px 20px;
  }

  .contact-2 .stats-strip {
    flex-direction: column;
    border-radius: 12px;
  }

  .contact-2 .stats-strip .stat-block {
    padding: 20px;
  }

  .contact-2 .stats-strip .stat-block:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 1px;
    right: auto;
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action .container {
  padding: 80px 80px 0 80px;
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  border-radius: 15px;
}

.search-page .call-to-action .container {
  position: relative;
  overflow: hidden;
  padding: 76px 80px;
  background: linear-gradient(135deg, #f8fafc 0%, #f4f7f9 55%, color-mix(in srgb, var(--accent-color), transparent 94%) 100%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(29, 48, 68, 0.08);
}

.search-page .call-to-action .container::before,
.search-page .call-to-action .container::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.search-page .call-to-action .container::before {
  width: 320px;
  height: 320px;
  top: -210px;
  right: -80px;
  background: color-mix(in srgb, var(--accent-color), transparent 91%);
}

.search-page .call-to-action .container::after {
  width: 190px;
  height: 190px;
  bottom: -145px;
  left: 12%;
  border: 32px solid color-mix(in srgb, var(--accent-color), transparent 95%);
}

.search-page .call-to-action .cta-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.search-page .call-to-action .search-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 22px;
  color: color-mix(in srgb, var(--accent-color), black 18%);
  background: color-mix(in srgb, var(--accent-color), transparent 91%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 82%);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.search-page .call-to-action .search-badge i {
  font-size: 16px;
}

.search-page .call-to-action .cta-content h2 {
  max-width: 980px;
  margin-bottom: 16px;
  color: #20364d;
  font-size: clamp(1.5rem, 2.0vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.search-page .call-to-action .search-intro {
  max-width: 980px;
  margin-bottom: 22px;
  color: #5d6b79;
  font-size: 1.08rem;
  line-height: 1.75;
}

.search-page .call-to-action .search-types {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.search-page .call-to-action .search-types span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  color: #425466;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #e3e9ee;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
}

.search-page .call-to-action .search-types i {
  color: var(--accent-color);
}

.search-page .call-to-action .msds-search-form {
  width: 100%;
}

.search-page .call-to-action .msds-search-box {
  display: flex;
  width: 100%;
  padding: 7px;
  background: #ffffff;
  border: 1px solid #dce4ea;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(31, 54, 78, 0.12);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.search-page .call-to-action .msds-search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent-color), transparent 25%);
  box-shadow: 0 18px 42px rgba(31, 54, 78, 0.14), 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.search-page .call-to-action .msds-search-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.search-page .call-to-action .msds-search-field>i {
  position: absolute;
  left: 23px;
  color: var(--accent-color);
  font-size: 20px;
  pointer-events: none;
}

.search-page .call-to-action .msds-search-field input {
  width: 100%;
  height: 62px;
  padding: 0 24px 0 62px;
  color: #263b50;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
}

.search-page .call-to-action .msds-search-field input::placeholder {
  color: #8a98a5;
}

.search-page .call-to-action .msds-search-box button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 176px;
  height: 62px;
  padding: 0 28px;
  color: var(--contrast-color);
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 14%));
  border: 0;
  border-radius: 13px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color), transparent 70%);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.search-page .call-to-action .msds-search-box button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-color), transparent 62%);
}

.search-page .call-to-action .msds-search-box button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color), transparent 68%);
  outline-offset: 3px;
}

.search-page .call-to-action .search-example {
  margin: 14px 4px 0;
  color: #7a8793;
  font-size: 13px;
}

.search-page .call-to-action .search-example i {
  margin-right: 6px;
  color: #d49b2c;
}

.search-page .call-to-action .search-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e1e8ed;
}

.search-page .call-to-action .search-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5f6e7c;
  font-size: 13px;
  font-weight: 600;
}

.search-page .call-to-action .search-trust i {
  color: var(--accent-color);
  font-size: 16px;
}

@media (max-width: 992px) {
  .call-to-action .container {
    padding: 60px 60px 0 60px;
  }

  .search-page .call-to-action .container {
    padding: 60px 48px;
  }
}

@media (max-width: 575px) {
  .call-to-action .container {
    padding: 25px 15px 0 15px;
    border-radius: 0;
  }

  .search-page .call-to-action .container {
    padding: 34px 20px;
    border-radius: 18px;
  }

  .search-page .call-to-action .cta-content {
    text-align: left;
    margin-bottom: 0;
  }

  .search-page .call-to-action .cta-content h2 {
    font-size: 1.8rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .search-page .call-to-action .search-intro {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .search-page .call-to-action .search-types {
    gap: 8px;
    margin-bottom: 24px;
  }

  .search-page .call-to-action .search-types span {
    padding: 7px 10px;
    font-size: 12.5px;
  }

  .search-page .call-to-action .msds-search-box {
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .search-page .call-to-action .msds-search-box:focus-within {
    border-color: transparent;
    box-shadow: none;
  }

  .search-page .call-to-action .msds-search-field {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dce4ea;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(31, 54, 78, 0.09);
  }

  .search-page .call-to-action .msds-search-field:focus-within {
    border-color: color-mix(in srgb, var(--accent-color), transparent 25%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .search-page .call-to-action .msds-search-field input {
    height: 58px;
    padding-right: 16px;
    font-size: 14.5px;
  }

  .search-page .call-to-action .msds-search-box button {
    width: 100%;
    height: 56px;
    min-width: 0;
    border-radius: 14px;
    font-size: 15px;
  }

  .search-page .call-to-action .search-trust {
    gap: 14px;
    margin-top: 24px;
  }

  .search-page .call-to-action .search-trust span {
    width: 100%;
    font-size: 12.5px;
  }

  .search-page .call-to-action .search-example {
    font-size: 12px;
  }
}

.call-to-action .cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.call-to-action .cta-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.call-to-action .cta-form .form-control {
  height: 50px;
  border-radius: 25px 0 0 25px;
  border: 1px solid var(--accent-color);
  padding-left: 20px;
}

.call-to-action .cta-form .form-control:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.call-to-action .cta-form .btn {
  height: 50px;
  border-radius: 0 25px 25px 0;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.call-to-action .cta-form .btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
}

@media (max-width: 575px) {
  .call-to-action .cta-form .btn {
    padding: 0 15px;
  }
}

@media (max-width: 991px) {
  .call-to-action .cta-content {
    text-align: center;
    margin-bottom: 2rem;
  }

  .call-to-action .cta-image {
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Services 3 Section
--------------------------------------------------------------*/
.services-3 .service-rows .row-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px 8px;
  border-top: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
  transition: all 0.3s ease;
}

.services-3 .service-rows .row-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
}

.services-3 .service-rows .row-item .n {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: color-mix(in srgb, var(--accent-color) 40%, transparent);
  min-width: 56px;
  transition: color 0.3s ease;
}

.services-3 .service-rows .row-item .body {
  flex: 1;
}

.services-3 .service-rows .row-item .body h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.services-3 .service-rows .row-item .body p {
  font-size: 16px;
  margin: 0;
}

.services-3 .service-rows .row-item>i {
  font-size: 24px;
  color: var(--default-color);
  transition: all 0.3s ease;
}

.services-3 .service-rows .row-item:hover {
  padding-left: 24px;
}

.services-3 .service-rows .row-item:hover .n {
  color: var(--accent-color);
}

.services-3 .service-rows .row-item:hover .body h3 {
  color: var(--accent-color);
}

.services-3 .service-rows .row-item:hover>i {
  color: var(--accent-color);
  transform: translate(4px, -4px);
}

@media (max-width: 576px) {
  .services-3 .service-rows .row-item {
    gap: 16px;
  }

  .services-3 .service-rows .row-item .n {
    font-size: 22px;
    min-width: 40px;
  }

  .services-3 .service-rows .row-item .body h3 {
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# Call To Action 2 Section
--------------------------------------------------------------*/
.call-to-action-2 {
  position: relative;
  overflow: hidden;
}

.call-to-action-2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-color) 28%, transparent), transparent 60%);
}

.call-to-action-2 .container {
  position: relative;
  z-index: 1;
}

.call-to-action-2 .cta-center .kicker {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent-color) 22%, transparent);
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.call-to-action-2 .cta-center h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.call-to-action-2 .cta-center p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 32px;
}

.call-to-action-2 .cta-center .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.call-to-action-2 .cta-center .btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

.call-to-action-2 .cta-center .note {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color) 80%, transparent);
}

.call-to-action-2 .cta-center .note i {
  color: var(--accent-color);
  margin-right: 6px;
}

@media (max-width: 768px) {
  .call-to-action-2 .cta-center h2 {
    font-size: 30px;
  }

  .call-to-action-2 .cta-center .btn-main {
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 100px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--background-color);
  position: relative;
  overflow: hidden;
}

.error-404::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70%;
  height: 150%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color), transparent 92%) 0%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
}

.error-404 .error-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px;
}

.error-404 .error-visual .error-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.error-404 .error-visual .error-code .digit {
  font-size: clamp(80px, 15vw, 160px);
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--heading-color);
  line-height: 1;
}

.error-404 .error-visual .error-code .digit.middle {
  color: var(--accent-color);
}

.error-404 .error-visual .error-code .digit.middle i {
  font-size: clamp(70px, 14vw, 140px);
}

.error-404 .error-visual .error-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.error-404 .error-visual .error-decoration .circle {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent-color), transparent 70%);
  animation: rotate 20s linear infinite;
}

.error-404 .error-visual .error-decoration .circle.circle-1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.error-404 .error-visual .error-decoration .circle.circle-2 {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  animation-direction: reverse;
  animation-duration: 15s;
}

.error-404 .error-visual .error-decoration .circle.circle-3 {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  animation-duration: 25s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.error-404 .error-content .error-badge {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  border-radius: 24px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.error-404 .error-content .error-heading {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 24px;
  line-height: 1.2;
}

.error-404 .error-content .error-text {
  font-size: 16px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 40px;
  max-width: 480px;
}

.error-404 .error-content .action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.error-404 .error-content .action-buttons .btn-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
}

.error-404 .error-content .action-buttons .btn-home:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  transform: translateX(-4px);
}

.error-404 .error-content .action-buttons .btn-home i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.error-404 .error-content .action-buttons .btn-home:hover i {
  transform: translateX(-4px);
}

.error-404 .error-content .action-buttons .btn-report {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background-color: transparent;
  color: var(--heading-color);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 75%);
}

.error-404 .error-content .action-buttons .btn-report:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.error-404 .error-content .action-buttons .btn-report i {
  font-size: 16px;
}

.error-404 .quick-navigation {
  background-color: var(--surface-color);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.error-404 .quick-navigation .nav-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 32px;
  text-align: center;
}

.error-404 .quick-navigation .nav-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  .error-404 .quick-navigation .nav-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .error-404 .quick-navigation .nav-links {
    grid-template-columns: 1fr;
  }
}

.error-404 .quick-navigation .nav-link-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--background-color);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.error-404 .quick-navigation .nav-link-item:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--default-color), transparent 92%);
}

.error-404 .quick-navigation .nav-link-item:hover .icon-wrap {
  background-color: var(--accent-color);
}

.error-404 .quick-navigation .nav-link-item:hover .icon-wrap i {
  color: var(--contrast-color);
}

.error-404 .quick-navigation .nav-link-item .icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  border-radius: 10px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.error-404 .quick-navigation .nav-link-item .icon-wrap i {
  font-size: 22px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.error-404 .quick-navigation .nav-link-item .link-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.error-404 .quick-navigation .nav-link-item .link-content .link-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
}

.error-404 .quick-navigation .nav-link-item .link-content .link-desc {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 992px) {
  .error-404 {
    padding: 80px 0;
  }

  .error-404 .error-visual {
    padding: 32px;
    margin-bottom: 32px;
  }

  .error-404 .error-content {
    text-align: center;
  }

  .error-404 .error-content .error-text {
    margin-left: auto;
    margin-right: auto;
  }

  .error-404 .error-content .action-buttons {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .error-404 .quick-navigation {
    padding: 24px;
  }

  .error-404 .error-content .action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .error-404 .error-content .action-buttons .btn-home,
  .error-404 .error-content .action-buttons .btn-report {
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
  font-size: 1rem;
  line-height: 1.75;
}

.privacy .policy-sidebar {
  position: sticky;
  top: 100px;
  padding: 30px;
  background-color: var(--surface-color);
  border-radius: 16px;
  box-shadow: 0 5px 30px color-mix(in srgb, var(--default-color), transparent 92%);
}

.privacy .policy-sidebar .effective-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  font-size: 0.85rem;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.privacy .policy-sidebar .effective-badge i {
  font-size: 1rem;
}

.privacy .policy-sidebar .policy-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 15px;
}

.privacy .policy-sidebar .sidebar-intro {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 30px;
  line-height: 1.6;
}

.privacy .policy-sidebar .policy-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 30px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-top: 25px;
}

.privacy .policy-sidebar .policy-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 10px;
  color: var(--default-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.privacy .policy-sidebar .policy-nav .nav-link:hover,
.privacy .policy-sidebar .policy-nav .nav-link.active {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
}

.privacy .policy-sidebar .policy-nav .nav-link:hover .nav-number,
.privacy .policy-sidebar .policy-nav .nav-link.active .nav-number {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.privacy .policy-sidebar .policy-nav .nav-link .nav-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.privacy .policy-sidebar .policy-nav .nav-link .nav-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.privacy .policy-sidebar .contact-card {
  padding: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 90%), color-mix(in srgb, var(--accent-color), transparent 95%));
  border-radius: 12px;
}

.privacy .policy-sidebar .contact-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 5px;
}

.privacy .policy-sidebar .contact-card p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.privacy .policy-sidebar .contact-card .contact-email {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.privacy .policy-sidebar .contact-card .contact-email i {
  font-size: 1.1rem;
}

.privacy .policy-sidebar .contact-card .contact-address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.privacy .policy-sidebar .contact-card .contact-address i {
  font-size: 1rem;
  margin-top: 2px;
}

.privacy .policy-content {
  padding-left: 20px;
}

.privacy .policy-content .policy-section {
  margin-bottom: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.privacy .policy-content .policy-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.privacy .policy-content .policy-section .section-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.privacy .policy-content .policy-section .section-header .section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
}

.privacy .policy-content .policy-section .section-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0;
}

.privacy .policy-content .policy-section .section-body p {
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.privacy .policy-content .policy-section .section-body p:last-child {
  margin-bottom: 0;
}

.privacy .policy-content .policy-section .section-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 25px 0 15px;
}

.privacy .policy-content .policy-section .section-body h3 i {
  margin-right: 10px;
  color: var(--accent-color);
}

.privacy .policy-content .policy-section .section-body ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.privacy .policy-content .policy-section .section-body ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.privacy .policy-content .policy-section .section-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: var(--accent-color);
  border-radius: 50%;
}

.privacy .policy-content .policy-section .section-body ul li:last-child {
  margin-bottom: 0;
}

.privacy .info-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
}

.privacy .info-card:last-child {
  margin-bottom: 0;
}

.privacy .info-card h3 {
  margin-top: 0 !important;
}

.privacy .usage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 25px;
}

.privacy .usage-grid .usage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.privacy .usage-grid .usage-item:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.privacy .usage-grid .usage-item i {
  font-size: 1.4rem;
  color: var(--accent-color);
}

.privacy .usage-grid .usage-item span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--heading-color);
}

.privacy .sharing-item {
  margin-bottom: 25px;
}

.privacy .sharing-item:last-child {
  margin-bottom: 0;
}

.privacy .sharing-item h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent-color);
  display: inline-block;
}

.privacy .security-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 25px;
}

.privacy .security-features .feature {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: var(--surface-color);
  border-radius: 12px;
  border-left: 4px solid var(--accent-color);
}

.privacy .security-features .feature .feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 10px;
  flex-shrink: 0;
}

.privacy .security-features .feature .feature-icon i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.privacy .security-features .feature .feature-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 5px;
}

.privacy .security-features .feature .feature-content p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.privacy .rights-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 25px;
}

.privacy .rights-list .right-item {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 3px 15px color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.3s ease;
}

.privacy .rights-list .right-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .rights-list .right-item i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.privacy .rights-list .right-item h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 5px;
}

.privacy .rights-list .right-item p {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.privacy .update-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 10px;
  margin-top: 25px;
}

.privacy .update-notice i {
  font-size: 1.3rem;
  color: var(--accent-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.privacy .update-notice span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

@media (max-width: 992px) {
  .privacy .policy-sidebar {
    position: relative;
    top: 0;
    margin-bottom: 40px;
  }

  .privacy .policy-sidebar .policy-nav {
    display: none;
  }

  .privacy .policy-content {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  .privacy .usage-grid {
    grid-template-columns: 1fr;
  }

  .privacy .rights-list {
    grid-template-columns: 1fr;
  }

  .privacy .policy-content .policy-section .section-header h2 {
    font-size: 1.4rem;
  }

  .privacy .policy-content .policy-section .section-header .section-number {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }

  .privacy .security-features .feature {
    flex-direction: column;
    text-align: center;
  }

  .privacy .security-features .feature .feature-icon {
    margin: 0 auto;
  }
}

@media print {
  .privacy .policy-sidebar {
    display: none;
  }

  .privacy .policy-content {
    padding-left: 0;
  }

  .privacy .policy-content .policy-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# MSDS Search Results
--------------------------------------------------------------*/
.search-page .msds-results {
  padding: 30px 0 88px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.search-page .msds-results>.container {
  width: 100%;
  max-width: none;
  padding-right: clamp(24px, 5vw, 96px);
  padding-left: clamp(24px, 5vw, 96px);
}

.search-page .results-heading {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
  text-align: center;
}

.search-page .results-heading h2 {
  margin: 0;
  color: #20364d;
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.search-page .results-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  color: #657586;
  background: #ffffff;
  border: 1px solid #dfe6eb;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 7px 20px rgba(31, 54, 78, 0.06);
}

.search-page .results-table {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dce4ea;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(31, 54, 78, 0.09);
}

.search-page .results-table-head,
.search-page .result-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.8fr) minmax(150px, 0.75fr) minmax(170px, 0.75fr);
  align-items: center;
  column-gap: 30px;
}

.search-page .results-table-head {
  min-height: 54px;
  padding: 12px 30px;
  color: #687887;
  background: linear-gradient(180deg, #f5f8fa 0%, #edf2f5 100%);
  border-bottom: 1px solid #dfe6eb;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.search-page .results-table-head>span {
  position: relative;
  min-width: 0;
}

.search-page .results-table-head>span:not(:last-child)::after,
.search-page .result-cell:not(:last-child)::after {
  content: "｜";
  position: absolute;
  top: 50%;
  right: -21px;
  color: #cbd5dc;
  font-weight: 400;
  transform: translateY(-50%);
}

.search-page .result-row {
  min-height: 88px;
  padding: 18px 30px;
  color: #33485c;
  background: #ffffff;
  border-top: 1px solid #e7ecef;
  transition: color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.search-page .result-row:nth-child(even) {
  background: #f7f9fb;
}

.search-page .result-row:hover,
.search-page .result-row:focus-visible {
  position: relative;
  z-index: 1;
  color: #20364d;
  background: color-mix(in srgb, var(--accent-color), white 95%);
  box-shadow: inset 4px 0 0 var(--accent-color);
  outline: 0;
}

.search-page .result-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.55;
}

.search-page .result-name-cn {
  color: #20364d;
  font-weight: 700;
}

.search-page .result-name-en {
  color: #607080;
  font-size: 14px;
}

.search-page .result-cas {
  color: #334b60;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
}

.search-page .result-action {
  gap: 7px;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 700;
}

.search-page .result-action i {
  transition: transform 0.2s ease;
}

.search-page .result-row:hover .result-action i {
  transform: translate(2px, -2px);
}

.search-page .results-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  color: #6b7885;
  font-size: 14px;
}

.search-page .results-pagination a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  color: #334b60;
  background: #fff;
  border: 1px solid #dfe6eb;
  border-radius: 9px;
  font-weight: 600;
}

.search-page .results-pagination a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.search-page .results-empty,
.search-page .search-guidance {
  padding: 54px 30px;
  text-align: center;
  background: #f8fafb;
  border: 1px solid #e2e8ed;
  border-radius: 18px;
}

.search-page .results-empty>i,
.search-page .guidance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 91%);
  border-radius: 18px;
  font-size: 28px;
}

.search-page .results-empty h2,
.search-page .search-guidance h2 {
  margin-bottom: 9px;
  color: #20364d;
  font-size: 1.35rem;
}

.search-page .results-empty p,
.search-page .search-guidance p {
  margin: 0;
  color: #697887;
}

.search-page .results-empty a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  color: var(--accent-color);
  font-weight: 700;
}

@media (max-width: 767px) {
  .search-page .msds-results {
    padding: 16px 0 54px;
  }

  .search-page .msds-results>.container {
    padding-right: 14px;
    padding-left: 14px;
  }

  .search-page .results-heading {
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    text-align: center;
  }

  .search-page .results-heading h2 {
    font-size: 1.55rem;
  }

  .search-page .results-table {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .search-page .results-table-head {
    display: none;
  }

  .search-page .results-table-body {
    display: grid;
    gap: 14px;
  }

  .search-page .result-row,
  .search-page .result-row:nth-child(even) {
    display: block;
    min-height: 0;
    padding: 19px;
    background: #fff;
    border: 1px solid #e1e7eb;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(31, 54, 78, 0.07);
  }

  .search-page .result-row:hover,
  .search-page .result-row:focus-visible {
    box-shadow: 0 12px 32px rgba(31, 54, 78, 0.11), inset 4px 0 0 var(--accent-color);
  }

  .search-page .result-cell {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e5eaee;
    font-size: 13.5px;
    text-align: left;
  }

  .search-page .result-cell:not(:last-child)::after {
    display: none;
  }

  .search-page .result-cell::before {
    content: attr(data-label);
    color: #85919d;
    font-size: 12px;
    font-weight: 600;
  }

  .search-page .result-name-cn {
    padding-top: 0;
    font-size: 15px;
  }

  .search-page .result-action {
    display: flex;
    justify-content: center;
    padding-top: 13px;
    padding-bottom: 0;
    border-bottom: 0;
    text-align: center;
  }

  .search-page .result-action::before {
    content: "";
  }

  .search-page .results-pagination {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/*--------------------------------------------------------------
# MSDS PDF Detail Page
--------------------------------------------------------------*/
.msds-detail-page .msds-document {
  position: relative;
  overflow: hidden;
  padding: 38px 0 82px;
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--accent-color), transparent 93%) 0, transparent 25%),
    radial-gradient(circle at 94% 24%, rgba(49, 89, 126, 0.06) 0, transparent 26%),
    linear-gradient(180deg, #f8fafc 0%, #f3f6f9 100%);
}

.msds-detail-page .msds-document-heading {
  max-width: 1040px;
  margin: 0 auto 30px;
  text-align: center;
}

.msds-detail-page .msds-document-heading h1 {
  margin-bottom: 18px;
  color: #1d344a;
  font-size: clamp(1.475rem, calc(3vw - 0.375rem), 2.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.msds-detail-page .document-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}

.msds-detail-page .document-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: #5f7080;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(217, 226, 233, 0.9);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.msds-detail-page .document-meta i {
  flex: 0 0 auto;
  color: var(--accent-color);
}

.msds-detail-page .language-cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 30px;
}

.msds-detail-page .language-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 218px;
  min-height: 58px;
  padding: 12px 20px;
  color: #29445d;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e1e8;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(31, 54, 78, 0.07);
  transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.msds-detail-page a.language-card:hover {
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 30%);
  box-shadow: 0 14px 32px rgba(31, 54, 78, 0.11);
  transform: translateY(-2px);
}

.msds-detail-page .language-card.active {
  color: var(--contrast-color);
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #9c372d 20%));
  border-color: var(--accent-color);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent-color), transparent 68%);
}

.msds-detail-page .language-card.disabled {
  color: #9aa5ae;
  background: rgba(235, 239, 242, 0.82);
  border-color: #dfe5e9;
  box-shadow: none;
  cursor: not-allowed;
  user-select: none;
}

.msds-detail-page .language-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 8px;
  font-size: 17px;
}

.msds-detail-page .language-card.active .language-icon {
  color: var(--contrast-color);
  background: rgba(255, 255, 255, 0.18);
}

.msds-detail-page .language-card.disabled .language-icon {
  color: #929da7;
  background: #e5e9ec;
}

.msds-detail-page .language-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.msds-detail-page .language-copy strong {
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.msds-detail-page .language-copy small {
  color: #909ba5;
  font-size: 11px;
}

.msds-detail-page .pdf-panel {
  width: min(56vw, 920px);
  margin: 0 auto;
  overflow: hidden;
  background: #e7ebee;
  border: 1px solid #d3dce3;
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(27, 48, 68, 0.16);
}

.msds-detail-page .pdf-viewer {
  display: block;
  width: 100%;
  height: min(78vh, 980px);
  min-height: 660px;
  background: #e9edf0;
  border: 0;
}

.msds-detail-page .pdf-unavailable {
  padding: 80px 24px;
  text-align: center;
}

.msds-detail-page .pdf-unavailable>i {
  color: #9aa5ae;
  font-size: 52px;
}

.msds-detail-page .pdf-unavailable h2 {
  margin: 16px 0 8px;
  color: #30475b;
  font-size: 1.4rem;
}

.msds-detail-page .pdf-unavailable a {
  display: inline-block;
  margin-top: 13px;
  padding: 10px 18px;
  color: var(--contrast-color);
  background: var(--accent-color);
  border-radius: 9px;
  font-weight: 700;
}

.msds-detail-page .msds-authoring-cta {
  padding: 82px 0;
}

.msds-detail-page .msds-authoring-cta h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  font-size: clamp(1.625rem, calc(3vw - 0.375rem), 2.275rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.msds-detail-page .msds-authoring-cta p {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto 32px;
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.8;
}

.msds-detail-page .msds-authoring-cta .btn {
  min-width: 148px;
  padding: 12px 28px;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .msds-detail-page .msds-document {
    padding: 22px 0 0;
  }

  .msds-detail-page .msds-document-heading {
    margin-bottom: 24px;
  }

  .msds-detail-page .msds-document-heading h1 {
    margin-bottom: 14px;
    font-size: 1.375rem;
  }

  .msds-detail-page .document-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .msds-detail-page .document-meta span {
    justify-content: center;
    width: 100%;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12.5px;
  }

  .msds-detail-page .language-cards {
    gap: 9px;
    width: 100%;
    margin-bottom: 24px;
  }

  .msds-detail-page .language-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 54px;
    padding: 10px 9px;
  }

  .msds-detail-page .language-icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .msds-detail-page .pdf-panel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .msds-detail-page .pdf-viewer {
    height: 80svh;
    min-height: 600px;
  }

  .msds-detail-page .msds-authoring-cta {
    padding: 56px 0;
  }

  .msds-detail-page .msds-authoring-cta h2 {
    margin-bottom: 16px;
    font-size: 1.375rem;
    line-height: 1.3;
  }

  .msds-detail-page .msds-authoring-cta p {
    margin-bottom: 26px;
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .msds-detail-page .msds-authoring-cta .cta-buttons .btn {
    display: inline-block;
    width: auto;
    min-width: 138px;
    margin: 0;
    padding: 11px 24px;
    font-size: 0.95rem;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .terms-intro {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.terms-of-service .terms-intro .revision-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: 15px;
}

.terms-of-service .terms-intro .revision-tag i {
  font-size: 1rem;
}

.terms-of-service .terms-intro h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.terms-of-service .terms-intro p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 1.05rem;
  margin: 0;
}

.terms-of-service .terms-intro .utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.9rem;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  margin-left: 10px;
  transition: all 0.3s;
}

.terms-of-service .terms-intro .utility-link:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.terms-of-service .terms-sidebar {
  position: sticky;
  top: 100px;
}

.terms-of-service .terms-sidebar .sidebar-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent-color);
}

.terms-of-service .terms-sidebar .toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.terms-of-service .terms-sidebar .toc-list li {
  margin-bottom: 2px;
}

.terms-of-service .terms-sidebar .toc-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: all 0.3s;
}

.terms-of-service .terms-sidebar .toc-list li a .toc-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-color);
  min-width: 24px;
  font-family: var(--heading-font);
}

.terms-of-service .terms-sidebar .toc-list li a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
}

.terms-of-service .terms-sidebar .sidebar-cta {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.terms-of-service .terms-sidebar .sidebar-cta .cta-icon {
  width: 48px;
  height: 48px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 88%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.terms-of-service .terms-sidebar .sidebar-cta .cta-icon i {
  font-size: 1.2rem;
  color: var(--accent-color);
}

.terms-of-service .terms-sidebar .sidebar-cta h6 {
  font-size: 1rem;
  margin-bottom: 8px;
}

.terms-of-service .terms-sidebar .sidebar-cta p {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 12px;
}

.terms-of-service .terms-sidebar .sidebar-cta .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-color);
  transition: gap 0.3s;
}

.terms-of-service .terms-sidebar .sidebar-cta .cta-link:hover {
  gap: 10px;
}

@media (max-width: 992px) {
  .terms-of-service .terms-sidebar {
    position: static;
    margin-bottom: 10px;
  }
}

.terms-of-service .terms-main .term-card {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 24px;
  transition: box-shadow 0.3s;
}

.terms-of-service .terms-main .term-card:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 92%);
}

.terms-of-service .terms-main .term-card:last-child {
  margin-bottom: 0;
}

.terms-of-service .terms-main .term-card .card-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.terms-of-service .terms-main .term-card .card-heading .heading-num {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  font-family: var(--heading-font);
}

.terms-of-service .terms-main .term-card .card-heading h3 {
  font-size: 1.4rem;
  margin: 0;
}

.terms-of-service .terms-main .term-card p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.75;
  margin-bottom: 16px;
}

.terms-of-service .terms-main .term-card p:last-child {
  margin-bottom: 0;
}

.terms-of-service .terms-main .term-card .note-banner {
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 10px;
}

.terms-of-service .terms-main .term-card .note-banner p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
}

.terms-of-service .terms-main .term-card .note-info {
  background-color: color-mix(in srgb, var(--accent-color), transparent 93%);
  border-left: 3px solid var(--accent-color);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.terms-of-service .terms-main .term-card .note-info>i {
  color: var(--accent-color);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.terms-of-service .terms-main .term-card .note-warning {
  background-color: color-mix(in srgb, #ffc107, transparent 92%);
  border-top: 3px solid color-mix(in srgb, #ffc107, #000 15%);
}

.terms-of-service .terms-main .term-card .note-warning .banner-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.terms-of-service .terms-main .term-card .note-warning .banner-header i {
  color: color-mix(in srgb, #ffc107, #000 20%);
  font-size: 1.2rem;
}

.terms-of-service .terms-main .term-card .note-warning .banner-header strong {
  font-size: 1rem;
  color: var(--heading-color);
}

.terms-of-service .terms-main .term-card .note-warning p {
  font-size: 0.93rem;
  margin: 0;
}

.terms-of-service .terms-main .term-card .check-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.terms-of-service .terms-main .term-card .check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .terms-main .term-card .check-list li:last-child {
  border-bottom: none;
}

.terms-of-service .terms-main .term-card .check-list li i {
  color: var(--accent-color);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.terms-of-service .terms-main .term-card .restricted-grid {
  margin-top: 16px;
}

.terms-of-service .terms-main .term-card .restricted-grid .restricted-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background-color: color-mix(in srgb, #dc3545, transparent 96%);
  border-radius: 8px;
  margin-bottom: 10px;
}

.terms-of-service .terms-main .term-card .restricted-grid .restricted-item:last-child {
  margin-bottom: 0;
}

.terms-of-service .terms-main .term-card .restricted-grid .restricted-item i {
  color: #dc3545;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.terms-of-service .terms-main .term-card .restricted-grid .restricted-item span {
  font-size: 0.93rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.terms-of-service .terms-main .term-card .warranty-box {
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 10px;
}

.terms-of-service .terms-main .term-card .warranty-box h6 {
  font-size: 0.95rem;
  margin-bottom: 14px;
  color: var(--heading-color);
}

.terms-of-service .terms-main .term-card .warranty-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .terms-main .term-card .warranty-box ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 0.93rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.terms-of-service .terms-main .term-card .warranty-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .terms-main .term-card .warranty-box ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: 700;
}

@media (max-width: 576px) {
  .terms-of-service .terms-main .term-card {
    padding: 22px 18px;
  }

  .terms-of-service .terms-main .term-card .card-heading {
    gap: 12px;
  }

  .terms-of-service .terms-main .term-card .card-heading .heading-num {
    width: 34px;
    height: 34px;
    font-size: 0.75rem;
  }

  .terms-of-service .terms-main .term-card .card-heading h3 {
    font-size: 1.2rem;
  }
}

.terms-of-service .terms-footer {
  margin-top: 60px;
}

.terms-of-service .terms-footer .footer-card {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 20%) 100%);
  border-radius: 16px;
  padding: 50px 40px;
  color: var(--contrast-color);
}

.terms-of-service .terms-footer .footer-card .footer-icon {
  width: 64px;
  height: 64px;
  background-color: color-mix(in srgb, var(--contrast-color), transparent 80%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.terms-of-service .terms-footer .footer-card .footer-icon i {
  font-size: 1.6rem;
  color: var(--contrast-color);
}

.terms-of-service .terms-footer .footer-card h4 {
  color: var(--contrast-color);
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.terms-of-service .terms-footer .footer-card p {
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  margin-bottom: 24px;
  font-size: 1rem;
}

.terms-of-service .terms-footer .footer-card .footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background-color: var(--contrast-color);
  color: var(--accent-color);
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s;
}

.terms-of-service .terms-footer .footer-card .footer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, #000, transparent 70%);
}

@media (max-width: 576px) {
  .terms-of-service .terms-footer .footer-card {
    padding: 35px 25px;
  }

  .terms-of-service .terms-footer .footer-card h4 {
    font-size: 1.3rem;
  }
}

@media print {

  .terms-of-service .terms-footer,
  .terms-of-service .terms-sidebar .sidebar-cta,
  .terms-of-service .terms-intro .utility-link {
    display: none;
  }

  .terms-of-service .term-card {
    page-break-inside: avoid;
  }
}