/* Minification failed. Returning unminified contents. (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (37,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-white' (40,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (40,65): run-time error CSS1039: Token not allowed after unary operator: '-transition' (41,23): run-time error CSS1039: Token not allowed after unary operator: '-primary' (45,38): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (48,29): run-time error CSS1039: Token not allowed after unary operator: '-primary' (49,40): run-time error CSS1039: Token not allowed after unary operator: '-primary' (50,40): run-time error CSS1039: Token not allowed after unary operator: '-bg-light' (57,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (65,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (88,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (92,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (93,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (97,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (98,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (103,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (104,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (107,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (111,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (112,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (118,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (120,43): run-time error CSS1039: Token not allowed after unary operator: '-primary' (120,73): run-time error CSS1039: Token not allowed after unary operator: '-primary' (138,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (160,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (166,56): run-time error CSS1039: Token not allowed after unary operator: '-primary' (171,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (180,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (181,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (183,47): run-time error CSS1039: Token not allowed after unary operator: '-primary' (187,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (193,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (196,42): run-time error CSS1039: Token not allowed after unary operator: '-primary' (243,57): run-time error CSS1039: Token not allowed after unary operator: '-primary' (245,57): run-time error CSS1039: Token not allowed after unary operator: '-primary' (250,35): run-time error CSS1039: Token not allowed after unary operator: '-primary' (260,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (261,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (271,70): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (272,51): run-time error CSS1039: Token not allowed after unary operator: '-text' (273,69): run-time error CSS1039: Token not allowed after unary operator: '-primary' (297,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (298,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (302,39): run-time error CSS1039: Token not allowed after unary operator: '-primary' (309,54): run-time error CSS1039: Token not allowed after unary operator: '-primary' (309,97): run-time error CSS1039: Token not allowed after unary operator: '-primary' (314,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (315,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (329,80): run-time error CSS1039: Token not allowed after unary operator: '-radius' (349,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (351,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (382,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (383,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (393,39): run-time error CSS1039: Token not allowed after unary operator: '-primary' (400,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (401,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (412,67): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (413,40): run-time error CSS1039: Token not allowed after unary operator: '-primary' (414,51): run-time error CSS1039: Token not allowed after unary operator: '-text' (415,66): run-time error CSS1039: Token not allowed after unary operator: '-primary' (418,89): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (420,72): run-time error CSS1039: Token not allowed after unary operator: '-text' (421,64): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (422,48): run-time error CSS1039: Token not allowed after unary operator: '-radius' (429,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (430,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (438,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (445,68): run-time error CSS1039: Token not allowed after unary operator: '-text' (446,53): run-time error CSS1039: Token not allowed after unary operator: '-primary' (453,36): run-time error CSS1039: Token not allowed after unary operator: '-border' (453,66): run-time error CSS1039: Token not allowed after unary operator: '-radius' (460,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (464,62): run-time error CSS1039: Token not allowed after unary operator: '-primary' (467,87): run-time error CSS1039: Token not allowed after unary operator: '-bg-light' (468,67): run-time error CSS1039: Token not allowed after unary operator: '-primary' (468,127): run-time error CSS1039: Token not allowed after unary operator: '-primary' (475,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (476,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (479,32): run-time error CSS1039: Token not allowed after unary operator: '-primary' (483,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (484,63): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (485,48): run-time error CSS1039: Token not allowed after unary operator: '-primary' (487,49): run-time error CSS1039: Token not allowed after unary operator: '-bg-light' (487,85): run-time error CSS1039: Token not allowed after unary operator: '-border' (494,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (495,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (498,32): run-time error CSS1039: Token not allowed after unary operator: '-primary' (500,31): run-time error CSS1039: Token not allowed after unary operator: '-primary' (502,35): run-time error CSS1039: Token not allowed after unary operator: '-primary' (505,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (506,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (511,56): run-time error CSS1039: Token not allowed after unary operator: '-primary' (512,70): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (518,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (527,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (529,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (532,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (533,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (538,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (545,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light' (546,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (547,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (552,32): run-time error CSS1039: Token not allowed after unary operator: '-primary' (559,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (566,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (577,34): run-time error CSS1039: Token not allowed after unary operator: '-primary' (578,39): run-time error CSS1039: Token not allowed after unary operator: '-text' (593,37): run-time error CSS1039: Token not allowed after unary operator: '-primary' (600,37): run-time error CSS1039: Token not allowed after unary operator: '-primary' (603,38): run-time error CSS1039: Token not allowed after unary operator: '-primary' (613,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (615,43): run-time error CSS1039: Token not allowed after unary operator: '-primary' (618,38): run-time error CSS1039: Token not allowed after unary operator: '-primary' (625,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (643,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (651,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (660,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (678,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (683,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (699,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (703,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (710,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (714,47): run-time error CSS1039: Token not allowed after unary operator: '-primary' (727,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (737,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (755,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (836,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (849,39): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (855,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (861,52): run-time error CSS1039: Token not allowed after unary operator: '-radius' (861,81): run-time error CSS1039: Token not allowed after unary operator: '-border' (862,57): run-time error CSS1039: Token not allowed after unary operator: '-primary' (876,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (886,39): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (891,79): run-time error CSS1039: Token not allowed after unary operator: '-radius' (900,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (901,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (910,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (913,63): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (914,45): run-time error CSS1039: Token not allowed after unary operator: '-primary' (915,44): run-time error CSS1039: Token not allowed after unary operator: '-text' (920,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-light' (921,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (926,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (937,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (945,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (951,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (951,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (960,86): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (963,77): run-time error CSS1039: Token not allowed after unary operator: '-radius' (967,38): run-time error CSS1039: Token not allowed after unary operator: '-primary' (967,68): run-time error CSS1039: Token not allowed after unary operator: '-border' (968,61): run-time error CSS1039: Token not allowed after unary operator: '-primary' (968,91): run-time error CSS1039: Token not allowed after unary operator: '-primary' (969,49): run-time error CSS1039: Token not allowed after unary operator: '-primary' (969,92): run-time error CSS1039: Token not allowed after unary operator: '-primary' (986,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (998,34): run-time error CSS1039: Token not allowed after unary operator: '-primary' (999,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1001,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (1011,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1019,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1022,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1024,43): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1050,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (1061,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (1068,56): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1115,45): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1115,61): run-time error CSS1039: Token not allowed after unary operator: '-primary-light' (1137,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (1152,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1160,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1169,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1169,62): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1184,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1245,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1253,48): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1291,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1298,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1310,50): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1310,66): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1331,21): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1345,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1357,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1372,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (1399,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1477,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1486,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1524,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1531,83): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1532,44): run-time error CSS1039: Token not allowed after unary operator: '-text' (1534,47): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1542,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1542,39): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1546,77): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1546,91): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1547,68): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1548,49): run-time error CSS1039: Token not allowed after unary operator: '-text' (1561,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1579,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1580,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow' (1587,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1590,35): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1597,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1602,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1604,39): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1606,55): run-time error CSS1039: Token not allowed after unary operator: '-border' (1612,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (1613,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1615,45): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1622,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (1629,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1637,54): run-time error CSS1039: Token not allowed after unary operator: '-text' (1646,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1649,49): run-time error CSS1039: Token not allowed after unary operator: '-text' (1654,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1657,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (1674,25): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1682,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1691,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (1694,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (1697,70): run-time error CSS1039: Token not allowed after unary operator: '-text' (1700,37): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1701,46): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1710,32): run-time error CSS1039: Token not allowed after unary operator: '-border' (1733,82): run-time error CSS1039: Token not allowed after unary operator: '-border' (1740,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (1748,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-grey' (1753,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1762,71): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1763,46): run-time error CSS1039: Token not allowed after unary operator: '-text' (1764,46): run-time error CSS1039: Token not allowed after unary operator: '-text' (1765,34): run-time error CSS1039: Token not allowed after unary operator: '-bg-light' (1765,66): run-time error CSS1039: Token not allowed after unary operator: '-radius' (1781,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1789,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1794,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (1800,44): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1801,33): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1809,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1815,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (1817,31): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1825,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1826,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1827,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1828,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1829,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1830,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1831,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1832,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1833,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1838,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (1840,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (1863,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (1874,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1876,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1884,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (1889,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (1901,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1903,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (1906,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1976,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (1995,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (2027,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2032,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2037,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (2042,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (2044,63): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (2045,45): run-time error CSS1039: Token not allowed after unary operator: '-text' (2049,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2050,30): run-time error CSS1039: Token not allowed after unary operator: '-border' (2056,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2060,69): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (2078,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (2078,83): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (2080,46): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2084,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (2086,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (2092,56): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2098,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2100,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2104,67): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (2107,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (2126,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-gradient' (2160,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2161,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2170,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2171,52): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2182,60): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (2196,35): run-time error CSS1039: Token not allowed after unary operator: '-border' (2202,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (2209,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (2224,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (2243,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2255,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (2260,60): run-time error CSS1039: Token not allowed after unary operator: '-bg-white' (2268,28): run-time error CSS1039: Token not allowed after unary operator: '-border' (2280,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-light' (2315,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-light' (2336,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2354,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2378,57): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2383,17): run-time error CSS1039: Token not allowed after unary operator: '-text-head' (2390,17): run-time error CSS1039: Token not allowed after unary operator: '-text' (2403,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2426,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2426,70): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2513,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2521,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2521,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2609,68): run-time error CSS1039: Token not allowed after unary operator: '-primary' */ /* ============================================================ COZMAA.COM — Main Stylesheet Brand colors extracted exactly from httpdocs/css/style.css Primary: #99489d | Body text: #787878 | Link hover: #99489d Fonts: Poppins, Roboto ============================================================ */ /* ---- CSS Variables ---------------------------------------- */ :root { --primary: #99489d; --primary-dark: #7a3780; --primary-light: #b96dbd; --secondary: #49b0c1; /* accent teal used in borders/decor */ --text: #787878; --text-dark: #333333; --text-head: #444444; --bg-white: #ffffff; --bg-light: #f8f9fa; --bg-grey: #f3f3f3; --border: #e5e5e5; --shadow: 0 2px 15px rgba(0,0,0,.09); --radius: 6px; --transition: all 0.25s ease; } /* ---- Reset / Base ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--text); background-color: var(--bg-white); } a { color: var(--text); text-decoration: none; transition: var(--transition); } a:hover { color: var(--primary); text-decoration: none; } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { color: var(--text-head); font-weight: 600; margin-top: 0; } /* ---- Utility ---------------------------------------------- */ .theme-color { color: var(--primary); } .theme-bg { background-color: var(--primary); } .section-bg { background-color: var(--bg-light); } .h-sub { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); margin-bottom: 6px; } .h-decor { display: block; width: 50px; height: 3px; background: var(--primary); margin: 10px auto 20px; border-radius: 2px; } .h-decor.left { margin-left: 0; } /* ---- Section ---------------------------------------------- */ .section { padding: 60px 0; } .section.section-sm { padding: 40px 0; } .section.section-lg { padding: 90px 0; } /* ---- Buttons ---------------------------------------------- */ .btn { display: inline-block; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; padding: 11px 28px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } .btn-outline-primary { background-color: transparent; border-color: var(--primary); color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary); color: #fff; } .btn-secondary-custom { background-color: var(--secondary); border-color: var(--secondary); color: #fff; } .btn-white { background-color: #fff; border-color: #fff; color: var(--primary); } .btn-white:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; } .btn-lg { padding: 14px 36px; font-size: 15px; } .btn-sm { padding: 7px 18px; font-size: 13px; } .btn-block { display: block; width: 100%; } /* ============================================================ HEADER ============================================================ */ .header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.1); } /* Top bar */ .header-topline { background-color: var(--primary); padding: 7px 0; font-size: 13px; color: #fff; } .header-topline a { color: #fff; } .header-topline a:hover { color: rgba(255,255,255,.8); } .header-phone { display: flex; align-items: center; gap: 6px; margin-right: 20px; font-size: 13px; } .header-phone i { font-size: 14px; } .header-social a { color: #fff; font-size: 16px; margin-left: 10px; } .header-social a:hover { color: rgba(255,255,255,.75); } /* Main nav row */ .header-main { padding: 12px 0; } .header-logo img { max-height: 65px; width: auto; } /* Nav */ .navbar { padding: 0; } .navbar-nav .nav-link { font-size: 14px; font-weight: 600; color: var(--text-dark); padding: 8px 14px !important; letter-spacing: 0.2px; transition: color .2s; } .navbar-nav .nav-link:hover, .navbar-nav .nav-item.active > .nav-link { color: var(--primary); } .dropdown-menu { border: none; box-shadow: 0 5px 25px rgba(0,0,0,.12); border-radius: var(--radius); min-width: 200px; padding: 8px 0; top: calc(100% + 4px); } .dropdown-item { font-size: 13px; font-weight: 500; padding: 8px 18px; color: var(--text-dark); transition: var(--transition); } .dropdown-item:hover { background-color: var(--primary); color: #fff; } /* Book Appointment button in nav */ .btn-book-nav { background-color: var(--primary); color: #fff !important; border-radius: 4px; padding: 8px 18px !important; font-size: 13px; } .btn-book-nav:hover { background-color: var(--primary-dark); color: #fff !important; } /* Mobile toggler */ .navbar-toggler { border: 2px solid var(--primary); border-radius: 4px; padding: 5px 9px; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2399489d' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ============================================================ HERO SLIDER ============================================================ */ .main-slider { position: relative; overflow: hidden; } .main-slider .slide { position: relative; min-height: 520px; } .main-slider .img--holder { position: absolute; inset: 0; background-size: cover; background-position: center; } .main-slider .img--holder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%); } .slide-content { position: relative; z-index: 2; display: flex; align-items: center; min-height: 520px; padding: 60px 0; } .slide-txt1 { font-size: clamp(26px, 4vw, 48px); font-weight: 700; color: #fff; line-height: 1.2; text-shadow: 0 2px 6px rgba(0,0,0,.35); margin-bottom: 16px; } .slide-txt2 { font-size: 16px; color: rgba(255,255,255,.9); max-width: 560px; margin-bottom: 28px; line-height: 1.7; } .slide-btn .btn { margin-right: 10px; } /* Slick arrows */ .slick-prev, .slick-next { width: 44px; height: 44px; background: rgba(153,72,157,.7); border-radius: 50%; z-index: 5; } .slick-prev:hover, .slick-next:hover { background: var(--primary); } .slick-dots li button:before { color: #fff; font-size: 10px; } .slick-dots li.slick-active button:before { color: var(--primary); } /* ============================================================ STATS COUNTER ============================================================ */ .stats-section { background: var(--primary); padding: 50px 0; } .stat-item { text-align: center; color: #fff; } .stat-number { font-size: 42px; font-weight: 700; line-height: 1; } .stat-label { font-size: 14px; font-weight: 500; opacity: .85; margin-top: 6px; } /* ============================================================ SERVICE CARDS ============================================================ */ .service-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .25s, box-shadow .25s; height: 100%; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,.13); } .service-card-img { height: 200px; overflow: hidden; } .service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .service-card:hover .service-card-img img { transform: scale(1.05); } .service-card-body { padding: 20px; } .service-card-title { font-size: 17px; font-weight: 600; color: var(--text-head); margin-bottom: 8px; } .service-card-text { font-size: 14px; color: var(--text); line-height: 1.65; } .service-card-link { font-size: 13px; font-weight: 600; color: var(--primary); margin-top: 12px; display: inline-block; } .service-card-link:hover { text-decoration: underline; } /* ============================================================ TREATMENT DETAIL PAGE ============================================================ */ .treatment-hero { position: relative; min-height: 320px; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; } .treatment-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.35)); } .treatment-hero-content { position: relative; z-index: 1; } .treatment-hero h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 700; color: #fff; margin-bottom: 14px; } .treatment-section { padding: 50px 0; } .treatment-info-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; margin-bottom: 25px; } .treatment-info-card h3 { color: var(--primary); margin-bottom: 12px; } /* ============================================================ GALLERY ============================================================ */ .gallery-filter { margin-bottom: 30px; } .gallery-filter .btn { margin: 4px; border-radius: 6px; font-size: 13px; } .gallery-filter .btn.active { background-color: var(--primary); color: #fff; border-color: var(--primary); } .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; } .gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .4s; } .gallery-item:hover img { transform: scale(1.06); } .gallery-item-overlay { position: absolute; inset: 0; background: rgba(153,72,157,.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; } .gallery-item:hover .gallery-item-overlay { opacity: 1; } .gallery-item-overlay i { font-size: 28px; color: #fff; } .before-after-pair { position: relative; overflow: hidden; border-radius: var(--radius); } .before-after-pair .ba-label { position: absolute; top: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 3px; } .ba-label.before { left: 10px; } .ba-label.after { right: 10px; } /* Gallery grid (before/after layout) */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .gallery-grid-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; } .gallery-before-after { display: flex; height: 220px; } .gallery-before-after .img-before, .gallery-before-after .img-after { flex: 1; width: 50%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .gallery-before-after .img-before { border-right: 2px solid #fff; } .gallery-grid-item:hover .gallery-before-after img { transform: scale(1.05); } .gallery-overlay { position: absolute; inset: 0; background: rgba(153,72,157,.65); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; color: #fff; } .gallery-grid-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { font-size: 26px; margin-bottom: 8px; } .gallery-caption { font-size: 13px; font-weight: 600; text-align: center; padding: 0 12px; } .btn-filter { padding: 6px 18px; border: 1px solid var(--primary); color: var(--primary); border-radius: 6px; font-size: 13px; margin: 4px; background: transparent; transition: background .2s, color .2s; text-decoration: none; display: inline-block; } .btn-filter:hover, .btn-filter.active { background: var(--primary); color: #fff; } /* ============================================================ BLOG / ARTICLES ============================================================ */ .blog-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; height: 100%; transition: transform .25s, box-shadow .25s; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.12); } .blog-card-img { height: 200px; overflow: hidden; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .blog-card:hover .blog-card-img img { transform: scale(1.05); } .blog-card-body { padding: 20px; } .blog-card-meta { font-size: 12px; color: #aaa; margin-bottom: 8px; } .blog-card-title { font-size: 16px; font-weight: 600; color: var(--text-head); margin-bottom: 8px; line-height: 1.4; } .blog-card-title a:hover { color: var(--primary); } .blog-card-excerpt { font-size: 13px; color: var(--text); line-height: 1.65; } .blog-card-link { font-size: 13px; font-weight: 600; color: var(--primary); margin-top: 12px; display: inline-block; } /* Blog detail */ .blog-detail-title { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; color: var(--text-head); line-height: 1.3; } .blog-detail-meta { font-size: 13px; color: #aaa; margin-bottom: 24px; } .blog-detail-content { font-size: 15px; line-height: 1.85; color: var(--text); } .blog-detail-content h2, .blog-detail-content h3 { color: var(--text-head); margin-top: 30px; } .blog-detail-content img { border-radius: var(--radius); } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonial-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; position: relative; margin: 10px; } .testimonial-card::before { content: '\201C'; font-size: 70px; color: var(--primary); opacity: .15; position: absolute; top: 10px; left: 20px; line-height: 1; font-family: Georgia, serif; } .testimonial-text { font-size: 14px; line-height: 1.8; color: var(--text); margin-bottom: 18px; } .testimonial-author { font-weight: 600; color: var(--primary); font-size: 14px; } .testimonial-disease { font-size: 12px; color: #aaa; } .stars { color: #f5a623; font-size: 14px; margin-bottom: 10px; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .faq-question { background: #fff; padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--text-head); display: flex; justify-content: space-between; align-items: center; transition: background .2s; } .faq-question:hover, .faq-question.active { background: var(--primary); color: #fff; } .faq-question.active i { transform: rotate(180deg); } .faq-question i { transition: transform .3s; } .faq-answer { padding: 16px 20px; font-size: 14px; line-height: 1.8; background: var(--bg-light); display: none; } .faq-group-title { font-size: 18px; font-weight: 700; color: var(--primary); margin: 30px 0 12px; border-left: 4px solid var(--primary); padding-left: 12px; } /* ============================================================ OFFERS ============================================================ */ .offer-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; height: 100%; border-top: 4px solid var(--primary); } .offer-card-img img { width: 100%; height: 200px; object-fit: cover; } .offer-card-body { padding: 22px; } .offer-badge { background: var(--primary); color: #fff; font-size: 20px; font-weight: 700; padding: 8px 18px; border-radius: 4px; display: inline-block; margin-bottom: 12px; } .offer-title { font-size: 18px; font-weight: 700; color: var(--text-head); margin-bottom: 6px; } .offer-subtitle { font-size: 14px; color: var(--primary); font-weight: 600; margin-bottom: 10px; } .offer-dates { font-size: 12px; color: #aaa; margin-top: 10px; } .offer-code { font-size: 13px; background: var(--bg-light); border: 1px dashed var(--border); border-radius: 4px; padding: 6px 12px; display: inline-block; margin-top: 8px; font-weight: 600; } /* ============================================================ CONTACT ============================================================ */ .branch-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 25px; height: 100%; border-top: 3px solid var(--primary); } .branch-card h4 { color: var(--primary); margin-bottom: 14px; font-size: 17px; } .branch-info-item { display: flex; gap: 10px; margin-bottom: 10px; font-size: 14px; } .branch-info-item i { color: var(--primary); min-width: 18px; margin-top: 3px; } .contact-form .form-control { border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 15px; font-size: 14px; transition: border-color .2s; } .contact-form .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(153,72,157,.12); outline: none; } .contact-form label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; } /* ============================================================ ENQUIRY / BOOKING FORMS ============================================================ */ .enquiry-section { background: var(--primary); padding: 50px 0; color: #fff; } .enquiry-section h2 { color: #fff; margin-bottom: 6px; } .enquiry-section p { color: rgba(255,255,255,.85); margin-bottom: 0; } .enquiry-form-card { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .enquiry-form-card .form-control { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; } .enquiry-form-card .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(153,72,157,.12); outline: none; } /* Inline side enquiry strip */ .side-enquiry { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: sticky; top: 90px; } .side-enquiry h4 { color: var(--primary); font-size: 17px; margin-bottom: 16px; } /* ============================================================ BREADCRUMB — compact single-line strip ============================================================ */ .breadcrumb-section { background: #fff; border-bottom: 1px solid var(--border); padding: 10px 0; } .breadcrumb-section .row { align-items: center; } .breadcrumb-title { font-size: 13px; font-weight: 700; color: var(--text-head); margin: 0; text-transform: uppercase; letter-spacing: .5px; } .breadcrumb-section .breadcrumb { margin: 0; background: transparent; padding: 0; font-size: 12.5px; } .breadcrumb-item a { color: var(--primary); } .breadcrumb-item.active { color: var(--text); } .breadcrumb-item + .breadcrumb-item::before { color: #bbb; content: "/"; } /* ============================================================ FOOTER ============================================================ */ .footer { background: #222; color: rgba(255,255,255,.75); padding-top: 55px; } .footer h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; } .footer .h-decor { background: var(--primary); margin-left: 0; margin-bottom: 18px; } .footer-logo img { max-height: 60px; margin-bottom: 14px; } .footer-text { font-size: 13px; line-height: 1.8; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer ul li { margin-bottom: 8px; font-size: 13px; } .footer ul li a { color: rgba(255,255,255,.7); transition: color .2s; } .footer ul li a:hover { color: var(--primary); padding-left: 4px; } .footer .icn-list li { display: flex; gap: 10px; align-items: flex-start; } .footer .icn-list li i { color: var(--primary); min-width: 16px; margin-top: 4px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255,255,255,.1); border-radius: 50%; color: #fff; font-size: 14px; margin-right: 6px; transition: var(--transition); } .footer-social a:hover { background: var(--primary); color: #fff; } .footer-bottom a { color: rgba(255,255,255,.6); } .footer-bottom a:hover { color: var(--primary); } /* ============================================================ SITE FOOTER (compact, modern, on-brand purple) ============================================================ */ .site-footer { background: #fff; color: var(--text); border-top: 1px solid rgba(153,72,157,.12); position: relative; } .footer-main { padding: 38px 0 26px; } /* ── Logo & About ─────────────────────────────────────────── */ .footer-logo-link { display: inline-block; } .footer-logo { max-height: 38px; width: auto; display: block; } .footer-about { font-size: 12.5px; line-height: 1.7; color: var(--text); margin: 12px 0 0; max-width: 280px; } /* ── Section headings ─────────────────────────────────────── */ .footer-heading { font-family: 'Poppins', sans-serif; color: var(--text-head); font-size: 13px; font-weight: 700; letter-spacing: .3px; margin: 0 0 8px; text-transform: uppercase; } .footer-heading-decor { width: 24px; height: 2px; background: var(--primary); border-radius: 2px; margin-bottom: 14px; } /* ── Quick Links ──────────────────────────────────────────── */ .footer-links { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 14px; } .footer-links li { margin-bottom: 6px; font-size: 12.5px; break-inside: avoid; } .footer-links a { color: var(--text); text-decoration: none; transition: color .2s, padding-left .2s; } .footer-links a:hover { color: var(--primary); padding-left: 3px; } /* ── Contact List ─────────────────────────────────────────── */ .footer-contact-list { list-style: none; padding: 0; margin: 0; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.55; color: var(--text); } .footer-contact-list li i { flex-shrink: 0; color: var(--primary); font-size: 12px; margin-top: 4px; width: 14px; text-align: center; } .footer-contact-list li a { color: var(--text); text-decoration: none; transition: color .2s; } .footer-contact-list li a:hover { color: var(--primary); } /* ── Social ───────────────────────────────────────────────── */ .site-footer .footer-social { display: flex; gap: 6px; margin-top: 12px; } .site-footer .footer-social a { width: 30px; height: 30px; border-radius: 50%; background: rgba(153,72,157,.08); border: none; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; margin: 0; transition: all .2s ease; text-decoration: none; } .site-footer .footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); } /* ── Map ──────────────────────────────────────────────────── */ .footer-map { border-radius: 8px; overflow: hidden; border: 1px solid rgba(153,72,157,.12); } .footer-map iframe { display: block; height: 160px !important; } /* ── Bottom Bar ───────────────────────────────────────────── */ .site-footer .footer-bottom { background: var(--primary); border-top: none; padding: 11px 0; margin-top: 0; font-size: 11.5px; color: rgba(255,255,255,.85); } .site-footer .footer-bottom a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s; } .site-footer .footer-bottom a:hover { color: #fff; } .site-footer .footer-bottom strong { color: #fff; font-weight: 600; } @media (max-width: 991px) { .footer-main { padding: 32px 0 22px; } .footer-about { max-width: 100%; } .footer-links { columns: 1; } } @media (max-width: 767px) { .footer-main { padding: 28px 0 18px; } .site-footer .footer-bottom .col-md-8, .site-footer .footer-bottom .col-md-4 { text-align: center !important; margin-bottom: 4px; } } /* ============================================================ FLOATING BUTTONS (exact match to existing site) ============================================================ */ .floating-container { position: fixed; bottom: 80px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; } @keyframes floatUpDown { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } 100% { transform: translateY(0) scale(1); } } .floating-btn { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border: 0; padding: 0; cursor: pointer; border-radius: 50%; color: #fff !important; font-size: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.35); text-decoration: none !important; animation: floatUpDown 3s ease-in-out infinite; transition: transform .3s; } .floating-btn:hover { animation-play-state: paused; transform: scale(1.15) rotate(8deg); } .float-call { background-color: #25D366; } .float-call:hover { background-color: #20b05c; } .float-wa { background-color: #128C7E; } .float-wa:hover { background-color: #0e6c69; } .float-map { background-color: #3d6aff; } .float-map:hover { background-color: #0084ac; } /* Back to top */ .back-to-top { position: fixed; bottom: 25px; right: 25px; width: 42px; height: 42px; background: var(--primary); color: #fff; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 16px; z-index: 999; cursor: pointer; transition: background .2s; box-shadow: 0 2px 10px rgba(153,72,157,.4); } .back-to-top.visible { display: flex; } .back-to-top:hover { background: var(--primary-dark); } /* ============================================================ MODAL — Booking / Enquiry popup ============================================================ */ .modal-booking .modal-header { background: var(--primary); color: #fff; padding: 18px 24px; } .modal-booking .modal-title { font-size: 18px; font-weight: 700; color: #fff; } .modal-booking .close { color: #fff; opacity: 1; } .modal-booking .form-control { border-radius: var(--radius); border-color: var(--border); font-size: 14px; } .modal-booking .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(153,72,157,.1); } /* ============================================================ POPUP "Call Now" strip ============================================================ */ .popup-btn { position: fixed; right: -38px; top: 50%; transform: translateY(-50%) rotate(-90deg); z-index: 999; } .popup-btn a { display: block; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; padding: 8px 18px; border-radius: 4px 4px 0 0; text-transform: uppercase; transition: background .2s; } .popup-btn a:hover { background: var(--primary-dark); } /* ============================================================ BEFORE/AFTER PREVIEW (homepage) ============================================================ */ .ba-grid .ba-item { position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; } .ba-grid .ba-item img { width: 100%; height: 230px; object-fit: cover; transition: transform .4s; } .ba-grid .ba-item:hover img { transform: scale(1.06); } /* ============================================================ ABOUT / DOCTOR PROFILE ============================================================ */ .doctor-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-align: center; padding: 30px 20px; } .doctor-photo { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 4px solid var(--primary); margin-bottom: 16px; } .doctor-name { font-size: 20px; font-weight: 700; color: var(--text-head); } .doctor-qual { font-size: 13px; color: var(--primary); font-weight: 600; margin-bottom: 8px; } .doctor-bio { font-size: 14px; color: var(--text); line-height: 1.75; } /* Credential badges */ .credential-badge { display: inline-block; background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-dark); margin: 4px; } /* ============================================================ MISC ============================================================ */ .alert-success-custom { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; } .alert-danger-custom { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; } .page-title-section { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 50px 0; color: #fff; text-align: center; } .page-title-section h1 { color: #fff; font-size: clamp(26px, 4vw, 42px); margin-bottom: 8px; } .page-title-section p { color: rgba(255,255,255,.85); font-size: 15px; max-width: 600px; margin: 0 auto; } .section-title { text-align: center; margin-bottom: 40px; } .section-title h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--text-head); margin-bottom: 0; } /* Video embed */ .video-embed { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* Pagination */ .pagination .page-link { color: var(--primary); border-color: var(--border); } .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } .pagination .page-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ============================================================ HEADER / TOPBAR / NAVBAR ============================================================ */ /* ── Top Bar ─────────────────────────────────────────────────── */ .header-topbar { background: #faf6fb; border-bottom: 1px solid rgba(153,72,157,.12); font-size: 11px; padding: 2px 0; line-height: 1.3; } .topbar-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-size: 11px; transition: color .2s; padding-right: 10px; margin-right: 10px; border-right: 1px solid rgba(153,72,157,.2); } .header-topbar .header-social a { width: 22px; height: 22px; font-size: 11px; } .topbar-item:last-of-type { border-right: none; margin-right: 0; padding-right: 0; } .topbar-item:hover { color: var(--primary); } .topbar-item i { color: var(--primary); font-size: 12px; } .topbar-appt { background: var(--primary-gradient); color: #fff !important; font-weight: 600; padding: 4px 16px; border-radius: 6px; font-size: 12px; letter-spacing: .3px; border: none !important; outline: none !important; box-shadow: 0 2px 10px rgba(153,72,157,.3); transition: var(--transition); } .topbar-appt:hover { box-shadow: 0 4px 14px rgba(153,72,157,.45); transform: translateY(-1px); } .topbar-appt:focus, .topbar-appt:active { outline: none !important; box-shadow: 0 2px 10px rgba(153,72,157,.3) !important; } .header-social a { width: 28px; height: 28px; border-radius: 50%; background: rgba(153,72,157,.08); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: var(--transition); } .header-social a:hover { background: var(--primary); color: #fff; } /* ── Main Header ─────────────────────────────────────────────── */ .site-header { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); position: sticky; top: 0; z-index: 1000; transition: box-shadow .3s; } .site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.10); } .site-navbar { padding: 0; } .site-navbar .container { display: flex; align-items: center; } .site-navbar .navbar-collapse { flex: 1 1 auto; justify-content: center; } .navbar-brand { padding: 10px 0; margin-right: 22px; flex-shrink: 0; } .nav-logo { max-height: 42px; width: auto; display: block; } /* ── Nav Links ───────────────────────────────────────────────── */ .navbar-nav .nav-link { font-size: 13.5px; font-weight: 600; color: var(--text-dark) !important; padding: 20px 13px !important; letter-spacing: .1px; position: relative; transition: color .2s; } .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 13px; right: 13px; height: 2px; background: var(--primary-gradient); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .navbar-nav .nav-link:hover, .navbar-nav .nav-item.active > .nav-link { color: var(--primary) !important; } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-item.active > .nav-link::after { transform: scaleX(1); } /* Override Bootstrap dropdown-toggle arrow with FA caret */ .navbar-nav .dropdown-toggle::after { content: none; } .navbar-nav .dropdown-toggle .fa-chevron-down { font-size: 10px; margin-left: 4px; vertical-align: middle; transition: transform .25s; } .navbar-nav .dropdown.show .fa-chevron-down { transform: rotate(180deg); } /* ── Dropdown (premium animated, compact) ─────────────────────── */ .site-navbar .nav-item.dropdown { position: relative; } .site-navbar .dropdown-menu { border: none; background: #fff; box-shadow: 0 16px 32px -10px rgba(43,35,48,.18), 0 0 0 1px rgba(153,72,157,.06); border-radius: 8px; min-width: 210px; padding: 6px; margin: 0 !important; top: 100% !important; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear .25s; display: block; pointer-events: none; overflow: hidden; animation: none !important; } .site-navbar .dropdown-menu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--primary-light, #b96dbd)); border-radius: 8px 8px 0 0; } .site-navbar .nav-item.dropdown.show > .dropdown-menu, .site-navbar .nav-item.dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity .25s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; } @media (min-width: 992px) { .site-navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; } } .site-navbar .dropdown-item { font-size: 12.5px; font-weight: 500; padding: 7px 12px; color: var(--text-dark); border-radius: 4px; transition: all .22s cubic-bezier(.22,.61,.36,1); display: flex; align-items: center; gap: 8px; position: relative; background: transparent; margin: 0; line-height: 1.4; } .site-navbar .dropdown-item::before { content: ''; width: 0; height: 1.5px; background: var(--primary); margin-right: 0; transition: width .22s, margin-right .22s; flex-shrink: 0; opacity: 0; } .site-navbar .dropdown-item:hover { background: linear-gradient(135deg, rgba(153,72,157,.08), rgba(73,176,193,.05)); color: var(--primary); } .site-navbar .dropdown-item:hover::before { width: 12px; margin-right: 5px; opacity: 1; } .site-navbar .dropdown-item:active, .site-navbar .dropdown-item.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark, #7a3a7e)); color: #fff; } .site-navbar .dropdown-divider { margin: 4px 2px; border-color: rgba(153,72,157,.12); } /* Caret rotates smoother */ .navbar-nav .dropdown-toggle .fa-chevron-down { transition: transform .3s cubic-bezier(.22,.61,.36,1); } .navbar-nav .nav-item.dropdown:hover .fa-chevron-down, .navbar-nav .nav-item.dropdown.show .fa-chevron-down { transform: rotate(180deg); color: var(--primary); } /* ───────────────────────────────────────────────────── MOBILE / TABLET NAV — full-width panel, clean cards ───────────────────────────────────────────────────── */ @media (max-width: 991px) { .site-navbar .container { flex-wrap: wrap; padding-left: 14px; padding-right: 14px; } .site-navbar .navbar-toggler { border: 1.5px solid #ebe6ec; border-radius: 8px; padding: 6px 10px; outline: none !important; box-shadow: none !important; margin-left: 8px; } .site-navbar .navbar-toggler:focus { box-shadow: none !important; outline: none !important; } .site-navbar .navbar-toggler-icon { width: 22px; height: 18px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(153,72,157,.95)' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* Collapsed panel — full-width slide-down card */ .site-navbar .navbar-collapse { flex-basis: 100% !important; margin: 8px -14px 0; padding: 8px 0; background: #fff; border-top: 1px solid #ebe6ec; box-shadow: 0 12px 28px rgba(43,35,48,.08); border-radius: 0 0 10px 10px; } .site-navbar .navbar-nav { margin: 0 !important; flex-direction: column; align-items: stretch !important; } .site-navbar .navbar-nav .nav-item { border-bottom: 1px solid #f5f0f6; } .site-navbar .navbar-nav .nav-item:last-child { border-bottom: none; } .site-navbar .navbar-nav .nav-link { padding: 14px 18px !important; font-size: 14px !important; font-weight: 600; color: #2b2330 !important; text-align: left; display: flex !important; align-items: center; justify-content: space-between; transition: all .2s ease; } .site-navbar .navbar-nav .nav-link::after { display: none; } .site-navbar .navbar-nav .nav-link:hover, .site-navbar .navbar-nav .nav-item.active > .nav-link { background: linear-gradient(90deg, rgba(153,72,157,.06), transparent); color: var(--primary) !important; padding-left: 22px !important; } .site-navbar .navbar-nav .dropdown-toggle .fa-chevron-down { font-size: 11px; margin-left: auto; transition: transform .25s; } .site-navbar .navbar-nav .dropdown.show .dropdown-toggle .fa-chevron-down { transform: rotate(180deg); color: var(--primary); } /* Submenu — slides down inside the panel, no floating card */ .site-navbar .dropdown-menu { display: none; position: static !important; background: #faf6fb; box-shadow: none; border: none; padding: 6px 0; margin: 0 !important; border-radius: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto; min-width: 0; transition: none; animation: none; } .site-navbar .dropdown-menu::before, .site-navbar .dropdown-menu::after { display: none; } .site-navbar .nav-item.dropdown.show > .dropdown-menu { display: block; } .site-navbar .nav-item.dropdown:hover > .dropdown-menu { display: none; } .site-navbar .nav-item.dropdown.show:hover > .dropdown-menu { display: block; } .site-navbar .dropdown-item { padding: 9px 30px !important; font-size: 13px; color: #555 !important; border-radius: 0; background: transparent; position: relative; } .site-navbar .dropdown-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .4; margin-right: 0; flex-shrink: 0; } .site-navbar .dropdown-item:hover { background: #fff !important; color: var(--primary) !important; transform: none; } .site-navbar .dropdown-item:hover::before { opacity: 1; } .site-navbar .dropdown-divider { display: none; } /* Mobile Appointment button (next to toggler) */ .site-navbar .container > .d-flex.d-lg-none .btn-primary { padding: 7px 14px; font-size: 12.5px; font-weight: 600; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border: none; box-shadow: 0 4px 12px rgba(153,72,157,.25); } /* Mobile contact sub-bar (under navbar) */ .mobile-contact-bar { display: flex; background: linear-gradient(135deg, #faf6fb 0%, #fff 100%); border-top: 1px solid #ebe6ec; border-bottom: 1px solid #ebe6ec; } .mcb-item { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-head); text-decoration: none; transition: all .2s ease; position: relative; white-space: nowrap; } .mcb-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: rgba(153,72,157,.15); } .mcb-item i { color: var(--primary); font-size: 13px; transition: transform .2s; } .mcb-item.mcb-fb i { color: #1877f2; } .mcb-item.mcb-ig i { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .mcb-item:hover { background: rgba(153,72,157,.06); color: var(--primary); text-decoration: none; } .mcb-item:hover i { transform: scale(1.15); } } /* Very narrow phones — icon-only contact bar */ @media (max-width: 419px) { .mobile-contact-bar .mcb-item span { display: none; } .mobile-contact-bar .mcb-item { padding: 11px 4px; } .mobile-contact-bar .mcb-item i { font-size: 16px; } } /* ── CTA Button ──────────────────────────────────────────────── */ .nav-appt-btn { background: var(--primary-gradient); color: #fff !important; padding: 7px 18px; border-radius: 8px; border: none !important; outline: none !important; font-weight: 700; font-size: 12.5px; margin-left: 18px; white-space: nowrap; letter-spacing: .2px; box-shadow: none; transition: opacity .2s, transform .2s; display: inline-block; text-decoration: none; } .nav-appt-btn:hover, .nav-appt-btn:focus { color: #fff !important; opacity: .9; transform: translateY(-1px); box-shadow: none; outline: none !important; text-decoration: none; } /* ── Mobile Toggler ──────────────────────────────────────────── */ .navbar-toggler { border: 2px solid var(--primary); border-radius: 8px; padding: 6px 10px; background: transparent; transition: background .2s; } .navbar-toggler:hover { background: rgba(153,72,157,.08); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2399489d' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 20px; height: 20px; } /* ============================================================ HERO SECTION / SLIDER ============================================================ */ .hero-section { position: relative; overflow: hidden; background: #111; } .hero-slide { position: relative; min-height: 640px; display: flex; align-items: center; background-size: cover; background-position: center top; } .hero-slide--default { background-position: center; } /* Overlay: dark on left for text clarity, semi-dark on right to suppress busy backgrounds */ .hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.78) 40%, rgba(8,8,8,.55) 65%, rgba(8,8,8,.38) 100%); } .hero-slide-content { position: relative; z-index: 2; color: #fff; padding: 90px 0 90px; max-width: 600px; } .hero-slide-content h1, .hero-slide-content h2 { color: #fff; font-size: clamp(28px, 4vw, 52px); font-weight: 800; line-height: 1.18; letter-spacing: -0.5px; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,.4); } .hero-slide-content p { font-size: 15.5px; color: rgba(255,255,255,.85); margin-bottom: 36px; line-height: 1.8; max-width: 460px; } /* ============================================================ SECTION HELPERS ============================================================ */ /* Alias — some views use .section-pad instead of .section */ .section-pad { padding: 60px 0; } .section-pad.section-pad-sm { padding: 40px 0; } .section-subtitle { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--primary); margin-bottom: 8px; display: block; } /* ============================================================ STATS BAR ============================================================ */ .stats-bar { background: var(--primary); padding: 36px 0; color: #fff; } .stat-item { text-align: center; padding: 10px 20px; } .stat-number { display: block; font-size: 38px; font-weight: 700; line-height: 1; color: #fff; } .stat-label { display: block; font-size: 14px; color: rgba(255,255,255,.85); margin-top: 6px; font-weight: 500; } /* ============================================================ WHY US SECTION ============================================================ */ .why-section { padding: 60px 0; } .why-item { display: flex; gap: 18px; margin-bottom: 28px; align-items: flex-start; } .why-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; } .why-text h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--text-head); } .why-text p { font-size: 14px; color: var(--text); margin: 0; } .why-image-wrap { position: relative; } .why-image { width: 100%; border-radius: var(--radius); object-fit: cover; } /* ============================================================ OFFER CARDS ============================================================ */ .offer-card-img { position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; } .offer-card-img img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s; } .offer-card:hover .offer-card-img img { transform: scale(1.06); } .offer-card-body { padding: 20px; background: #fff; border-radius: 0 0 var(--radius) var(--radius); } .offer-card-title { font-size: 16px; font-weight: 700; color: var(--text-head); margin-bottom: 6px; } .offer-card-desc { font-size: 14px; color: var(--text); margin-bottom: 14px; } /* ============================================================ GALLERY GRID MODIFIER ============================================================ */ .gallery-grid--sm .gallery-grid-item { height: 180px; } /* ============================================================ VIDEO EMBED WRAPPER ============================================================ */ .video-embed-wrap { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; } .video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ============================================================ SIDEBAR (Treatment / Blog detail pages) ============================================================ */ .sidebar { position: sticky; top: 80px; } .sidebar-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; } .sidebar-title { font-size: 16px; font-weight: 700; color: var(--text-head); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); } .sidebar-enquiry .form-control { margin-bottom: 12px; } .sidebar-cta { display: block; width: 100%; text-align: center; background: var(--primary); color: #fff; border-radius: 4px; padding: 11px; font-weight: 600; transition: var(--transition); } .sidebar-cta:hover { background: var(--primary-dark); color: #fff; } .sidebar-link-list { list-style: none; padding: 0; margin: 0; } .sidebar-link-list li { border-bottom: 1px solid var(--border); } .sidebar-link-list li:last-child { border-bottom: none; } .sidebar-link-list li a { display: block; padding: 10px 0; font-size: 14px; color: var(--text); transition: var(--transition); } .sidebar-link-list li a:hover { color: var(--primary); padding-left: 6px; } .sidebar-article { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .sidebar-article:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .sidebar-article img { width: 70px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .sidebar-article-title { font-size: 13px; font-weight: 600; color: var(--text-head); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-article-date { font-size: 12px; color: var(--text); } /* ============================================================ TREATMENT / SERVICE DETAIL ============================================================ */ .treatment-article { padding: 10px 0; } .treatment-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--text-head); margin-bottom: 16px; } .treatment-intro { font-size: 15px; color: var(--text); line-height: 1.8; margin-bottom: 28px; } .treatment-section { margin-bottom: 36px; } .treatment-section-title { font-size: 20px; font-weight: 700; color: var(--text-head); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--border); } .treatment-gallery { margin-bottom: 36px; } .treatment-faq { margin-bottom: 36px; } .treatment-videos { margin-bottom: 36px; } /* ============================================================ BLOG ARTICLE / DETAIL ============================================================ */ .blog-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .blog-article { max-width: 100%; } .blog-article-img { border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; } .blog-article-img img { width: 100%; max-height: 420px; object-fit: cover; } .blog-article-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--text-head); margin-bottom: 12px; line-height: 1.35; } .blog-article-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .blog-article-meta span { display: inline-flex; align-items: center; gap: 5px; } .blog-article-body { font-size: 15px; line-height: 1.85; color: var(--text); } .blog-article-body h2, .blog-article-body h3, .blog-article-body h4 { color: var(--text-head); margin-top: 28px; } .blog-article-body img { border-radius: var(--radius); margin: 16px 0; } .blog-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-weight: 600; font-size: 14px; } .share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; color: #fff; transition: opacity .2s; } .share-btn:hover { opacity: .85; color: #fff; } .share-btn.facebook { background: #1877f2; } .share-btn.twitter { background: #1da1f2; } .share-btn.whatsapp { background: #25d366; } /* ============================================================ BLOG COMMENTS ============================================================ */ .blog-comments { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border); } .comment-list { list-style: none; padding: 0; margin: 0 0 32px; } .comment-item { display: flex; gap: 16px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .comment-item:last-child { border-bottom: none; } .comment-avatar { width: 50px; height: 50px; min-width: 50px; border-radius: 50%; background: var(--bg-grey); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--primary); } .comment-content { flex: 1; } .comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .comment-meta strong { font-size: 15px; font-weight: 600; color: var(--text-head); } .comment-date { font-size: 12px; color: var(--text); } .comment-text { font-size: 14px; color: var(--text); line-height: 1.7; } .comment-form { background: var(--bg-light); border-radius: var(--radius); padding: 28px; } .comment-form h4 { margin-bottom: 20px; } /* ============================================================ ERROR PAGES ============================================================ */ .error-section { padding: 80px 0; text-align: center; min-height: 60vh; display: flex; align-items: center; } .error-code { font-size: clamp(80px, 15vw, 160px); font-weight: 800; color: var(--primary); line-height: 1; display: block; opacity: .15; } .error-title { font-size: clamp(24px, 4vw, 40px); font-weight: 700; color: var(--text-head); margin-bottom: 12px; } .error-message { font-size: 16px; color: var(--text); max-width: 500px; margin: 0 auto 28px; } .error-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; } .error-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .error-link { font-size: 14px; color: var(--primary); font-weight: 600; } .error-link:hover { color: var(--primary-dark); text-decoration: underline; } /* ============================================================ BUTTON LINK ============================================================ */ .btn-link { background: none; border: none; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; transition: var(--transition); } .btn-link:hover { color: var(--primary-dark); } /* ============================================================ DESIGN ENHANCEMENTS v2 ============================================================ */ /* ── Improved CSS Variables ─────────────────────────────────── */ :root { --primary-gradient: linear-gradient(135deg, #99489d 0%, #b96dbd 100%); --secondary-gradient: linear-gradient(135deg, #49b0c1 0%, #6ecfde 100%); --shadow-sm: 0 1px 6px rgba(0,0,0,.07); --shadow-md: 0 4px 20px rgba(0,0,0,.11); --shadow-lg: 0 8px 36px rgba(0,0,0,.14); --shadow-primary: 0 6px 20px rgba(153,72,157,.35); --radius-sm: 4px; --radius-md: 10px; --radius-lg: 16px; } /* ── Buttons — Gradient & Shine ─────────────────────────────── */ .btn-primary { background: var(--primary-gradient); border-color: transparent; box-shadow: var(--shadow-primary); position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); transition: left .5s ease; } .btn-primary:hover::after { left: 125%; } .btn-primary:hover { background: linear-gradient(135deg, #7a3780 0%, #99489d 100%); box-shadow: 0 8px 24px rgba(153,72,157,.45); transform: translateY(-1px); } .btn-primary:focus { outline: none !important; box-shadow: none !important; } .btn-primary:active { transform: translateY(0); outline: none !important; box-shadow: none !important; } .btn-outline-primary:hover { box-shadow: var(--shadow-primary); transform: translateY(-1px); } /* ── Section Headings ───────────────────────────────────────── */ .section-subtitle { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--primary); background: rgba(153,72,157,.08); border-left: 3px solid var(--primary); padding: 4px 12px 4px 10px; border-radius: 0 4px 4px 0; margin-bottom: 10px; } .section-title { font-size: clamp(22px, 3.5vw, 34px); font-weight: 700; color: var(--text-head); line-height: 1.3; margin-bottom: 8px; } .h-decor { background: var(--primary-gradient); width: 48px; height: 4px; border-radius: 2px; } /* ── Cards — Top Accent Border on Hover ─────────────────────── */ .service-card, .blog-card, .testimonial-card { border-top: 3px solid transparent; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .service-card:hover, .blog-card:hover { border-top-color: var(--primary); transform: translateY(-6px); box-shadow: var(--shadow-lg); } .testimonial-card { border-left: 3px solid var(--primary); border-top: none; } /* ── Hero Section ───────────────────────────────────────────── */ .hero-title { text-shadow: 0 3px 16px rgba(0,0,0,.5); } .hero-desc { font-size: 16px; color: rgba(255,255,255,.82); margin-bottom: 34px; line-height: 1.75; max-width: 480px; } .hero-subtitle { display: inline-flex; align-items: center; gap: 8px; background: rgba(153,72,157,.6); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; padding: 6px 16px; border-radius: 6px; margin-bottom: 20px; } .hero-subtitle::before { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; display: inline-block; animation: heroDot 1.5s ease-in-out infinite; } @keyframes heroDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } .hero-trust { display: none; /* desktop relies on the stats bar below — only show on mobile */ } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .hero-actions .btn { border-radius: 10px; padding: 14px 34px; font-size: 15px; font-weight: 700; letter-spacing: .3px; outline: none !important; box-shadow: none !important; display: inline-flex; align-items: center; gap: 8px; } .hero-actions .btn i { font-size: 14px; margin: 0; } .hero-actions .btn:focus, .hero-actions .btn:active, .hero-actions .btn:focus-visible, .hero-actions .btn:active:focus { outline: none !important; box-shadow: none !important; } .hero-actions .btn-primary { background: var(--primary-gradient); border: none; } .hero-actions .btn-primary:hover { opacity: .92; transform: translateY(-1px); } .hero-actions .btn-outline-light { border: 2px solid rgba(255,255,255,.65); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(4px); } .hero-actions .btn-outline-light:hover { background: rgba(255,255,255,.22); border-color: #fff; color: #fff; transform: translateY(-1px); } /* ── Stats Bar ──────────────────────────────────────────────── */ .stats-bar { background: var(--primary-gradient); position: relative; overflow: hidden; } .stats-bar::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .stat-item { position: relative; z-index: 1; padding: 10px 0; } .stat-number { font-size: 46px; font-weight: 800; letter-spacing: -1px; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.2); } .stat-number::after { content: '+'; font-size: 28px; font-weight: 700; vertical-align: top; margin-top: 6px; display: inline-block; } .stat-label { font-size: 13px; font-weight: 500; opacity: .9; letter-spacing: .5px; } .stat-divider { width: 1px; height: 60px; background: rgba(255,255,255,.2); margin: auto; } /* ── Why Items ──────────────────────────────────────────────── */ .why-item { display: flex; gap: 16px; margin-bottom: 24px; padding: 16px; border-radius: var(--radius-md); transition: background .2s, box-shadow .2s; } .why-item:hover { background: rgba(153,72,157,.05); box-shadow: inset 3px 0 0 var(--primary); } .why-icon { flex-shrink: 0; width: 48px; height: 48px; background: var(--primary-gradient); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; box-shadow: var(--shadow-primary); } .why-text h5 { font-size: 15px; font-weight: 700; color: var(--text-head); margin-bottom: 4px; } .why-text p { font-size: 13px; color: var(--text); margin: 0; line-height: 1.6; } /* ── Form Inputs ────────────────────────────────────────────── */ .form-control { border-radius: var(--radius-sm); border: 1.5px solid var(--border); padding: 10px 14px; font-size: 14px; transition: border-color .2s, box-shadow .2s; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(153,72,157,.12); outline: none; } .form-label, label { font-size: 13px; font-weight: 600; color: var(--text-head); margin-bottom: 5px; } /* ── Floating Buttons ───────────────────────────────────────── */ .floating-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; } .floating-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,.3); } /* ── SweetAlert2 Brand Theming ──────────────────────────────── */ .swal2-confirm { background: var(--primary-gradient) !important; box-shadow: var(--shadow-primary) !important; } .swal2-confirm:hover { background: linear-gradient(135deg, #7a3780, #99489d) !important; } .czm-toast.swal2-popup { border-radius: var(--radius-md) !important; font-size: 14px !important; } /* ── Back to Top ────────────────────────────────────────────── */ .js-back-to-top { background: var(--primary-gradient); border: none; box-shadow: var(--shadow-primary); transition: transform .2s, box-shadow .2s; } .js-back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(153,72,157,.45); } /* ── Image Zoom Wrapper ─────────────────────────────────────── */ .img-zoom-wrap { overflow: hidden; border-radius: var(--radius-md); } .img-zoom-wrap img { transition: transform .5s ease; width: 100%; } .img-zoom-wrap:hover img { transform: scale(1.04); } /* ── Offer Card ─────────────────────────────────────────────── */ .offer-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); transition: transform .3s, box-shadow .3s; background: #fff; } .offer-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .offer-badge { display: inline-block; background: var(--primary-gradient); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: .5px; text-transform: uppercase; } /* ── Breadcrumb (override — keep plain white) ────────────────── */ .breadcrumb-section { background: #fff; } /* ── Footer ─────────────────────────────────────────────────── */ .footer { position: relative; } .footer::before { content: ''; display: block; height: 4px; background: var(--primary-gradient); } /* ── Hero Slider Owl Nav Arrows ─────────────────────────────── */ .hero-slider { position: relative; } .hero-slider .owl-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; padding: 0 16px; z-index: 10; } .hero-slider .owl-prev, .hero-slider .owl-next { pointer-events: all; width: 46px; height: 46px; background: rgba(255,255,255,.2) !important; backdrop-filter: blur(4px); border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; color: #fff !important; font-size: 16px; border: 2px solid rgba(255,255,255,.4) !important; transition: background .2s, transform .2s; line-height: 1 !important; } .hero-slider .owl-prev:hover, .hero-slider .owl-next:hover { background: var(--primary) !important; border-color: var(--primary) !important; transform: scale(1.1); } .hero-slider .owl-prev.disabled, .hero-slider .owl-next.disabled { opacity: 0.4; pointer-events: none; } /* ── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } /* ── Remove Bootstrap focus ring on buttons/links ──────────── */ .btn:focus, .btn:active:focus, .btn.active:focus, .btn:active, a:focus, button:focus, button:active, .btn-primary:focus, .btn-primary:active, .btn-outline-light:focus, .btn-outline-light:active, .topbar-appt:focus, .topbar-appt:active, .nav-appt-btn:focus, .nav-appt-btn:active { outline: none !important; box-shadow: none !important; } /* ── Selection Color ────────────────────────────────────────── */ ::selection { background: rgba(153,72,157,.2); color: var(--text-head); } /* ── Smooth Page Transitions ────────────────────────────────── */ #page-content { animation: pageFadeIn .35s ease; } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ================================================================ ALL-SERVICES PAGE ================================================================ */ /* ── Hero intro ──────────────────────────────────────────────── */ .svc-list-hero { background: linear-gradient(135deg, #faf4fb 0%, #f0f7ff 100%); padding: 72px 0 60px; border-bottom: 1px solid var(--border); } .svc-list-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--text-head); line-height: 1.18; margin-bottom: 18px; } .svc-list-lead { font-size: 1.05rem; color: var(--text); max-width: 520px; margin-bottom: 30px; line-height: 1.8; } /* ── Hero badge items ────────────────────────────────────────── */ .svc-list-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .svc-badge-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; box-shadow: 0 4px 18px rgba(153,72,157,.07); transition: transform .25s, box-shadow .25s; } .svc-badge-item:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(153,72,157,.14); } .svc-badge-item i { font-size: 1.6rem; color: var(--primary); background: linear-gradient(135deg, rgba(153,72,157,.12), rgba(73,176,193,.12)); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .svc-badge-item span { font-size: .85rem; font-weight: 600; color: var(--text-head); line-height: 1.3; } /* ── Grid section ────────────────────────────────────────────── */ .svc-grid-section { padding: 64px 0 80px; background: var(--bg-white); } /* ── Service card ────────────────────────────────────────────── */ .svc-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; text-decoration: none; color: inherit; height: 100%; } .svc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(153,72,157,.18); border-color: var(--primary-light); color: inherit; text-decoration: none; } /* Image wrapper */ .svc-card-img { position: relative; overflow: hidden; height: 210px; background: linear-gradient(135deg, #f4eaf5, #e8f5f8); flex-shrink: 0; } .svc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; display: block; } .svc-card:hover .svc-card-img img { transform: scale(1.07); } /* No-image placeholder */ .svc-card-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .svc-card-no-img i { font-size: 3rem; color: var(--primary-light); opacity: .45; } /* Hover overlay with CTA */ .svc-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(153,72,157,.82) 0%, rgba(73,176,193,.55) 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; opacity: 0; transition: opacity .3s ease; } .svc-card:hover .svc-card-overlay { opacity: 1; } .svc-card-cta { background: #fff; color: var(--primary); font-size: .82rem; font-weight: 700; padding: 8px 22px; border-radius: 8px; letter-spacing: .3px; transform: translateY(12px); transition: transform .3s ease; white-space: nowrap; } .svc-card:hover .svc-card-cta { transform: translateY(0); } /* Number badge */ .svc-card-num { position: absolute; top: 14px; right: 14px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 700; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; letter-spacing: .5px; box-shadow: 0 3px 10px rgba(153,72,157,.35); z-index: 2; } /* Card body */ .svc-card-body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; border-top: 3px solid transparent; transition: border-color .28s ease; } .svc-card:hover .svc-card-body { border-top-color: var(--primary); } .svc-card-title { font-size: 1.05rem; font-weight: 700; color: var(--text-head); margin-bottom: 8px; line-height: 1.35; } .svc-card-desc { font-size: .875rem; color: var(--text); line-height: 1.65; margin-bottom: 14px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .svc-card-link { font-size: .82rem; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s, color .2s; } .svc-card:hover .svc-card-link { gap: 10px; } .svc-card-link i { font-size: .9em; } /* ============================================================ BOOKING MODAL — Premium redesign (bk- prefix) ============================================================ */ .bk-modal-content { border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.22); } /* Header */ .bk-modal-header { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #c87dcd 100%); padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bk-modal-header-inner { display: flex; align-items: center; gap: 16px; } .bk-modal-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bk-modal-icon i { font-size: 1.2rem; color: #fff; } .bk-modal-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 3px; line-height: 1.2; } .bk-modal-subtitle { font-size: .78rem; color: rgba(255,255,255,.75); margin: 0; } .bk-close { background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.25); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem; cursor: pointer; transition: background .2s; flex-shrink: 0; padding: 0; line-height: 1; } .bk-close:hover { background: rgba(255,255,255,.28); } /* Body */ .bk-modal-body { padding: 28px 28px 24px; background: #fff; } .bk-modal-body label { font-size: .8rem; font-weight: 700; color: #444; margin-bottom: 5px; display: block; } .bk-modal-body .form-control { border: 1.5px solid #e2dde8; border-radius: 8px; padding: 10px 14px; font-size: .88rem; color: #333; transition: border-color .2s, box-shadow .2s; height: auto; min-height: 44px; line-height: 1.5; } .bk-modal-body select.form-control { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399489d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 38px; } .bk-modal-body .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(153,72,157,.1); outline: none; } .bk-modal-body .form-group { margin-bottom: 14px; } /* Submit button */ .bk-submit-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff !important; border: none; border-radius: 10px; padding: 14px; font-size: .95rem; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; transition: opacity .2s, transform .2s; box-shadow: 0 6px 20px rgba(153,72,157,.35); } .bk-submit-btn:hover { opacity: .92; transform: translateY(-1px); } .bk-submit-btn:focus, .bk-submit-btn:active { outline: none; box-shadow: 0 6px 20px rgba(153,72,157,.35); } /* Privacy note */ .bk-privacy-note { text-align: center; font-size: .73rem; color: #aaa; margin: 12px 0 0; } .bk-privacy-note i { margin-right: 4px; } /* Success state */ .bk-success { text-align: center; padding: 32px 16px; } .bk-success-icon { font-size: 3rem; color: #28a745; margin-bottom: 16px; } .bk-success h4 { font-size: 1.2rem; font-weight: 800; color: #222; margin-bottom: 8px; } .bk-success p { font-size: .9rem; color: #666; margin: 0; } /* Responsive */ @media (max-width: 576px) { .bk-modal-body { padding: 20px 18px 18px; } .bk-modal-header { padding: 18px 18px; } .bk-modal-title { font-size: 1rem; } .bk-modal-subtitle { display: none; } } /* ============================================================ COZMAA.COM — Responsive / Mobile Styles ============================================================ */ @media (max-width: 1200px) { .slide-txt1 { font-size: 38px; } .main-slider .slide, .slide-content { min-height: 460px; } .hero-section { min-height: 420px; } .hero-slide { min-height: 420px; } .hero-slide-content h1, .hero-slide-content h2 { font-size: 38px; } } @media (max-width: 992px) { .section { padding: 45px 0; } .section-pad { padding: 45px 0; } .main-slider .slide, .slide-content { min-height: 380px; } .slide-txt1 { font-size: 30px; } .slide-txt2 { font-size: 14px; } /* Hero */ .hero-section { min-height: 360px; } .hero-slide { min-height: 360px; } .hero-slide-content { max-width: 100%; } .hero-slide-content h1, .hero-slide-content h2 { font-size: 30px; } /* Navbar */ .navbar-nav .nav-link { padding: 10px 14px !important; } .dropdown-menu { box-shadow: none; border-left: 3px solid var(--primary); border-radius: 0; } .nav-appt-btn { padding: 8px 16px; font-size: 13px; } /* Footer */ .footer .col-lg-3, .footer .col-lg-2, .footer .col-lg-4 { margin-bottom: 30px; } /* Sidebar */ .side-enquiry { position: static; margin-top: 30px; } .sidebar { position: static; } /* Service / Blog cards */ .service-card { margin-bottom: 20px; } .blog-card { margin-bottom: 20px; } /* Stats */ .stat-item { padding: 8px 10px; } .stat-number { font-size: 32px; } /* Why */ .why-image-wrap { margin-bottom: 30px; } /* Offer cards */ .offer-card { margin-bottom: 20px; } /* Treatment / Blog sidebar stacks */ .treatment-article + .col-lg-4 { margin-top: 30px; } .blog-article + .col-lg-4 { margin-top: 30px; } /* Admin */ .admin-sidebar { width: 220px; } } @media (max-width: 768px) { body { font-size: 14px; } .section { padding: 36px 0; } .section-pad { padding: 36px 0; } .main-slider .slide, .slide-content { min-height: 280px; } .slide-content { padding: 40px 0; } .slide-txt1 { font-size: 22px; } .slide-txt2 { font-size: 13px; margin-bottom: 16px; } /* Header / Topbar */ .header-topbar { display: none; } .header-topline { display: none; } .header-main { padding: 10px 0; } .header-logo img { max-height: 50px; } .site-navbar { flex-wrap: wrap; gap: 10px; } .nav-logo img { max-height: 50px; } /* ────────────────────────────────────────────────────────────── Hero (mobile) — conversion-focused: one image, one headline, one tiny proof point, one CTA. Nothing else. ────────────────────────────────────────────────────────────── */ .hero-section { min-height: 78vh; } .hero-slide { min-height: 78vh; align-items: flex-end; background-position: 60% 22%; } .hero-slide-overlay { background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 35%, rgba(20,8,30,.55) 65%, rgba(20,8,30,.95) 100%); } .hero-slide-content { max-width: 100%; padding: 0 4px 40px; width: 100%; } /* Strip clutter: kill the eyebrow pill and the descriptive paragraph on mobile */ .hero-subtitle, .hero-slide-content p, .hero-desc { display: none !important; } /* Big, bold benefit headline — the only text that earns its place */ .hero-slide-content h1, .hero-slide-content h2, .hero-title { font-size: clamp(28px, 8.6vw, 38px) !important; line-height: 1.12; margin-bottom: 18px; letter-spacing: -.6px; font-weight: 800; max-width: 92%; } /* Tiny social proof above CTA — rating only, patient count hidden */ .hero-trust { display: inline-flex !important; align-items: center; gap: 6px; background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 11.5px; font-weight: 500; padding: 6px 12px; border-radius: 100px; margin-bottom: 18px; line-height: 1; white-space: nowrap; letter-spacing: .2px; } .hero-trust i { color: #ffc940; font-size: 11px; filter: drop-shadow(0 0 4px rgba(255,201,64,.55)); } .hero-trust strong { font-weight: 700; color: #fff; } .hero-trust-sep, .hero-trust-sep + span { display: none; } /* drop the patient count + separator — one number is enough */ /* ONE primary CTA — full width, big, unmissable. Secondary "Call Now" hidden because the floating call/WhatsApp buttons already cover that intent. */ .hero-actions { gap: 0; flex-direction: column; align-items: stretch; } .hero-actions .btn-outline-light { display: none !important; } .hero-actions .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 15.5px; min-height: 54px; border-radius: 14px; font-weight: 700; letter-spacing: .3px; } .hero-actions .btn-primary { box-shadow: 0 12px 30px rgba(153,72,157,.48); } /* Carousel arrows — small, bottom corners */ .hero-slider .owl-prev, .hero-slider .owl-next { width: 34px; height: 34px; font-size: 13px; top: auto; bottom: 14px; opacity: .7; } .hero-slider .owl-prev { left: 12px; } .hero-slider .owl-next { right: 12px; } /* Stats bar */ .stats-bar { padding: 24px 0; } .stat-item { padding: 8px; } .stat-number { font-size: 28px; } .stat-label { font-size: 13px; } /* Why section */ .why-item { flex-direction: column; gap: 10px; } .why-icon { margin: 0 auto; } .why-text { text-align: center; } .why-image-wrap { margin-bottom: 28px; } /* Cards */ .service-card-img, .blog-card-img { height: 170px; } .service-card { margin-bottom: 16px; } .blog-card { margin-bottom: 16px; } .offer-card { margin-bottom: 16px; } .offer-card-img img { height: 160px; } .testimonial-card { margin-bottom: 20px; } .branch-card { margin-bottom: 20px; } /* Gallery */ .gallery-grid-item { height: 180px; } .gallery-grid--sm .gallery-grid-item { height: 140px; } .gallery-item img, .ba-grid .ba-item img { height: 180px; } /* Doctor */ .doctor-card { padding: 20px 14px; } .doctor-photo { width: 120px; height: 120px; } /* Sidebar */ .sidebar { position: static; } .sidebar-card { padding: 18px; } .sidebar-article img { width: 60px; height: 52px; } /* Treatment detail */ .treatment-title { font-size: 22px; } .treatment-hero { min-height: 220px; } .treatment-hero h1 { font-size: 24px; } /* Blog detail */ .blog-article-title { font-size: 22px; } .blog-article-img img { max-height: 260px; } .blog-article-meta { gap: 10px; } .blog-share { gap: 8px; } .share-btn { padding: 6px 12px; font-size: 12px; } /* Comments */ .comment-avatar { width: 40px; height: 40px; min-width: 40px; font-size: 16px; } .comment-form { padding: 20px; } /* Filter bar */ .blog-filter-bar { gap: 6px; } .btn-filter { font-size: 13px; padding: 6px 14px; } /* Error pages */ .error-section { padding: 50px 0; } .error-code { font-size: 80px; } .error-actions { flex-direction: column; align-items: center; } /* Forms */ .contact-form { padding: 20px; } .enquiry-form-card { padding: 20px; } /* Misc */ .popup-btn { display: none; } .floating-btn { width: 52px; height: 52px; font-size: 20px; } .back-to-top { bottom: 15px; right: 15px; width: 38px; height: 38px; } .page-title-section { padding: 36px 0; } .page-title-section h1 { font-size: 24px; } /* Admin */ .admin-sidebar { position: fixed; left: -260px; top: 0; height: 100vh; z-index: 1050; transition: left .3s ease; width: 240px; } .admin-sidebar.open { left: 0; } .admin-content { margin-left: 0 !important; } .admin-topbar { padding: 10px 16px; } .admin-table { font-size: 13px; } .admin-table td, .admin-table th { padding: 8px 10px; } } @media (max-width: 576px) { /* Hero — small phones (≤576px): tighten paddings */ .hero-section { min-height: 80vh; } .hero-slide { min-height: 80vh; } .hero-slide-content { padding-bottom: 32px; } .hero-slide-content h1, .hero-slide-content h2, .hero-title { font-size: clamp(26px, 8.4vw, 34px) !important; margin-bottom: 16px; } .hero-actions .btn { font-size: 15px; padding: 15px 20px; min-height: 52px; } /* Stats */ .stats-bar .col-6 { margin-bottom: 12px; } .stat-number { font-size: 26px; } /* Gallery */ .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid-item { height: 150px; } /* Cards */ .service-card-img { height: 160px; } .blog-card-img { height: 160px; } /* Blog detail */ .blog-article-img img { max-height: 200px; } .blog-share { flex-direction: column; align-items: flex-start; } /* Comments */ .comment-item { flex-direction: column; gap: 8px; } .comment-meta { flex-direction: column; gap: 4px; } /* Section subtitle */ .section-subtitle { font-size: 12px; } /* Offer card */ .offer-card-img img { height: 140px; } } @media (max-width: 480px) { .slide-txt1 { font-size: 19px; } .stat-number { font-size: 24px; } .modal-dialog { margin: 10px; } .floating-btn { width: 52px; height: 52px; font-size: 20px; } /* Hero — very small phones (≤480px) */ .hero-section { min-height: 82vh; } .hero-slide { min-height: 82vh; } .hero-slide-content h1, .hero-slide-content h2, .hero-title { font-size: clamp(24px, 8vw, 30px) !important; line-height: 1.14; } .hero-actions .btn { font-size: 14.5px; padding: 14px 18px; min-height: 50px; } .hero-trust { font-size: 11px; padding: 5px 11px; } /* Error */ .error-code { font-size: 60px; } .error-title { font-size: 22px; } /* Gallery */ .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-grid-item { height: 130px; } .gallery-grid--sm .gallery-grid-item { height: 110px; } /* Why */ .why-item { align-items: center; } /* Admin */ .admin-table { font-size: 12px; } .admin-table td, .admin-table th { padding: 6px 8px; white-space: nowrap; } .admin-card { padding: 14px; } } @media print { .header, .footer, .floating-container, .popup-btn, .back-to-top, .modal, .breadcrumb-section, .header-topbar, .site-navbar, .admin-sidebar { display: none !important; } body { font-size: 12pt; color: #000; } a { color: #000; text-decoration: none; } .sidebar { position: static !important; } }