/* Minification failed. Returning unminified contents. (343,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (476,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (477,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (478,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (479,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (480,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (481,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (482,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (483,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (484,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (485,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (486,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (487,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (488,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (489,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (490,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (491,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (492,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (493,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (494,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (495,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (496,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (497,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (498,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (499,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (500,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (501,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (517,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (523,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (527,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (531,17): run-time error CSS1039: Token not allowed after unary operator: '-Error-Alert-color' (605,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x' (606,24): run-time error CSS1039: Token not allowed after unary operator: '-bs-gutter-x' (629,22): run-time error CSS1039: Token not allowed after unary operator: '-darkmood-color' (635,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (639,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (648,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (649,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (656,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (662,26): run-time error CSS1039: Token not allowed after unary operator: '-buttom-color-hover' (663,21): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (664,32): run-time error CSS1039: Token not allowed after unary operator: '-buttom-color-hover' (669,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (670,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (671,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (692,26): run-time error CSS1039: Token not allowed after unary operator: '-Success-Alert-color' (696,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (711,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (713,16): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (726,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (728,16): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (760,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (779,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (783,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (788,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (827,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (869,26): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (893,32): run-time error CSS1039: Token not allowed after unary operator: '-arrow-color' (903,32): run-time error CSS1039: Token not allowed after unary operator: '-arrow-color' (909,33): run-time error CSS1039: Token not allowed after unary operator: '-arrow-color' (931,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (932,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (934,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (960,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (968,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (990,47): run-time error CSS1046: Expect comma, found '0' (990,51): run-time error CSS1046: Expect comma, found '/' (990,70): run-time error CSS1046: Expect comma, found '149' (990,78): run-time error CSS1046: Expect comma, found '/' (990,98): run-time error CSS1046: Expect comma, found '255' (990,106): run-time error CSS1046: Expect comma, found '/' (998,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (999,17): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1000,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1011,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1012,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1013,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1017,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1018,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1019,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1026,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1051,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1059,35): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (1073,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1077,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1092,22): run-time error CSS1039: Token not allowed after unary operator: '-moblie-menu-color' (1130,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1141,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1151,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1186,22): run-time error CSS1039: Token not allowed after unary operator: '-header-footer-backgrand' (1204,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1208,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1247,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (1263,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1277,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1312,29): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1313,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1316,17): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1320,21): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (1326,21): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (1327,33): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1340,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1367,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1370,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color-light' (1382,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1400,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1403,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color-light' (1420,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1452,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1474,16): run-time error CSS1039: Token not allowed after unary operator: '-rate-star-color' (1479,20): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1527,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1531,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1536,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1540,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1549,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1557,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (1595,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1631,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1632,36): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1646,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1658,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1665,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1711,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1712,36): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1718,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1844,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (1866,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1873,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (1899,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (1915,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (1932,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2018,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (2036,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2045,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2134,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2141,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2146,34): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2152,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2173,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (2178,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2312,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (2345,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (2353,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2363,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (2467,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2524,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2544,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2551,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2552,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2559,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (2566,26): run-time error CSS1039: Token not allowed after unary operator: '-buttom-color-hover' (2567,21): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (2568,32): run-time error CSS1039: Token not allowed after unary operator: '-buttom-color-hover' (2578,22): run-time error CSS1039: Token not allowed after unary operator: '-header-footer-backgrand' (2618,26): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2634,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2639,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2645,25): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2672,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2683,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2697,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2703,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2708,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2720,20): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2725,24): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2733,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2754,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (2755,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2759,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (2770,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2771,38): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2794,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (2856,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2863,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (2876,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (2891,26): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (2914,22): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (2928,26): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (2940,17): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (2963,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3032,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3081,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3137,32): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (3142,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3153,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (3168,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (3223,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3238,35): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3239,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3258,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (3270,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (3283,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (3292,35): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3293,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3302,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3365,36): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3387,36): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (3400,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3401,30): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3408,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (3453,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3467,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (3471,36): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (3509,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3515,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3587,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (3588,30): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3673,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (3674,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3681,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3701,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (3715,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3728,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3740,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (3760,20): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (3761,22): run-time error CSS1039: Token not allowed after unary operator: '-rate-star-color' (3768,24): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (3769,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (3799,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3825,22): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (3830,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3837,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (3865,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (3896,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (3901,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (3922,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (3937,21): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (3961,37): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3962,35): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3968,26): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (3985,26): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4008,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4019,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4032,36): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4064,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4065,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4080,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4081,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (4094,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4103,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4113,25): run-time error CSS1039: Token not allowed after unary operator: '-gray-text-color' (4118,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4169,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4214,26): run-time error CSS1039: Token not allowed after unary operator: '-add-backcolor' (4251,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4302,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4326,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (4359,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4372,26): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (4381,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4385,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (4389,24): run-time error CSS1039: Token not allowed after unary operator: '-add-backcolor' (4402,26): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (4405,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4409,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4410,17): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (4495,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (4506,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4507,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4508,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (4519,32): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (4535,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4545,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (4712,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4715,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4720,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4732,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4748,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4758,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4787,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4792,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4796,30): run-time error CSS1039: Token not allowed after unary operator: '-blog-span-hover-color' (4801,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (4806,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4810,30): run-time error CSS1039: Token not allowed after unary operator: '-blog-span-hover-color' (4817,22): run-time error CSS1039: Token not allowed after unary operator: '-rate-star-color' (4836,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4861,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (4874,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (4899,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4927,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (4969,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (4980,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5008,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5013,17): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5019,75): run-time error CSS1046: Expect comma, found '7' (5019,78): run-time error CSS1046: Expect comma, found ')' (5026,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5105,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (5115,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5116,25): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5120,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5121,25): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5154,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (5161,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (5229,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (5234,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (5299,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (5300,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (5418,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (5426,23): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (5431,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5452,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (5456,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5461,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5466,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5472,30): run-time error CSS1039: Token not allowed after unary operator: '-gray-text-color' (5478,21): run-time error CSS1039: Token not allowed after unary operator: '-blog-span-hover-color' (5502,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5515,22): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5516,28): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5519,17): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5526,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5527,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (5528,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5532,24): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5540,20): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5550,20): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5602,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5634,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5635,21): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5636,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (5645,30): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5646,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (5651,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (5652,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (5668,26): run-time error CSS1039: Token not allowed after unary operator: '-arrow-color' (5683,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5737,25): run-time error CSS1046: Expect comma, found '230' (5737,32): run-time error CSS1046: Expect comma, found ')' (5795,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5831,25): run-time error CSS1046: Expect comma, found '230' (5831,32): run-time error CSS1046: Expect comma, found ')' (5890,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (5907,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (5923,25): run-time error CSS1046: Expect comma, found '230' (5923,32): run-time error CSS1046: Expect comma, found ')' (6011,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6028,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6029,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6033,21): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6041,30): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6042,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6107,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6110,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6180,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6183,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6209,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6264,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6295,35): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6303,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6321,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6326,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6349,35): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6350,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6355,39): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6413,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6431,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6435,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-text-color' (6451,35): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6455,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6461,24): run-time error CSS1039: Token not allowed after unary operator: '-list-item-margin' (6461,50): run-time error CSS1039: Token not allowed after unary operator: '-list-item-height' (6461,77): run-time error CSS1039: Token not allowed after unary operator: '-max-btn' (6471,23): run-time error CSS1039: Token not allowed after unary operator: '-list-item-height' (6476,30): run-time error CSS1039: Token not allowed after unary operator: '-list-item-margin' (6514,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6534,21): run-time error CSS1030: Expected identifier, found '.' (6534,46): run-time error CSS1031: Expected selector, found ')' (6534,46): run-time error CSS1025: Expected comma or open brace, found ')' (6575,39): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6579,37): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6596,36): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (6602,22): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (6622,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6628,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (6635,34): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6636,29): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6637,40): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6642,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6650,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6656,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6662,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6694,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6702,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6711,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6715,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (6732,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6743,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6755,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6778,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6779,16): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6783,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6795,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (6826,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6827,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6843,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6844,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (6863,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6951,47): run-time error CSS1046: Expect comma, found '0' (6951,51): run-time error CSS1046: Expect comma, found '/' (6951,68): run-time error CSS1046: Expect comma, found '18' (6951,74): run-time error CSS1046: Expect comma, found '/' (6963,22): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (6980,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (6993,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (7004,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7016,26): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (7017,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7054,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7075,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7084,21): run-time error CSS1039: Token not allowed after unary operator: '-buttom-color-hover' (7099,17): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7115,28): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7128,35): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (7151,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7152,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (7157,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7163,29): run-time error CSS1039: Token not allowed after unary operator: '-arrow-color' (7169,22): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7170,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (7175,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7181,29): run-time error CSS1039: Token not allowed after unary operator: '-arrow-color' (7194,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7208,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7213,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' (7218,17): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (7233,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7234,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7241,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7265,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (7274,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (7280,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7285,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7286,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (7290,30): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7291,25): run-time error CSS1039: Token not allowed after unary operator: '-btn-color' (7319,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7332,30): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7469,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7485,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7501,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7527,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7528,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7529,21): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7540,36): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7541,25): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (7562,26): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (7775,26): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (7786,26): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (7932,26): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (7946,26): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (7962,26): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (8441,26): run-time error CSS1039: Token not allowed after unary operator: '-input-color' (8511,30): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8524,30): run-time error CSS1039: Token not allowed after unary operator: '-second-color' (8532,26): run-time error CSS1039: Token not allowed after unary operator: '-low-color' (10686,17): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (10696,21): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (10700,21): run-time error CSS1039: Token not allowed after unary operator: '-title-color' (10705,21): run-time error CSS1039: Token not allowed after unary operator: '-text-color' (10745,28): run-time error CSS1039: Token not allowed after unary operator: '-line-color' (10752,32): run-time error CSS1039: Token not allowed after unary operator: '-main-color' (10809,32): run-time error CSS1039: Token not allowed after unary operator: '-header-footer-backgrand' (10810,38): run-time error CSS1039: Token not allowed after unary operator: '-backgrand-color' (10818,30): run-time error CSS1039: Token not allowed after unary operator: '-btn-backgrand-color' */ .ProgressBar { height: 4px; background-color: #ddd; margin-top: 5px; display: none; /* این خط را اضافه کنید */ } .ProgressBar.show { /* این بخش را اضافه کنید */ display: block; } .ProgressBar::after { content: ""; display: block; background-color: #3498db; height: 100%; width: 0; animation: progress 3s linear; } @keyframes progress { 0% { width: 0; } 100% { width: 100%; } } .iframe__aparat { height: 100% !important; } .iframe__aparat > div { height: 100% !important; } .AparatIFrame { height: 100% !important; } .aparat__parent__section { background: transparent; width: 44%; height: 80%; position: absolute; z-index: 9999; top: 0; } .two { right: 0; } .aparat__parent__section { display: none; } .slider-continner { display: flex; align-items: center; justify-content: center; width: 80%; position: absolute; } .slider-holder { /*width: 80%; height: 360px !important;*/ /* background-color: white;*/ /*position: relative; border-radius: 20px; overflow: hidden;*/ /* margin-right: 290px;*/ display: flex; align-items: center; position: relative; width: 100%; overflow: hidden; height: 44vh; border-radius: 20px; } .slider-center { width: 50%; /*height: 450px;*/ height: 100%; position: absolute; left: 25%; right: 0%; } .slider-center-rtl { width: 50%; height: 100%; position: absolute; left: 25%; right: 0%; animation-name: slider-center-rtl; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes slider-center-rtl { from { left: 75%; } to { left: 25%; } } .slider-center-ltr { width: 50%; height: 100%; position: absolute; left: 25%; right: 0%; animation-name: slider-center-ltr; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes slider-center-ltr { from { left: -25%; } to { left: 25%; } } .slider-left { width: 50%; /*height: 450px;*/ height: 100%; position: absolute; left: -25%; z-index: 100; } .slider-left-rtl { width: 50%; height: 100%; position: absolute; left: -25%; animation-name: slider-left-rtl; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes slider-left-rtl { from { left: 25%; } to { left: -25%; } } .slider-left-ltr { width: 50%; height: 100%; position: absolute; left: -25%; animation-name: slider-left-ltr; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes slider-left-ltr { from { left: -50%; } to { left: -25%; } } .slider-right { width: 50%; /*height: 450px;*/ height: 100%; position: absolute; left: 75%; } .slider-right-rtl { width: 50%; height: 100%; position: absolute; left: 75%; animation-name: slider-right-rtl; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes slider-right-rtl { from { left: 100%; } to { left: 75%; } } .slider-right-ltr { width: 50%; height: 100%; position: absolute; left: 75%; animation-name: slider-right-ltr; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes slider-right-ltr { from { left: 25%; } to { left: 75%; } } .left-out { width: 50%; height: 100%; position: absolute; left: -50%; } .left-out-rtl { width: 50%; height: 100%; position: absolute; left: -50%; animation-name: left-out-rtl; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes left-out-rtl { from { left: -25%; } to { left: -50%; } } .right-out { width: 50%; height: 450px; position: absolute; right: -50%; } .right-out-ltr { width: 50%; height: 100%; position: absolute; right: -50%; animation-name: left-out-ltr; animation-duration: 0.6s; animation-fill-mode: both; } @keyframes left-out-ltr { from { right: -25%; } to { right: -50%; } } /* .transition { transition:all 0.6s; } */ /* .slider-none{ display: none!important; } */ .boton-contineer { /* width: 100vw; margin: 30px; position: relative; bottom: 294px; z-index: 999;*/ display: flex; align-items: center; justify-content: space-between; /* width: 77%; bottom: 220px;*/ position: relative; /*z-index: 9999;*/ width: 100%; bottom: 0px; top: -15px; height: 88%; } /*.boton-contineer button { margin: 20px; }*/ .slider-dots-contineer { direction: rtl; width: 100%; height: 30px; display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; position: relative; top: 46vh; bottom: 0px; } .slider-dot { width: 10px; height: 10px; background-color: gray; border-radius: 50%; margin: 0px 2px; } .dot-active { background-color: var(--main-color); } .left-btn { position: relative; left: 0px; display: flex; align-items: center; justify-content: flex-start; transition: all 0.5s ease-out; } .right-btn { position: relative; left: 0px; display: flex; align-items: center; justify-content: flex-end; transition: all 0.5s ease-out; } .right-btn:hover { background: linear-gradient(-90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); border-radius: 0px 20px 20px 0px; } .left-btn:hover { background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); border-radius: 20px 0px 0px 20px; } .boton-contineer button { border: none !important; cursor: pointer; background: transparent; width: 239px; height: 100%; transition: all 0.8s ease-out; border-radius: 20px; z-index: 998; } /* .boton-contineer button:hover { background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); border-radius: 20px 0px 0px 20px; }*/ .boton-contineer svg { opacity: 0; transition: all 0.5s ease-out; margin-left: 10px; margin-right: 10px; transform: rotate(180deg); } .boton-contineer :hover svg { opacity: 1; } .slider { direction: ltr; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 50vh; width: 80%; } .slide__img { height: 100%; width: 100% !important; } .slider-slide { padding: 0px 7px; } .slider-slide video { object-fit: cover; position: relative; z-index: 99; } .slider-slide .slider-center-ltr .h_iframe-aparat_embed_frame iframe { /*height: 355px !important;*/ height: 100% !important; } .slider-slide > div { height: 100% !important; } .h_iframe-aparat_embed_frame { height: 100%; position: relative; z-index: 99 !important; } .MySlidesAnimation { animation: MySlidesAnimation 4s infinite; animation-iteration-count: 1; } @keyframes MySlidesAnimation { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 1; } } /*@font-face { font-family: 'Yekan Bakh'; src: url('../fonts/yekanbakh_semi eco/yekan bakh noen/webfonts/fonts/woff2/yekanbakhnoen-regular.woff2') format('woff2'); }*/ @font-face { font-family: 'Kalame'; src: url('../fonts/kalameh/02- Farsi_Numerals/WebFonts/fonts/woff2/KalamehWebFaNum-Regular.woff2') format('woff2'); } @font-face { font-family: 'Yekan Bakh'; src: url('../fonts/yekan bakh fanum/webfonts/fonts/woff2/yekanbakhfanum-regular.woff2') format('woff2'); } :root { --main-color: #ff4a4a; --second-color: #FFF1E5; --main-color-light: #d9d9d9a6; --moblie-menu-color: #cdcdcd; --collaps-line-color: #ff9898; --line-color: #cecece; --low-color: #E4E4E4; --text-color: #757575; --arrow-color: #969696; --btn-backgrand-color: rgba(217, 217, 217, 0.65); --input-color: #b1b1b1; --title-color: #4a4a4a; --rate-star-color: #c1c1c1; --darkmood-color: #0c0e11; --buttom-color-hover: #DB0000; --btn-color: #fff; --backgrand-color: #fff; --header-footer-backgrand: rgb(242 242 242 / 90%); --add-backcolor: #6A6A6A; --blog-span-hover-color: #ff7676; --gray-text-color: #C0C0C0; --Error-Alert-color: #ff0000; --Success-Alert-color: #0bad00; --list-item-height: 48; --list-item-margin: 4; --max-btn: 3; } /*Compare map*/ #mapCompare { width: 100%; height: 400px; border-radius: 10px; position: relative; z-index: 8; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-top: 20px; } .leaflet-popup-content a { color: var(--title-color) !important; text-decoration: none; font-family: 'Yekan Bakh' !important; } .leaflet-popup-content-wrapper { background: var(--second-color) !important; } .leaflet-popup-tip { background: var(--second-color) !important; } .leaflet-popup-close-button { color: var(--Error-Alert-color) !important; font-size: 18px !important; } .leaflet-popup-content { margin: 15px !important; display: flex; justify-content: center; align-items: center; } .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { bottom: 43px !important; } /*Compare map*/ #map { max-width: 590px; height: 295px; margin-right: -50px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 35px; margin-bottom: 15px; } .map-wrapper { display: flex; flex-direction: column; align-items: flex-start; } .map-contianer { width: 125%; } .map-input { display: flex; align-items: center; justify-content: flex-start; } .map-input input { border: none; background: unset; width: auto; height: 40px; } .map-input label { display: flex; } .map-address { display: flex; flex-direction: column; } .map-address input { border: none; background: unset; width: auto; height: 40px; } .map-info input:focus-visible { outline: none !important; } .active .box-bottom { opacity: 1 !important; } figure { max-width: 1320px; width: 100%; padding-right: var(--bs-gutter-x,.75rem); padding-left: var(--bs-gutter-x,.75rem); margin-right: auto; margin-left: auto; } figure table { width: 80%; border-radius: 26px; margin: auto; } figure table td { padding: 10px; border: 1px solid #000; text-align: center; } .diactive { filter: grayscale(100%); opacity: 0.6; } .dark-mode { background: var(--darkmood-color); } /*scroll bar style*/ ::-webkit-scrollbar { width: 10px; background-color: var(--backgrand-color); } ::-webkit-scrollbar-thumb { background: var(--line-color); border-radius: 10px; } /*scroll bar style*/ /********** Shared style **********/ .all_btn_style { display: flex; align-items: center; justify-content: center; border: 2px solid var(--main-color) !important; background: var(--main-color) !important; border-radius: 10px; width: 115px; height: 45px; text-decoration: none; font-size: 14px; font-weight: bold; color: var(--btn-color) !important; transition: all 0.3s; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25)); } .all_btn_style:hover { background: var(--buttom-color-hover) !important; color: var(--backgrand-color) !important; border: 2px solid var(--buttom-color-hover) !important; font-weight: bold; } .all_btn_style:focus { background: var(--backgrand-color) !important; border: 2px solid var(--main-color) !important; color: var(--text-color) !important; } /*Alert*/ .Custom__Alert { display: flex; justify-content: center; align-items: center; margin-top: 6px; width: 100%; position: fixed; top: 15px; z-index: 9999; } .Custom__Alert span { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 100px; background: var(--Success-Alert-color); } .Custom__Alert p { color: var(--text-color); font-size: 16px; margin-right: 15px; } .Success__Alert { display: flex; justify-content: center; align-items: center; padding: 5px 15px; width: auto; height: 60px; margin: 0px 10px; text-align: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background: var(--backgrand-color); border-radius: 100px; fill: var(--backgrand-color); } .Error__Alert { display: flex; justify-content: center; align-items: center; padding: 5px 15px; width: auto; height: 60px; margin: 0px 10px; text-align: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background: var(--backgrand-color); border-radius: 100px; fill: var(--backgrand-color); } .Success__Alert { display: none; } .Error__Alert { display: none; } .show { display: flex; } .hide { display: none !important; } /* LoginRegister Alert */ .Custom__LoginRegister__Alert { display: flex; justify-content: flex-start; align-items: center; margin-top: 6px; width: 100%; position: absolute; top: 0; z-index: 9999; right: 41%; } .Alert_design { background: var(--backgrand-color); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; display: flex; align-items: center; justify-content: center; width: 300px; height: 40px; border-radius: 100px; } /********** End Shared style **********/ .wrapper { width: 100%; overflow: hidden; min-height: 700px; margin-top: 32px; } body { background-color: var(--backgrand-color); margin: 0px; direction: rtl; font-family: 'Yekan Bakh' !important; color: var(--text-color); overflow-x: hidden; } a{ text-decoration: none !important; color: var(--main-color); } .wrapper__tablet__line { display: none; } .wrapper__navbar__content { display: flex; align-items: center; justify-content: space-between; width: 86%; } /************* start mobli menu **************/ .mobile__menu { display: none; } #menuToggle { display: block; position: relative; /* top: 50px; left: 50px;*/ z-index: 1; -webkit-user-select: none; user-select: none; } #menuToggle a { display: flex; justify-content: flex-end; align-items: center; width: 150px; text-decoration: none; color: #232323; transition: color 0.3s ease; margin: 10px 0; } #menuToggle a:hover { color: var(--main-color); } #menuToggle input { display: block; width: 35px; height: 32px; position: absolute; top: -4px; left: -1.5vw; cursor: pointer; opacity: 0; z-index: 2; } #menuToggle span { display: block; width: 25px; height: 4px; margin-bottom: 2px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; bottom: 14px; left: 0px; } #menuToggle span:first-child { transform-origin: 0% 0%; } #menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } #menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: var(--title-color); display: block; } #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } /******************************************************* login modal *******************************************************/ .container__modal { width: 100%; } .container__modal input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid var(--arrow-color); border-radius: 10px; box-sizing: border-box; } .container__modal input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid var(--arrow-color); border-radius: 10px; box-sizing: border-box; } .container__modal input:focus { outline: 1px solid var(--arrow-color); } .login__rigster__btn { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; width: 100%; } .signupButton { display: flex; flex-direction: row; align-items: center; justify-content: center; } .cancelbtn { display: flex; align-items: center; justify-content: center; background: var(--main-color); border: 2px solid var(--main-color); border-radius: 100px; color: var(--btn-color); margin-top: 25px; font-size: 16px; width: auto; height: 40px; padding: 20px; font-family: 'Yekan Bakh' !important; } .imgcontainer { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; } .imgcontainer p { margin: 0; } .imgcontainer span { font-size: 16px; font-weight: bold; margin: 0; margin-bottom: 10px; color: var(--title-color); } .psw { display: flex; justify-content: flex-end; align-items: center; text-decoration: none; color: var(--text-color); font-size: 14px; } .modal { /*display: none;*/ position: fixed; z-index: 99; left: 0; top: 0; width: 100%; height: auto; overflow: auto; padding-top: 60px; transform: translate(0px, -150vh); opacity: 0; transition: all 0.4s ease; } .activeLoginAnime { transform: translate(0px, 0px); opacity: 1; background: linear-gradient(180deg, rgb(0 0 0 / 42%) 0%, rgb(149 149 149 / 38%) 50%, rgb(255 255 255 / 2%) 100%); /*backdrop-filter: blur(3px);*/ } .submit__btn { display: flex; align-items: center; justify-content: center; background: var(--main-color); color: var(--backgrand-color); border: 2px solid var(--main-color); font-size: 16px; width: auto; height: 40px; padding: 20px; border-radius: 100px; margin: auto; font-family: 'Yekan Bakh' !important; } .submit__btn:active { border: 2px solid var(--main-color); background: var(--backgrand-color); color: var(--title-color); } .cancelbtn:active { border: 2px solid var(--main-color); background: var(--backgrand-color); color: var(--title-color); } .modal-content { display: flex; flex-direction: column; align-items: center; background-color: var(--backgrand-color); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 20px; margin: 5% auto 15% auto; width: 500px; height: auto; } .container__modal__register { margin-top: 20px; } .close { width: 100%; height: 29px; display: flex; align-items: center; justify-content: flex-end; padding-left: 20px; margin-top: 10px; font-size: 40px; } .close:hover, .close:focus { color: var(--main-color); cursor: pointer; } #loadGoogle { display: flex; align-items: center; justify-content: center; border-bottom: 2px solid var(--btn-backgrand-color); padding-bottom: 5px; margin-bottom: 15px; width: 92%; } #loadResponseG { display: flex; align-items: center; } #loadResponseG p { font-size: 16px; font-weight: 600; color: var(--title-color); } #loadResponseG a { background: var(--backgrand-color) !important; } /******************************************************* end login modal *******************************************************/ #menu { position: absolute; width: 285px; height: 100vh; border-radius: 0px 0px 0px 130px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; top: -15px; padding: 0; left: 35px; background: var(--moblie-menu-color); list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(600px, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } .menu__content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; top: -85px; } .moblie__login { background: none; border: none; display: flex; align-items: center; font-family: 'Yekan Bakh' !important; } .menu__content svg { right: unset !important; left: 7px; } #menu li { display: flex; align-items: center; justify-content: flex-end; font-size: 14px; font-weight: normal; color: var(--title-color); width: 100%; } .moblie__login__contianer { display: flex; } .moblie__login__contianer p { font-size: 14px; font-weight: normal; color: var(--title-color); } .moblie__Social__media__contianer { display: flex; align-items: center; justify-content: space-evenly; width: 100%; position: absolute; bottom: 20px; color: var(--title-color); } .moblie__Social__media { display: flex; align-items: center; } .moblie__Social__media a { width: auto !important; margin: 0 3px !important; } .moblie__Social__media svg { left: unset !important; } #menuToggle svg { position: relative; right: -26px; } #menuToggle input:checked ~ ul { transform: none; transform: translate(-215px, 0px); } /************* end mobli menu **************/ .wrapper__navbar { font-size: 14px; width: 100%; height: auto; padding: 0px; background: var(--header-footer-backgrand); backdrop-filter: blur(4px); position: fixed; top: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .wrapper__navbar__link ul { display: flex; align-items: center; justify-content: space-between; list-style: none; } .wrapper__navbar__link ul a:hover { color: var(--main-color); } .wrapper__navbar__link a { color: var(--text-color); text-decoration: none; margin: 17px; transition: all 0.3s; } .wrapper__navbar__link { width: 100%; display: flex; justify-content: flex-start; align-items: center; } .wrapper__navbar__logo { display: flex; justify-content: center; align-items: center; width: 100px; margin: 0; padding: 0; /* position: relative; right: 25px;*/ } .wrapper__navbar__logo img { width: 70px; } .wrapper__navbar__search { display: flex; flex-direction: column; align-items: center; justify-content: end; width: auto; } /************ search result ************/ .search__result { position: absolute; top: 40px; background: var(--second-color); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; width: 375px; height: auto; max-height: 300px; border-radius: 15px; padding: 10px; overflow: auto; align-items: center; justify-content: flex-start; flex-direction: column; } .search__result p { margin: 0; font-size: 12px; color: var(--text-color); } .result__not__found { width: 65px; } .search__result__item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: justify; text-decoration: none; color: var(--text-color); margin-bottom: 20px; } .search__result__item img { width: 100px; height: 100px; object-fit: cover; border-radius: 10px; } .result__text__item { display: flex; justify-content: flex-start; flex-direction: column; width: 100%; height: 100px; margin-right: 10px; overflow: hidden; } .result__text__item h4 { margin: 0; } .result__text__item p { margin: 0; } /************ search result ************/ .wrapper__navbar__search input { width: 345px; height: 28px; padding-right: 10px; border: 1px; border-radius: 0px 35px 35px 0px; outline: 1px solid var(--main-color); background: var(--main-color); font-size: 12px; font-family: 'Yekan Bakh' !important; color: var(--backgrand-color); } .wrapper__navbar__search input::placeholder { color: var(--btn-color); font-size: 12px; } .wrapper__navbar__search input:focus { border: none; color: var(--btn-color); outline: 1px solid var(--main-color) !important; font-size: 14px; letter-spacing: 1px; } .wrapper__navbar__search button { display: flex; align-items: center; justify-content: center; width: auto; height: 30px; border-radius: 35px 0px 0px 35px; border: 1px; background: var(--main-color); padding: 10px; cursor: pointer; } ::placeholder { color: #f2f2f2; font-weight: lighter; } .wrapper__navbar__botton { display: flex; align-items: center; justify-content: center; margin-right: 15px; } .wrapper__navbar__botton a { display: flex; align-items: center; justify-content: center; width: auto; height: 35px; white-space: pre; font-size: 14px; text-decoration: none; padding: 0px 20px; color: var(--text-color); border: none; border-radius: 100px; background: var(--main-color-light); cursor: pointer; letter-spacing: 0.5px; } #login-btn { display: flex; align-items: center; justify-content: center; width: 75px; height: 23px; font-size: 14px; color: var(--text-color); border: none; background: unset; font-family: 'Yekan Bakh' !important; cursor: pointer; text-decoration: none; } .Register-btn { display: flex; align-items: center; justify-content: center; width: auto; height: 35px; white-space: pre; font-size: 14px; text-decoration: none; padding: 0px 20px; color: var(--text-color); border: none; border-radius: 100px; background: var(--main-color-light); font-family: 'Yekan Bakh' !important; cursor: pointer; } .Mobile-Register { background: none !important; } #language { display: none; /*display: flex; align-items: center; justify-content: center;*/ width: 45px; height: 20px; font-size: 11px; color: var(--text-color); background: unset; border: none; cursor: pointer; } .dark-mood { display: none; /*display: flex;*/ align-items: center; justify-content: center; width: 37px; height: auto; border: none; background: unset; cursor: pointer; } .light-mood { display: none; /*display: flex;*/ align-items: center; justify-content: center; width: 37px; height: auto; border: none; background: unset; cursor: pointer; } .wrapper__Social__media__line { display: inline-block; background: var(--line-color); width: 3px; height: 110px; border-radius: 3px; } .wrapper__Social__media { position: fixed; z-index: 7; right: 25px; top: 0; } .wrapper__Social__media__icon { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 15px; } .svg_icon_social { fill: var(--rate-star-color); transition: fill 0.3s ease; } .svg_icon_social :hover { fill: var(--main-color); } .wrapper__Social__media__main { display: flex; align-items: center; justify-content: center; flex-direction: column; } /*HomePage Slider*/ .wrapper__Slidshow { direction: ltr; width: 100%; height: 560px; margin-top: 31px; /*margin-bottom: 35px;*/ } .slideshow-container { display: flex; flex-direction: column; width: 100%; height: auto; flex-direction: column; } .mySlider__warpper { display: flex; } .wrapper__Slidshow__content { display: flex; height: 100%; width: 94%; } .wrapper__Slidshow__content__text { direction: rtl; display: flex; flex-direction: column; justify-content: center; width: 70%; height: auto; margin: auto; padding-left: 30px; text-align: justify; font-size: 14px; overflow: hidden; color: var(--text-color) !important; } .wrapper__Slidshow__content__text span { color: var(--text-color) !important; } .wrapper__Slidshow__content__text p { line-height: 2; color: var(--text-color) !important; } .wrapper__Slidshow__content__text h2 { color: var(--title-color); font-family: 'Kalame'; height: 30px; } .dot { height: 12px; width: 12px; margin: 0 2px; background-color: var(--line-color); border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; cursor: pointer; } .dot.active { background-color: var(--main-color); } .wrapper__Slidshow__content__picture { display: flex; align-items: center; flex-direction: column; width: 80pc; } .slideshow-container img { width: 100%; height: 500px; display: flex; padding-right: 25px; align-items: center; justify-content: flex-end; border-radius: 0px 0px 110px 0px; filter: drop-shadow(6.78051px 8.7178px 9.68644px rgba(93, 93, 93, 0.15)); } .wrapper__Slidshow__dot { width: 791px; height: 528px; display: flex; position: absolute; justify-content: center; align-items: flex-end; } .wrapper__Slidshow__Mobiledot { display: none; } .dotm { height: 12px; width: 12px; margin: 0 2px; background-color: var(--line-color); border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; cursor: pointer; } .wrapper__Slidshow__line { width: 56%; height: 610px; display: flex; justify-content: flex-end; position: absolute; top: 0; background: antiquewhite; } .warper__line__contaner { width: 100%; height: 0; } .line__contaner { width: 100%; height: 204px; position: relative; z-index: -9; bottom: 170px; /*margin-left: 155px;*/ } .line__slider { /*width: calc(51% - 10px);*/ width: 100%; height: calc(100% - 10px); position: relative; border-bottom: 3.5px solid var(--line-color); border-right: 3.5px solid var(--line-color); border-radius: 0px 0px 115px 0px; z-index: 2; margin-right: 10px; margin-bottom: 10px; } .top__circle { width: 13px; height: 13px; position: absolute; top: 0px; right: -8px; border-radius: 50%; background-color: var(--line-color); z-index: 3; } .left__circle { display: none; width: 13px; height: 13px; position: absolute; bottom: -8px; left: 0px; border-radius: 50%; background-color: var(--line-color); z-index: 3; } .cover { width: 100%; height: 100%; background-color: var(--backgrand-color); position: absolute; top: 0%; right: -1%; z-index: 3; animation-name: coveranime; animation-duration: 2500ms; animation-iteration-count: 1; animation-timing-function: linear; animation-direction: normal; animation-fill-mode: forwards; } @keyframes coveranime { 0% { width: 100%; } 60% { width: 5%; height: 100%; } 65% { width: 5%; height: 40%; } 80% { width: 5%; height: 0%; } 100% { width: 5%; height: 0%; } } .contianer__Slidshow__line { position: absolute; bottom: 0; right: 0; width: 75%; height: 50%; border-bottom: 3.5px solid var(--line-color); border-right: 3.5px solid var(--line-color); border-bottom-right-radius: 135px; } .wrapper__Slidshow__line__circle { display: inline-block; background: var(--line-color); width: 13px; height: 13px; border-radius: 100%; } .right-top { position: absolute; right: -5px; top: 50%; } .bottom-left { position: absolute; bottom: -4px; left: 195px; z-index: 9; } /*.active { background-color: var(--main-color); }*/ .txt__animation__pic { display: flex; justify-content: center; /* overflow: inherit; margin-bottom: -95px;*/ } .test { display: none !important; width: 150px !important; height: 115px !important; border-radius: unset !important; transform: rotate(180deg); animation-name: test; animation-duration: 3s; filter: none !important; } .fade { width: 100%; animation-name: fade; animation-duration: 1.5s; } .slider__amination { animation-name: slideramination; animation-duration: 1.5s; } /*@keyframes slideramination { from { transform: translate(0px, 0px); opacity: 0.4; } to { transform: translate(-780px, 0px); opacity: 1; } }*/ @keyframes test { from { transform: translate(-150px, 165px); } to { transform: translate(0px, 0px); transform: rotate(180deg); } } .txtAnime { /*margin-top: 100px;*/ padding-left: 55px; padding-right: 20px; /* padding-left: 30px; padding-right: 100px;*/ animation-name: txtAnime; animation-duration: 1.5s; animation: txtAnime 2s; } @keyframes txtAnime { from { transform: translate(-585px, 0px); } to { transform: translate(0px, 0px); } } .pictureAnime { animation-name: pictureAnime; animation-duration: 1.5s; animation: pictureAnime 2s; } @keyframes pictureAnime { from { transform: translate(-730px, 0px); } to { transform: translate(0px, 0px); } } @keyframes fade { from { opacity: 0.4; transform: translate(-15px, 0px); } to { opacity: 1; transform: translate(0px, 0px); } } .top-left-dot { display: block; background: var(--line-color); width: 13px; height: 13px; border-radius: 50px; position: absolute; z-index: 1; left: -8px; top: 50%; } /*categorie*/ .wrapper__categorie { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin-top: 20px; margin-bottom: 60px; } .wrapper__categorie h1 { font-size: 24px; color: var(--title-color); margin: 0 5px; } .wrapper__categorie span { display: flex; align-items: center; font-size: 24px; color: var(--title-color); font-weight: bold; margin: 30px 0px; } .wrapper__contianer__categorie { display: flex; max-width: 79pc; flex-wrap: wrap; margin-top: auto; margin-bottom: 20px; align-items: center; justify-content: center; } .wrapper__categorie__row__item { display: flex; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 180px; height: 175px; margin-left: 25px; border-radius: 10px; text-decoration: none; font-weight: bold; color: var(--text-color); opacity: 0.6; cursor: context-menu; overflow: hidden; transition: all 0.5s; } .Dactive-item { display: none; } .wrapper__categorie__row__item { fill: black !important; } .categorie__unactive__row__item { background: var(--backgrand-color); width: 100%; height: 0px; overflow: hidden; display: none; justify-content: center; align-items: center; position: relative; top: 47px; /*transition: all 0.8s;*/ transition: height 0.8s; } .categorie__unactive__row__item h6 { font-size: 14px; text-align: center; font-weight: normal; color: var(--text-color); padding: 5px; } .wrapper__categorie__row__item:hover { opacity: 1; box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); } .wrapper__categorie__row__item:hover .categorie__unactive__row__item { display: flex; top: 0px; height: 100%; } .wrapper__categorie__row__item:hover svg { display: none; } .wrapper__categorie__row__item:hover p { display: none; } .active__item { opacity: 1; cursor: pointer; } .active__item:hover { background: none; box-shadow: none; box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); transform: translate(0px, -10px); } .active__item:hover svg { display: flex !important; } .active__item:hover p { display: flex !important; } .wrapper__categorie__row { display: flex; align-items: center; justify-content: space-evenly; width: 90%; flex-wrap: wrap; } .wrapper__categorie__row__item p { font-size: 13px; } .wrapper__puzzle__slider { width: 100%; display: flex; flex-direction: column; align-items: center; } .wrapper__Slider { width: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .wrapper__Slider__rigth { width: 100%; margin-top: 45px; margin-bottom: 90px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .wrapper__Slider__title { display: flex; align-items: center; justify-content: center; width: 81%; color: var(--title-color); } .wrapper__Slider__title h2 { font-size: 20px; white-space: nowrap; } .wrapper__Slider__title__line { display: flex; align-items: center; justify-content: center; margin-right: 15px; width: 100%; } .Slider__dot { display: inline-block; background-color: var(--line-color); width: 12px; height: 12px; border-radius: 50px; } .line { width: 100%; height: 4px; border-bottom: 3.5px solid var(--line-color); } .wrapper__Slider__text { width: 80%; } .wrapper__slider__section { display: flex; align-items: center; gap: 50px; width: 100%; justify-content: space-evenly; } /* col one */ .section__first__col { display: felx; width: 100%; } .dotted-slider { position: relative; height: 250px; } .dotted-slider__slide { position: absolute; width: 100%; transition: opacity 0.5s ease-in-out; } .dotted-slider img { width: 100%; height: 375px; border-radius: 45px 0 0 45px; filter: drop-shadow(6.22556px 8.0043px 8.89366px rgba(0, 0, 0, 0.2)); } .dotted-slider__circles { display: flex; align-items: center; justify-content: center; margin-top: 140px; gap: 8px; cursor: pointer; direction: ltr; } .leaflet-control-attribution a { display: none !important; } .dotted-slider__circle { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #818181; } /* col two */ .section__second__col { width: 100%; font-size: 14px; text-align: justify; padding-right: 70px; } .section__second__col h1 { display: none; margin: 0; margin-right: 20px; } .section__second__col p { display: none; margin: 20px 0; } .section__second__col .button { display: flex; justify-content: flex-end; } .section__second__col .button a { display: flex; align-items: center; justify-content: center; border: 2px solid var(--main-color); border-radius: 10px; width: 115px; height: 45px; text-decoration: none; font-size: 14px; font-weight: bold; color: var(--text-color); transition: all 0.3s; } .section__second__col .button a:hover { background: var(--main-color); color: white; font-weight: unset; } .section__second__col button { border: 2px solid var(--main-color); border-radius: 1rem; padding: 10px 20px; background-color: transparent; cursor: pointer; } /* dotted slider */ .wrapper__Gallery { display: flex; align-items: center; justify-content: center; flex-direction: column; } .wrapper__Gallery__title { width: 80%; display: flex; align-items: center; justify-content: center; color: var(--title-color); } .Gallery__dot { display: inline-block; background-color: var(--line-color); width: 16px; height: 12px; border-radius: 50px; } .wrapper__Gallery__title__line { width: 100%; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .wrapper__Gallery__title h2 { font-size: 20px; white-space: nowrap; } .row { /*padding: 0 86px;*/ margin-right: 47px; } /* Create two equal columns that sits next to each other */ .column { flex: 50%; padding: 0 10px; } .column img { margin-top: 8px; vertical-align: middle; border-radius: 15px 15px 15px 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } .btn:hover { background-color: #ddd; } .btn.active { background-color: #666; color: white; } * { box-sizing: border-box; } .wrapper__Gallery__column__link { display: flex; align-items: center; justify-content: flex-start; } .wrapper__Gallery__column__link a { text-decoration: none; color: #656565; font-size: 14px; margin-left: 10px; } .wrapper__Gallery__column__star { display: flex; align-items: center; justify-content: center; position: relative; right: 297px; } .wrapper__Gallery__column__star p { font-size: 14px; margin-right: 8px; } .wrapper__Gallery__column__link__down { display: flex; align-items: center; justify-content: flex-start; transform: translate(60px, -7px); } .wrapper__Gallery__column__star__number { display: flex; align-items: center; position: relative; right: 258px; } .wrapper__Gallery__column__star__number p { margin-right: 8px; } .wrapper__Gallery__column__link__down a { text-decoration: none; color: #656565; font-size: 14px; margin-left: 10px; } .wrapper__Gallery__column__star__right__down { display: flex; align-items: center; justify-content: center; position: relative; right: 296px; } .rigght { right: 219px !important; } .wrapper__Gallery__column__star__right__down p { font-size: 14px; margin-right: 8px; } .wrapper__Gallery__Slider__title { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--title-color); } .Slider__title { display: flex; justify-content: center; width: 80%; } .wrapper__Gallery__Slider__title h2 { font-size: 20px; white-space: nowrap; } .wrapper__contianer__headerImg { display: inline-block; position: relative; width: 43vw; height: auto; } .line__contianer { display: flex; position: absolute; bottom: 0; height: 10px; } .line__contianer__background { position: absolute !important; bottom: -5px !important; direction: ltr; display: inline-block; background: var(--backgrand-color); height: 13px; width: 43vw; margin-right: -65vw; } .circle__contianer__background { display: inline-block; background: var(--line-color); width: 13px; height: 13px; border-radius: 100%; position: relative; bottom: 0; } .none-dot { width: 4px !important; background: var(--backgrand-color) !important; margin-right: 2px !important; } .wrapper__Gallery__Slider { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; margin-top: 35px; margin-bottom: 35px; } /* slick slider */ /* third slider */ .slick-container { position: relative; display: flex; flex-direction: column; align-items: center; width: 1015px; } .slick__slider { position: relative; overflow-y: hidden; overflow-x: hidden; display: flex; justify-content: center; align-items: center; gap: 100px; width: 100%; height: 220px; } .slick__slide { position: absolute; width: auto; height: 100%; transition: all 0.3s ease-in-out; background-color: transparent; border-radius: 12px; } .slick__right--unactive { top: 0; right: 0; transform: translateX(125%); opacity: 0; } .slick__right { top: 0; right: 25px; transform: translateX(0%); } .slick__center--right { top: 0; right: 0; transform: translateX(-125%); } .slick__center--left { top: 0; right: -25px; transform: translateX(-250%); } .slick__left { top: 0; right: -50px; transform: translateX(-375%); } .slick__left--unactive { top: 0; right: 0%; transform: translateX(-500%); opacity: 0; } .slick__slide img { width: 212px; height: 75%; border-radius: 14px 14px 14px 0; } .slick__slide__content { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 0 5px; } .place-name { display: flex; flex-direction: column; } .bi-star-fill { color: var(--main-color); } .place-name h6 { margin: 0; } .place-name p { font-size: 13px; margin: 0; } .slick__arrow { position: absolute; display: inline-block; width: 25px; height: 25px; border: none; border-radius: 50%; cursor: pointer; transform: translateY(-50%); background-color: unset; } .slick__arrow:hover { opacity: 0.7; } .slick__arrow-right { top: 45%; right: -50px; } .slick__arrow-left { top: 45%; left: 0px; } /* slick slider */ .wrapper__Gallery__Slider__text { display: flex; flex-direction: column; text-align: justify; width: 80%; } .wrapper__Gallery__Slider__text p { font-size: 11px; font-weight: 300; line-height: 22px; } .wrapper__Gallery__Slider__text a { display: flex; align-items: center; justify-content: center; border: 2px solid var(--main-color); border-radius: 10px; background-color: unset; width: 85px; height: 35px; text-decoration: none; font-size: 12px; color: #545454; } .wrapper__Gallery__title__text { width: 80%; font-size: 14px; text-align: justify; margin-bottom: 30px; line-height: 2; } .wrapper__Gallery__title__text a { text-decoration: none; color: var(--main-color); } .wrapper__Gallery__bttom { display: flex; align-items: center; justify-content: center; border: 2px solid var(--main-color); background: var(--main-color); border-radius: 10px; width: 115px; height: 45px; text-decoration: none; font-size: 14px; font-weight: bold; color: var(--btn-color) !important; transition: all 0.3s; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25)); margin-top: 20px; } .wrapper__Gallery__bttom:hover { background: var(--buttom-color-hover); color: var(--backgrand-color); border: 2px solid var(--buttom-color-hover); font-weight: bold; } footer { width: 100%; } .wrapper__footer { background: var(--header-footer-backgrand); border-radius: 200px 0px 0px 0px; left: 0; bottom: 0; width: 100%; height: auto; display: flex; align-items: center; justify-content: center; } .contianer__footer { display: flex; align-items: flex-end; justify-content: space-between; width: 80%; margin-top: 20px; } .contianer__footer__links { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .moblie__logo { display: none; } .wrapper__footer__quick__access { display: flex; justify-content: center; align-items: flex-start; } .wrapper__footer__quick__access span { display: block; width: 13px; height: 13px; background: var(--line-color); border-radius: 100px; position: absolute; right: 154px; } .quick__access { display: flex; flex-direction: column; align-items: flex-start; height: 227px; /* padding-right: 15px; border-right: 3.5px solid var(--line-color);*/ } .quick__access p { color: var(--main-color); margin: 0px; } .quick__access a { color: var(--text-color); text-decoration: none; margin: 4px 0px; } .quick__access a:hover { color: var(--main-color); } .wrapper__footer__social__media { display: flex; align-items: center; justify-content: center; direction: ltr; } .wrapper__footer__left { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; margin: 25px 0px; } .wrapper__footer__categorie { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; width: 60%; } .wrapper__footer__categorie p { color: var(--main-color); margin: 0; } .footer__categorie__linkItem { display: flex; flex-wrap: wrap; width: auto; } .footer__categorie__linkItem a { color: var(--text-color); margin: 3px 0px; text-decoration: none; /*width: 300px;*/ cursor: pointer; opacity: 0.4; } .active__footer__link__contianer { display: flex; flex-direction: column; } .active__footer__link { color: var(--text-color); cursor: pointer !important; opacity: 1 !important; } .active__footer__link:hover { color: var(--main-color); } .wrapper__footer__logo p { font-size: 18px; color: var(--text-color); margin-top: -15px; white-space: pre; } .wrapper__footer__left__media { direction: rtl; } .wrapper__footer__left__media a { text-decoration: none; margin: 3px; fill: var(--text-color); transition: fill 0.3s ease; } .wrapper__footer__left__media a:hover { fill: var(--main-color); } .wrapper__footer__left__titr { margin-right: 14px; } .wrapper__footer__left__titr p { color: var(--text-color); font-weight: 600; letter-spacing: 0.75px; } .wrapper__footer__left img { width: 130px; } /* start places page style */ /*loading style*/ .ring { display: flex; justify-content: center; align-items: center; position: absolute; /* top: 50%; */ left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; background: var(--backgrand-color); border: 2px solid var(--line-color); border-radius: 50%; text-align: center; font-size: 12px; color: var(--text-color); } .ring:before { content: ''; position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; border: 2px solid transparent; border-top: 2px solid var(--main-color); border-right: 2px solid var(--main-color); border-radius: 50%; animation: animateC 2s linear infinite; } .ring span { display: block; position: absolute; top: calc(50% - 2px); left: 50%; width: 50%; height: 4px; background: transparent; transform-origin: left; animation: animate 2s linear infinite; } .ring span:before { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--main-color); top: 0px; right: -5px; } @keyframes animateC { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } /*end loading style*/ .slideshow-container-place img { width: 640px; height: 444px; justify-content: flex-end; border-radius: 0px 40px 40px 0px; filter: drop-shadow(6.78051px 8.7178px 9.68644px rgba(93, 93, 93, 0.15)); position: relative; margin: 80px 0px 10px 80px; } .wrapper__contianer { width: 100%; display: flex; justify-content: center; margin-bottom: 50px; } .wrapper__contianer__main { width: 89%; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; } /*start right line*/ .wrapper__contianer__main__border { justify-items: center; flex-direction: column; display: flex; align-items: center; } .main__line { display: inline-block; height: 100%; width: 3.5px; background-color: var(--line-color); } .main__circle { display: inline-block; height: 17px; width: 17px; background-color: var(--line-color); border-radius: 100px; } /*end right line*/ .contianer__main { width: 89%; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; } .wrapper__contianer__main__title { color: var(--title-color); } .wrapper__contianer__main__filter { display: flex; } .wrapper__contianer__main__filter button { width: auto; height: 35px; padding: 18px; margin: 5px; display: flex; align-items: center; justify-content: center; background: var(--low-color); border-radius: 8px; border: none; font-family: 'Yekan Bakh'; color: #757575; cursor: pointer; } .wrapper__contianer__main__filter button:focus { color: #f2f2f2; background: #6a6a6a; } /*start search box style*/ .wrapper__contianer__main__btn__search { width: 100%; display: flex; justify-content: space-between; align-items: center; } .wrapper__contianer__main__btn__search__box input { height: 33px; width: 285px; background: var(--low-color); border: none; border-radius: 0px 8px 8px 0px; padding: 11px; font-family: 'Yekan Bakh'; } .wrapper__contianer__main__btn__search__box { display: flex; align-items: center; justify-content: center; } .wrapper__contianer__main__btn__search__box button { background: var(--low-color); border-radius: 8px 0px 0px 8px; border: none; height: 33px; padding: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; } ::placeholder { color: var(--low-color); } /*end search box style*/ /*start image gallery*/ .wrapper__contianer__main__imgSlid { display: flex; justify-content: space-evenly; flex-direction: column; width: 91.5%; } .wrapper__contianer__main__gallery { display: flex; justify-content: center; } .wrapper__contianer__main__imgSlid__conted { width: 280px; margin-top: 18px; } .main__imgSlid__conted { text-decoration: none; color: var(--text-color); display: flex; align-items: 255px; flex-direction: column; width: 255px; } .main__imgSlid__conted img { width: 255px; height: 255px; border-radius: 10px; } .main__imgSlid__titr { display: flex; align-items: center; justify-content: space-between; height: 45px; } .main__imgSlid__titr p { margin-right: 7px; font-size: 14px !important; } .main__imgSlid__titr__rate { display: flex; align-items: center; justify-content: center; } .main__imgSlid__conted p { text-align: justify; font-size: 11px; } .warper__gallery { direction: rtl; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 30px; margin-bottom: 65px; } .warper__gallery__contianer { display: flex; flex-direction: column; width: 80%; } .warper__gallery__contianer__row { display: flex; } .two { align-items: flex-end; margin-top: -30px; } .warper__gallery__main__contianer { display: flex; align-items: center; flex-direction: column; /*margin-left: 40px;*/ width: 60%; text-decoration: none; color: var(--text-color); } .topright { padding-left: 25px; } .bottomleft { padding-right: 25px; } .warper__gallery__main__contianer img { width: 100%; height: 300px; object-fit: cover; border-radius: 14px 14px 14px 0px; filter: drop-shadow(3.62713px 5.4407px 9.06783px rgba(93, 93, 93, 0.28)); } .warper__gallery__contianer__titr { display: flex; direction: rtl; justify-content: space-between; width: 100%; } .warper__gallery__contianer__text { display: flex; align-items: center; width: auto; justify-content: space-between; } .warper__gallery__contianer__text p { margin-right: 10px; } .warper__gallery__contianer__rate { display: flex; align-items: center; } .warper__main__contianer { display: flex; align-items: center; flex-direction: column; /*padding-left: 40px;*/ width: 54%; text-decoration: none; color: var(--text-color); } .warper__main__contianer img { width: 100%; object-fit: cover; height: 350px; border-radius: 14px 14px 14px 0px; filter: drop-shadow(3.62713px 5.4407px 9.06783px rgba(93, 93, 93, 0.28)); } .warper__contianer__titr { display: flex; direction: rtl; justify-content: space-between; width: 100%; } .warper__contianer__text { display: flex; align-items: center; width: auto; justify-content: space-between; } .warper__contianer__text p { margin-right: 10px; } .warpe__contianer__rate { display: flex; align-items: center; } .warper__gallery__contianer__rate p { margin-right: 7px; } .warpe__contianer__rate p { margin-right: 7px; } /* btn page number style */ .wrapper__page__number { display: flex; align-items: center; width: 22%; justify-content: space-evenly; } .wrapper__page__number__botton { display: flex; align-items: center; justify-content: space-around; } .wrapper__page__number__botton button { background-color: var(--btn-backgrand-color); border: none; width: 22.63px; height: 23.63px; border-radius: 3px; color: var(--text-color); font-family: 'Yekan Bakh'; display: flex; align-items: center; justify-content: center; margin-left: 6px; cursor: pointer; } .wrapper__page__number__botton button:focus { color: #f2f2f2; background: var(--main-color); } /* end places page style */ /* Start place page style */ /* One section */ .wrapper__fullWidth__picture { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .wrapper__fullWidth__picture a { text-decoration: none; color: var(--main-color); } .wrapper__contianer__fullWidth__picture { display: flex; align-items: flex-start; width: 87%; height: auto; justify-content: center; } .wrapper__contianer__paragraph h1 { font-size: 24px; padding-left: 60px; margin-bottom: 0; } .wrapper__contianer__paragraph__section { display: flex; flex-direction: column; height: auto; width: 90vw; padding: 0 25px; text-align: justify; } .wrapper__contianer__paragraph { display: flex; flex-direction: column; justify-content: flex-start; height: 50vh; overflow: hidden; } .wrapper__contianer__paragraph p { margin: 6px 0px; } .Page__Header__content { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; padding-left: 65px !important; } .wrapper__contianer__paragraph__rate { display: flex; align-items: center; height: 35px; } .wrapper__contianer__paragraph__rate p { /*padding-right: 15px;*/ padding-left: 0 !important; color: var(--text-color) !important; } .name-turki { margin-left: 20px !important; } .wrapper__contianer__fullWidth__picture__image { position: relative; display: flex; justify-content: flex-end; align-items: flex-start; flex-direction: column; /* width: 680px; height: 150px;*/ border-left: 3.5px solid var(--line-color); border-bottom: 3.5px solid var(--line-color); border-bottom-left-radius: 80px; /*height: 205px;*/ } .wrapper__contianer__fullWidth__picture__image img { height: auto; width: 100%; border-radius: 0px 0px 70px 70px; padding-left: 25px; padding-bottom: 19px; object-fit: cover; } .wrapper__contianer__fullWidth__picture__text { display: flex; align-items: center; justify-content: center; position: absolute; background: var(--backgrand-color); height: 23px; width: 180px; transform: rotate(-90deg) translateY(-142px); left: 52px; top: 78px; } .wrapper__contianer__fullWidth__picture__text h3 { display: flex; margin-left: 4px; font-size: 12px; color: var(--title-color); } .Page__header__titlr { display: flex; height: 29px; align-items: center; width: auto; padding: 0px 15px; direction: initial; white-space: nowrap; position: relative; right: 23px; background: var(--backgrand-color); } .fullWidth__line { width: 68%; height: 57%; position: absolute; border-radius: 0px 0px 0px 100px; border-top-color: unset; border-left: 3.5px solid var(--line-color); border-bottom: 3.5px solid var(--line-color); } .fullWidth__circle { position: absolute; left: 0; display: inline-block; width: 13px; height: 13px; background: var(--line-color); border-radius: 100px; } /* start collapse */ .wrapper__collapse { display: flex; align-items: center; width: 100%; justify-content: center; /*margin-top: 80px;*/ } .container { width: 88%; position: relative; margin-top: 65px; padding-left: 60px; } /*.line-right { width: 3.5px; height: 85%; background: var(--line-color); position: absolute; top: 0; right: 50px; }*/ /*.bottom-line { display: inline-block; width: 165px; height: 50px; position: absolute; right: 50px; bottom: 13px; height: 471px; border-bottom-right-radius: 155px; border-bottom: 4.5px solid var(--line-color); border-right: 4.5px solid var(--line-color); }*/ .end-circle { /* display: inline-block; background: var(--line-color);*/ width: 13px; height: 13px; position: absolute; bottom: -8px; right: 153px; border-radius: 100px; display: flex; align-items: center; } .end-circle p { width: 200px; } .content-1 { height: max-content; width: 100%; position: relative; border-right: 2.5px solid var(--line-color); } .last-content::before { content: ''; position: absolute; right: 50px; bottom: 0; width: 10px; height: 97%; background-color: #f2f2f2; } .text-top { width: 100%; height: auto; display: flex; flex-direction: column; cursor: pointer; } .mapBottom { border-right: 2.5px solid var(--backgrand-color); margin-right: -2px; } .text-top.active { height: auto; } .text-top::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--line-color); border: 2.5px solid var(--line-color); position: absolute; right: -8px; cursor: pointer; } .text-top.active::after { background-color: var(--backgrand-color); } .text-top h2 { font-size: 20px; font-weight: 700; margin-right: 20px; transform: translate(0px, -28px); } .text-top h1 { font-size: 17px; font-weight: 700; margin-right: 20px; transform: translate(0px, -28px); } .text-top:hover.text-top span { margin-right: 5px; transition: all 0.3s; } .text-top span { width: 25px; height: 25px; transform: rotate(90deg); transition: all 0.3s ease-in-out; } .text-top span img { width: 100%; height: 100%; } .box-bottom { width: 100%; transition: all 0.3s linear; display: block; max-height: 0px; overflow: hidden; position: relative; font-weight: 400; font-size: 16px; text-align: justify; color: var(--text-color); } .box-bottom.active { max-height: 100%; height: auto; font-size: 16px; margin-top: -35px; font-weight: 400; transition: all 0.3s linear; } .box-bottom a { text-decoration: none; color: var(--main-color); } .map-box.active { border-right: 3.5px solid var(--backgrand-color) !important; margin-top: -46px !important; margin-right: -3px; } .Collaps__Location.active { margin-top: 14px !important; } .box-bottom ul { /* font-size: 16px; margin-right: 80px; margin-top: 20px;*/ transform: translate(0px, 0px); } .top-rate { display: flex; align-items: center; margin-right: 80px; justify-content: space-between; width: 15%; transform: translate(0px, -40px); } .rate { display: flex; align-items: center; width: auto; justify-content: flex-end; } .rate svg { margin-left: 6px; } .rate p { font-size: 16px !important; color: var(--text-color); font-weight: 500; } .top-rate p { font-size: 16px !important; color: var(--text-color); font-weight: 500; } .filter-contianer p { margin-right: 10px !important; } .filter-contianer { display: none; /* display: flex; align-items: center; justify-content: flex-start;*/ width: 80%; } .filter-btn { display: flex; align-items: center; margin-left: 20px; } .video-slider-toggler { margin-left: 0px !important; } .filter-btn-contianer { display: flex; width: 80%; justify-content: flex-start; } .box-map { display: flex; margin-right: 81px; } .box-map iframe { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 20px; width: 70%; } /*end collapse /*start new collapse style*/ .collapse__wrapper { display: flex; justify-content: center; align-items: center; width: 100%; } .collapse__wrapper__contianer { display: flex; justify-content: flex-start; align-items: flex-start; width: 80%; } .collapse__line__wrapper__contianer { margin-top: 20px; } /*.line-right { display: inline-block; border-right: 4.5px solid var(--line-color); border-bottom-right-radius: 3px;*/ /*height: auto;*/ /*}*/ .collapse__btn { display: inline-block; position: relative; left: 11px; background: var(--btn-color); border: 4.5px solid var(--line-color); width: 20px; height: 20px; border-radius: 100%; } .collapse__btn__contianer { height: 300px; display: flex; } .collapse__wrapper__contianer__item { display: flex; align-items: flex-start; flex-direction: column; } .collapse__rate { display: flex; align-items: center; justify-content: space-between; width: 100%; } .collapse__rate__num { display: flex; align-items: center; width: 23%; justify-content: space-between; } .collapse__wrapper__contianer__text p { text-align: justify; } /*end new collapse style*/ /* start FAQ & Comments section */ .wrapper__FCsection { display: flex; align-items: center; justify-content: center; width: 100%; margin: 65px 0px; } .wrapper__contianer__FCsection { display: flex; align-items: center; width: 100%; justify-content: center; } #LoadRating { width: auto !important; } .wrapper__FCsection__Comments { display: flex; align-items: center; justify-content: flex-start; width: 70%; } .wrapper__FCsection__Comments__titr { display: flex; flex-direction: column; width: 100%; } .wrapper__FCsection__Comments__input { display: flex; justify-content: space-between; width: 100%; } .Comments__input { display: flex; width: 100%; } .wrapper__FCsection__Comments__input input { height: 55px; width: 50%; border: none; border-radius: 10px; padding-right: 15px; background: var(--second-color); color: var(--text-color); margin-left: 10px; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12)); font-family: 'Yekan Bakh' !important; } .wrapper__FCsection__Comments__input input::placeholder { color: var(--text-color); } .wrapper__FCsection__Comments__input input:focus { border: none; outline: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; filter: none; } #submitComment { height: 55px; font-family: 'Yekan Bakh' !important; margin-bottom: 5px; } .wrapper__FCsection__Comments__text { display: flex; flex-direction: column; background: var(--second-color); padding: 15px; border-radius: 10px; margin-top: 8px; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12)); } .wrapper__FCsection__Comments__text textarea { border: none; height: 268px; border-radius: 10px; resize: none; padding: 15px; color: var(--text-color); font-size: 14px; font-family: 'Yekan Bakh' !important; letter-spacing: 0.5px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); } .wrapper__FCsection__Comments__text textarea::placeholder { color: #c7c7c7 !important; } .wrapper__FCsection__Comments__text textarea:focus { outline: none; color: var(--text-color); font-family: 'Yekan Bakh' !important; box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.25); } /* start FAQsection style */ .contianer__rating { margin-left: 20px; } .rating__box { display: flex; justify-content: space-between; background: var(--second-color); height: 360px; width: 330px; border-radius: 10px; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12)); } .rating__box img { width: 155px; height: 137px; } .rating__star { display: flex !important; align-items: flex-start !important; margin: 15px; height: 335px; } .rating__star a { fill: var(--second-color); stroke: var(--rate-star-color); width: 25px; margin-left: 3px; stroke-width: 2px; } .rating__star a:active { fill: var(--main-color); stroke: var(--main-color); } .rating__box > div { display: flex; align-items: flex-end; } /* End FAQ & Comments section */ /* start Comments style */ .wrapper__Comments { display: flex; align-items: center; justify-content: center; margin-top: 55px; margin-bottom: 55px; } .wrapper__Comments__contianer { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; width: 80%; } .wrapper__Comments__title { display: flex; align-items: center; justify-content: flex-start; width: 100%; border-bottom: 3.5px solid var(--line-color); } .wrapper__Comments__item__DateName h4 { font-size: 15px; } .wrapper__Comments__section { display: flex; flex-direction: column; width: 100%; } .wrapper__Comments__item { display: flex; margin-top: 20px; } .wrapper__Comments__item__DateName { display: flex; flex-direction: column; width: 15%; } .wrapper__Comments__item__text { display: flex; background: var(--low-color); border-radius: 20px 0px 20px 20px; padding: 15px; font-size: 14px; height: 100px; color: var(--text-color); } .wrapper__Comments__item button { border: none; background: unset; font-size: 14px; color: var(--title-color); font-family: 'Yekan Bakh'; cursor: pointer; } /* End Comments style */ /**************************************************Start places page style*************************************************/ /*start singel picture*/ .warpper__singel__picture { display: flex; height: auto; width: 100%; align-items: center; justify-content: center; position: relative; top: 60px; margin-top: 30px; margin-bottom: 50px; } .warpper__contianer__singel__picture { display: flex; justify-content: space-between; align-items: center; flex-direction: column; width: 80%; } .singel__picture__contianer { background: var(--second-color); display: flex; justify-content: space-between; width: 100%; height: auto; border-radius: 20px; border-bottom-left-radius: 60px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .picture__contianer { display: flex; width: 460px; border-radius: 15px; } .picture__contianer img { width: 100%; height: auto; border-radius: 15px; } .singel__picture__content__contianer { width: 50%; padding: 30px; /*padding-right: 50px;*/ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: justify; color: var(--text-color); } .singel__picture__content__contianer h2 { margin: 0; color: var(--title-color); font-size: 22px; } .singel__picture__content__contianer p { font-size: 15px; line-height: 2; width: 100%; overflow: hidden; height: auto; } .content__btn { width: 100%; display: flex; align-items: center; justify-content: flex-end; z-index: 2; } .singel__picture__lable { background: var(--main-color); height: 116px; width: 65px; /* position: relative; left: 40px;*/ padding: 0px; border-bottom-left-radius: 50px; border-top-left-radius: 30px; border-bottom-right-radius: 50px; display: flex; align-items: center; justify-content: center; } .singel__picture__lable p { color: var(--btn-color); transform: rotate(-90deg); font-size: 14px; white-space: pre; padding: 0; margin: 0; } .singel__picture__line__contianer { display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; height: 50px; position: relative; bottom: 32px; right: 21px; } .singel__picture__line { display: flex; align-items: flex-end; height: 115px; width: 35%; border-bottom: 3.5px solid var(--line-color); border-left: 3.5px solid var(--line-color); border-bottom-left-radius: 65px; } .singel__picture__line span { display: block; background: var(--line-color); position: absolute; bottom: -5px; width: 13px; height: 13px; border-radius: 50%; } .singel__picture__line__dot { display: flex; align-items: flex-end; height: 115px; width: 100%; } .singel__picture__line__dot span { display: block; background: var(--line-color); position: absolute; bottom: 110px; left: -5px; width: 13px; height: 13px; border-radius: 50%; } /*end singel picture*/ /* start places gallery */ .warper__places__gllery { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: auto; margin-bottom: 90px; } .warper__places__circle { display: inline-block; width: 13px; height: 13px; background: var(--line-color); border-radius: 100px; position: relative; left: 0; right: 8px; } .warper__places__circlebot { display: inline-block; width: 13px; height: 13px; background: var(--line-color); border-radius: 100px; position: relative; left: 0; right: -8px; } .contianer__places__gllery { display: flex; justify-content: flex-start; align-items: flex-start; width: 80%; height: auto; border-right: 3.5px solid var(--line-color); flex-direction: column; } .places__gllery__header { width: 100%; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; margin-top: -30px; } .places__gllery__header h1 { margin-right: 10px; } .places__gllery__header__filter { width: 100%; display: flex; justify-content: space-between; align-items: center; } .header__btn__filter { width: 50%; display: flex; align-items: center; } .header__btn__filter button { font-family: 'Yekan Bakh'; background: var(--second-color); color: var(--text-color); display: flex; align-items: center; justify-content: center; width: auto; height: 40px; padding: 10px; margin-right: 10px; border: none; border-radius: 5px; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.12)); font-weight: bold; } .header__btn__filter button:focus { background: var(--main-color); color: var(--btn-color); } .header__searchbox { display: flex; align-items: center; justify-content: center; width: 50%; justify-content: end; /*margin-left: 7px;*/ } .header__searchbox input { background: var(--second-color); display: flex; align-items: center; justify-content: center; height: 40px; width: 330px; border: none; border-radius: 0px 5px 5px 0px; padding-right: 10px; color: var(--text-color); } .header__searchbox input:focus { outline: none; border: none; } .header__searchbox input::placeholder { font-size: 12px; color: var(--gray-text-color); font-family: 'Yekan Bakh' !important; } .header__searchbox button { background: var(--second-color); display: flex; justify-content: center; align-items: center; border: none; border-radius: 5px 0px 0px 5px; padding-left: 10px; height: 40px; width: auto; } .places__gllery { display: flex; flex-wrap: wrap; max-width: 100%; width: 100%; align-items: flex-start; justify-content: flex-start; margin-right: 10px; flex-direction: column; } .places__gllery__contianer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; margin-right: 10px; } .advertis__contianer { width: 100%; height: 0; display: flex; justify-content: flex-end; } .advertis { display: flex; align-items: center; justify-content: center; /*background: var(--main-color);*/ width: 50px; height: 50px; border-radius: 50%; position: relative; bottom: 0; } .advertis span { background: var(--main-color); position: absolute; z-index: 1; left: 3px; top: 3px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .advertis img { width: 50px !important; height: 50px !important; border-radius: 9px 0px 0px 0px !important; position: absolute; left: 0px; top: 0px; } .hoverSubtract__pic { display: none; } .add__contianer { width: 100%; height: 0; display: flex; justify-content: flex-end; } .add { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; position: relative; bottom: 0; } .add span { background: var(--add-backcolor); position: relative; z-index: 1; left: -6px; top: -6px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .hoverSubtract__add { display: none; } .add img { width: 50px !important; height: 50px !important; border-radius: 9px 0px 0px 0px !important; position: absolute; left: 0px; top: 0px; } .places__gllery__item__contianer { display: flex; justify-content: flex-end; align-items: flex-start; width: 25%; transition: all 0.3s; margin-bottom: 25px; /*height: 350px;*/ } .places__gllery__item__contianer:hover { background: var(--second-color); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; } .places__gllery__item__contianer:hover .hoverSubtract__pic { display: block !important; left: 0px; top: 0px; } .places__gllery__item__contianer:hover .advertis img { display: none; } .places__gllery__item__contianer:hover .hoverSubtract__add { display: block !important; left: 0px; top: 0px; } .places__gllery__item__contianer:hover .add img { display: none; } .places__gllery__item { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; text-decoration: none; width: 100%; height: auto; margin: 10px; margin-bottom: 25px; } .places__gllery__item img { width: 100%; height: 200px; border-radius: 10px; } .places__gllery__item a { width: 100%; text-decoration: none; } .item__descreption { display: flex; flex-direction: column; color: var(--text-color); font-size: 12px; text-align: justify; width: 100%; } .item__descreption p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; /*width: 300px;*/ } .item__rate { display: flex; justify-content: space-between; align-items: center; /*width: 300px;*/ white-space: nowrap; } .item__rate h3 { color: var(--title-color); font-size: 14px; white-space: nowrap; } .item__rate a { width: auto; } .rate_places { display: flex; align-items: center; } .rate_places p { font-size: 12px; width: unset; } .rate_places svg { margin-left: 10px; } .places__somery__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; height: 60px; /*width: 300px;*/ } .places__somery__description span { color: var(--text-color) !important; } .Contianer__pageInation { display: flex; align-items: center; justify-content: space-between; } .Contianer__pageInation button { display: flex; justify-content: center; align-items: center; background: var(--btn-backgrand-color); border: none; width: 25px; height: 25px; border-radius: 5px; margin: 2px; } .Contianer__pageInation button:focus { background: var(--main-color); } .Contianer__pageInation button:focus svg { fill: var(--backgrand-color); } .Contianer__pageInation button svg { fill: var(--add-backcolor); } .pageInation__number { display: flex; } .pageInation__number a { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; background: var(--btn-backgrand-color); border-radius: 5px; margin: 2px; color: var(--text-color); } .curent:focus { background: var(--main-color) !important; color: var(--backgrand-color); } /* .pageInation__number button.active { background: var(--main-color); color: var(--backgrand-color); }*/ /*End places gallery*/ /*start 404 pages*/ .error__warpper { display: flex; flex-direction: column; /*justify-content: center;*/ align-items: center; width: 100%; margin: 50px 0; } .error__gifs { display: flex; justify-content: center; align-items: center; width: 80%; position: relative; } .error__gifs svg { width: 100%; height: 500px; } .ship-error { position: absolute; z-index: -1; right: 0; top: 11px; } .sun-error { display: flex; align-items: center; justify-content: center; position: relative; top: -21px; left: 350px; z-index: -1; } .sun-error1 { display: block; width: 200px; height: 200px; background: #FFDBBA; border-radius: 50%; } .sun-error2 { display: block; width: 160px; height: 160px; background: #FFAF96; border-radius: 50%; position: absolute; } .sun-error3 { display: block; width: 120px; height: 120px; background: #FF9696; border-radius: 50%; position: absolute; } .error__btn__contianer { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 10px; } .error__btn__contianer p { font-size: 22px; color: var(--title-color); font-weight: bold; margin: 0; margin-bottom: 15px; } .error__btn { display: flex; align-items: center; justify-content: center; text-decoration: none; background: var(--line-color); border: 2px solid var(--line-color); color: var(--title-color); width: auto; height: 50px; border-radius: 10px; font-size: 18px; padding: 20px; margin: 0px 10px; transition: all 0.5s; } .error__btn:hover { border: 2px solid var(--line-color); background: transparent; } /*End 404 pages*/ /* start paraghraph section */ .warpper__paraghraph { width: 100%; display: flex; align-items: center; justify-content: center; } .paraghraph__section { width: 80%; height: auto; padding-top: 5px; color: var(--text-color); text-align: justify; display: flex; justify-content: center; flex-direction: column; margin-top: 45px; } .paraghraph__section h3 { margin: 0 !important; color: var(--title-color); } .paraghraph__section p { margin: 0 !important; line-height: 2.5; } /* End paraghraph section */ /*start Collapse paraghraph*/ .Collapse__paraghraph { width: 100%; padding: 10px; padding-right: 25px; justify-content: flex-start; } /*End Collapse paraghraph*/ /* start singel picture */ .warpper__singel__picture__section { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 65px; } .singel__picture__section { display: flex; justify-content: center; align-items: center; width: 80%; margin: 20px 0px; border-radius: 20px; } .singel__picture__section img { width: 100%; height: 550px; object-fit: cover; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 20px; } /* end singel picture */ /* start double picture */ .warpper__double__picture { display: flex; align-items: center; justify-content: center; width: 100%; margin: 35px 0px; } .double__picture__section { display: flex; align-items: center; justify-content: center; width: 80%; height: 550px; } .double__picture__section img { width: 50%; height: 100%; margin: 10px; object-fit: cover; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 20px; } #left { margin-right: 20px; } #right { margin-left: 20px; } @media screen and (max-width: 992px) { .footer__categorie__linkItem a { display: none; } .active__footer__link { display: flex !important; } .double__picture__section { flex-direction: column; height: auto; width: 100%; margin-top: 20px; } .double__picture__section img { width: 100%; height: 400px; } #left { margin: 0; margin-bottom: 20px; } #right { margin: 0; margin-top: 20px; } } /* end double picture */ /* start blogs page */ .warpper__blogs { margin: auto; display: flex; justify-content: center; align-items: center; width: 100%; height: auto; } .contianer__warpper__blogs { display: flex; justify-content: flex-start; align-items: flex-start; width: 80%; margin: 80px 0px; } .blogs__quick__access { display: flex; flex-direction: column; align-items: flex-start; width: 340px; height: auto; padding: 10px; } .quick__access__fillter { display: none; /*display: flex;*/ align-items: center; justify-content: space-between; width: 100%; } .moblie__fillter { display: none; } .most__visited__items { display: flex; align-items: center; } .most__visited__content { display: none; } .quick__access__fillter a { width: 140px; display: flex; justify-content: center; align-items: center; border: none; border-radius: 5px; margin: 5px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding: 10px; background: var(--second-color); text-decoration: none; font-size: 14px; color: var(--text-color); } .quick__access__listMoblie { display: none; background: var(--second-color); flex-direction: column; align-items: flex-start; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; width: 320px; margin-top: 0; padding: 10px; font-size: 14px; } .quick__access__list { background: var(--second-color); display: flex; flex-direction: column; align-items: flex-start; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; width: 320px; margin-top: 0; padding: 10px; font-size: 14px; } .quick__access__list button { background: none; font-family: 'Yekan Bakh' !important; border: none; color: var(--text-color); font-weight: bold; font-size: 15px; margin-right: 15px; } .quick__access__listMoblie button { background: none; font-family: 'Yekan Bakh' !important; border: none; color: var(--text-color); font-weight: bold; font-size: 15px; margin-right: 15px; } .quick__access__item ul { padding-inline-start: 22px; } .HideUl { display: none; } .quick__access__list p { margin-right: 25px; font-weight: bold; } .quick__access__list li { display: flex; align-items: center; list-style: none; margin-bottom: 10px; line-height: 1.5; } .quick__access__list a { text-decoration: none; color: var(--text-color); transition: 0.3s all; } .quick__access__list a:hover { color: var(--main-color); } .quick__access__list a:hover span { background: var(--blog-span-hover-color); } .quick__access__itemMoblie a { text-decoration: none; color: var(--text-color); transition: 0.3s all; } .quick__access__itemMoblie a:hover { color: var(--main-color); } .quick__access__itemMoblie a:hover span { background: var(--blog-span-hover-color); } .quick__access__list li span { display: block; width: 10px; height: 10px; background: var(--rate-star-color); border-radius: 50%; margin-left: 5px; transition: 0.3s all; } .quick__access__lables { /* display: flex; flex-direction: column;*/ display: none; } .lables__contianer { display: flex; flex-wrap: wrap; justify-content: flex-start; } .lables__contianer a { background: var(--second-color); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 5px; padding: 10px; margin: 5px; text-decoration: none; color: black; width: auto; height: 30px; display: flex; justify-content: center; align-items: center; font-size: 12px; } .contianer__blogs__cards { display: flex; align-items: flex-start; justify-content: center; /* flex-direction: column; */ flex-wrap: wrap; width: 80%; } .blog__card { background: var(--second-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; border-radius: 10px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 350px; padding: 10px; margin: 10px; } .blog__card a { color: var(--title-color); text-decoration: none; white-space: nowrap; } .blog__card__item { display: flex; align-items: flex-end; height: auto; width: 100%; padding: 0px 20px; } .blog__card__item img { height: 230px; width: 250px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 15px; } .blog__btn { display: flex; align-items: center; justify-content: flex-end; width: 140px; color: var(--main-color) !important; } .blog__card__content { display: flex; align-items: flex-start; flex-direction: column; margin-right: 15px; height: 100%; width: 100%; } .blog__card__content p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; margin: 0; text-align: justify; } .blog__card__content a { display: flex; align-items: center; justify-content: flex-end; width: 100%; text-decoration: none; color: var(--main-color); margin-top: 10px; } .blog__card__content__profile { display: flex; align-items: center; justify-content: center; height: auto; margin-bottom: 20px; } .blog__card__content__profile p { font-weight: bold; margin-right: 15px; } .blog__card__content__profile img { width: 50px; height: 50px; box-shadow: none; border-radius: 50%; object-fit: cover; /*padding-left: 10px;*/ } /* End blogs page */ /*start hotels index page*/ /*compare alert*/ .CompareAlert { display: flex; justify-content: center; align-items: center; width: 100%; position: fixed; top: 10px; z-index: 9999; } .LimitedSelectAlert { display: flex; align-items: center; justify-content: space-evenly; background: var(--backgrand-color); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 50px; width: 360px; height: 45px; } .TwoSelectAlert { display: flex; align-items: center; justify-content: space-evenly; background: var(--backgrand-color); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 50px; width: 360px; height: 45px; } /* end compare alert*/ .warpper__hotels { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: auto; margin: 80px 0px; } .warpper__hotels__Comparison { display: flex; position: fixed; bottom: 40%; right: 15px; z-index: 9; } .hotels__Comparison { display: flex; align-items: center; justify-content: space-between; background: var(--main-color); border: none; padding: 5px 5px; height: 55px; border-radius: 40px; color: var(--backgrand-color); font-size: 16px; font-family: 'Yekan Bakh' !important; } .hotels__Comparison:focus { background: linear-gradient(360deg, rgba(255,74,74,1) 0%, rgb(207 7 7) 100%); } .hotels__Comparison span { display: flex; align-items: center; justify-content: center; background: var(--backgrand-color); padding: 6px; margin-left: 5px; border-radius: 50%; width: 45px; height: 45px; } #btnCompare { display: flex; align-items: center; font-size: 14px; } #btnCompare span { width: auto; height: auto; padding: unset; margin: auto; background: transparent; font-family: 'Yekan Bakh' !important; } .warpper__hotels__contianer { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 80%; } .hotels__contianer__filters { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; width: 100%; margin-bottom: 25px; } .hotels__contianer__filters__buttm { /* display: flex;*/ display: none; } .hotels__contianer__filters__buttm button { display: flex; align-items: center; justify-content: center; background: #fff7f0; border: none; border-radius: 5px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-left: 20px; padding: 10px; width: auto; height: 40px; font-family: 'Yekan Bakh' !important; } .hotels__contianer__filters__buttm button svg { margin-left: 10px; } .hotels__contianer__filters__tag { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; height: auto; margin-top: 15px; } .hotels__contianer__filters__tag a { display: flex; align-items: center; justify-content: center; width: auto; height: 35px; background: var(--second-color); border-radius: 5px; margin-left: 10px; padding: 0px 10px; text-decoration: none; color: black; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .hotels__contianer__filters__tag a:active { background: var(--main-color); color: var(--backgrand-color); } .hotels__contianer__filters__tag a:focus { background: var(--main-color); color: var(--backgrand-color); } .hotels__contianer__filters__tag button { display: flex; align-items: center; justify-content: center; width: auto; height: 35px; background: #fff7f0; border: none; border-radius: 5px; /* margin-left: 10px; padding: 0px 10px;*/ text-decoration: none; color: black; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; font-family: 'Yekan Bakh' !important; } #LoadPreview { width: 100%; } .hotels__contianer__cards__section { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 100%; } .contianer__card { background: var(--second-color); display: flex; align-items: flex-start; justify-content: space-around; flex-direction: column; width: 49%; height: 340px; color: var(--title-color); box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 20px; padding: 25px; margin: 5px; margin-bottom: 20px; overflow: hidden; } .contianer__card__items__firstsection { display: flex; justify-content: space-between; align-items: center; width: 100%; } .picture__comparison button { position: absolute; display: flex; align-items: center; justify-content: center; margin-right: 5px; margin-top: 5px; width: 45px; height: 45px; border-radius: 50%; border: none; } #demo { display: flex; align-items: center; justify-content: center; background: aqua; width: auto; height: 45px; margin-right: 110px; padding-right: 35px; padding-left: 20px; border-radius: 20px; white-space: pre; } .picture__comparison img { position: absolute; width: 31px !important; height: auto !important; border-radius: unset !important; } .contianer__card img { width: 230px; height: 200px; border-radius: 10px; /*object-fit: cover;*/ } .contianer__card__items { width: 100%; padding-right: 30px; } .contianer__card__items__title { text-decoration: none; } .contianer__card__items__title h3 { margin-bottom: 0; color: var(--title-color); } .contianer__card__items__title p { margin-top: 10px; color: var(--title-color); } .contianer__card__items__rating { display: flex; align-items: center; } .contianer__card__items__rating svg { margin-left: 5px; } .hotels__rating { display: flex; align-items: center; margin-left: 40px; } .contacts__rating { display: flex; align-items: center; margin-left: 15px; } .contianer__card__items__pricec { display: none; /* display: flex; align-items: center; font-weight: bold;*/ } .contianer__card__items__pricec p { margin-left: 10px; } .contianer__card__items__firstsecond { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 20px; } .hotels__option { display: flex; align-items: center; } .Dactive__hotel__feather { filter: grayscale(100%); opacity: 0.7; } .hotels__option p { margin-right: 5px; } .special { display: flex; align-items: center; justify-content: center; border-radius: 20px; font-size: 12px; width: auto; height: 45px; background: var(--second-color); color: var(--text-color) !important; white-space: pre; margin-right: 130px; padding-right: 40px; padding-left: 20px; transition: 0.5s; font-family: 'Yekan Bakh' !important; } .myText { color: transparent; } #cheekall { opacity: 0; height: 0; width: 0; } .cheekall__contianer { display: flex; flex-direction: column; align-items: flex-start; width: 45px; } .cheek { display: flex; flex-direction: column; align-items: flex-end; width: 165vh !important; height: auto !important; opacity: 1 !important; background: #fff7f0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; padding: 10px; transform: translate(0px, 15px); } .cheek a { background: #ff4a4a; color: white; width: 80px; height: auto; padding: 10px; border-radius: 10px; } .cheekall__items { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .cheekall__items p { width: auto; margin-left: 20px; margin-right: 20px; } .container__hotels { display: flex; align-items: center; justify-content: space-between; width: 285px; } .container p { margin-right: 30px; } .container__hotels input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { display: flex; justify-content: center; align-items: center; position: absolute; height: 15px; width: 15px; background-color: #fff7f0; border: 2px solid #AEAEAE; border-radius: 5px; cursor: pointer; } .container input:checked ~ .checkmark { background-color: #fff7f0; } .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { width: 4px; height: 8px; border: solid #AEAEAE; border-width: 0 3px 3px 0; transform: rotate(45deg); } /* Hotel preview Request form */ .Contianer__HotelForm input { border: 2px solid #bcbcbc; color: var(--text-color); padding: 5px; /*margin: 0px 5px;*/ border-radius: 5px; font-family: 'Yekan Bakh' !important; } .Contianer__HotelForm input:focus { outline: var(--line-color); border: 2px solid #ff7c7c; } .Contianer__HotelForm span { background: var(--backgrand-color); color: #ff7c7c; font-size: 14px; font-weight: 600; transform: translate(-12px, 10px); padding: 0px 6px; } /* datepicker */ .datepicker-plot-area .toolbox { display: none !important; } .datepicker-plot-area .datepicker-time-view { display: none !important; } .datepicker-plot-area { font-family: 'Yekan Bakh' !important; width: 228px; margin-top: 5px; border-radius: 5px; border: 2px solid var(--btn-backgrand-color); } .datepicker-plot-area .datepicker-navigator .pwt-btn-prev { color: var(--main-color) !important; font-size: 17px !important; } .datepicker-plot-area .datepicker-navigator .pwt-btn-next { color: var(--main-color) !important; font-size: 17px !important; } .datepicker-plot-area .datepicker-day-view .table-days td.selected span, .datepicker-plot-area .datepicker-year-view .year-item.selected, .datepicker-plot-area .datepicker-month-view .month-item.selected { background: var(--main-color); text-shadow: unset; border-radius: 5px; } .datepicker-plot-area .datepicker-day-view .table-days td.selected span .datepicker-plot-area .datepicker-day-view .table-days td:hover, .datepicker-plot-area .datepicker-day-view .table-days td span:hover, .datepicker-plot-area .datepicker-year-view .year-item:hover, .datepicker-plot-area .datepicker-month-view .month-item:hover { background: var(--gray-text-color); text-shadow: unset; border-radius: 5px; } .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell { color: var(--blog-span-hover-color); } /* End datepicker */ .warpper__HotelForm__Modal { overflow-y: scroll; } .warpper__HotelForm__Modal::-webkit-scrollbar-track { background: rgba(8, 11, 10, 0.12) !important; backdrop-filter: blur(4px) !important; } .warpper__HotelForm__Modal::-webkit-scrollbar-thumb { background: #e1e1e1 !important; } .HotelForm__modal__content { border-radius: 15px; top: -125vh; right: unset; position: fixed; z-index: 9999; width: 610px; max-width: 100%; background: var(--backgrand-color); padding: 10px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; margin-top: 10px; } .Hotel__Request { display: flex; align-items: center; justify-content: center; position: fixed; left: 15px; bottom: 5vh; background: var(--main-color); border: 2px solid var(--main-color); padding: 10px; border-radius: 10px; color: var(--backgrand-color); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; transition: all 0.5s; font-family: 'Yekan Bakh' !important; } .Hotel__Request:hover { background: var(--backgrand-color); color: var(--title-color); border: 2px solid var(--main-color); } .Hotel__Request:hover svg { fill: var(--main-color); } .Hotel__Request p { margin: 0; } .Hotel__Request svg { fill: var(--backgrand-color); margin-left: 5px; } .Hotel__ExitBtn { background: none; border: none; } .Hotel__ExitBtn svg { fill: var(--main-color); } .Date__Contianer { display: flex; justify-content: space-between; margin: 5px 0px; } .Date__Contianer input { width: 100%; } .Info__Contianer { display: flex; justify-content: space-between; margin: 5px 0px; } .Info__Contianer input { width: 100%; } .Form__item { display: flex; flex-direction: column; align-items: flex-start; width: 50%; } .Info__item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .Passenger__Contianer { display: flex; flex-direction: column; align-items: flex-start; margin: 5px 0px; } .Passenger__Contianer input { width: 100%; margin: 0; } .Passenger__Counter { display: flex; flex-direction: column; background: var(--backgrand-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; padding: 10px; margin-top: 5px; border-radius: 10px; width: 100%; } .AdultAge { display: flex; align-items: center; justify-content: space-between; width: auto; } .AdultAge p { margin: 0; font-size: 14px; } .CounterBtn { display: flex; align-items: center; justify-content: center; margin-top: 10px; } .CounterBtn button { display: flex; justify-content: center; align-items: center; font-family: 'Yekan Bakh' !important; background: var(--main-color); color: var(--backgrand-color); border: 2px solid var(--main-color); border-radius: 7px; font-weight: 600; padding: 3px; width: 55px; transition: all 0.3s; } .CounterBtn button:hover { background: var(--backgrand-color); color: var(--text-color); font-weight: 600; } .progress { background: var(--btn-backgrand-color); border: solid 2px var(--btn-backgrand-color) !important; border-radius: 8px; height: 5px !important; width: 137px !important; padding: unset !important; outline: none; transition: background 450ms ease-in; -webkit-appearance: none; } .progress::-webkit-slider-thumb { width: 13px; height: 13px; border-radius: 50%; -webkit-appearance: none; cursor: ew-resize; background: var(--arrow-color); } .VipServis__Contianer { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 5px 0px; } .VipServis { display: flex; justify-content: flex-start; align-items: center; background: var(--backgrand-color); border: 2px solid #bcbcbc; border-radius: 5px; width: 100%; padding: 10px; flex-wrap: wrap; } .VipServis-item { display: flex; align-items: center; margin: 5px 0px; } .VipServis-item p { margin: 0; margin-left: 20px; } .VipServis-Contianer { width: auto; display: flex; align-items: center; justify-content: space-between; margin: 5px 0px; } .VipServis-Contianer img { margin-left: 20px; } .MoreInformationBtn { width: auto; background: none; border: none; cursor: pointer; } .RoomMoreInformationBtn { width: auto; background: none; border: none; cursor: pointer; } .TourismMoreInformationBtn { width: auto; background: none; border: none; cursor: pointer; } .VipServis__Descreption { /*display: none;*/ position: absolute; z-index: 1; background: rgb(230 230 230); width: 254px; height: 80px; overflow: hidden; padding: 4px; margin-top: 100px; border-radius: 5px; font-size: 14px; } .VipServis__Descreption h1 { font-size: 13px; margin: 0; font-weight: normal; } .VipServis__Descreption h2 { font-size: 13px; margin: 0; font-weight: normal; } .VipServis__Descreption h3 { font-size: 13px; margin: 0; font-weight: normal; } .VipServis__Descreption h4 { font-size: 13px; margin: 0; font-weight: normal; } .VipServis__Descreption h5 { font-size: 13px; margin: 0; font-weight: normal; } .VipServis__Descreption h6 { font-size: 13px; margin: 0; font-weight: normal; } /*/////////////////////////////*/ .Tourism__Contianer { display: flex; flex-direction: column; align-items: flex-start; margin: 5px 0px; } .Tourism { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; background: var(--backgrand-color); border: 2px solid #bcbcbc; border-radius: 5px; width: 100%; padding: 10px; } .Tourism p { margin: 0; margin-left: 20px; font-size: 14px; } .TourismTor-Contianer { display: flex; align-items: center; justify-content: space-between; width: 275px; margin: 5px 0px; } .TourismTor-Contianer img { margin-left: 20px; } .TourismTor { display: flex; align-items: center; justify-content: center; } .AllTor__Descreption { position: absolute; z-index: 1; background: rgb(230 230 230); width: 254px; height: 80px; overflow: hidden; padding: 4px; margin-top: 100px; border-radius: 5px; font-size: 14px; } .AllTor__Descreption h1 { font-size: 13px; margin: 0; font-weight: normal; } .AllTor__Descreption h2 { font-size: 13px; margin: 0; font-weight: normal; } .AllTor__Descreption h3 { font-size: 13px; margin: 0; font-weight: normal; } .AllTor__Descreption h4 { font-size: 13px; margin: 0; font-weight: normal; } .AllTor__Descreption h5 { font-size: 13px; margin: 0; font-weight: normal; } .AllTor__Descreption h6 { font-size: 13px; margin: 0; font-weight: normal; } .HotelRoom__Contianer { display: flex; flex-direction: column; align-items: flex-start; margin: 5px 0px; } .HotelRoom { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; background: var(--backgrand-color); border: 2px solid #bcbcbc; border-radius: 5px; padding: 10px; } .RoomName { display: flex; justify-content: space-between; margin: 5px 0px; width: 275px; } .RoomName a { margin: 0; font-size: 14px; text-decoration: none; color: var(--text-color); transition: all 0.5s; } .RoomName p { margin: 0; font-size: 14px; } .RoomName img { margin-left: 20px; } .RoomName__Descreption { position: absolute; z-index: 1; background: rgb(230 230 230); width: 254px; height: 80px; overflow: hidden; padding: 4px; margin-top: 25px; border-radius: 5px; font-size: 14px; } .RoomName__Descreption p { margin: 5px; font-size: 14px; } .RoomName__Descreption h1 { font-size: 14px; margin: 0; font-weight: normal; } .RoomName__Descreption h2 { font-size: 14px; margin: 0; font-weight: normal; } .RoomName__Descreption h3 { font-size: 14px; margin: 0; font-weight: normal; } .RoomName__Descreption h4 { font-size: 14px; margin: 0; font-weight: normal; } .RoomName__Descreption h5 { font-size: 14px; margin: 0; font-weight: normal; } .RoomName__Descreption h6 { font-size: 14px; margin: 0; font-weight: normal; } .HotelTime__Contianer { display: flex; align-items: flex-start; width: 100%; justify-content: space-between; margin: 5px 0px; } .HotelTime__Contianer p { margin: 0; font-size: 14px; } .Entrance__Time { display: flex; flex-direction: column; align-items: flex-start; margin-left: 10px; } .Exit__Time { display: flex; flex-direction: column; align-items: flex-start; } .HotelTime > div { display: flex; align-items: center; } .HotelTime { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; background: var(--backgrand-color); border: 2px solid #bcbcbc; border-radius: 5px; padding: 10px; } .HotelBtn__Contianer { display: flex; justify-content: flex-end; align-items: center; margin: 5px 5px; } .HotelBtn__Contianer button { display: flex; align-items: center; justify-content: center; background: var(--main-color); border: 2px solid var(--main-color); border-radius: 10px; font-weight: 600; padding: 5px 10px; color: var(--backgrand-color); height: 50px; width: 130px; font-family: 'Yekan Bakh' !important; transition: all 0.3s; } .HotelBtn__Contianer button:hover { background: var(--backgrand-color); color: var(--text-color); } /*Edn hotels index page*/ /* Hide Capcha */ .grecaptcha-badge { display: none !important; } /* Hide Capcha */ /******************* start hotels preview page ********************/ /* keyfeatures section */ .warpper__hotels__keyfeatures { display: flex; justify-content: center; align-items: center; width: 100%; } .contianer__hotels__keyfeatures { display: flex; align-items: center; justify-content: space-between; width: 80%; } .hotel__keyfeatures { display: flex; align-items: center; } .hotel__keyfeatures img { } .hotel__keyfeatures p { margin-right: 10px; } .disenble-item { opacity: 0.5; } /* features section */ .warpper__hotels__features { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } .contianer__hotels__features { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; /*border-right: 2.5px solid var(--line-color);*/ margin-top: -58px !important; margin-right: -3px; padding-right: 25px; padding-top: 30px; } .hotels__features span { display: flex; align-items: center; width: 100%; height: 60px; background: var(--second-color); border-radius: 10px; padding-right: 50px; color: var(--title-color); font-weight: 700; } .hotels__features { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-bottom: 40px; } .feature__category { width: 50%; margin-left: 10px; } .contianer__hotels__features__items { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; margin-top: 30px; } .feature__item__group { height: auto; display: flex; flex-wrap: wrap; align-content: flex-start; } .MobContianer__feature__item { display: flex; flex-wrap: wrap; } .hotel__feature__item { display: flex; align-items: center; justify-content: flex-start; width: 200px; margin: 3px 0px; margin-left: 5px; margin: 3px 0px; } .hotel__feature__item img { width: 25px; } .hotel__feature__item p { margin-right: 10px; font-size: 14px; white-space: nowrap; } .hotels__rooms__features { display: flex; flex-direction: column; align-items: flex-start; width: 600px; } .hotels__rooms__features span { display: flex; align-items: center; width: 100%; height: 60px; background: var(--second-color); border-radius: 10px; padding-right: 50px; color: var(--title-color); font-weight: 700; } /******************** Edn hotels preview page ********************/ /************************** Start hotel comparison page **************************/ .warpper__hotel__comparison { display: flex; justify-content: center; align-items: center; width: 100%; margin: 40px 0px; } .contianer__hotel__comparison { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 80%; } /* header pictures section */ .hotel__comparison__header__pictures { display: flex; align-items: flex-start; justify-content: center; width: 100%; background: var(--backgrand-color); position: fixed; top: 0; margin: 64px 0px; z-index: 9; box-shadow: rgba(0, 0, 0, 0.15) -12px -4px 20px; transition: all 0.2s; } .hotel__comparison__header__pictures.scrolled-down { height: 170px; align-items: center; } .comparison__header__picture { display: flex; align-items: center; justify-content: center; } .header__picture { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 350px; margin: 20px; transition: all 0.2s; } .header__picture.scrolled-down { width: 150px; height: 150px; padding: 0; margin: 0px 75px; } .header__picture.scrolled-down img { margin-bottom: 3px; border-radius: 10px; } .header__picture.scrolled-down p { font-size: 14px; } .header__picture img { width: 100%; height: 235px; border-radius: 20px; margin-bottom: 20px; } .header__picture p { margin: 0; color: var(--title-color); font-weight: 600; white-space: nowrap; } /* comparison item picture section */ .hotel__comparison__section { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 90%; margin-top: 360px; margin-bottom: 35px; } .hotel__comparison__fix__hotel__name { position: absolute; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; } .hotel__comparison__section__price { display: none; /*display: flex;*/ flex-direction: column; align-items: center; width: 100%; border-bottom: 2px solid var(--text-color); } .fix__hotel__name { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; background: var(--second-color); filter: drop-shadow(0px 2px 5px rgba(126, 111, 96, 0.25)); padding: 10px; border-radius: 100px; height: 180px; width: 115px; } .fix__hotel__name img { width: 100px; height: 100px; border-radius: 100px; object-fit: cover; } .fix__hotel__name p { font-size: 14px; white-space: pre; color: var(--title-color); font-weight: 600; } .hotel__comparison__section__price p { color: var(--title-color); font-weight: 600; } .price { display: flex; justify-content: space-between; align-items: center; width: 75%; } .price p { font-weight: normal; } .hotel__comparison__section__keyfeatures { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; /*margin-top: 50px;*/ padding-bottom: 40px; border-bottom: 2px solid var(--text-color); color: var(--title-color); font-weight: 600; } .hotel__comparison__section__keyfeatures p { border-bottom: 2px solid var(--text-color); width: 100%; display: flex; justify-content: center; padding-bottom: 20px; } .comparison__section__group { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 40px; } .comparison__section__group p { border-bottom: unset !important; display: unset; padding-bottom: 0; margin: 10px 0px; margin-right: 5px !important; white-space: nowrap; width: 50%; font-size: 14px; } .comparison__section__keyfeatures { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; } .comparison__keyfeature__item { display: flex; align-items: center; justify-content: space-between; border-radius: 50px; width: 90% !important; margin: 10px 0px; } .comparison__section__column span { display: flex; align-items: center; justify-content: center; width: 200px; } .comparison__section__column { width: 50%; display: flex; flex-direction: column; align-items: center; } .TheSame { background: var(--second-color); width: 100% !important; display: flex; justify-content: center; align-items: center; margin: 10px 0px; } .IsOned { filter: grayscale(100%); opacity: 0.6; } .comparison__section__column p { margin-right: 30px; } .contianer-unactive-item { background: var(--second-color); } .unactive-item { color: var(--gray-text-color); } .unactive-item img { filter: grayscale(100%); opacity: 0.5; } /****** comparison room feature ******/ .c-menu { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: 70px; padding-bottom: 40px; border-bottom: 2px solid var(--text-color); } .c-menu p { color: var(--title-color); font-weight: 600; } .c-menu__list { height: calc((var(--list-item-margin) + var(--list-item-height)) * var(--max-btn) * 1px); overflow: hidden; position: relative; display: block; width: 100%; padding: 0; } .c-menu__list-item, .c-menu__button-collapse { height: calc(var(--list-item-height) * 1px); width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: calc(var(--list-item-margin) * 1px); } .c-menu__list-counter { font-weight: 600; color: #ffffff; border-radius: 50%; background-color: #6B6BFF; margin-left: 16px; display: flex; align-items: center; justify-content: center; font-size: 13px; height: 24px; width: 24px; line-height: 24px; } .c-menu__list-text, .c-menu__button-collapse-text { width: 100%; display: flex; align-items: center; justify-content: space-between; } .show-more { justify-content: center; margin-top: 50px; } .show-more svg { margin-left: 20px; cursor: pointer; } .show-more p { font-weight: 700; color: var(--title-color); } .c-menu__list-text { color: #292D32; } .c-menu__button-collapse { margin-bottom: 0; } .c-menu__button-collapse-text { color: rgba(41, 45, 50, 0.4); } .show-less, .c-menu__checkbox { display: none; } .c-menu__list:has(+ .c-menu__checkbox:checked) { height: auto; } .c-menu__checkbox:checked + .c-menu__button-collapse > .show-more { display: none; } .c-menu__checkbox:checked + .c-menu__button-collapse > .show-less { display: flex; } .show-less { justify-content: center; margin-top: 50px; } .show-less svg { cursor: pointer; } /****** comparison location section ******/ .hotel__comparison__section__location { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; padding-top: 40px; } .section__location { display: flex; justify-content: space-between; align-items: center; width: 90%; } .section__location p { padding: 10px; padding-right: 80px; width: 50%; border-bottom: 2px solid var(--text-color); } .section__location :nth-child(1) { border-left: 2px solid var(--text-color); } /************************** End hotel comparison page **************************/ /************************** Start contact us page **************************/ .warpper__contactus { display: flex; justify-content: center; align-items: center; width: 100%; margin: 100px 0px; } .contianer__contactus { display: flex; flex-direction: column; align-items: flex-start; width: 80%; border-right: 3.5px solid var(--line-color); padding-right: 20px; } .contianer__contactus__dot { display: block; background: var(--line-color); width: 13px; height: 13px; border-radius: 100px; position: relative; right: -28px; } .contianer__contactus__form { margin: 40px 0px; } .contianer__contactus__form form { width: 700px; } .contianer__contactus__form form button { display: flex; align-items: center; justify-content: center; background: var(--main-color); border: none; border-radius: 10px; padding: 10px; height: 50px; width: 80px; color: var(--btn-color); font-size: 14px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); font-family: 'Yekan Bakh' !important; } .contianer__contactus__form form button:focus { background: var(--backgrand-color); color: var(--text-color); border: 2px solid var(--main-color); font-weight: 600; } .contianer__contactus__form input { background: var(--second-color); border: none; border-radius: 10px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); padding: 10px; height: 50px; width: 190px; font-family: 'Yekan Bakh' !important; color: var(--text-color); font-size: 14px; } .contianer__contactus__form input:focus { outline: none; color: var(--text-color); font-family: 'Yekan Bakh' !important; box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.25); } .contianer__contactus__form input::placeholder { color: var(--text-color); font-family: 'Yekan Bakh' !important; } .contactus__form { display: flex; justify-content: center; align-items: center; } .contactus { left: unset !important; transform: translate(0,0) !important; } #Loadsearch { top: 70px !important; } .contianer__info__input { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .contianer__subject__input { display: flex; flex-direction: column; align-items: flex-start; width: 700px; padding: 10px; background: var(--second-color); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); border-radius: 10px; } .subject__input { width: 200px !important; height: 40px !important; background: var(--backgrand-color) !important; } .subject__input::placeholder { color: #e4e4e4 !important; } .subject__input:focus { font-family: 'Yekan Bakh' !important; color: var(--text-color) !important; } .contianer__subject__input textarea { background: var(--backgrand-color); width: 100%; height: 200px; margin: 0px; margin-top: 15px; padding: 10px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); border: none; border-radius: 10px; } .contianer__subject__input textarea::placeholder { font-family: 'Yekan Bakh' !important; } .contianer__subject__input textarea:focus { outline: none; color: var(--text-color); font-family: 'Yekan Bakh' !important; box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.25); } .turkiye__call__btn { display: flex; align-items: center; justify-content: center; border: none; height: 40px; color: var(--main-color); font-weight: bold; font-size: 14px; text-decoration: none; margin-right: 15px; } .turkiye__call__btn svg { margin-left: 10px; } .contianer__contact__turkiye u { color: var(--main-color); } .contianer__contact__turkiye__social { display: flex; flex-direction: column; align-items: flex-start; } .contact__turkiye__social { display: flex; justify-content: space-between; align-items: center; width: 45%; } .contianer__contact__turkiye__social a { display: flex; align-items: center; margin: 5px; width: 100px; text-decoration: none; transition: all 0.5s; color: var(--text-color); fill: var(--main-color); } .contianer__contact__turkiye__social a:hover { color: var(--main-color); } .contianer__contact__turkiye__social a svg { margin-left: 10px; } .contianer__contact__iran { margin-top: 50px; } .contianer__contact__iran u { color: var(--main-color); } /************************** End contact us page **************************/ /************************** Start profile page **************************/ .warpper__profile { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 100px; } .contianer__profile { display: flex; align-items: flex-start; justify-content: space-between; width: 80%; } .contianer__profile__feature { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; } .contianer__profile__feature button { display: flex; align-items: center; justify-content: center; background: var(--second-color); color: var(--text-color); box-shadow: 0px 2px 5px 0px rgba(126, 111, 96, 0.25); border: none; border-radius: 20px; margin: 5px 0; width: 100%; height: 75px; font-size: 16px; font-family: 'Yekan Bakh' !important; white-space: nowrap; } .contianer__profile__feature a { display: flex; align-items: center; justify-content: center; background: var(--second-color); color: var(--text-color); box-shadow: 0px 2px 5px 0px rgba(126, 111, 96, 0.25); border: none; border-radius: 20px; margin: 5px 0; width: 100%; height: 75px; font-size: 16px; text-decoration: none; transition: all 0.5s; } .contianer__profile__feature a:hover { box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; } .profile__feature__picture { display: flex; flex-direction: column; background: var(--second-color); box-shadow: 0px 2px 5px 0px rgba(126, 111, 96, 0.25); border-radius: 20px; margin-bottom: 5px; padding: 20px; width: 100%; height: 280px; align-items: center; justify-content: center; overflow: hidden; } .profile__feature__picture p { text-align: center; white-space: pre-line; margin-top: 0; } .profile__pic__edite { display: flex; justify-content: center; align-items: center; flex-direction: column; } .profile__pic__edite img { filter: drop-shadow(0px 4.093320846557617px 8.186641693115234px rgba(0, 0, 0, 0.25)); width: 100px; height: 100px; object-fit: cover; border-radius: 100px; } .pic__edite { position: absolute; overflow: hidden; width: 100px; height: 100px; border-radius: 100%; transform: translate(0px, 0px); } .pic__edite input { opacity: 0; } .pic__edite svg { transform: translate(-31px, 32px); } .Submit__Profile { /* display: flex;*/ justify-content: space-between; align-items: center; width: 120px; margin-top: -23px; } .Submit__Profile button { width: auto; height: auto; box-shadow: none; font-size: unset; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: none; } .Submit__Profile svg { transform: translate(0px, 0px); } .pic__edite:hover .Uplod-pic { transform: translate(0px, 0px); } .profile__btn { width: 100%; } .profile__info { display: flex; align-items: flex-end; } .Uplod-pic { background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(18 18 18 / 62%) 100%); width: 100px; height: 100px; transform: translate(0px, 90px); transition: all 0.3s; } .contianer__profile__form { display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--second-color); box-shadow: 0px 2px 5px 0px rgba(126, 111, 96, 0.25); border-radius: 15px; padding: 10px; margin-right: 20px; width: 100%; height: 540px; } .profile__form__titr { display: flex; align-items: center; justify-content: space-between; width: 80%; } .profile__form__titr p { color: var(--title-color); font-size: 18px; font-weight: bold; } .contianer__profile__form form { display: flex; flex-direction: column; align-items: center; width: 100%; } .contianer__profile__form form label { color: var(--title-color); font-weight: bold; font-size: 14px; margin-left: 15px; white-space: nowrap; } .contianer__profile__form form input { width: 100%; background: none; border: none; color: var(--text-color); font-family: 'Yekan Bakh' !important; } .contianer__profile__form form input:focus { outline: none; } .contianer__profile__form form div { display: flex; align-items: center; justify-content: flex-start; background: var(--btn-backgrand-color); color: var(--text-color); border-radius: 10px; width: 80%; margin: 10px 0; padding: 20px; } /* Profile Modal */ #MyProfileBtn { display: flex; justify-content: center; align-items: center; width: auto; height: auto; background: none; box-shadow: none; margin-right: -35px; margin-bottom: -10px; position: relative; } .ModalProfile { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 85px; width: 100%; height: 100%; overflow: auto; } /* ModalProfile Content */ .ModalProfile-content { display: flex; flex-direction: column; justify-content: space-between; background-color: var(--backgrand-color); margin: auto; padding: 20px; width: 400px; height: 400px; border-radius: 20px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; } .ModalProfile-content input { display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 52px; } .closeProfile { display: flex; justify-content: flex-end; align-items: center; color: var(--main-color); float: right; font-size: 40px; font-weight: bold; margin: 0; } .closeProfile:hover, .closeProfile:focus { color: var(--buttom-color-hover); text-decoration: none; cursor: pointer; } .show__profile__modal { background: none; border: none; } .close-modalProfile { position: absolute; top: 0; left: 9px; font-size: 50px; color: var(--main-color); cursor: pointer; border: none; background: none; } .hiddenProfile { display: none; } .modalProfile { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; background-color: var(--backgrand-color); padding: 20px; border-radius: 20px; box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3); z-index: 10; } .modalProfile__tabination { display: flex; align-items: center; justify-content: space-between; margin-top: 50px; margin-bottom: 27px; border-bottom: 2px solid var(--btn-backgrand-color); } .overlayProfile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background-color: rgba(0, 0, 0, 0.6);*/ backdrop-filter: blur(3px); z-index: 5; } .modalProfile__Form form { display: flex; flex-direction: column; align-items: flex-start; } .modalProfile__Form input { width: 100%; height: 50px; background: var(--backgrand-color); border: 2px solid var(--line-color); border-radius: 10px; margin-bottom: 20px; margin-top: 5px; font-family: 'Yekan Bakh' !important; color: var(--text-color); padding-right: 10px; font-size: 14px; } .modalProfile__Form input:focus { outline-color: var(--arrow-color); } .repass__Form input { width: 100%; height: 50px; background: var(--backgrand-color); border: 2px solid var(--line-color); border-radius: 10px; margin-bottom: 20px; margin-top: 5px; font-family: 'Yekan Bakh' !important; color: var(--text-color); padding-right: 10px; font-size: 14px; } .repass__Form input:focus { outline-color: var(--arrow-color); } .info_form { display: flex; align-items: center; justify-content: center; width: 50%; height: 45px; background: none; border: none; font-size: 16px; font-weight: bold; color: var(--text-color); font-family: 'Yekan Bakh' !important; } .repass_form { display: flex; align-items: center; justify-content: center; width: 50%; height: 45px; background: none; border: none; font-size: 16px; font-weight: bold; color: var(--text-color); font-family: 'Yekan Bakh' !important; } .ActiveModalBtn { background: var(--btn-backgrand-color); border-radius: 10px 10px 0px 0px; } .modalProfile__Form label { color: var(--title-color); font-size: 16px; } .user__info__btn { display: flex; align-items: center; justify-content: space-evenly; margin: 20px 0px; } .user__info__btn a { display: flex; align-items: center; justify-content: center; border: 2px solid var(--main-color) !important; background: var(--backgrand-color); border-radius: 10px; width: 115px; height: 45px; text-decoration: none; font-size: 14px; font-weight: bold; color: var(--text-color); transition: all 0.3s; filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25)); } /************************** End profile page **************************/ /************************** Start FavoritesItems page **************************/ .warpper__favoritesItems { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 65px; } .contianer__favoritesItems { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 80%; } .contianer__favoritesItems h3 { margin: 0; color: var(--title-color); margin: 10px; } .contianer__favoritesItems__fillters__groupe { margin: 10px; } .contianer__favoritesItems__fillters__groupe button { background: var(--second-color); border: none; border-radius: 10px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; padding: 10px; margin-left: 10px; color: var(--text-color); font-family: 'Yekan Bakh' !important; } .contianer__favoritesItems__fillters__groupe button:active { background: var(--main-color); color: var(--btn-color); } .contianer__favoritesItems__fillters__groupe button:focus { background: var(--main-color); color: var(--btn-color); } .contianer__favoritesItems__box { display: flex; flex-wrap: wrap; width: 100%; margin-top: 20px; } .favoritesItems__box { display: flex; flex-direction: column; width: 265px; margin: 10px; } .favoritesItems__box img { width: 100%; height: 250px; object-fit: cover; border-radius: 20px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .favoritesItems__box p { margin: 0; margin-top: 15px; color: var(--text-color); } .favoritesItems__box > div { display: flex; } .favoritesItems__box > div button { display: flex; align-items: center; justify-content: center; width: 59px; height: 34px; background: var(--backgrand-color); border: none; border-radius: 100px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; transform: translate(42px, 10px); } /************************** End FavoritesItems page **************************/ /************************** Start Comment Section **************************/ .comment-thread { max-width: 80%; margin: auto; padding: 0 30px; } .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Comment */ .contianer__comment { display: flex; align-items: flex-start; justify-content: center; margin: 20px 0px; } .comment { position: relative; margin: 20px auto; } .second-layer { flex-direction: column; } #comment-2 { display: flex; justify-content: flex-end; } #txt__descrption2 { width: 84%; background: #ffe9cb; } .replays__contianer { display: flex; justify-content: flex-end; } .replays__info { margin-left: 20px; } .replays__info h5 { margin: 0; } .comment-voting { width: 20px; height: 32px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; } .comment-voting button { display: block; width: 100%; height: 50%; padding: 0; border: 0; font-size: 10px; } /* Adjustments for the comment border links */ .comment-border-link { display: block; position: absolute; top: 50px; left: 0; width: 12px; height: calc(100% - 50px); } .comment__title__name { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-left: 20px; white-space: nowrap; } .comment__title__name h6 { margin: 0; font-size: 16px; } .comment__title__name p { margin: 0; } .comment__descrption { display: flex; flex-direction: column; align-items: center; text-align: right; width: 100%; background: #FFF1E5; padding: 10px; border-radius: 65px 5px 65px 65px; position: relative; z-index: 2; } .descrption { display: flex; flex-direction: column; align-items: flex-end; width: 100%; padding: 0px 15px; } .descrption button { display: flex; align-items: center; justify-content: space-between; width: auto; border: none; background: none; font-size: 16px; color: var(--text-color); font-family: 'Yekan Bakh' !important; } .descrption button svg { margin-right: 10px; position: relative; z-index: -1; } .descrption__txt { width: 100%; text-align: justify; } .descrption__txt p { color: var(--text-color); font-family: 'Yekan Bakh' !important; } .reply-form { display: flex; flex-direction: column; align-items: flex-end; margin: 10px; } .reply-form textarea { width: 90%; max-width: 100%; height: 90px; background: #FFF7F0; color: var(--text-color); border-radius: 65px 5px 65px 65px; border: none; padding-right: 20px; padding-top: 20px; font-size: 14px; resize: none; font-family: 'Yekan Bakh' !important; } .reply-form textarea:focus { outline: none !important; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; } .reply-form textarea::placeholder { color: #999898; font-size: 14px; } .reply-form button { display: flex; align-items: center; justify-content: center; width: auto; height: 30px; border: 2px solid var(--main-color); background: var(--main-color); color: var(--backgrand-color); font-size: 16px; padding: 10px; margin: 5px; border: none; border-radius: 5px; font-family: 'Yekan Bakh' !important; } .reply-form button:active { background: #FFF7F0; border: 2px solid var(--main-color); color: var(--text-color); } .comment__descrption__btn { display: flex; width: 96px; max-width: 100%; justify-content: flex-end; position: relative; bottom: 50px; left: 60px; } .Admin__Replay { background: #ffdbbd; display: flex; align-items: flex-start; width: 76%; } .Admin__Replay span { background: var(--main-color); display: block; width: 20px; height: 20px; border-radius: 50px; } .d-none { display: none; } /***** start video section *****/ .warpper__video { display: flex; justify-content: center; align-items: center; width: 100%; } .contianer__video { display: flex; justify-content: center; align-items: center; width: 80%; } .contianer__singel__video { display: flex; align-items: center; justify-content: center; width: 100%; } .contianer__singel__video video { width: 100%; border-radius: 20px; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; } /***** end video section *****/ /***** start line title *****/ .warper__contianer__line__title { display: flex; justify-content: center; width: 100%; margin-top: 30px; } .warper__line__title { display: flex; align-items: center; justify-content: center; width: 80%; } .warper__line__title h2 { white-space: nowrap; margin-left: 20px; } /***** end line title *****/ /************************** End Comment Section **************************/ /***************** start responsive *****************/ @media screen and (max-width: 1250px) { /*hotel index*/ .hotels__contianer__cards__section { justify-content: space-between; } .contianer__card { height: 83vh; width: 36vw; padding: 10px; } .contianer__card__items__firstsection { flex-direction: column; } .contianer__card__items__links { width: 100%; height: 40vh; display: flex; justify-content: center; } .contianer__card__items__links a { width: 100%; } .contianer__card__items { padding-right: 0; margin-top: 20px; } .contianer__card img { width: 100%; height: 100%; } .contianer__card__items__title { display: flex; align-items: center; justify-content: space-between; } .contianer__card__items__title h3 { margin: 0; } .contianer__card__items__title p { margin: 0; } .contianer__card__items__rating { justify-content: space-between; } .contianer__card__items__firstsecond { margin: 0; flex-wrap: wrap; } .hotels__option { width: 33%; } .hotels__option p { margin: 6px; font-size: 15px; } /*compare btn*/ .hotels__Comparison { flex-direction: column; height: auto; font-family: 'Yekan Bakh' !important; } .hotels__Comparison span { margin: 0; width: 60px; height: 60px; } .hotels__Comparison p { margin: 18px 0; font-size: 14px; } /*end hotel index*/ } @media screen and (max-width: 1024px) { .warpper { height: auto; } .text p { font-size: 14px; } } @media screen and (max-width: 1110px) { .blogs__quick__access { width: auto; } .contianer__warpper__blogs { flex-direction: column; margin: 80px; } .quick__access__list { display: none; } .quick__access__listMoblie { display: block; width: auto; } .contianer__blogs__cards { width: 100%; justify-content: space-between; } .blog__card { height: auto; width: 45%; } .blog__card__item { flex-direction: column; } .blog__card__item a { width: 100%; } .blog__card__item img { width: 100%; } .blog__card__content__profile { justify-content: space-between; width: 100%; } .blog__card__content__profile img { width: 50px; height: 50px; } .quick__access__itemMoblie { background: var(--low-color); position: absolute; width: 77%; display: flex; flex-wrap: wrap; flex-direction: column; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; } .quick__access__listMoblie button { background: var(--second-color); border-radius: 10px; padding: 10px; margin-right: 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .quick__access__listMoblie { display: block; background: none; box-shadow: none; width: auto; } } @media screen and (max-width: 1400px) { .wrapper__navbar__content { width: 100%; margin: 0px 10px; } } @media screen and (max-width: 992px) { .wrapper__categorie { margin-top: 38vh; } /* mobile menu */ #menuToggle svg { right: 5px; } .mobile__menu { display: flex; align-items: center; justify-content: center; } #menuToggle input:checked ~ ul { transform: translate(-270px, 0px); } /* end mobile menu */ .wrapper__navbar__content { display: flex; justify-content: space-between; direction: ltr; } #menuToggle span { display: none; } .wrapper__navbar__botton { display: none; } .wrapper__navbar__logo { width: 100%; display: flex; justify-content: center; align-items: center; } .wrapper__navbar__logo img { display: flex; width: 63px; } /* end moblie menu */ .container { width: 100%; padding: 0px 30px; } /* header image */ .warper__line__contaner { display: none; } .wrapper__contianer__fullWidth__picture { flex-direction: column-reverse; align-items: center !important; } .wrapper__contianer__fullWidth__picture__image { border: none !important; border-radius: unset; } .line__contianer__background { display: none !important; } .wrapper__contianer__fullWidth__picture__text { display: none; } .txt__animation__pic { display: none; } /*home page first silder*/ .wrapper__Slidshow { margin-bottom: 185px; } .wrapper__Slidshow__content { flex-direction: column; align-items: center; width: 100%; } .wrapper__Slidshow__content__picture { width: 100%; padding: 0; margin: 0; height: 71vh; } .slideshow-container { padding: 0px 10px; } .slideshow-container img { width: 100%; height: 100%; padding-right: 0; border-radius: 0px 0px 40px 40px; } /*tablet line*/ .wrapper__tablet__line { display: block; justify-content: center; align-items: center; width: 83%; height: 0; margin-bottom: 30px; } .wrapper__contianer__tablet__line { display: flex; align-items: center; justify-content: center; height: 0; } .tablet__line { display: inline-block; background: var(--line-color); width: 100%; height: 3px; } .wrapper__contianer__headerImg { display: flex; flex-direction: column; align-items: center; } .tablet__text { background: var(--backgrand-color); height: 20px; width: auto; display: flex; align-items: center; justify-content: space-between; } .tablet__text p { font-size: 18px; font-weight: bold; margin-right: 30px; } .tablet__dot { display: inline-block; background: var(--line-color); width: 13px; height: 13px; border-radius: 100%; } /*end tablet line*/ /* end header image */ .wrapper__navbar__link { display: none; } .wrapper__navbar__search { display: none; } #login-btn { display: none; } /* #Register-btn { display: none; }*/ #language { display: none; } .wrapper__Slidshow__line { display: none; } .wrapper__Slidshow__dot { width: 100%; height: 485px; } .wrapper__Slidshow__content__text { width: 100%; margin: auto; padding: 0px 20px; } .txtAnime { padding: 0; margin: auto; width: 95%; } #container, #container-video { width: 114%; } .slide__img { width: 413px; object-fit: cover; } .wrapper__Slider__title { width: 100%; justify-content: space-around; padding: 0px 20px; } .wrapper__Slider__title__line { width: 100%; } /*goshvareh slider*/ .slider { width: 100% !important; position: relative; } .slider-continner { width: 100% !important; padding: 0px 20px; } .filter-contianer { margin-right: 20px; } /*home page right img slider*/ .wrapper__Slider { margin: auto; margin-top: 20px; } .slideshow-coontainer { width: 100% !important; padding: 0px 20px; } .warpper { height: auto !important; flex-direction: column-reverse; } .section_picture { width: auto !important; height: 83vh !important; margin-top: 20px; } .text { width: 100% !important; padding-right: 0 !important; } .text h3 { font-size: 22px; } .dotsright_warpper { width: auto !important; margin-top: 20px; } /* Start Puzzle Slide*/ .topright { padding-left: 0; } .bottomleft { padding-right: 0; } .warper__gallery__contianer { width: 100%; padding: 0px 20px; margin-top: 20px; } .warper__contianer__titr { height: 30px; margin-bottom: 35px; margin-top: 10px; } .warper__gallery__contianer__titr { height: 30px; margin-bottom: 35px; margin-top: 10px; } .warper__gallery__contianer__text { font-size: 20px; } .warper__gallery__contianer__rate { font-size: 20px; } .warper__contianer__text { font-size: 20px; } .warpe__contianer__rate { font-size: 20px; } .wrapper__Gallery__title { width: 100%; padding: 0px 20px; } .warper__gallery__main__contianer img { height: 320px; border-radius: 35px 35px 35px 0px; } .warper__gallery__contianer__row { display: grid; align-items: center; margin-bottom: 30px; } .warper__gallery__main__contianer { width: 100%; height: auto; } .warper__main__contianer { width: 100%; padding: 0; } .warper__main__contianer img { height: 320px; border-radius: 35px 35px 35px 0px; } /* End Puzzle Slide*/ /*start slider right*/ .wrapper__slider__section { flex-direction: column; } .section__second__col { padding: 0; margin-top: 45px; margin-bottom: 30px; } .dotted-slider img { border-radius: 35px 35px 35px 0px; } /*end slider right*/ /* start palcs respansive code */ .fullWidth__line { display: none; } .fullWidth__circle { display: none; } .wrapper__contianer__fullWidth__picture { width: 100%; } .wrapper__contianer__fullWidth__picture__text { width: 40%; justify-content: center; } .wrapper__Social__media__main { display: none; } .wrapper__contianer__fullWidth__picture__image img { border-radius: 0px 0px 90px 90px; width: 100% !important; height: 355px; padding-left: 25px; padding-right: 25px; } .wrapper__contianer__paragraph p { padding-left: 0px !important; } .wrapper__fullWidth__picture { margin-bottom: 50px; } .top-rate { width: 30%; } /* start FAQ & Comments section */ .wrapper__contianer__FCsection { width: 100%; flex-direction: column; } .wrapper__FCsection__Comments__titr { width: 100%; } .wrapper__FCsection__Comments { width: 95%; } .wrapper__contianer__FAQsection { width: 95%; margin-top: 40px; } /* start Comments section */ .wrapper__Comments__item__DateName { width: auto; } .wrapper__Comments__item__text { height: auto; } .wrapper__Comments__section { flex-direction: row; } .wrapper__Comments__item { flex-direction: column; } .wrapper__Comments__item button { display: none; } .wrapper__Comments__contianer { width: 100%; } .wrapper__Comments__title { width: 88%; margin-right: 18px; } .wrapper__contianer__FCsection { flex-direction: row; } .wrapper__FCsection__Comments__input { justify-content: flex-start; } .wrapper__FCsection__Comments { width: 50%; margin: 15px; } .wrapper__contianer__FAQsection { width: 50%; margin: 15px; } .wrapper__Comments__title { width: 97%; } .wrapper__Comments__section { flex-direction: column; } .wrapper__Comments__item { flex-direction: row; margin: 15px; } .wrapper__Comments__item__DateName { width: 20%; } .slick-container { width: 100%; } .slick__arrow { display: none; } /*slider goshvareh*/ .slider-dots-contineer { top: 119px !important; } .boton-contineer { display: none !important; } .slider-dots-contineer { position: absolute !important; top: unset !important; bottom: -10px !important; } /*footer*/ .wrapper__footer { border-radius: 150px 0px 0px 0px; } .wrapper__footer__quick__access { justify-content: flex-start; } /* mavared moshabeh */ .Slider__title { width: 100%; padding: 0px 20px; } .wrapper__Gallery__title__text { width: 100%; padding: 0px 20px; } /**************************************************Start places page style*************************************************/ /* singel picture */ .warpper__singel__picture { margin-top: 0; } .warpper__contianer__singel__picture { width: 90%; } .singel__picture__contianer { flex-direction: column; justify-content: center; align-items: center; } .picture__contianer { width: 100%; height: 65vh; } .singel__picture__content__contianer { width: 100%; } .singel__picture__lable { display: none; } /***** gllery item *****/ .places__gllery__item { width: 100%; margin-bottom: 35px; } .item__rate { width: auto; } .places__gllery__item img { height: 145px; object-fit: cover; } .places__somery__description { width: auto; } .item__descreption p { font-size: 14px; line-height: 2; width: auto; } .item__rate h3 { font-size: 16px; } .places__gllery__header__filter { align-items: flex-start; flex-direction: column-reverse; margin-right: 10px; } .header__btn__filter { width: 100%; } .header__searchbox { margin-left: 0; width: 98%; justify-content: flex-start; margin-bottom: 20px; } .header__searchbox input { width: 100%; } /* places gllary */ .places__gllery__item__contianer { width: 50%; } /*start blog page*/ .contianer__warpper__blogs { flex-direction: column; width: 100%; margin: 50px 0; } .blogs__quick__access { width: 100%; } .quick__access__fillter { justify-content: flex-start; display: flex; } .moblie__fillter { display: flex; } .most__visited__items:hover .most__visited__content { display: flex; position: absolute; background: var(--input-color); padding: 20px; border-radius: 10px; top: 140px; width: 100%; height: 100%; overflow: scroll; right: 0; } .contianer__blogs__cards { width: 100%; align-items: flex-start; justify-content: flex-start; flex-wrap: unset; padding: 10px; overflow: hidden; display: flex; flex-wrap: wrap; } .blog__card { width: 45%; height: auto; } .blog__card__content__profile { margin: 15px 0px; } .blog__card__item { flex-direction: column; height: auto; } .blog__card__content { padding-right: 0; } .blog__card__item img { width: 100%; height: 200px; } .blog__card__content__profile img { width: 50px; height: 50px; } .quick__access__lables { display: none; } .blog__card h3 { font-size: 16px; } .quick__access__list { display: none; } .quick__access__listMoblie { display: block; background: none; box-shadow: none; width: auto; } .quick__access__listMoblie button { background: var(--second-color); border-radius: 10px; padding: 10px; } .quick__access__listMoblie { display: block; background: none; box-shadow: none; width: auto; } .quick__access__listMoblie button { background: var(--second-color); border-radius: 10px; padding: 10px; margin-right: 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } .quick__access__itemMoblie { background: var(--low-color); position: absolute; width: 90%; display: flex; flex-wrap: wrap; flex-direction: column; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; } .quick__access__itemMoblie a { margin: 7px; } .blog__card__item a { width: 100%; } /*end blog page*/ /*start hotels index page*/ .warpper__hotels__contianer { width: 90%; } .contianer__card { justify-content: flex-start; height: 75vh; width: 40vw; padding: 15px; margin-bottom: 30px; } .contianer__card__items__links { width: 100%; height: 35vh; } .hotels__option { width: 50%; } .contianer__card__items__title h3 { font-size: 16px; } .contianer__card__items__title p { font-size: 14px; } .contianer__card__items__rating { margin-bottom: 10px; } .hotels__rating p { margin: 0; font-size: 14px; } .contianer__card__items__rating svg { width: 18px; } /* hotel compare */ .hotel__comparison__header__pictures { top: -20px; padding-top: 10px; } .header__picture { width: 28vw; height: auto; } .comparison__section__column p { font-size: 14px; } .comparison__section__group p { display: none; } .comparison__section__group img { margin: 6px 0px; } /******************* start hotels preview page ********************/ /* keyfeatures section */ .contianer__hotels__keyfeatures { justify-content: flex-start; flex-wrap: wrap; } .warpper__hotels__Comparison { left: 5px; right: unset; } #btnCompare span { display: none; } .hotel__keyfeatures { margin: 10px 15px; } /* features section */ .hotels__features span { justify-content: center; padding-right: 0; } .hotels__features span p { margin: 0; } .MobContianer__feature__item { display: flex; flex-wrap: wrap; justify-content: flex-start; } .feature__category { width: 100%; margin-bottom: 40px; } .hotels__features { flex-direction: column; padding: 0; } .contianer__hotels__features__items { justify-content: space-between; } .hotel__feature__item { width: 200px; } .hotel__feature__item img { width: 25px; } .hotel__feature__item p { font-size: 14px; } .hotels__rooms__features { padding: 10px; } /********** Footer **********/ .contianer__footer { flex-direction: column; width: 100%; padding: 0px 15px; } .moblie__logo { display: flex; align-items: center; width: 100%; margin-bottom: 20px; } .moblie__logo img { width: 100px; margin-left: 15px; } .wrapper__footer__quick__access span { display: none; } .quick__access { border-right: none; padding-right: 0; } .wrapper__footer__categorie { width: 50%; } .wrapper__footer__logo { display: none; } .wrapper__footer__left__titr p { margin: 0; } /*places full image*/ .wrapper__contianer__paragraph__section { width: 100%; } .wrapper__contianer__paragraph { width: auto; } /*map section*/ #map { max-width: 100% !important; width: 100% !important; border-bottom-right-radius: 60px !important; margin-right: -38px !important; border-radius: 20px; margin-bottom: 20px; } .row { margin-left: 13pc; } /*comment section*/ .comment-thread { max-width: 100%; } /*rating section*/ .wrapper__FCsection__Comments { width: 100%; margin: 0; } .contianer__rating { width: 100%; margin-left: 0; } .rating__box { width: 100%; height: 120px; } .rating__box > div { width: 100%; align-items: flex-start; height: 120px; } .wrapper__FCsection > div { flex-direction: column; width: 93% !important; } /* line title */ .warper__line__title { width: 100%; padding: 0px 20px; } /* end line title */ .wrapper__Slider__rigth { margin-top: 40; } /* Cliant Profile */ .modalProfile { width: 93%; top: 54%; } /* Hotel preview Request form */ .Passenger__Contianer input { width: 100%; } .Hotel__Request p { display: none; } .Hotel__Request svg { margin-left: 0; margin-bottom: 4px; } .Hotel__Request { border-radius: 60px; width: 50px; height: 50px; } } @media screen and (max-width: 803px) { /***** gllery item *****/ /* filters section */ .places__gllery__item { width: 100%; } /*Compare page*/ .header__picture img { display: none; } .header__picture { width: auto; } .comparison__header__picture { width: 100%; justify-content: space-around; } .hotel__comparison__header__pictures { margin: 51px 0px; margin-bottom: 0px !important; } .hotel__comparison__section { margin-top: 70px; width: 100%; } .comparison__section__group p { width: 100%; white-space: normal; font-size: 12px; margin: 0; } .comparison__section__column span { width: auto; margin: 0px 2px; } .comparison__section__column span img { margin: 6px 0px; } .hotel__comparison__header__pictures.scrolled-down { height: 65px; } } @media screen and (max-width: 870px) { /*slider goshvareh*/ .romeo-embed-inner { top: 59% !important; } .h_iframe-aparat_embed_frame { height: 100% !important; max-height: 80% !important; } .slider-slide video { height: 80%; } .aparat__parent__section { display: block !important; } .left-out-ltr { height: 100% !important; } .right-out-ltr { height: 100% !important; } .left-out-rtl { height: 100% !important; } .right-out-ltr { } .slider-right-ltr { height: 500px !important; display: none !important; animation-name: slider-right-ltr !important; animation-duration: 0.6s !important; animation-fill-mode: both !important; } .slider-center-rtl { height: 495px !important; width: 100% !important; position: unset !important; } .slider-center-ltr { height: 500px !important; width: 100% !important; left: 0 !important; animation-name: left-out-ltr !important; animation-duration: 0.6s !important; animation-fill-mode: both !important; } .slider-left-ltr { height: 500px !important; display: none !important; animation-name: slider-left-ltr !important; animation-duration: 0.6s !important; animation-fill-mode: both !important; } .slider-center { width: 100% !important; left: 0 !important; height: 480px !important; animation-name: left-out-ltr !important; animation-duration: 0.6s !important; animation-fill-mode: both !important; } .right-out-ltr { width: 50%; height: 100%; position: absolute; right: -50%; animation-name: left-out-ltr !important; animation-duration: 0.6s !important; animation-fill-mode: both !important; } .slider-right { display: none; } .slider-left { display: none; } .slider-slide { padding: 0 !important; } .slider-dots-contineer { right: 0vw; } .slider-right-rtl { display: none; } .slider-left-rtl { display: none; } } @media screen and (max-width: 856px) { .slick__arrow-right { display: none; } .slick__arrow-left { display: none; } .slick__slider { width: 92%; } .slick-container { width: 100%; align-items: flex-end; } } @media screen and (max-width: 750px) { /* start hotel idex*/ .contianer__card__items__firstsecond { flex-wrap: wrap; width: auto; justify-content: flex-start; } .hotels__option { margin: 0px 10px; } /* end hotel idex*/ } @media screen and (max-width: 600px) { .aparat__parent__section { height: 86% !important; } .row { padding: 0; margin-right: 0; } #map { width: 100%; border-bottom-right-radius: 120px !important; margin-right: 20px !important; } .slider-continner { margin-left: 0px; margin-right: 0px; width: 100% !important; } .wrapper__contianer__fullWidth__picture__image img { border-radius: 0px 0px 60px 60px; } .wrapper__contianer__fullWidth__picture__image { padding-right: 30px; padding-left: 8px; } .wrapper__contianer__paragraph__section { padding: 0 6px; width: 100%; align-items: center; } .wrapper__contianer__paragraph { padding: 0px 20px; } .slider-dots-contineer { right: -5px; } /* Hotel preview Request form */ .Passenger__Contianer input { width: 100%; } .HotelForm__modal__content { top: -200vh; } .Date__Contianer { flex-wrap: wrap; } .Date__Contianer input { width: 100%; } .Info__Contianer { flex-wrap: wrap; } .Form__item { width: 100%; margin-left: 0 !important; } .Info__Contianer input { width: 100%; } .Info__item { margin-left: 0 !important; } .RoomName { width: 100%; } .HotelTime__Contianer label { font-size: 14px; } .TourismTor-Contianer { width: 100%; } .VipServis-Contianer { width: 100%; } .VipServis-item { margin: 0; } .VipServis-item label { font-size: 14px; } } @media screen and (max-width: 700px) { .places__gllery__item__contianer { width: 50%; } } @media screen and (max-width: 1000px) { .wrapper__contianer__fullWidth__picture { flex-direction: column-reverse; } .line__contianer__background { width: 506px; margin-right: -871px; } .wrapper__contianer__fullWidth__picture__image img { width: 100%; } .wrapper__contianer__headerImg { width: 100%; } .wrapper__contianer__fullWidth__picture__image { width: 100%; } } @media screen and (max-width: 319px) { .quick__access__fillter button { width: 100%; } } @media screen and (max-width: 487px) { .tablet__line { width: 65% !important; } } @media screen and (max-width: 425px) { .quick__access { height: auto; margin-bottom: 25px; } .quick__access__fillter { flex-wrap: wrap; justify-content: center; } .moblie__logo img { width: 70px; } .moblie__logo p { margin: 0; padding: 0; font-size: 14px; } .wrapper__footer__quick__access { font-size: 14px; } .wrapper__footer__categorie { font-size: 14px; } .footer__categorie__linkItem a { width: auto !important; } .wrapper__footer__left { margin: 0; margin-bottom: 10px; } .wrapper__footer__left__media svg { width: 18px !important; } .wrapper__footer__left__titr { font-size: 14px !important; letter-spacing: 0 !important; margin-right: 0; } /* hotel index */ .hotels__option { width: 50% !important; } } @media screen and (max-width: 620px) { /*start categorie*/ .wrapper__categorie__row__item { width: 160px; } /*end categorie*/ } @media screen and (max-width: 650px) { .wrapper__categorie { margin-top: 50vh; } .contianer__card { width: 100%; } .contianer__card__items__links { height: auto; } .contianer__card__items__title { flex-direction: row !important; } .hotels__option { width: 33%; } .contianer__card__items__firstsecond { width: 100%; } .btn_warppper { margin-top: 20px; } } @media screen and (max-width: 755px) { /*start hotels index page*/ .contianer__card { padding: 15px; height: auto; width: 100%; } .contianer__card__items__firstsection { flex-direction: column; } .contianer__card__items__links { width: 100%; height: auto; } /* .contianer__card img { width: 100%; height: 300px; } */ .hotels__option img { width: 23px !important; height: auto !important; } .hotels__option { margin: 5px 0px; width: 33%; } .contianer__card__items { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .contianer__card__items__title { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } .contianer__card__items__title h3 { margin-bottom: 5px; } .contianer__card__items__title p { margin: 0; text-align: end !important; } .contianer__card__items__rating { justify-content: space-between; width: 100%; } } @media screen and (max-width: 630px) { .contianer__blogs__cards { flex-direction: column; } .blog__card { width: 100%; margin: auto; margin-bottom: 25px; } .blog__card__item img { height: 280px; } .blog__card__item img { height: auto; } .blog__card__content { margin-bottom: 20px; } .quick__access__fillter button { white-space: nowrap; font-size: 12px; } .blog__card a { width: 100%; } /* custom alert */ .Custom__Alert span { width: 23px; height: 22px; } .Custom__Alert p { font-size: 14px; } } @media screen and (max-width: 414px) { /*slider left*/ .wrapper__Slidshow { height: auto !important; } /* .slideshow-container img { height: 270px !important; }*/ .wrapper__Slidshow__content__text p { line-height: 2.4 !important; font-size: 13px !important; } .wrapper__Slidshow__content__text h2 { font-size: 16px !important; height: auto; margin: 0; } /*categoris*/ .wrapper__categorie__row__item img { width: 60px; } .wrapper__categorie { margin-bottom: 0 !important; } .wrapper__contianer__categorie { margin-bottom: 0 !important; } /*line title*/ .warper__contianer__line__title { margin-top: 0; } /*slider right*/ .wrapper__Slider__rigth { margin-bottom: 30px; } .dotsright_warpper { margin-top: 7px !important; } /* .text p { line-height: 2.4 !important; font-size: 13px !important; }*/ /*slidr goshvare*/ .slider { width: 100% !important; } /*slider raily*/ /*.wrapper__Gallery__Slider { margin: auto; }*/ /*footer*/ .footer__categorie__linkItem { width: auto; } } @media screen and (max-width: 450px) { /* .slideshow-container img { height: 321px !important; object-fit: cover; }*/ .wrapper__categorie { margin-top: 0vh !important; } .dot { height: 10px !important; width: 10px !important; } .wrapper__Slidshow__content__text { margin-top: 18px !important; } .wrapper__Slidshow { height: auto !important; margin-bottom: 5vh !important; } .warper__gallery__main__contianer img { height: 240px; } .warper__main__contianer img { height: 240px; } /* .footer__categorie__linkItem a { width: 155px !important; }*/ .footer__categorie__linkItem { justify-content: center; } /*compare page*/ .singel__picture__content__contianer h2 { font-size: 18px !important; } .singel__picture__content__contianer p { font-size: 14px !important; } } @media screen and (max-width: 554px) { .wrapper__categorie__row__item { width: 140px; } } @media screen and (max-width: 576px) { .wrapper { margin-top: 18px; } /*********************/ .section_picture { height: auto !important; } .section_picture img { height: auto !important; } .singel__picture__contianer { border-bottom-left-radius: 20px; } .singel__picture__content__contianer { padding: 20px; } .singel__picture__content__contianer p { width: 100%; margin: 0; margin-top: 10px; } .warpper__singel__picture { margin-top: 0; } .singel__picture__line__contianer { display: none; } .modal-content { margin: 20px; width: auto !important; } /*line title*/ .Gallery__dot { display: none; } .line { display: none; } .text-center { height: 100% !important; } .romeo-embed-inner { top: 61% !important; } /*line title*/ .wrapper__contianer__paragraph h1 { font-size: 18px; } .wrapper__contianer__fullWidth__picture__image { padding-left: 0; padding-right: 0; } .wrapper__tablet__line { display: none; } /*slider goshvare*/ .boton-contineer { display: none !important; } /* .slider { margin-right: 150px; }*/ .filter-contianer { margin-right: 0; } .slider-continner { width: 100% !important; padding: 0px 20px; } .boton-contineer button { width: 65px !important; height: 292px !important; border-radius: 20px !important; } .boton-contineer { top: -15px !important; width: 100% !important; } .filter-btn-contianer { margin-right: 20px; } .warper__places__gllery { margin-top: 90px; } .places__gllery__header h1 { font-size: 20px; margin-top: 22px; } /*end slider goshvare*/ /*home page first slider*/ .warper__line__contaner { display: none; } /*end home page first slider*/ .map-contianer { width: 100%; } .row { margin: 0; padding: 0; } #map { width: 100%; border-bottom-right-radius: 60px !important; margin-right: 0px !important; } .wrapper__contianer__paragraph__section { width: 100%; padding: 0; align-items: center; } .wrapper__contianer__paragraph { width: 100%; height: auto; } .wrapper__contianer__paragraph p { padding: 0 !important; margin: 0; } .wrapper__contianer__paragraph__rate { margin-bottom: 20px; } .wrapper__contianer__FAQsection { width: 95%; } .wrapper__contianer__FCsection { flex-direction: column; } .wrapper__FCsection__Comments { width: 100%; } .wrapper__Comments__section { flex-direction: row; } .wrapper__Comments__item { flex-direction: column; } .wrapper__Comments__item__DateName { width: 100%; } .wrapper__Social__media { display: none; } .wrapper__navbar { position: fixed; } .wrapper__navbar__link { display: none; } .wrapper__navbar__search { display: none; } #login-btn { display: none; } /* #Register-btn { display: none; }*/ #language { display: none; } .wrapper__navbar__content { justify-content: flex-end; } .wrapper__Slider__title__line { margin-right: 18px; } .wrapper__Slider__title { justify-content: space-around; } /*first slid*/ .wrapper__Slider__title { width: 100%; } .wrapper__Slidshow { flex-direction: column; display: flex; align-items: flex-end; width: 100%; margin: auto; /*margin-bottom: 35vh;*/ /*height: 900px;*/ } .wrapper__categorie { margin-top: 41vh; } .wrapper__categorie h1 { font-size: 23px; } .slideshow-container { width: 100%; height: auto; } .wrapper__Slidshow__content__picture { width: 101vw; height: auto; padding: 12px; } .wrapper__Slidshow__content { display: flex; flex-direction: column; width: 100%; width: 100%; } .slideshow-container img { position: relative; right: 0px; padding-right: 0; border-radius: 0px 0px 40px 40px; width: 100%; height: auto; } .wrapper__Slidshow__content__text { display: flex; align-items: flex-start; padding: 10px; } .wrapper__Slidshow__Mobiledot { display: block; margin-top: 10px; } .wrapper__Slidshow__dot { display: none; } /*second slider*/ .arrow { display: none; } .circles { display: none; } .wrapper__Gallery__title__line { display: none; } /* image gallery */ .warper__contianer__text { font-size: 18px; } .warper__gallery__contianer__text { font-size: 18px; } .warper__gallery__contianer__row { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-bottom: 0 !important; } .two { margin-top: 0; } .warper__gallery__contianer { display: flex; flex-direction: column; width: 100%; align-items: center; } .warper__gallery__main__contianer { margin-left: unset; } .warper__main__contianer { padding-left: unset; } .wrapper__Gallery__title { width: 100%; padding: 0px 20px; } /* Fourth slider */ .wrapper__Gallery__Slider__title { width: 100%; } /*slider txt annd img right*/ .slideshow-coontainer { width: 100% !important; padding: 0px 20px; } .dotsright_warpper { width: auto !important; margin-top: 20px; } .text { padding: 0px; } .wrapper__slider__section { width: unset; justify-content: center; } .section__first__col { width: 100%; } .dotted-slider img { border-radius: 110px 0px 0px 0px; } .section__second__col { max-width: 90%; } .section__second__col h1 { font-size: 24px; } .wrapper__Slider { margin: auto; } .warpper { flex-direction: column-reverse; height: auto !important; } .section_picture { width: 100% !important; margin-top: 20px; } .text { width: 100% !important; padding-right: 0 !important; } .topright { padding-left: 0 !important; } .bottomleft { padding-right: 0 !important; } /* footer */ .quick__access { height: auto; margin-bottom: 25px; } .quick__access__fillter { flex-wrap: wrap; justify-content: center; } .moblie__logo img { width: 70px; } .moblie__logo p { margin: 0; padding: 0; font-size: 14px; } .wrapper__footer__quick__access { font-size: 14px; } .wrapper__footer__categorie { font-size: 14px; } .footer__categorie__linkItem a { width: auto !important; } .wrapper__footer__left { margin: 0; margin-bottom: 10px; } .wrapper__footer__left__media svg { width: 18px !important; } .wrapper__footer__left__titr { font-size: 14px !important; letter-spacing: 0 !important; } /* start Comments section */ .wrapper__Comments__item__text { width: 440px; } .wrapper__Comments__item__DateName { flex-direction: row; display: flex; align-items: center; margin-left: 15px; justify-content: space-between; } .wrapper__Comments__item__text { width: 300px; } .wrapper__Comments__item { margin: 20px; } .wrapper__contianer__fullWidth__picture__text { width: 65% !important; } .wrapper__contianer__fullWidth__picture__image img { height: auto; } .top-rate { width: 40%; } .box-map iframe { width: 100%; } /**************************************************Start places page style*************************************************/ /* singel picture */ .warpper__hotels__Comparison { bottom: 5vh; right: 5px; } .hotels__Comparison span { width: 50px; height: 50px; } .picture__contianer { height: auto; } .singel__picture__content__contianer h2 { font-size: 20px; } .HotelTime__Contianer { flex-direction: column; } .Entrance__Time { width: 100%; margin-left: 0; } .HotelTime { flex-direction: column; align-items: flex-start; } .Exit__Time { width: 100%; } /* fillter btn */ .header__btn__filter { flex-wrap: wrap; max-width: 100%; justify-content: flex-start; } .header__btn__filter button { width: 215px; margin: 6px; } .places__gllery__item__contianer { width: 100%; height: auto; } .item__rate { width: auto; } .item__descreption p { width: auto; } .places__gllery__item img { height: 210px; } /*mobli menu*/ #menuToggle input:checked ~ ul { transform: translate(-235px, 0px); } #menu { width: 285px; border-radius: unset; } /*start blog page*/ .contianer__blogs__cards { flex-wrap: wrap !important; } .blog__card { width: 100% !important; } /*end blog page*/ /*start profile*/ .contianer__profile { flex-direction: column; width: 100%; margin: 15px; } .contianer__profile__feature { width: 100%; } .profile__feature__picture { height: 150px; flex-direction: unset; } .profile__feature__picture p { margin: 0; white-space: unset; } .profile__btn { display: flex; width: 100%; margin: 10px 0px; } .contianer__profile__form { margin-right: 0; } .profile__feature__picture img { width: 80px; height: auto; margin: 0px 15px; } .contianer__profile__feature button { margin: 0px 5px; } .contianer__profile__feature a { margin: 0px 5px; } /*end profile*/ /*footer*/ .wrapper__footer { border-radius: 85px 0px 0px 0px; } /*rating & comment section*/ .wrapper__FCsection { margin-bottom: 0; } .comment__title__name p { font-size: 13px; } .comment-thread { margin-bottom: 50px; } .contianer__comment { flex-direction: column; } .replays__contianer { flex-direction: column; margin-bottom: 40px; } #txt__descrption2 { width: 100%; } .replays__info p { margin: 0; } .descrption__txt p { margin: 10px 0px; font-size: 14px; } .descrption__txt { text-align: right; } /* custom alert */ .Custom__Alert p { margin-right: 5px; } } @media screen and (max-width: 280px) { .slider-dots-contineer { right: 75px !important; } } @media screen and (max-width: 360px) { .wrapper__categorie h1 { font-size: 21px; } .wrapper { margin-top: 25px; } /*-------------------------*/ .activeLoginAnime { background: #00000063; backdrop-filter: blur(10px); height: 100vh; } .wrapper__Slidshow { margin-bottom: 0; } .wrapper__Slidshow__content__text { width: 100%; margin: auto !important; } .row { margin-right: 0px; padding: 0; } #map { width: 100%; border-bottom-right-radius: 60px !important; margin-right: 0px !important; } .leaflet-control-attribution a { display: none !important; } .wrapper__footer { border-radius: 60px 0 0 0; flex-direction: column; } .wrapper__footer__right { width: 100%; display: flex; justify-content: center; } .wrapper__footer__left { width: 100%; display: flex; justify-content: center; } .wrapper__footer__left__titr { font-size: 16px; } .wrapper__footer__left img { width: 90px; } .wrapper__footer__left__media svg { width: 25px !important; } .wrapper__footer__social__media { margin-top: 0; } .wrapper__Comments__title { width: 85% !important; } #submitComment { width: 95px; } .wrapper__FCsection__Comments__input input { width: 95px !important; } .rating__box img { display: none; } .rating__box { height: 60px; } .rating__box > div { height: 60px; } /*collaps*/ .container { margin: auto; margin-right: 0; padding-right: 15px; } .text-top h2 { margin-right: 0px; } .text-top { margin-right: 16px; } .box-bottom ul { margin-right: 0px; } .box-bottom p { margin-right: 0px; } .box-bottom.active { margin-right: -3px; } .text-top.active::after { right: -8px; } .text-top::after { right: -6px; } .end-circle { right: 75px; } .end-circle p { font-size: 14px; } .txt-circle { margin-right: 20px; } .filter-contianer { margin-right: 19px; } .filter-btn { margin-left: 20px; } /*slider goshvareh*/ .slider { margin-right: 20px; align-items: flex-end; margin-right: unset !important; } .slider-continner { width: 98%; margin-left: 0px !important; margin-right: 0px !important; } .filter-btn-contianer { margin-right: 0px !important; } .boton-contineer { display: none !important; } .slider-dots-contineer { top: unset !important; justify-content: unset !important; flex-direction: unset !important; right: 36vw !important; } /*heaser image*/ .wrapper__contianer__fullWidth__picture__image img { padding: 0px 5px; border-radius: 0px 0px 40px 40px; } .tablet__dot { width: 11px; height: 11px; } /* .slideshow-container img { height: 350px; border-radius: 0px 0px 80px 0px; }*/ .wrapper__tablet__line { display: none; } .wrapper__contianer__paragraph { padding: 0px 0px; } .wrapper__contianer__paragraph p { margin: 0; font-size: 14px; line-height: 2; } .wrapper__contianer__paragraph__rate { margin-bottom: 20px; } /* Start Puzzle Slide*/ .warper__gallery__contianer__text p { display: none; } .warper__contianer__text p { display: none; } /*right slider*/ .wrapper__Slider__title { display: flex; } .wrapper__Slider__title__line { display: none; } .wrapper__Slider__text { width: 95%; } .section__second__col h1 { font-size: 20px; } /*titr*/ .wrapper__Gallery__title__line { display: none; } /**************************************************Start places page style*************************************************/ /* singel picture */ .singel__picture__content__contianer p { font-size: 13px; } .singel__picture__content__contianer h2 { font-size: 16px; } .singel__picture__btn { width: 100px; height: 40px; } /***** gllery item *****/ /* filters section */ .places__gllery__item img { height: 235px; } /*line title*/ .warper__line__title h2 { font-size: 20px; } /* Cliant Profile */ .info_form { font-size: 14px; } .repass_form { font-size: 14px; } .modalProfile__Form input { height: 40px; } .modalProfile__Form label { font-size: 14px; } .repass__Form input { height: 40px; } .repass__Form label { font-size: 14px; } } @media screen and (min-width: 1591px) { .left { left: -25%; } .right { right: -25%; } } @media screen and (min-width: 1640px) { .left { left: -20%; } .right { right: -20%; } } @media screen and (min-width: 1700px) { .left { left: -15%; } .right { right: -15%; } } @media screen and (min-width: 1875px) { .left { left: 0%; } .right { right: 0%; } .fullWidth__line { width: 74%; height: 54.3%; } .wrapper__fullWidth__picture { width: 100%; } } @media screen and (min-width: 1960px) { .left { left: -5%; } .right { right: -5%; } .wrapper__navbar__link { display: flex; font-size: 18px; } .wrapper__navbar { height: 75px; } #login-btn { width: 100px; height: 37px; font-size: 16px; } #language { width: 50px; font-size: 16px; } .wrapper__Slidshow__content__text { margin: 0px 0px 0px 35px; /*font-size: 20px;*/ } .txtAnime { padding: 0; } .wrapper__Slidshow__content__text a { width: 125px; height: 55px; font-size: 18px; } .dot { height: 15px; width: 15px; } .wrapper__Slider__title__line { width: 100%; } .line { width: 100%; } .wrapper__Slider__title h2 { width: 20%; white-space: nowrap; } .circle, .circle_video { width: 15px; height: 15px; } .dotted-slider img { width: 655px; height: 400px; } .dotted-slider__circles { margin-top: 165px; } .dotted-slider__circle { width: 15px; height: 15px; } .section__second__col { font-size: 18px; } .section__second__col h1 { margin-right: unset; } .section__second__col .button a { width: 125px; height: 55px; font-size: 18px; } .wrapper__Gallery__title { width: 79%; } .wrapper__Gallery__title h2 { width: 20%; } .wrapper__Gallery__title__line { width: 100%; } .warper__gallery__main__contianer img { height: 395px; } .warper__gallery__contianer__titr { font-size: 20px; } .warper__contianer__titr { font-size: 20px; } .wrapper__Gallery__Slider__title h2 { width: 20%; } .wrapper__Gallery__title__text a { width: 125px; height: 55px; font-size: 18px; } .wrapper__Gallery__title__text { width: 81%; font-size: 16px; } .wrapper__footer__left__titr { font-size: 18px; } .slick__arrow-right { top: 40%; right: -297px; } .slick__slider { width: 148%; height: 303px; } .slick__slide img { width: 310px; } .slick__slide__content { font-size: 22px; } .slick__arrow-left { top: 40%; left: -252px; } .slick__slide { height: 300px; } .wrapper__categorie__row__item p { font-size: 16px; } } @media screen and (min-width: 2000px) { .center { width: 67% !important; } .slider { height: 400px; } .arrow__right { right: 153px; } } /*555*/ .slideshow-coontainer { width: 81%; display: flex; align-items: center; /* position: relative; */ margin: auto; flex-direction: column; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: rgb(45, 0, 207); font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .text { display: flex; flex-direction: column; justify-content: center; color: var(--text-color); text-align: justify; font-size: 15px; line-height: 2; padding: 0px 15px; width: 50%; } .text a { text-decoration: none; color: var(--main-color); } .text h3 { color: var(--title-color); margin: 0; } .text p { color: var(--text-color); margin: 0; } .section_picture { height: 395px; width: 50%; display: flex; justify-content: flex-end; } .section_picture img { width: 100%; height: auto; border-radius: 40px 5px 5px 40px; } .warpper { display: flex; height: 410px; width: 100%; justify-content: center; } .btn_warppper { display: flex; justify-content: flex-end; } .dotsright_warpper { width: 55%; display: flex; } .dot2 { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: var(--line-color); border-radius: 50%; display: block; transition: background-color 0.6s ease; } .dot2.active-dot { background-color: var(--main-color); } /*.fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from { opacity: .4 } to { opacity: 1 } }*/ .SlidshowAnime { animation-name: SlidshowAnime; animation-duration: 1.5s; } @keyframes SlidshowAnime { from { transform: translate(0px, -500px); opacity: 0; } to { margin-top: 0px; opacity: 1; } } @media only screen and (max-width: 300px) { .prev, .next, .text { font-size: 11px } } .tabs { display: flex; list-style: none; padding: 0; margin: 20px; margin-bottom: 5px; } .tabs li { display: flex; justify-content: center; align-items: center; padding: 10px; background-color: var(--header-footer-backgrand); border-right: 1px solid var(--backgrand-color); cursor: pointer; transition: 0.2s; width: 100px; } .tabs li.active { width: 100%; background: var(--btn-backgrand-color); } .content > div { padding: 20px; } .content > div:not(:first-child) { display: none; } /*******************************************************/