/* Minification failed. Returning unminified contents. (421,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (422,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (423,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (425,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (426,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (427,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (428,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (430,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (432,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (435,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (437,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (462,21): run-time error CSS1039: Token not allowed after unary operator: '-light' (464,16): run-time error CSS1039: Token not allowed after unary operator: '-dark' (526,21): run-time error CSS1039: Token not allowed after unary operator: '-transition' (532,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (540,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (548,27): run-time error CSS1039: Token not allowed after unary operator: '-primary' (550,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (558,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (628,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (629,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (630,37): run-time error CSS1039: Token not allowed after unary operator: '-card-count' (630,57): run-time error CSS1039: Token not allowed after unary operator: '-speed-per-card' (667,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (733,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (809,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (829,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (836,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (845,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (883,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (917,31): run-time error CSS1039: Token not allowed after unary operator: '-border' (919,34): run-time error CSS1039: Token not allowed after unary operator: '-border' (961,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (969,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1014,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1024,16): run-time error CSS1039: Token not allowed after unary operator: '-grey' (1070,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1235,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1303,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1373,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1483,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1548,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1558,25): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1565,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1592,44): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1718,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1752,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1800,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1863,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1978,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2022,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2090,44): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2210,16): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2244,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3064,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3082,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3135,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3153,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3162,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3178,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3194,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3531,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3532,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3533,35): run-time error CSS1039: Token not allowed after unary operator: '-card-count' (3533,55): run-time error CSS1039: Token not allowed after unary operator: '-speed-per-card' (3573,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3574,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3575,39): run-time error CSS1039: Token not allowed after unary operator: '-card-count' (3575,59): run-time error CSS1039: Token not allowed after unary operator: '-speed-per-card' (3641,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3642,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3643,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3644,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3645,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3646,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3647,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3648,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3649,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3650,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3671,22): run-time error CSS1039: Token not allowed after unary operator: '-nl-section-bg' (3672,17): run-time error CSS1039: Token not allowed after unary operator: '-nl-dark' (3709,25): run-time error CSS1039: Token not allowed after unary operator: '-nl-primary' (3727,25): run-time error CSS1039: Token not allowed after unary operator: '-nl-dark' (3736,29): run-time error CSS1039: Token not allowed after unary operator: '-nl-primary' (3776,26): run-time error CSS1039: Token not allowed after unary operator: '-nl-white' (3777,32): run-time error CSS1039: Token not allowed after unary operator: '-nl-border' (3778,29): run-time error CSS1039: Token not allowed after unary operator: '-nl-radius' (3779,26): run-time error CSS1039: Token not allowed after unary operator: '-nl-shadow' (3820,25): run-time error CSS1039: Token not allowed after unary operator: '-nl-dark' (4155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4157,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4158,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4159,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4160,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4161,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4165,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4187,22): run-time error CSS1039: Token not allowed after unary operator: '-notes-section-bg' (4188,17): run-time error CSS1039: Token not allowed after unary operator: '-notes-heading-dark' (4225,21): run-time error CSS1039: Token not allowed after unary operator: '-notes-primary' (4237,25): run-time error CSS1039: Token not allowed after unary operator: '-notes-primary' (4249,21): run-time error CSS1039: Token not allowed after unary operator: '-notes-heading-dark' (4263,25): run-time error CSS1039: Token not allowed after unary operator: '-notes-primary' (4315,26): run-time error CSS1039: Token not allowed after unary operator: '-notes-card-bg' (4316,32): run-time error CSS1039: Token not allowed after unary operator: '-notes-border' (4317,29): run-time error CSS1039: Token not allowed after unary operator: '-notes-radius' (4318,26): run-time error CSS1039: Token not allowed after unary operator: '-notes-card-shadow' (4319,36): run-time error CSS1039: Token not allowed after unary operator: '-notes-transition' (4319,72): run-time error CSS1039: Token not allowed after unary operator: '-notes-transition' (4357,26): run-time error CSS1039: Token not allowed after unary operator: '-notes-icon-bg' (5159,24): run-time error CSS1030: Expected identifier, found '>' (5159,47): run-time error CSS1031: Expected selector, found ')' (5159,47): run-time error CSS1025: Expected comma or open brace, found ')' (5177,28): run-time error CSS1030: Expected identifier, found '>' (5177,51): run-time error CSS1031: Expected selector, found ')' (5177,51): run-time error CSS1025: Expected comma or open brace, found ')' (5193,28): run-time error CSS1030: Expected identifier, found '>' (5193,51): run-time error CSS1031: Expected selector, found ')' (5193,51): run-time error CSS1025: Expected comma or open brace, found ')' (5210,32): run-time error CSS1030: Expected identifier, found '>' (5210,55): run-time error CSS1031: Expected selector, found ')' (5210,55): run-time error CSS1025: Expected comma or open brace, found ')' (5238,36): run-time error CSS1030: Expected identifier, found '>' (5238,59): run-time error CSS1031: Expected selector, found ')' (5238,59): run-time error CSS1025: Expected comma or open brace, found ')' (5259,36): run-time error CSS1030: Expected identifier, found '>' (5259,59): run-time error CSS1031: Expected selector, found ')' (5259,59): run-time error CSS1025: Expected comma or open brace, found ')' (5270,36): run-time error CSS1030: Expected identifier, found '>' (5270,59): run-time error CSS1031: Expected selector, found ')' (5270,59): run-time error CSS1025: Expected comma or open brace, found ')' (5283,28): run-time error CSS1030: Expected identifier, found '>' (5283,51): run-time error CSS1031: Expected selector, found ')' (5283,51): run-time error CSS1025: Expected comma or open brace, found ')' (5288,32): run-time error CSS1030: Expected identifier, found '>' (5288,55): run-time error CSS1031: Expected selector, found ')' (5288,55): run-time error CSS1025: Expected comma or open brace, found ')' (5293,32): run-time error CSS1030: Expected identifier, found '>' (5293,55): run-time error CSS1031: Expected selector, found ')' (5293,55): run-time error CSS1025: Expected comma or open brace, found ')' (5299,36): run-time error CSS1030: Expected identifier, found '>' (5299,59): run-time error CSS1031: Expected selector, found ')' (5299,59): run-time error CSS1025: Expected comma or open brace, found ')' (5314,28): run-time error CSS1030: Expected identifier, found '>' (5314,51): run-time error CSS1031: Expected selector, found ')' (5314,51): run-time error CSS1025: Expected comma or open brace, found ')' (5321,32): run-time error CSS1030: Expected identifier, found '>' (5321,55): run-time error CSS1031: Expected selector, found ')' (5321,55): run-time error CSS1025: Expected comma or open brace, found ')' (5326,32): run-time error CSS1030: Expected identifier, found '>' (5326,55): run-time error CSS1031: Expected selector, found ')' (5326,55): run-time error CSS1025: Expected comma or open brace, found ')' (5332,36): run-time error CSS1030: Expected identifier, found '>' (5332,59): run-time error CSS1031: Expected selector, found ')' (5332,59): run-time error CSS1025: Expected comma or open brace, found ')' (5340,40): run-time error CSS1030: Expected identifier, found '>' (5340,63): run-time error CSS1031: Expected selector, found ')' (5340,63): run-time error CSS1025: Expected comma or open brace, found ')' (5355,28): run-time error CSS1030: Expected identifier, found '>' (5355,51): run-time error CSS1031: Expected selector, found ')' (5355,51): run-time error CSS1025: Expected comma or open brace, found ')' (5364,32): run-time error CSS1030: Expected identifier, found '>' (5364,55): run-time error CSS1031: Expected selector, found ')' (5364,55): run-time error CSS1025: Expected comma or open brace, found ')' (5370,32): run-time error CSS1030: Expected identifier, found '>' (5370,55): run-time error CSS1031: Expected selector, found ')' (5370,55): run-time error CSS1025: Expected comma or open brace, found ')' (5376,36): run-time error CSS1030: Expected identifier, found '>' (5376,59): run-time error CSS1031: Expected selector, found ')' (5376,59): run-time error CSS1025: Expected comma or open brace, found ')' (5385,40): run-time error CSS1030: Expected identifier, found '>' (5385,63): run-time error CSS1031: Expected selector, found ')' (5385,63): run-time error CSS1025: Expected comma or open brace, found ')' (5401,28): run-time error CSS1030: Expected identifier, found '>' (5401,51): run-time error CSS1031: Expected selector, found ')' (5401,51): run-time error CSS1025: Expected comma or open brace, found ')' (5410,32): run-time error CSS1030: Expected identifier, found '>' (5410,55): run-time error CSS1031: Expected selector, found ')' (5410,55): run-time error CSS1025: Expected comma or open brace, found ')' (5416,32): run-time error CSS1030: Expected identifier, found '>' (5416,55): run-time error CSS1031: Expected selector, found ')' (5416,55): run-time error CSS1025: Expected comma or open brace, found ')' (5422,36): run-time error CSS1030: Expected identifier, found '>' (5422,59): run-time error CSS1031: Expected selector, found ')' (5422,59): run-time error CSS1025: Expected comma or open brace, found ')' (5431,40): run-time error CSS1030: Expected identifier, found '>' (5431,63): run-time error CSS1031: Expected selector, found ')' (5431,63): run-time error CSS1025: Expected comma or open brace, found ')' (5447,28): run-time error CSS1030: Expected identifier, found '>' (5447,51): run-time error CSS1031: Expected selector, found ')' (5447,51): run-time error CSS1025: Expected comma or open brace, found ')' (5457,32): run-time error CSS1030: Expected identifier, found '>' (5457,55): run-time error CSS1031: Expected selector, found ')' (5457,55): run-time error CSS1025: Expected comma or open brace, found ')' (5463,32): run-time error CSS1030: Expected identifier, found '>' (5463,55): run-time error CSS1031: Expected selector, found ')' (5463,55): run-time error CSS1025: Expected comma or open brace, found ')' (5471,36): run-time error CSS1030: Expected identifier, found '>' (5471,59): run-time error CSS1031: Expected selector, found ')' (5471,59): run-time error CSS1025: Expected comma or open brace, found ')' (5481,40): run-time error CSS1030: Expected identifier, found '>' (5481,63): run-time error CSS1031: Expected selector, found ')' (5481,63): run-time error CSS1025: Expected comma or open brace, found ')' (5500,28): run-time error CSS1030: Expected identifier, found '>' (5500,51): run-time error CSS1031: Expected selector, found ')' (5500,51): run-time error CSS1025: Expected comma or open brace, found ')' (5506,32): run-time error CSS1030: Expected identifier, found '>' (5506,55): run-time error CSS1031: Expected selector, found ')' (5506,55): run-time error CSS1025: Expected comma or open brace, found ')' (5512,32): run-time error CSS1030: Expected identifier, found '>' (5512,55): run-time error CSS1031: Expected selector, found ')' (5512,55): run-time error CSS1025: Expected comma or open brace, found ')' (5517,36): run-time error CSS1030: Expected identifier, found '>' (5517,59): run-time error CSS1031: Expected selector, found ')' (5517,59): run-time error CSS1025: Expected comma or open brace, found ')' (5525,40): run-time error CSS1030: Expected identifier, found '>' (5525,63): run-time error CSS1031: Expected selector, found ')' (5525,63): run-time error CSS1025: Expected comma or open brace, found ')' (9137,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9175,32): run-time error CSS1039: Token not allowed after unary operator: '-social-red' (9206,36): run-time error CSS1039: Token not allowed after unary operator: '-social-dark-red' (9226,32): run-time error CSS1039: Token not allowed after unary operator: '-social-red' (9302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9304,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9306,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9307,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9308,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9310,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9311,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9313,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9317,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9318,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9324,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9325,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9326,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9327,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9328,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9329,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9330,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9331,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9332,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9333,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9335,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9336,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9337,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9338,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9339,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9340,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9349,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9350,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9351,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9354,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9356,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9360,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9361,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9370,28): run-time error CSS1039: Token not allowed after unary operator: '-table-bg' (9372,33): run-time error CSS1039: Token not allowed after unary operator: '-table-shadow' (9373,28): run-time error CSS1039: Token not allowed after unary operator: '-table-border' (9383,21): run-time error CSS1039: Token not allowed after unary operator: '-table-text' (9388,36): run-time error CSS1039: Token not allowed after unary operator: '-table-header-bg' (9389,43): run-time error CSS1039: Token not allowed after unary operator: '-table-header-border' (9394,25): run-time error CSS1039: Token not allowed after unary operator: '-table-header-text' (9402,43): run-time error CSS1039: Token not allowed after unary operator: '-table-row-border' (9407,36): run-time error CSS1039: Token not allowed after unary operator: '-table-zebra-bg' (9411,36): run-time error CSS1039: Token not allowed after unary operator: '-table-hover-bg' (9434,36): run-time error CSS1039: Token not allowed after unary operator: '-badge-active-bg' (9435,25): run-time error CSS1039: Token not allowed after unary operator: '-badge-active-text' (9439,36): run-time error CSS1039: Token not allowed after unary operator: '-badge-pending-bg' (9440,25): run-time error CSS1039: Token not allowed after unary operator: '-badge-pending-text' (9444,36): run-time error CSS1039: Token not allowed after unary operator: '-badge-inactive-bg' (9445,25): run-time error CSS1039: Token not allowed after unary operator: '-badge-inactive-text' (9454,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (21107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21112,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21118,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21120,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21122,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21128,21): run-time error CSS1039: Token not allowed after unary operator: '-bg' (21198,27): run-time error CSS1039: Token not allowed after unary operator: '-primary' (21200,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (21212,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (21259,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (21273,16): run-time error CSS1039: Token not allowed after unary operator: '-text' (21291,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (21306,16): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (21340,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22128,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22129,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22131,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22132,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22136,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22138,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22142,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22153,21): run-time error CSS1039: Token not allowed after unary operator: '-bg' (22188,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22205,16): run-time error CSS1039: Token not allowed after unary operator: '-heading' (22218,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22229,16): run-time error CSS1039: Token not allowed after unary operator: '-text' (22296,27): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22298,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22311,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22369,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22386,16): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (22406,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22417,16): run-time error CSS1039: Token not allowed after unary operator: '-text' (22468,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22684,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22701,27): run-time error CSS1039: Token not allowed after unary operator: '-border' (22711,21): run-time error CSS1039: Token not allowed after unary operator: '-transition' (22724,23): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22765,27): run-time error CSS1039: Token not allowed after unary operator: '-border' (22775,21): run-time error CSS1039: Token not allowed after unary operator: '-transition' (22788,23): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22814,21): run-time error CSS1039: Token not allowed after unary operator: '-transition' (22823,23): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22870,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (22944,23): run-time error CSS1039: Token not allowed after unary operator: '-primary' (23152,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (23210,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (23246,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (30596,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (30623,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (30629,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (30634,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (38302,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38303,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38304,42): run-time error CSS1039: Token not allowed after unary operator: '-card-count' (38304,62): run-time error CSS1039: Token not allowed after unary operator: '-speed-per-card' (38347,5): run-time error CSS1019: Unexpected token, found '}' (43499,36): run-time error CSS1039: Token not allowed after unary operator: '-table-bg' (43500,36): run-time error CSS1039: Token not allowed after unary operator: '-table-border' (43502,40): run-time error CSS1039: Token not allowed after unary operator: '-table-shadow' (43508,40): run-time error CSS1039: Token not allowed after unary operator: '-table-bg' (43518,43): run-time error CSS1039: Token not allowed after unary operator: '-table-row-border' (43532,29): run-time error CSS1039: Token not allowed after unary operator: '-table-label-color' */ /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdAD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdJD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdBD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdOD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdCD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdDD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdND2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdAD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdJD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdBD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdOD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdCD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdDD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdND2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdAD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdJD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdBD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdOD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdCD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdDD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdND2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdAD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdJD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdBD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdOD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdCD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdDD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdND2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdAD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdJD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdBD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdOD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdCD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdDD2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/l/font?kit=UcCB3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuOKfU5NJeWUdIOjBeTGiXZdND2M&skey=c491285d6722e4fa&v=v20) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* devanagari */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /*======================================== ZONE TECH REDESIGN Designed By ChatGPT =========================================*/ @font-face { font-family: "k010"; src: url('/fonts/Hindi/k010.eot'); src: local('/fonts/Hindi/k010.ttf'), url('/fonts/Hindi/k010.ttf') format('truetype'); } /*========================= GOOGLE FONTS ==========================*/ :root{ --primary:#C62828; --primary-dark:#A61B1B; --secondary:#FDB813; --white:#ffffff; --light:#f8f9fc; --grey:#6b7280; --dark:#1d1d1d; --border:#ebebeb; --shadow: 0 15px 40px rgba(0,0,0,.08); --transition:.35s ease; --radius:18px; } /*========================= RESET ==========================*/ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Inter',sans-serif; background:var(--light); color:var(--dark); } img{ width:100%; display:block; } ul{ list-style:none; } a{ text-decoration:none; color:inherit; } button{ cursor:pointer; border:none; background:none; } .container{ width:min(1400px,92%); margin:auto; } /*========================= BUTTONS ==========================*/ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 35px; border-radius:60px; font-weight:600; transition:var(--transition); } .btn-primary{ background:var(--primary); color:#fff; } .btn-primary:hover{ background:var(--primary-dark); transform:translateY(-4px); } .btn-secondary{ border:2px solid var(--primary); color:var(--primary); background:white; } .btn-secondary:hover{ background:var(--primary); color:white; } /*========================================= ANNOUNCEMENT BAR =========================================*/ .announcement-bar{ height:28px; background:#111; display:flex; align-items:center; overflow:hidden; color:#fff; position:relative; z-index:999; } .announcement-icon{ width:65px; height:35px; background:#d62828; display:flex; justify-content:center; align-items:center; flex-shrink:0; } .announcement-icon i{ color:#fff; font-size:15px; } .announcement-wrapper{ flex:1; overflow:hidden; } .announcement-track { display: flex; width: max-content; align-items: center; white-space: nowrap; --card-count: 6; /* Total unique items (before duplicating) */ --speed-per-card: 14s; animation: tickerMove calc(var(--card-count) * var(--speed-per-card)) linear infinite; } .announcement-track a{ display:flex; align-items:center; font-size:13px; font-weight:500; padding-right:80px; color:#fff; } .announcement-track:hover{ animation-play-state:paused; } @keyframes tickerMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /*========================= TOP BAR ==========================*/ .top-bar{ background:var(--primary); color:white; font-size:14px; } .top-bar-container{ display:flex; justify-content:space-between; align-items:center; } .left-info{ display:flex; gap:30px; } .left-info span{ display:flex; align-items:center; gap:8px; } .right-info{ display:flex; gap:15px; } .right-info a{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:.3s; } .right-info a:hover{ background:white; color:var(--primary); } /*========================= HEADER ==========================*/ .header{ background:white; position:sticky; top:0; z-index:999; box-shadow:0 5px 25px rgba(0,0,0,.06); } .header-container{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:5px 0; } .logo img{ width:220px; } .search-box{ flex:1; display:flex; background:#f2f3f7; border-radius:60px; overflow:hidden; } .search-box input{ flex:1; border:none; outline:none; padding:16px 24px; background:none; font-size:15px; } .search-box button{ width:70px; background:var(--primary); color:white; font-size:18px; } .header-actions{ display:flex; align-items:center; gap:18px; } .call-btn{ color:var(--primary); font-weight:600; } .login-btn { background: var(--primary); color: white; padding: 8px 19px; border-radius: 40px; transition: .3s; } .login-btn:hover{ background:var(--primary-dark); } .cart-btn{ width:52px; height:52px; border-radius:50%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; position:relative; font-size:18px; } .cart-btn span{ position:absolute; top:-5px; right:-5px; width:22px; height:22px; background:var(--secondary); color:#000; border-radius:50%; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:700; } .hamburger{ display:none; font-size:28px; } /*========================= NAVIGATION ==========================*/ .navbar{ background:white; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .navbar ul{ display:flex; justify-content:center; gap:45px; } .navbar a{ display:block; padding:18px 0; font-weight:600; position:relative; transition:.3s; } .navbar a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--primary); transition:.3s; } .navbar a:hover{ color:var(--primary); } .navbar a:hover::after{ width:100%; } /*================================== HERO ===================================*/ .hero{ position:relative; overflow:hidden; padding:70px 0; background:linear-gradient( 135deg, #fff, #fff4f4, #fff ); } .hero-container{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; } .hero h1{ font-size:48px; line-height:1.1; margin:20px 0; font-family:'Poppins',sans-serif; } .hero h1 span{ color:var(--primary); } .hero p{ font-size:16px; line-height:1.8; color:var(--grey); margin-bottom:35px; } .hero-buttons{ display:flex; gap:20px; margin-bottom:45px; } /*========================= HERO STATS =========================*/ .hero-stats{ display:flex; gap:35px; margin-top:45px; } .hero-stats div{ background:#fff; padding:20px 28px; border-radius:18px; box-shadow:0 15px 40px rgba(0,0,0,.08); min-width:150px; transition:.35s; } .hero-stats div:hover{ transform:translateY(-8px); } .hero-stats h2{ font-size:42px; font-family:'Poppins',sans-serif; color:var(--primary); margin-bottom:5px; } .hero-stats span{ display:block; color:#666; font-size:16px; font-weight:500; } .hero-image{ position:relative; } .hero-image img{ max-width:520px; margin:auto; animation:float 4s infinite ease-in-out; } .floating-card{ position:absolute; background:white; padding:18px 22px; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.12); font-weight:600; } .card1{ top:50px; left:-30px; } .card2{ bottom:60px; left:-50px; } .card3{ top:140px; right:-20px; } .shape{ position:absolute; border-radius:50%; z-index:0; } .shape1{ width:420px; height:420px; background:#ffe4e4; top:-150px; right:-100px; } .shape2{ width:250px; height:250px; background:#fff1d7; bottom:-100px; left:-80px; } .shape3{ width:150px; height:150px; background:#ffdede; top:180px; left:45%; } /*================================== COURSES ===================================*/ .courses{ padding:100px 0; background:#fff; } .course-tabs{ display:flex; justify-content:center; gap:15px; margin:50px 0; flex-wrap:wrap; } .course-tabs button{ padding:12px 15px 12px 15px; font-size:13px; border-radius:10px; background:#f3f3f3; transition:.3s; font-weight:600; } .course-tabs button.active, .course-tabs button:hover{ background:var(--primary); color:white; } .course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } .course-card{ background:white; border-radius:22px; overflow:hidden; box-shadow:0 20px 45px rgba(0,0,0,.08); transition:.35s; } .course-card:hover{ transform:translateY(-12px); } .course-image{ position:relative; overflow:hidden; } .course-image img{ height:230px; object-fit:cover; transition:.4s; } .course-card:hover img{ transform:scale(1.08); } .badge{ position:absolute; top:20px; left:20px; background:var(--primary); color:white; padding:8px 18px; border-radius:30px; font-size:13px; } .course-content{ padding:28px; } .course-rating{ color:#f4b400; margin-bottom:15px; } .course-content h3{ font-size:24px; margin-bottom:15px; font-family:Poppins; } .course-content p{ color:#666; line-height:1.7; } .course-details{ display:flex; justify-content:space-between; margin:25px 0; color:#777; font-size:15px; } .course-footer{ display:flex; justify-content:space-between; align-items:center; } .course-footer h4{ color:var(--primary); font-size:28px; } /*============================== LIVE BATCHES ==============================*/ .live-batches{ padding:100px 0; background:#f8f9fc; } .batch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:50px; } .batch-card{ background:white; border-radius:22px; padding:35px; box-shadow:0 20px 40px rgba(0,0,0,.08); transition:.35s; } .batch-card:hover{ transform:translateY(-10px); } .batch-top{ display:flex; justify-content:space-between; margin-bottom:25px; } .live-tag{ background:#ffebeb; color:#d00000; padding:8px 18px; border-radius:30px; font-size:13px; font-weight:600; } .batch-card h3{ font-size:28px; margin-bottom:15px; font-family:Poppins; } .batch-card p{ color:#666; margin-bottom:30px; } .batch-info{ display:flex; flex-direction:column; gap:18px; color:#555; } .batch-price{ font-size:34px; color:var(--primary); font-weight:700; margin:30px 0; } /*=========================== WHY CHOOSE US ============================*/ .why-us{ padding:110px 0; background:white; } .why-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; margin-top:70px; } .why-image img{ width:100%; animation:float 5s infinite ease-in-out; } .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; } .why-grid .feature-card { background: #fff; border-radius: 20px; padding: 30px; display: flex; gap: 18px; align-items: flex-start; transition: .35s; box-shadow: 0 15px 35px rgba(0,0,0,.06); } .why-grid .feature-card:hover { transform: translateY(-8px); background: var(--primary); color: white; } .why-grid .feature-card:hover p { color: #f5f5f5; } .why-grid .feature-card:hover .feature-icon { background: white; color: var(--primary); } .why-grid .feature-icon { width: 65px; height: 65px; background: #ffe9e9; color: var(--primary); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; transition: .35s; } .why-grid .feature-card h3 { margin-bottom: 10px; font-size: 18px; } .why-grid .feature-card p { color: #666; line-height: 1.6; font-size: 14px; } /*=========================== STATISTICS ============================*/ .statistics{ background:linear-gradient(135deg,var(--primary),#ef4444); padding:90px 0; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .stat-card{ background:rgba(255,255,255,.12); backdrop-filter:blur(10px); text-align:center; padding:35px; border-radius:22px; color:white; } .stat-card h2{ font-size:54px; font-family:Poppins; } .stat-card span{ font-size:18px; opacity:.9; } /*==================================== FACULTY =====================================*/ .faculty{ padding:110px 0; background:#fff; } .faculty-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:60px; } .faculty-card{ background:white; border-radius:24px; overflow:hidden; box-shadow:0 20px 45px rgba(0,0,0,.08); transition:.35s; } .faculty-card:hover{ transform:translateY(-10px); } .faculty-image{ position:relative; overflow:hidden; } .faculty-image img{ width:100%; height:350px; object-fit:cover; transition:.4s; } .faculty-card:hover img{ transform:scale(1.08); } .experience{ position:absolute; left:20px; top:20px; background:var(--primary); color:white; padding:10px 18px; border-radius:40px; font-size:14px; font-weight:600; } .faculty-content{ padding:30px; } .faculty-content h3{ font-size:26px; margin-bottom:10px; font-family:Poppins; } .subject{ display:inline-block; color:var(--primary); font-weight:600; margin-bottom:20px; } .faculty-content p{ color:#666; line-height:1.7; } .faculty-social{ display:flex; gap:15px; margin-top:25px; } .faculty-social a{ width:42px; height:42px; border-radius:50%; background:#f5f5f5; display:flex; justify-content:center; align-items:center; transition:.3s; } .faculty-social a:hover{ background:var(--primary); color:white; } /*================================== TESTIMONIALS ===================================*/ .testimonials{ padding:110px 0; background:#f8f9fc; } .testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:60px; } .testimonial-card{ background:white; padding:35px; border-radius:24px; box-shadow:0 20px 45px rgba(0,0,0,.08); transition:.35s; } .testimonial-card:hover{ transform:translateY(-10px); } .student-top{ display:flex; align-items:center; gap:20px; margin-bottom:25px; } .student-top img{ width:80px !important; height:80px; border-radius:50%; object-fit:cover; } .student-top h3{ margin-bottom:8px; font-size:18px; } .student-top span{ color:var(--primary); font-weight:600; } .stars{ color:#FDB813; margin-bottom:20px; font-size:20px; } .testimonial-card p { color: #666; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Expanded state when user clicks "Read More" */ .testimonial-card.expanded p { -webkit-line-clamp: unset; overflow: visible; } /* Button anchored to bottom */ .toggle-btn { margin-top: auto; padding-top: 10px; background: none; border: none; color: #0b7285; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-align: left; } .toggle-btn:hover { text-decoration: underline; } /*==================================== BLOGS ====================================*/ .blogs{ padding:110px 0; background:#fff; } .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:60px; } .blog-card{ background:white; border-radius:24px; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,.08); transition:.35s; } .blog-card:hover{ transform:translateY(-10px); } .blog-image{ position:relative; } .blog-image img{ height:240px; object-fit:cover; } .blog-image span{ position:absolute; top:20px; left:20px; background:var(--primary); color:white; padding:8px 18px; border-radius:30px; font-size:13px; } .blog-content{ padding:28px; } .blog-content small{ color:#777; } .blog-content h3{ margin:20px 0; font-size:24px; } .blog-content p{ color:#666; line-height:1.8; margin-bottom:25px; } .blog-content a{ color:var(--primary); font-weight:600; } /*========================= FAQ ==========================*/ .faq{ padding:100px 0; background:#f8f9fc; } .faq-wrapper{ max-width:900px; margin:60px auto 0; } details{ background:white; margin-bottom:20px; border-radius:18px; padding:22px 30px; box-shadow:0 10px 30px rgba(0,0,0,.05); } summary{ cursor:pointer; font-weight:600; font-size:18px; } details p{ margin-top:18px; color:#666; line-height:1.8; } /*========================= NEWSLETTER ==========================*/ .newsletter{ padding:80px 0; background:linear-gradient(135deg,var(--primary),#ef4444); } .newsletter-wrapper{ display:flex; justify-content:space-between; align-items:center; gap:40px; } .newsletter h2{ color:white; font-size:42px; } .newsletter p{ color:#ffe5e5; margin-top:10px; } .newsletter form{ display:flex; gap:15px; } .newsletter input{ width:380px; padding:18px 22px; border:none; border-radius:50px; outline:none; } /*========================= FOOTER ==========================*/ .footer{ background:#171717; color:white; padding:90px 0 30px; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:50px; } .footer-logo{ width:180px; margin-bottom:25px; } .footer h3{ margin-bottom:25px; } .footer ul{ display:flex; flex-direction:column; gap:15px; } .footer p{ color:#c9c9c9; line-height:1.8; margin-bottom:12px; } .footer a{ transition:.3s; } .footer a:hover{ color:var(--secondary); } .footer-social{ display:flex; gap:15px; margin-top:20px; } .footer-social a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; justify-content:center; align-items:center; } .footer-social a:hover{ background:var(--primary); } .copyright{ margin-top:60px; padding-top:30px; border-top:1px solid rgba(255,255,255,.1); text-align:center; color:#aaa; } /*==================================== LEARNING SECTION ====================================*/ .learning-section{ position:relative; padding:120px 0; background:linear-gradient( 180deg, #ffffff, #fafafa, #ffffff); overflow:hidden; } /*========================= BACKGROUND BLUR =========================*/ .blur{ position:absolute; border-radius:50%; filter:blur(120px); z-index:0; } .blur1{ width:350px; height:350px; background:rgba(214,40,40,.12); top:-120px; left:-80px; } .blur2{ width:300px; height:300px; background:rgba(249,178,51,.10); bottom:-100px; right:-80px; } .learning-section .container{ position:relative; z-index:2; } /*========================= GRID =========================*/ .learning-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:70px; } /*========================= CARD =========================*/ .learning-card{ position:relative; padding:35px; border-radius:28px; background:rgba(255,255,255,.70); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.7); box-shadow: 0 20px 50px rgba(0,0,0,.08); transition:.45s; overflow:hidden; } /* animated top border */ .learning-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:5px; background:linear-gradient( 90deg, #D62828, #F9B233); transform:scaleX(0); transition:.45s; transform-origin:left; } .learning-card:hover::before{ transform:scaleX(1); } .learning-card:hover{ transform: translateY(-15px); box-shadow: 0 35px 80px rgba(214,40,40,.18); } /*========================= POPULAR CARD =========================*/ .featured{ transform:scale(1.03); border:2px solid rgba(214,40,40,.25); } .popular{ position:absolute; top:22px; right:22px; background:linear-gradient( 135deg, #D62828, #F05A28); color:white; padding:8px 18px; border-radius:40px; font-size:13px; letter-spacing:1px; font-weight:700; } /*========================= TOP =========================*/ .card-top{ display:flex; align-items:center; gap:20px; margin-bottom:10px; } .mode-icon{ width:82px; height:82px; border-radius:22px; background:#fff5f5; display:flex; justify-content:center; align-items:center; transition:.35s; } .mode-icon img{ width:54px; } .learning-card:hover .mode-icon{ transform:rotate(-8deg) scale(1.08); background:#ffe2e2; } .mode-label{ color:#D62828; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:1px; } .card-top h3{ margin-top:6px; font-size:30px; font-family:Poppins; } /*========================= TEXT =========================*/ .learning-card p{ color:#666; line-height:1.3; padding-bottom:15px; font-size:14px; } /*========================= CHIPS =========================*/ .chips{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:35px; } .chips span{ padding:10px 18px; border-radius:50px; background:white; border:1px solid #ececec; font-size:14px; font-weight:600; transition:.35s; cursor:pointer; } .chips span:hover{ background:#D62828; color:white; transform: translateY(-4px); box-shadow: 0 10px 20px rgba(214,40,40,.20); } /*========================= BUTTON =========================*/ .learn-btn{ display:inline-flex; align-items:center; gap:12px; padding:15px 28px; border-radius:50px; background:#D62828; color:white; font-weight:600; transition:.35s; } .learn-btn i{ transition:.35s; } .learn-btn:hover{ background:#111; } .learn-btn:hover i{ transform:translateX(8px); } .card-header{ margin:-35px -35px 30px; padding:35px; background:linear-gradient( 180deg, #fff8f8 0%, #fff3f3 100% ); border-radius:28px 28px 0 0; box-shadow: 0 12px 25px rgba(214,40,40,.05); } .card-divider{ height:1px; background:linear-gradient( 90deg, transparent, rgba(214,40,40,.25), transparent ); margin-bottom:30px; } .card-body{ display:flex; flex-direction:column; } .card-header p{ margin-top:22px; color:#666; line-height:1.9; } /*==================================================== MOBILE BOTTOM NAVIGATION ====================================================*/ .mobile-bottom-nav{ position:fixed; bottom:0; left:0; width:100%; height:72px; background:#ffffff; display:none; justify-content:space-evenly; align-items:center; border-top:1px solid #ececec; box-shadow: 0 -8px 25px rgba(0,0,0,.08); z-index:99999; } .mobile-nav-item{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-decoration:none; color:#666; position:relative; transition:.35s; } .mobile-nav-item i{ font-size:22px; margin-bottom:6px; transition:.35s; } .mobile-nav-item span{ font-size:11px; font-weight:600; transition:.35s; } .mobile-nav-item.active{ color:#d62828; } .mobile-nav-item.active i{ transform:translateY(-3px); } .mobile-nav-item.active::before{ content:""; position:absolute; top:0; width:42px; height:4px; background:#d62828; border-radius:20px; } .mobile-nav-item:hover{ color:#d62828; } .mobile-nav-item:hover i{ transform:translateY(-3px); } .validation-appened{ border: 1px solid #d62828 !important; } .sitemap-page .sitemap ul { list-style: none; /*border: 1px solid #c10006;*/ padding: 12px; margin: 0 0 -1px; border-radius: 4px } .footer-wrap .sitemap-page .sitemap ul li a, .footer-wrap .sitemap-page .sitemap ul li ul li a { color: #fff; } .sitemap-page .sitemap ul li { padding: 15px; margin: 0; list-style: none } .sitemap-page .sitemap ul li a { color: #c10006; display: block; font-weight: 600; margin: 3px; border-left: 4px #a01c24 solid; margin-bottom: 5px; padding-left: 8px; } .sitemap-page .sitemap ul li ul { padding: 0 10px; margin: 0; list-style: none; border: 0 } .sitemap-page .sitemap ul li ul li { padding: 0; margin: 0; list-style: none } .sitemap-page .sitemap ul li ul li a { font-weight: 400; padding: 12px 0; border-bottom: 1px solid rgba(63,81,181,.4); color: #3f51b5; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border-left: none; margin: 0 20px 0 0; } .form-section-title { padding: 10px 0 12px 20px; background: #d62828; margin-bottom: 16px; border-radius: 8px; color: #fff; font-style: inherit; font-variant: all-small-caps; } .container .reg-form .form-control { width: 100%; height: 34px; padding: 6px 12px; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; } .container .reg-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .user-name { width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } .mode-icon i { font-size: 42px; color: #d62828; } .mb20{ margin-bottom:20px; } /* Inner Button Grid (Exams tags) */ .tags-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 35px; margin-top: auto; /* Pushes the tags and action button down together */ } .tag-btn { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 10px; font-size: 0.85rem; font-weight: 600; color: #444444; text-align: center; text-decoration: none; transition: background-color 0.2s, border-color 0.2s; } .tag-btn:hover { background-color: #fafafa; border-color: #e31e24; } /* Primary CTA Button Layout */ .cta-btn-explore { display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #e31e24; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 1rem; padding: 15px; border-radius: 8px; width: 100%; transition: background-color 0.2s; } .cta-btn-explore:hover { background-color: #c41217; } .cta-btn-explore svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } /*================================== HERO IMAGE CAROUSEL ===================================*/ .hero-carousel .hero-image { position: relative; width: 100%; min-width: 0; z-index: 2; } .hero-carousel { position: relative; width: 100%; max-width: 560px; height: 560px; margin: 0 auto; overflow: hidden; border-radius: 30px; background: #ffffff; isolation: isolate; } /*================================== SLIDES ===================================*/ .hero-carousel .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateX(40px); pointer-events: none; z-index: 1; transition: opacity 0.6s ease, transform 0.6s ease; } /* ACTIVE SLIDE */ .hero-carousel .hero-slide.active { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; z-index: 2; } /*================================== SLIDE IMAGE ===================================*/ .hero-carousel .hero-slide img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } /*================================== ARROWS ===================================*/ .hero-carousel .hero-carousel-btn { position: absolute; top: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--primary); font-size: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 20; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease; } /* SHOW BUTTONS */ .hero-carousel:hover .hero-carousel-btn { opacity: 1; } /* BUTTON HOVER */ .hero-carousel .hero-carousel-btn:hover { background: var(--primary); color: #ffffff; transform: translateY(-50%) scale(1.08); } /* PREVIOUS */ .hero-carousel .hero-carousel-btn.hero-prev { left: 18px; } /* NEXT */ .hero-carousel .hero-carousel-btn.hero-next { right: 18px; } /*================================== DOTS ===================================*/ .hero-carousel .hero-carousel-dots { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-radius: 30px; z-index: 30; } /* DOT */ .hero-carousel .hero-carousel-dots .hero-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: #d5d5d5; cursor: pointer; transition: width 0.3s ease, background 0.3s ease; } /* ACTIVE DOT */ .hero-carousel .hero-carousel-dots .hero-dot.active { width: 26px; border-radius: 20px; background: var(--primary); } .owl-carousel .owl-nav button.owl-prev { position: absolute; top: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.95) !important; color: var(--primary) !important; font-size: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 20; opacity: 1; transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .owl-carousel .owl-nav button.owl-prev:hover { background: var(--primary) !important; color: #ffffff; transform: translateY(-50%) scale(1.08) !important; } .owl-carousel .owl-nav button.owl-next { position: absolute; top: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.95) !important; color: var(--primary) !important; font-size: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 20; opacity: 1; transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .owl-carousel .owl-nav button.owl-next { right: 10px; top: 50%; opacity: 0.7; } .owl-carousel .owl-nav button.owl-next:hover { background: var(--primary) !important; color: #ffffff !important; transform: translateY(-50%) scale(1.08); } /*================================ APP SECTION ================================*/ .app-section { position: relative; padding: 85px 0 75px; background: linear-gradient( 135deg, #c62828 0%, #df3030 50%, #ef4444 100% ); color: #fff; overflow: hidden; } /*================================ BACKGROUND DECORATION ================================*/ .app-section::before { content: ""; position: absolute; width: 550px; height: 550px; border-radius: 50%; background: rgba(255,255,255,.07); top: -300px; left: -180px; } .app-section::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.06); right: -180px; bottom: -280px; } .app-section .container { position: relative; z-index: 2; } /*================================ APP HEADING ================================*/ .app-heading { max-width: 1000px; margin: 0 auto; text-align: center; } .app-heading span { display: block; color: #ffd54f; font-size: 17px; font-weight: 700; margin-bottom: 12px; } .app-heading h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 52px; line-height: 1.15; font-weight: 700; } .app-heading p { max-width: 800px; margin: 18px auto 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.92); } /*================================ TWO COLUMN AREA ================================*/ .app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; max-width: 1250px; margin: 35px auto 0; } /*================================ EACH COLUMN ================================*/ .app-column { position: relative; min-height: 490px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } /*================================ PLATFORM LABEL ================================*/ .app-column::before { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.08); filter: blur(1px); } /*================================ APP IMAGE ================================*/ .app-image { position: relative; width: 100%; height: 350px; display: flex; justify-content: center; align-items: center; z-index: 2; } /* Glow behind phone */ .app-image::before { content: ""; position: absolute; width: 330px; height: 330px; border-radius: 50%; background: rgba(255,255,255,.10); filter: blur(5px); z-index: -1; } /* Phone */ .app-image img { display: block; width: 100%; max-width: 350px; height: 300px; object-fit: contain; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 25px 25px rgba(0,0,0,.20)); } /*================================ BUTTON AREA ================================*/ .app-buttons { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 5px; z-index: 5; gap: 20px; } .app-buttons .btn { min-width: 210px; padding: 16px 38px; font-size: 16px; box-shadow: 0 10px 25px rgba(0,0,0,.15); } /*================================ ANDROID BUTTON ================================*/ .app-buttons .btn-primary { background: #b91c1c; color: #fff; border: 2px solid #b91c1c; } .app-buttons .btn-primary:hover { background: #991b1b; border-color: #991b1b; } /*================================ IOS BUTTON ================================*/ .app-buttons .btn-secondary { background: #fff; border: 2px solid #fff; color: #d62828; } .app-buttons .btn-secondary:hover { background: transparent; color: #fff; } .btn-small-red { padding: 5px 10px; font-size: 10px; box-shadow: 0 10px 25px rgba(0, 0, 0, .15); background: #d62828; border-radius: 5px; color: #ffffff; } /* Fixed container covering the entire viewport */ .loader-overlay { position: fixed; inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 */ display: flex; align-items: center; justify-content: center; background-color: rgba(15, 23, 42, 0.4); /* subtle dark dim */ backdrop-filter: blur(2px); /* optional soft blur effect */ z-index: 9999; } .loader-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Spinner */ .spinner { width: 52px; height: 52px; border: 5px solid rgba(255, 255, 255, 0.3); border-top-color: #ffffff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===================================================== BACK TO TOP ===================================================== */ .back-to-top { position: fixed; right: 25px; bottom: 70px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #e92727; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s ease; z-index: 900; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:before { content: ""; border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(223deg); -webkit-transform: rotate(223deg); position: relative; margin-top: 7px; } .video-track { width: 100%; margin: 0 auto; overflow: hidden; position: relative; padding: 20px 0; } .video-carousel-track { display: flex; width: max-content; --card-count: 6; /* Total unique items (before duplicating) */ --speed-per-card: 14s; animation: scrollIg calc(var(--card-count) * var(--speed-per-card)) linear infinite; } /* Removed paused state as per user request to keep animation running */ .video-card { width: calc(33.333vw - 30px); max-width: 320px; margin: 0 15px; border-radius: 24px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.08); background: #fff; position: relative; flex-shrink: 0; } .video-track:hover .video-carousel-track { animation-play-state: paused; } @keyframes scrollIg { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .testimonial-grid { width: 100%; margin: 0 auto; overflow: hidden; position: relative; padding: 20px 0; } .testimonial-grid-track { display: flex; width: max-content; --card-count: 20; /* Total unique items (before duplicating) */ --speed-per-card: 14s; animation: scrolltestmo calc(var(--card-count) * var(--speed-per-card)) linear infinite; } /* Removed paused state as per user request to keep animation running */ .testimonial-card { width: calc(33.333vw - 30px); max-width: 320px; margin: 0 15px; border-radius: 24px; overflow: hidden; box-shadow: 0 15px 30px rgba(0,0,0,0.08); background: #fff; position: relative; flex-shrink: 0; } .testimonial-grid:hover .testimonial-grid-track { animation-play-state: paused; } @keyframes scrolltestmo { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (max-width: 991px) { .testimonial-grid, .testimonial-grid { width: 90%; } .video-card { width: calc(50vw - 30px); } .testimonial-card { width: calc(50vw - 30px); } } @media (max-width: 767px) { .video-track, .testimonial-grid { width: 100%; } .video-card { width: calc(100vw - 40px); } .testimonial-card { width: calc(100vw - 40px); } } /* ========================================================= NOTES LIBRARY VARIABLES ========================================================= */ .notes-library { --nl-primary: #c62828; --nl-primary-dark: #a61b1b; --nl-dark: #111111; --nl-text: #333333; --nl-grey: #687080; --nl-white: #ffffff; --nl-section-bg: #fffdf8; --nl-border: #e6e6e6; --nl-radius: 18px; --nl-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); } /* ========================================================= SECTION RESET ========================================================= */ .notes-library, .notes-library * { box-sizing: border-box; } /* ========================================================= MAIN SECTION ========================================================= */ .notes-library { width: 100%; padding: 70px 0 10px; background: var(--nl-section-bg); color: var(--nl-dark); font-family: 'Inter', sans-serif; } /* ========================================================= CONTAINER ========================================================= */ .notes-library .container { width: min(1400px, 94%); margin: 0 auto; } /* ========================================================= SECTION HEADING ========================================================= */ .notes-library .section-heading { width: 100%; text-align: center; margin: 0 auto; margin-bottom: 48px; } /* ========================================================= HEADING LABEL ========================================================= */ .notes-library .section-heading > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; color: var(--nl-primary); font-size: 14px; font-weight: 600; line-height: 1.4; } .notes-library .section-heading > span i { font-size: 14px; } /* ========================================================= MAIN HEADING ========================================================= */ .notes-library .section-heading h2 { margin: 0; color: var(--nl-dark); font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.25; } .notes-library .section-heading h2 > span { color: var(--nl-primary); } /* ========================================================= HEADING DESCRIPTION ========================================================= */ .notes-library .section-heading p { max-width: 800px; margin: 6px auto 0; color: #222222; font-size: 14px; font-weight: 400; line-height: 1.7; } /* ========================================================= NOTES GRID ========================================================= */ .notes-library .notes-library-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; } /* ========================================================= NOTE CARD ========================================================= */ .notes-library .note-card { min-width: 0; height: 305px; display: flex; flex-direction: column; overflow: hidden; background: var(--nl-white); border: 1px solid var(--nl-border); border-radius: var(--nl-radius); box-shadow: var(--nl-shadow); transition: transform .3s ease, box-shadow .3s ease; } /* ========================================================= NOTE IMAGE ========================================================= */ .notes-library .note-card > img { width: 100%; height: 205px; min-height: 205px; display: block; object-fit: cover; object-position: center; background: #f7f7f7; } /* ========================================================= NOTE CONTENT ========================================================= */ .notes-library .note-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 18px 25px 20px; text-align: center; } /* ========================================================= NOTE TITLE ========================================================= */ .notes-library .note-content h4 { margin: 0 0 8px; color: var(--nl-dark); font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.35; } /* ========================================================= NOTE DESCRIPTION ========================================================= */ .notes-library .note-content p { max-width: 250px; margin: 0; color: #526070; font-size: 13px; font-weight: 400; line-height: 1.7; } /* ========================================================= CARD HOVER ========================================================= */ .notes-library .note-card:hover { transform: translateY(-5px); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08); } /* ========================================================= 1400px ========================================================= */ @media (max-width: 1400px) { .notes-library .container { width: 95%; } .notes-library .notes-library-grid { gap: 24px; } } /* ========================================================= 1200px ========================================================= */ @media (max-width: 1200px) { .notes-library { padding-top: 65px; } .notes-library .section-heading { margin-bottom: 42px; } .notes-library .section-heading h2 { font-size: 34px; } .notes-library .notes-library-grid { gap: 20px; } .notes-library .note-card { height: 295px; } .notes-library .note-card > img { height: 195px; min-height: 195px; } .notes-library .note-content { padding-left: 18px; padding-right: 18px; } } /* ========================================================= 992px 4 COLUMNS → 2 COLUMNS ========================================================= */ @media (max-width: 992px) { .notes-library { padding: 65px 0 15px; } .notes-library .container { width: 92%; } .notes-library .section-heading { margin-bottom: 38px; } .notes-library .section-heading h2 { font-size: 32px; } .notes-library .section-heading p { max-width: 700px; font-size: 14px; } .notes-library .notes-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .notes-library .note-card { height: 300px; } .notes-library .note-card > img { height: 200px; min-height: 200px; } } /* ========================================================= 768px ========================================================= */ @media (max-width: 768px) { .notes-library { padding: 60px 0 15px; } .notes-library .container { width: 92%; } .notes-library .section-heading { margin-bottom: 34px; } .notes-library .section-heading > span { font-size: 13px; margin-bottom: 9px; } .notes-library .section-heading h2 { font-size: 29px; line-height: 1.3; } .notes-library .section-heading p { margin-top: 8px; font-size: 13px; line-height: 1.65; } .notes-library .notes-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .notes-library .note-card { height: 290px; border-radius: 16px; } .notes-library .note-card > img { height: 190px; min-height: 190px; } .notes-library .note-content { padding: 15px 15px 18px; } .notes-library .note-content h4 { font-size: 16px; margin-bottom: 6px; } .notes-library .note-content p { font-size: 12.5px; line-height: 1.6; } } /* ========================================================= 576px 2 COLUMNS → 1 COLUMN ========================================================= */ @media (max-width: 576px) { .notes-library { padding: 50px 0 15px; } .notes-library .container { width: 92%; } .notes-library .section-heading { margin-bottom: 30px; } .notes-library .section-heading > span { font-size: 12px; } .notes-library .section-heading h2 { font-size: 26px; line-height: 1.3; } .notes-library .section-heading p { font-size: 13px; line-height: 1.6; } .notes-library .notes-library-grid { grid-template-columns: 1fr; gap: 18px; } .notes-library .note-card { width: 100%; height: auto; min-height: 330px; border-radius: 16px; } .notes-library .note-card > img { width: 100%; height: 225px; min-height: 225px; } .notes-library .note-content { min-height: 105px; padding: 18px 20px 20px; } .notes-library .note-content h4 { font-size: 17px; } .notes-library .note-content p { max-width: 300px; font-size: 13px; } /* Disable movement on touch screens */ .notes-library .note-card:hover { transform: none; } } /* ========================================================= 400px ========================================================= */ @media (max-width: 400px) { .notes-library { padding: 45px 0 10px; } .notes-library .container { width: 92%; } .notes-library .section-heading { margin-bottom: 26px; } .notes-library .section-heading > span { font-size: 11.5px; } .notes-library .section-heading h2 { font-size: 23px; } .notes-library .section-heading p { font-size: 12px; } .notes-library .notes-library-grid { gap: 15px; } .notes-library .note-card { min-height: 305px; } .notes-library .note-card > img { height: 205px; min-height: 205px; } .notes-library .note-content { min-height: 100px; padding: 15px 15px 17px; } .notes-library .note-content h4 { font-size: 16px; } .notes-library .note-content p { font-size: 12px; line-height: 1.55; } } /* ========================================================= SECTION VARIABLES ========================================================= */ .notes-features-section { --notes-primary: #c62828; --notes-primary-dark: #a61b1b; --notes-heading-dark: #111827; --notes-text: #4b5563; --notes-card-bg: #ffffff; --notes-section-bg: #fffdf8; --notes-border: #e8e8e8; --notes-icon-bg: #ffe7df; --notes-radius: 18px; --notes-card-shadow: 0 8px 25px rgba(0, 0, 0, 0.035); --notes-transition: 0.3s ease; } /* ========================================================= SECTION RESET ========================================================= */ .notes-features-section, .notes-features-section * { box-sizing: border-box; } /* ========================================================= PARENT SECTION ========================================================= */ .notes-features-section { width: min(1200px, calc(100% - 52px)); margin: 40px auto 0; padding: 48px 15px 14px; background: var(--notes-section-bg); color: var(--notes-heading-dark); font-family: 'Inter', sans-serif; } /* ========================================================= INNER CONTAINER ========================================================= */ .notes-features-section .notes-features-container { width: 100%; max-width: 1170px; margin: 0 auto; } /* ========================================================= HEADING WRAPPER ========================================================= */ .notes-features-section .notes-features-heading { width: 100%; text-align: center; margin: 0 auto 40px; } /* ========================================================= SMALL RED LABEL ========================================================= */ .notes-features-section .notes-features-label { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 12px; color: var(--notes-primary); font-size: 14px; font-weight: 500; line-height: 1.4; } /* ========================================================= LABEL ICON ========================================================= */ .notes-features-section .notes-features-label i { color: var(--notes-primary); font-size: 13px; } /* ========================================================= MAIN HEADING ========================================================= */ .notes-features-section .notes-features-title { margin: 0; padding: 0; color: var(--notes-heading-dark); font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; } /* ========================================================= RED PART OF HEADING ========================================================= */ .notes-features-section .notes-features-title span { color: var(--notes-primary); } /* ========================================================= DESCRIPTION ========================================================= */ .notes-features-section .notes-features-description { max-width: 850px; margin: 7px auto 0; color: #111827; font-size: 14px; font-weight: 400; line-height: 1.6; } /* ========================================================= FEATURES GRID ========================================================= */ .notes-features-section .notes-features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; width: 100%; } /* ========================================================= GRID DIRECT CHILD ========================================================= */ .notes-features-section .notes-features-grid > div { min-width: 0; } /* ========================================================= FEATURE CARD ========================================================= */ .notes-features-section .notes-feature-card { width: 100%; min-height: 280px; padding: 34px 28px 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; background: var(--notes-card-bg); border: 1px solid var(--notes-border); border-radius: var(--notes-radius); box-shadow: var(--notes-card-shadow); transition: transform var(--notes-transition), box-shadow var(--notes-transition); } /* ========================================================= CARD HOVER ========================================================= */ .notes-features-section .notes-feature-card:hover { transform: translateY(-5px); box-shadow: 0 14px 35px rgba(0, 0, 0, 0.07); } /* ========================================================= ICON WRAPPER ========================================================= */ .notes-features-section .notes-feature-top { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 34px; } /* ========================================================= FEATURE ICON CIRCLE ========================================================= */ .notes-features-section .notes-feature-icon { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--notes-icon-bg); } /* ========================================================= FEATURE ICON ========================================================= */ .notes-features-section .notes-feature-icon i { color: #df2525; font-size: 27px; line-height: 1; } /* ========================================================= CARD TITLE ========================================================= */ .notes-features-section .notes-feature-title { margin: 0 0 25px; color: #111827; font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.35; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .notes-features-section .notes-feature-description { max-width: 330px; margin: 0 auto; color: #596273; font-size: 14px; font-weight: 400; line-height: 1.75; } /* ========================================================= 1200px ========================================================= */ @media (max-width: 1200px) { .notes-features-section { width: min(1150px, calc(100% - 40px)); } .notes-features-section .notes-features-title { font-size: 34px; } .notes-features-section .notes-features-grid { gap: 22px; } } /* ========================================================= 992px 3 COLUMNS → 2 COLUMNS ========================================================= */ @media (max-width: 992px) { .notes-features-section { width: calc(100% - 32px); margin-top: 32px; padding: 45px 18px 18px; } .notes-features-section .notes-features-heading { margin-bottom: 35px; } .notes-features-section .notes-features-title { font-size: 31px; } .notes-features-section .notes-features-description { max-width: 700px; } .notes-features-section .notes-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .notes-features-section .notes-feature-card { min-height: 270px; padding: 32px 24px 28px; } } /* ========================================================= 768px TABLET ========================================================= */ @media (max-width: 768px) { .notes-features-section { width: calc(100% - 24px); margin-top: 25px; padding: 40px 15px 15px; } .notes-features-section .notes-features-heading { margin-bottom: 32px; } .notes-features-section .notes-features-label { font-size: 13px; margin-bottom: 10px; } .notes-features-section .notes-features-title { font-size: 28px; line-height: 1.25; } .notes-features-section .notes-features-description { margin-top: 9px; font-size: 13px; line-height: 1.65; } .notes-features-section .notes-features-grid { gap: 18px; } .notes-features-section .notes-feature-card { min-height: 255px; padding: 28px 20px; border-radius: 16px; } .notes-features-section .notes-feature-top { margin-bottom: 28px; } .notes-features-section .notes-feature-icon { width: 68px; height: 68px; } .notes-features-section .notes-feature-icon i { font-size: 24px; } .notes-features-section .notes-feature-title { margin-bottom: 20px; font-size: 18px; } .notes-features-section .notes-feature-description { font-size: 13px; line-height: 1.7; } } /* ========================================================= 576px MOBILE ========================================================= */ @media (max-width: 576px) { .notes-features-section { width: calc(100% - 20px); margin-top: 20px; padding: 35px 12px 12px; } .notes-features-section .notes-features-heading { margin-bottom: 28px; } .notes-features-section .notes-features-label { font-size: 12px; } .notes-features-section .notes-features-title { font-size: 25px; line-height: 1.3; letter-spacing: -0.3px; } .notes-features-section .notes-features-description { max-width: 100%; margin-top: 8px; font-size: 12.5px; line-height: 1.65; } .notes-features-section .notes-features-grid { grid-template-columns: 1fr; gap: 15px; } .notes-features-section .notes-feature-card { min-height: auto; padding: 27px 20px 25px; border-radius: 16px; } .notes-features-section .notes-feature-top { margin-bottom: 24px; } .notes-features-section .notes-feature-icon { width: 66px; height: 66px; } .notes-features-section .notes-feature-icon i { font-size: 23px; } .notes-features-section .notes-feature-title { margin-bottom: 16px; font-size: 18px; } .notes-features-section .notes-feature-description { max-width: 350px; font-size: 13px; line-height: 1.7; } } /* ========================================================= 400px VERY SMALL MOBILE ========================================================= */ @media (max-width: 400px) { .notes-features-section { width: calc(100% - 14px); margin-top: 15px; padding: 30px 10px 10px; } .notes-features-section .notes-features-title { font-size: 22px; } .notes-features-section .notes-features-description { font-size: 12px; } .notes-features-section .notes-features-grid { gap: 13px; } .notes-features-section .notes-feature-card { padding: 24px 17px; } .notes-features-section .notes-feature-icon { width: 60px; height: 60px; } .notes-features-section .notes-feature-icon i { font-size: 21px; } .notes-features-section .notes-feature-top { margin-bottom: 21px; } .notes-features-section .notes-feature-title { font-size: 17px; margin-bottom: 14px; } .notes-features-section .notes-feature-description { font-size: 12px; line-height: 1.65; } } /* ========================================================= 360px ========================================================= */ @media (max-width: 360px) { .notes-features-section { width: calc(100% - 10px); padding-left: 8px; padding-right: 8px; } .notes-features-section .notes-features-title { font-size: 20px; } .notes-features-section .notes-feature-card { padding: 22px 15px; } } /* ========================================================= STANDALONE NOTES - WHY CHOOSE OUR NOTES ========================================================= */ .standalone-notes-about { padding: 110px 0; background: #fff; } /* ========================================================= CONTAINER ========================================================= */ .standalone-notes-about__container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 15px; padding-right: 15px; } /* ========================================================= TWO COLUMN WRAPPER ========================================================= */ .standalone-notes-about__wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .standalone-notes-about__wrapper1 { align-items: center; } /* ========================================================= IMAGE COLUMN ========================================================= */ .standalone-notes-about__image-column { width: 100%; } /* ========================================================= IMAGE BOX ========================================================= */ .standalone-notes-about__image-box { position: relative; background: #fff8f4; border-radius: 30px; padding: 30px; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, .08); } /* ========================================================= IMAGE BOX DECORATIVE CIRCLE ========================================================= */ .standalone-notes-about__image-box::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: #ffe4da; top: -100px; right: -80px; } /* ========================================================= IMAGE ========================================================= */ .standalone-notes-about__image-box img { width: 100%; position: relative; z-index: 2; border-radius: 18px; display: block; } /* ========================================================= IMAGE BADGE ========================================================= */ .standalone-notes-about__image-badge { position: absolute; left: 30px; bottom: 30px; background: #d62828; color: #fff; padding: 14px 22px; border-radius: 40px; font-weight: 600; z-index: 3; display: flex; align-items: center; gap: 10px; box-shadow: 0 15px 35px rgba(214, 40, 40, .25); } /* ========================================================= CONTENT ========================================================= */ .standalone-notes-about__content { width: 100%; } /* ========================================================= TAG ========================================================= */ .standalone-notes-about__tag { display: inline-flex; align-items: center; gap: 10px; background: #fff3ed; color: #d62828; padding: 10px 20px; border-radius: 40px; font-weight: 600; margin-bottom: 22px; } /* ========================================================= HEADING ========================================================= */ .standalone-notes-about__content h2 { font-size: 48px; line-height: 1.25; margin: 0 0 22px; color: #222; font-weight: 700; } /* ========================================================= HEADING RED TEXT ========================================================= */ .standalone-notes-about__content h2 span { color: #d62828; } /* ========================================================= DESCRIPTION ========================================================= */ .standalone-notes-about__description { color: #666; font-size: 17px; line-height: 1.9; margin: 0 0 35px; } /* ========================================================= LIST ========================================================= */ .standalone-notes-about__list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; } /* ========================================================= ITEM ========================================================= */ .standalone-notes-about__item { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid #ececec; border-radius: 18px; padding: 22px; transition: .35s; } /* ========================================================= ITEM HOVER ========================================================= */ .standalone-notes-about__item:hover { border-color: #d62828; transform: translateX(8px); box-shadow: 0 18px 45px rgba(214, 40, 40, .10); } /* ========================================================= CHECK ICON ========================================================= */ .standalone-notes-about__item > i { font-size: 24px; color: #d62828; margin-top: 4px; flex-shrink: 0; } /* ========================================================= ITEM TITLE ========================================================= */ .standalone-notes-about__item h4 { margin: 0 0 8px; font-size: 20px; color: #222; font-weight: 600; } /* ========================================================= ITEM DESCRIPTION ========================================================= */ .standalone-notes-about__item p { margin: 0; color: #666; line-height: 1.7; } /* ========================================================= BUTTON ========================================================= */ .standalone-notes-about__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 34px; background: linear-gradient( 135deg, #d62828, #ef4444 ); color: #fff; border-radius: 14px; font-size: 16px; font-weight: 600; text-decoration: none; transition: .35s; box-shadow: 0 18px 40px rgba(214, 40, 40, .25); } /* ========================================================= BUTTON HOVER ========================================================= */ .standalone-notes-about__button:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 25px 55px rgba(214, 40, 40, .35); } /* ========================================================= BUTTON ICON ========================================================= */ .standalone-notes-about__button i { transition: .35s; } .standalone-notes-about__button:hover i { transform: translateX(5px); } /* ========================================================= RESPONSIVE ========================================================= */ /* ========================================================= LARGE TABLET / SMALL DESKTOP ========================================================= */ @media (max-width: 1199px) { .standalone-notes-about__wrapper { gap: 50px; } .standalone-notes-about__content h2 { font-size: 44px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .standalone-notes-about { padding: 90px 0; } .standalone-notes-about__wrapper { grid-template-columns: 1fr; gap: 55px; } .standalone-notes-about__image-column { max-width: 700px; margin: 0 auto; } .standalone-notes-about__content { max-width: 700px; margin: 0 auto; } .standalone-notes-about__content h2 { font-size: 42px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .standalone-notes-about { padding: 70px 0; } .standalone-notes-about__container { padding-left: 15px; padding-right: 15px; } .standalone-notes-about__wrapper { gap: 40px; } .standalone-notes-about__image-box { padding: 20px; border-radius: 24px; } .standalone-notes-about__image-badge { left: 20px; bottom: 20px; padding: 11px 17px; font-size: 14px; } .standalone-notes-about__tag { padding: 9px 17px; font-size: 14px; } .standalone-notes-about__content h2 { font-size: 36px; line-height: 1.2; } .standalone-notes-about__description { font-size: 16px; line-height: 1.8; margin-bottom: 28px; } .standalone-notes-about__list { gap: 16px; margin-bottom: 30px; } .standalone-notes-about__item { gap: 14px; padding: 18px; border-radius: 16px; } .standalone-notes-about__item > i { font-size: 21px; } .standalone-notes-about__item h4 { font-size: 18px; } .standalone-notes-about__item p { font-size: 15px; line-height: 1.6; } .standalone-notes-about__button { height: 54px; padding: 0 28px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .standalone-notes-about { padding: 55px 0; } .standalone-notes-about__wrapper { gap: 32px; } .standalone-notes-about__image-box { padding: 15px; border-radius: 20px; } .standalone-notes-about__image-badge { left: 15px; bottom: 15px; padding: 9px 14px; font-size: 13px; } .standalone-notes-about__content h2 { font-size: 31px; } .standalone-notes-about__description { font-size: 15px; } .standalone-notes-about__item { padding: 16px; } .standalone-notes-about__item h4 { font-size: 17px; } .standalone-notes-about__item p { font-size: 14px; } .standalone-notes-about__button { width: 100%; } } /* ========================================================= ZONE TECH ONLINE / OFFLINE FEATURES UNIQUE SCOPE Only targets .course-text-block containing .courses-feature-list ========================================================= */ .course-text-block:has(> .courses-feature-list) { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 28px 28px; background: #ffffff; border: 1px solid #f1dddd; border-radius: 20px; box-shadow: 0 12px 35px rgba(20, 30, 45, 0.04); box-sizing: border-box; overflow: hidden; } /* ========================================================= HEADING ========================================================= */ .course-text-block:has(> .courses-feature-list) > h3 { margin: 0 0 18px; padding: 0; color: #171717; font-size: 21px; font-weight: 700; line-height: 1.35; text-align: left; box-sizing: border-box; } /* ========================================================= FEATURE LIST ========================================================= */ .course-text-block:has(> .courses-feature-list) .courses-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; width: 100%; margin: 0; padding: 0; list-style: none; box-sizing: border-box; } /* ========================================================= FEATURE ITEM ========================================================= */ .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { position: relative; display: flex; align-items: flex-start; width: 100%; min-width: 0; min-height: 54px; margin: 0; padding: 14px 16px 14px 38px; background: #fff8f6; border-radius: 11px; color: #626262; font-size: 14px; font-weight: 400; line-height: 1.5; text-align: left; box-sizing: border-box; overflow-wrap: break-word; word-break: normal; transition: background-color 0.2s ease, transform 0.2s ease; } /* ========================================================= RED CHECK ICON ========================================================= */ .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::before { content: "\f00c"; position: absolute; left: 13px; top: 15px; width: 14px; height: 14px; color: #ef2d32; font-family: "Font Awesome 6 Free"; font-size: 11px; font-weight: 900; line-height: 14px; text-align: center; } /* ========================================================= HOVER ========================================================= */ .course-text-block:has(> .courses-feature-list) .courses-feature-list > li:hover { background: #fff3f0; transform: translateY(-1px); } /* ========================================================= REMOVE POSSIBLE GLOBAL LIST STYLES ========================================================= */ .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::marker { content: ""; } /* ========================================================= LARGE DESKTOP 1400px+ ========================================================= */ @media (min-width: 1400px) { .course-text-block:has(> .courses-feature-list) { max-width: 1080px; padding: 32px 28px 28px; } .course-text-block:has(> .courses-feature-list) > h3 { font-size: 21px; margin-bottom: 18px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { font-size: 14px; padding: 14px 16px 14px 38px; } } /* ========================================================= LAPTOP 992px — 1399px ========================================================= */ @media (min-width: 992px) and (max-width: 1399px) { .course-text-block:has(> .courses-feature-list) { width: calc(100% - 40px); max-width: 1080px; padding: 30px 26px 26px; border-radius: 19px; } .course-text-block:has(> .courses-feature-list) > h3 { font-size: 20px; margin-bottom: 17px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { min-height: 52px; padding: 13px 14px 13px 37px; font-size: 14px; line-height: 1.5; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::before { left: 12px; top: 14px; } } /* ========================================================= TABLET 768px — 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .course-text-block:has(> .courses-feature-list) { width: calc(100% - 32px); max-width: 760px; margin-left: auto; margin-right: auto; padding: 28px 22px 24px; border-radius: 18px; } .course-text-block:has(> .courses-feature-list) > h3 { font-size: 20px; line-height: 1.35; margin-bottom: 17px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { min-height: 52px; padding: 13px 12px 13px 34px; font-size: 13px; line-height: 1.5; border-radius: 10px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::before { left: 11px; top: 14px; font-size: 10px; } } /* ========================================================= MOBILE 576px — 767px ========================================================= */ @media (min-width: 576px) and (max-width: 767px) { .course-text-block:has(> .courses-feature-list) { width: calc(100% - 24px); max-width: 600px; margin-left: auto; margin-right: auto; padding: 26px 18px 22px; border-radius: 17px; } .course-text-block:has(> .courses-feature-list) > h3 { font-size: 19px; line-height: 1.4; margin-bottom: 16px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list { grid-template-columns: 1fr; gap: 9px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { min-height: auto; padding: 13px 13px 13px 35px; font-size: 13px; line-height: 1.55; border-radius: 10px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::before { left: 11px; top: 14px; font-size: 10px; } } /* ========================================================= SMALL MOBILE 0 — 575px ========================================================= */ @media (max-width: 575px) { .course-text-block:has(> .courses-feature-list) { width: calc(100% - 20px); max-width: none; margin-left: auto; margin-right: auto; padding: 23px 14px 18px; border-radius: 15px; box-shadow: 0 8px 25px rgba(20, 30, 45, 0.04); } .course-text-block:has(> .courses-feature-list) > h3 { margin: 0 0 15px; font-size: 18px; line-height: 1.4; } .course-text-block:has(> .courses-feature-list) .courses-feature-list { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { width: 100%; min-height: auto; padding: 12px 11px 12px 33px; font-size: 13px; line-height: 1.5; border-radius: 9px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::before { left: 10px; top: 13px; width: 13px; height: 13px; font-size: 9px; line-height: 13px; } } /* ========================================================= VERY SMALL PHONES 0 — 380px ========================================================= */ @media (max-width: 380px) { .course-text-block:has(> .courses-feature-list) { width: calc(100% - 14px); padding: 20px 11px 15px; border-radius: 14px; } .course-text-block:has(> .courses-feature-list) > h3 { font-size: 17px; line-height: 1.4; margin-bottom: 14px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list { gap: 7px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li { padding: 11px 9px 11px 30px; font-size: 12px; line-height: 1.5; border-radius: 8px; } .course-text-block:has(> .courses-feature-list) .courses-feature-list > li::before { left: 9px; top: 12px; font-size: 8px; } } /* ========================================================= FAQ LIST ========================================================= */ section.notes-faq-section .notes-faq { width: 100%; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; } /* ========================================================= FAQ ITEM ========================================================= */ section.notes-faq-section .notes-faq-item { width: 100%; margin: 0 !important; padding: 0 !important; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(20, 30, 45, 0.035); transition: border-color 0.25s ease, box-shadow 0.25s ease; } /* ========================================================= FAQ TITLE ========================================================= */ section.notes-faq-section .notes-faq-item .faq-title { width: 100%; min-height: 56px; margin: 0 !important; padding: 0 22px !important; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; background: #ffffff; color: #111827 !important; font-family: Arial, sans-serif !important; transition: background 0.25s ease, color 0.25s ease; } /* QUESTION TEXT */ section.notes-faq-section .notes-faq-item .faq-title > span { min-width: 0; margin: 0 !important; padding: 0 !important; color: #111827 !important; font-family: Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: left !important; word-break: normal; } /* ========================================================= PLUS / MINUS ICON ========================================================= */ section.notes-faq-section .notes-faq-item .faq-title > i { flex: 0 0 auto; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; color: #e3262b !important; font-size: 13px !important; line-height: 1 !important; font-style: normal; transition: transform 0.25s ease; } /* ========================================================= ACTIVE TITLE ========================================================= */ section.notes-faq-section .notes-faq-item.active { border-color: #e6e6e6; box-shadow: 0 6px 18px rgba(20, 30, 45, 0.06); } /* ACTIVE RED HEADER */ section.notes-faq-section .notes-faq-item.active .faq-title { min-height: 56px; background: #df2529 !important; color: #ffffff !important; } /* ACTIVE QUESTION */ section.notes-faq-section .notes-faq-item.active .faq-title > span { color: #ffffff !important; } /* ACTIVE MINUS */ section.notes-faq-section .notes-faq-item.active .faq-title > i { color: #ffffff !important; } /* ========================================================= FAQ CONTENT ========================================================= */ section.notes-faq-section .notes-faq-item .faq-content { width: 100%; margin: 0 !important; padding: 0 !important; background: #ffffff; overflow: hidden; } /* CONTENT PARAGRAPH */ section.notes-faq-section .notes-faq-item .faq-content p { width: 100%; margin: 0 !important; padding: 20px 22px 21px !important; color: #536174 !important; font-family: Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.65 !important; text-align: left !important; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { section.notes-faq-section .notes-faq-item:not(.active) .faq-title:hover { background: #fffafa !important; } section.notes-faq-section .notes-faq-item:not(.active):hover { border-color: #f0cfd0; box-shadow: 0 6px 18px rgba(20, 30, 45, 0.06); } } /* ========================================================= TABLET 768px — 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { section.notes-faq-section { padding: 65px 20px; } section.notes-faq-section > .container { max-width: 720px !important; padding: 38px 30px 30px !important; } section.notes-faq-section .section-heading { margin-bottom: 36px !important; } section.notes-faq-section .section-heading > h2 { font-size: 32px !important; } section.notes-faq-section .section-heading > p { font-size: 13px !important; } section.notes-faq-section .notes-faq { gap: 13px; } } /* ========================================================= MOBILE 576px — 767px ========================================================= */ @media (min-width: 576px) and (max-width: 767px) { section.notes-faq-section { padding: 50px 16px; } section.notes-faq-section > .container { max-width: 100% !important; padding: 34px 22px 26px !important; } section.notes-faq-section .section-heading { margin-bottom: 30px !important; } section.notes-faq-section .section-heading > span { margin-bottom: 12px !important; font-size: 12px !important; } section.notes-faq-section .section-heading > h2 { font-size: 29px !important; line-height: 1.18 !important; letter-spacing: -0.4px !important; } section.notes-faq-section .section-heading > p { max-width: 520px; font-size: 13px !important; line-height: 1.55 !important; } section.notes-faq-section .notes-faq { gap: 11px; } section.notes-faq-section .notes-faq-item { border-radius: 12px; } section.notes-faq-section .notes-faq-item .faq-title { min-height: 54px; padding: 0 18px !important; gap: 15px; } section.notes-faq-section .notes-faq-item .faq-title > span { font-size: 13px !important; } section.notes-faq-section .notes-faq-item .faq-content p { padding: 17px 18px 19px !important; font-size: 12.5px !important; line-height: 1.65 !important; } } /* ========================================================= SMALL MOBILE 0 — 575px ========================================================= */ @media (max-width: 575px) { section.notes-faq-section { width: 100%; padding: 40px 12px; } section.notes-faq-section > .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 30px 14px 22px !important; } /* ----------------------------- HEADING ----------------------------- */ section.notes-faq-section .section-heading { margin-bottom: 27px !important; } section.notes-faq-section .section-heading > span { display: inline-flex; max-width: 100%; margin-bottom: 11px !important; font-size: 11px !important; white-space: normal; } section.notes-faq-section .section-heading > h2 { margin-bottom: 8px !important; font-size: 26px !important; line-height: 1.18 !important; letter-spacing: -0.35px !important; } section.notes-faq-section .section-heading > p { width: 100%; font-size: 12px !important; line-height: 1.6 !important; } /* ----------------------------- FAQ LIST ----------------------------- */ section.notes-faq-section .notes-faq { gap: 10px; } /* ----------------------------- FAQ CARD ----------------------------- */ section.notes-faq-section .notes-faq-item { border-radius: 11px; } /* ----------------------------- FAQ TITLE ----------------------------- */ section.notes-faq-section .notes-faq-item .faq-title { min-height: 53px; padding: 0 15px !important; gap: 12px; } section.notes-faq-section .notes-faq-item .faq-title > span { flex: 1 1 auto; font-size: 12.5px !important; line-height: 1.4 !important; } /* ----------------------------- ICON ----------------------------- */ section.notes-faq-section .notes-faq-item .faq-title > i { width: 17px; height: 17px; font-size: 12px !important; } /* ----------------------------- ANSWER ----------------------------- */ section.notes-faq-section .notes-faq-item .faq-content p { padding: 16px 15px 18px !important; font-size: 12px !important; line-height: 1.65 !important; } } /* ========================================================= VERY SMALL PHONES 0 — 380px ========================================================= */ @media (max-width: 380px) { section.notes-faq-section { padding: 30px 9px; } section.notes-faq-section > .container { padding: 26px 11px 20px !important; } section.notes-faq-section .section-heading { margin-bottom: 23px !important; } section.notes-faq-section .section-heading > span { font-size: 10px !important; } section.notes-faq-section .section-heading > h2 { font-size: 23px !important; letter-spacing: -0.25px !important; } section.notes-faq-section .section-heading > p { font-size: 11px !important; } section.notes-faq-section .notes-faq { gap: 8px; } section.notes-faq-section .notes-faq-item { border-radius: 9px; } section.notes-faq-section .notes-faq-item .faq-title { min-height: 50px; padding: 0 12px !important; gap: 8px; } section.notes-faq-section .notes-faq-item .faq-title > span { font-size: 11.5px !important; } section.notes-faq-section .notes-faq-item .faq-title > i { font-size: 11px !important; } section.notes-faq-section .notes-faq-item .faq-content p { padding: 14px 12px 16px !important; font-size: 11px !important; line-height: 1.6 !important; } } /* ========================================================= EXTRA SMALL PHONES 320px AND BELOW ========================================================= */ @media (max-width: 320px) { section.notes-faq-section { padding-left: 6px; padding-right: 6px; } section.notes-faq-section > .container { padding-left: 9px !important; padding-right: 9px !important; } section.notes-faq-section .section-heading > h2 { font-size: 21px !important; } section.notes-faq-section .notes-faq-item .faq-title { padding-left: 10px !important; padding-right: 10px !important; } section.notes-faq-section .notes-faq-item .faq-title > span { font-size: 11px !important; } section.notes-faq-section .notes-faq-item .faq-content p { padding-left: 10px !important; padding-right: 10px !important; } } /* ========================================================= NOTES CTA SECTION COMPLETELY ISOLATED / RESPONSIVE ========================================================= */ .notes-cta-section { width: 100%; margin: 0; padding: 55px 16px 70px; background: #ffffff; overflow: hidden; box-sizing: border-box; } .notes-cta-section *, .notes-cta-section *::before, .notes-cta-section *::after { box-sizing: border-box; } /* ========================================================= ISOLATED CONTAINER ========================================================= */ .notes-cta-section > .container { width: 100%; max-width: 1490px; margin: 0 auto; padding: 0; } /* ========================================================= MAIN BOX ========================================================= */ .notes-cta-section .notes-cta-box { position: relative; width: 100%; min-height: 542px; padding: 62px 64px; background: #fffaf8; border: 1px solid #e5e5e5; border-radius: 24px; box-shadow: 0 22px 45px rgba(20, 30, 45, 0.08); overflow: hidden; isolation: isolate; } /* ========================================================= TOP RIGHT DECORATION ========================================================= */ .notes-cta-section .notes-cta-box::before { content: ""; position: absolute; width: 160px; height: 160px; top: 0; right: 0; background: #fff0eb; border-radius: 0 0 0 100%; z-index: -1; pointer-events: none; } /* ========================================================= BOTTOM LEFT DECORATION ========================================================= */ .notes-cta-section .notes-cta-box::after { content: ""; position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: #fff0eb; border-radius: 0 100% 0 0; z-index: -1; pointer-events: none; } /* ========================================================= IMPORTANT: REMOVE BOOTSTRAP ROW/FLEX BEHAVIOUR ========================================================= */ .notes-cta-section .notes-cta-box > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; width: 100%; min-height: 416px; margin: 0 !important; padding: 0 !important; gap: 50px; } /* ========================================================= REMOVE BOOTSTRAP COLUMN BEHAVIOUR ========================================================= */ .notes-cta-section .notes-cta-box > .row > [class*="col-"] { width: 100% !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= LEFT CONTENT ========================================================= */ .notes-cta-section .cta-content { width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } /* ========================================================= TAG ========================================================= */ .notes-cta-section .cta-content > span { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px; background: #fff0eb; border-radius: 30px; color: #ed2529; font-family: Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; } /* TAG ICON */ .notes-cta-section .cta-content > span i { margin: 0; color: #ed2529; font-size: 15px; flex-shrink: 0; } /* ========================================================= HEADING ========================================================= */ .notes-cta-section .cta-content > h2 { width: 100%; max-width: 1000px; margin: 32px 0 22px; padding: 0; color: #0b1324; font-family: Arial, sans-serif; font-size: 48px; font-weight: 700; line-height: 1.18; letter-spacing: -1.4px; text-align: left; overflow-wrap: break-word; } /* ========================================================= DESCRIPTION ========================================================= */ .notes-cta-section .cta-content > p { width: 100%; max-width: 930px; margin: 0; padding: 0; color: #344a63; font-family: Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.9; text-align: left; overflow-wrap: break-word; } /* ========================================================= BUTTON COLUMN ========================================================= */ .notes-cta-section .cta-btn { width: 100%; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } /* ========================================================= BUTTON ========================================================= */ .notes-cta-section .cta-btn .theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 275px; height: 60px; margin: 0; padding: 0 25px; border: 0; border-radius: 14px; background: linear-gradient( 135deg, #ed2529 0%, #f4373b 100% ); color: #ffffff !important; font-family: Arial, sans-serif; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; text-decoration: none !important; box-shadow: 0 18px 35px rgba(229, 43, 47, 0.25); transition: transform 0.25s ease, box-shadow 0.25s ease; } /* ========================================================= BUTTON ICON ========================================================= */ .notes-cta-section .cta-btn .theme-btn i { margin: 0; color: #ffffff !important; font-size: 17px; flex-shrink: 0; transition: transform 0.25s ease; } /* ========================================================= BUTTON HOVER ========================================================= */ .notes-cta-section .cta-btn .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px rgba(229, 43, 47, 0.30); } .notes-cta-section .cta-btn .theme-btn:hover i { transform: translateX(4px); } /* ========================================================= LARGE DESKTOP 1400px+ ========================================================= */ @media (min-width: 1400px) { .notes-cta-section { padding: 55px 16px 75px; } .notes-cta-section > .container { max-width: 1490px; } .notes-cta-section .notes-cta-box { min-height: 542px; padding: 62px 64px; } .notes-cta-section .notes-cta-box > .row { grid-template-columns: minmax(0, 1fr) 360px; min-height: 416px; gap: 50px; } .notes-cta-section .cta-content > h2 { font-size: 48px; } } /* ========================================================= DESKTOP 1200px — 1399px ========================================================= */ @media (min-width: 1200px) and (max-width: 1399px) { .notes-cta-section { padding: 55px 20px 70px; } .notes-cta-section > .container { max-width: 1140px; } .notes-cta-section .notes-cta-box { min-height: 500px; padding: 55px; } .notes-cta-section .notes-cta-box > .row { grid-template-columns: minmax(0, 1fr) 300px; min-height: 390px; gap: 35px; } .notes-cta-section .cta-content > h2 { font-size: 42px; } .notes-cta-section .cta-content > p { font-size: 16px; } .notes-cta-section .cta-btn .theme-btn { width: 260px; } } /* ========================================================= LAPTOP 992px — 1199px ========================================================= */ @media (min-width: 992px) and (max-width: 1199px) { .notes-cta-section { padding: 50px 20px 65px; } .notes-cta-section > .container { max-width: 960px; } .notes-cta-section .notes-cta-box { min-height: 460px; padding: 50px; } .notes-cta-section .notes-cta-box > .row { grid-template-columns: minmax(0, 1fr) 270px; min-height: 360px; gap: 30px; } .notes-cta-section .cta-content > span { min-height: 46px; padding: 0 19px; font-size: 15px; } .notes-cta-section .cta-content > h2 { margin-top: 27px; font-size: 38px; letter-spacing: -1px; } .notes-cta-section .cta-content > p { font-size: 15px; line-height: 1.8; } .notes-cta-section .cta-btn .theme-btn { width: 245px; } } /* ========================================================= TABLET 768px — 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .notes-cta-section { padding: 45px 20px 60px; } .notes-cta-section > .container { max-width: 720px; } .notes-cta-section .notes-cta-box { min-height: auto; padding: 45px 40px; } .notes-cta-section .notes-cta-box > .row { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: auto; gap: 35px; } .notes-cta-section .cta-content { text-align: center; } .notes-cta-section .cta-content > span { min-height: 44px; padding: 0 18px; font-size: 14px; } .notes-cta-section .cta-content > h2 { max-width: 100%; margin: 25px auto 18px; font-size: 35px; line-height: 1.2; text-align: center; } .notes-cta-section .cta-content > p { max-width: 650px; margin: 0 auto; font-size: 15px; line-height: 1.75; text-align: center; } .notes-cta-section .cta-btn { width: 100%; display: flex; justify-content: center; margin: 0; } .notes-cta-section .cta-btn .theme-btn { width: 240px; height: 56px; } .notes-cta-section .notes-cta-box::before { width: 120px; height: 120px; } .notes-cta-section .notes-cta-box::after { width: 80px; height: 80px; } } /* ========================================================= MOBILE 576px — 767px ========================================================= */ @media (min-width: 576px) and (max-width: 767px) { .notes-cta-section { padding: 35px 15px 50px; } .notes-cta-section > .container { width: 100%; max-width: 100%; } .notes-cta-section .notes-cta-box { min-height: auto; padding: 38px 28px; border-radius: 18px; } .notes-cta-section .notes-cta-box > .row { display: flex !important; flex-direction: column; align-items: center; justify-content: center; min-height: auto; gap: 30px; } .notes-cta-section .cta-content { text-align: center; } .notes-cta-section .cta-content > span { min-height: 40px; padding: 0 16px; font-size: 13px; } .notes-cta-section .cta-content > h2 { margin: 22px 0 16px; font-size: 30px; line-height: 1.22; letter-spacing: -0.5px; text-align: center; } .notes-cta-section .cta-content > p { max-width: 100%; font-size: 14px; line-height: 1.7; text-align: center; } .notes-cta-section .cta-btn { width: 100%; display: flex; justify-content: center; align-items: center; margin: 0; } .notes-cta-section .cta-btn .theme-btn { width: 220px; height: 52px; font-size: 14px; } .notes-cta-section .notes-cta-box::before { width: 95px; height: 95px; } .notes-cta-section .notes-cta-box::after { width: 65px; height: 65px; } } /* ========================================================= SMALL MOBILE 0 — 575px ========================================================= */ @media (max-width: 575px) { .notes-cta-section { width: 100%; padding: 24px 8px 40px; overflow-x: hidden; } .notes-cta-section > .container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .notes-cta-section .notes-cta-box { width: 100%; min-height: auto; padding: 28px 12px 26px; border-radius: 15px; } /* ===================================================== STACK EVERYTHING ===================================================== */ .notes-cta-section .notes-cta-box > .row { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: auto; margin: 0 !important; padding: 0 !important; gap: 22px; } .notes-cta-section .notes-cta-box > .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== CONTENT ===================================================== */ .notes-cta-section .cta-content { width: 100%; text-align: left; } /* ===================================================== TAG ===================================================== */ .notes-cta-section .cta-content > span { display: inline-flex; max-width: 100%; min-height: 34px; padding: 0 12px; gap: 6px; border-radius: 20px; font-size: 10px; white-space: nowrap; } .notes-cta-section .cta-content > span i { font-size: 9px; } /* ===================================================== HEADING ===================================================== */ .notes-cta-section .cta-content > h2 { width: 100%; margin: 17px 0 12px; padding: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.3px; text-align: left; overflow-wrap: anywhere; } /* ===================================================== DESCRIPTION ===================================================== */ .notes-cta-section .cta-content > p { width: 100%; margin: 0; padding: 0; font-size: 11px; line-height: 1.65; text-align: left; overflow-wrap: anywhere; } /* ===================================================== BUTTON COLUMN ===================================================== */ .notes-cta-section .cta-btn { width: 100%; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; } /* ===================================================== MOBILE BUTTON THIS IS THE IMPORTANT CENTERING PART ===================================================== */ .notes-cta-section .cta-btn .theme-btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; height: 45px; margin: 0 auto !important; padding: 0 14px; border-radius: 9px; gap: 8px; font-size: 11px; text-align: center; } .notes-cta-section .cta-btn .theme-btn i { font-size: 11px; } /* ===================================================== DECORATIONS ===================================================== */ .notes-cta-section .notes-cta-box::before { width: 65px; height: 65px; } .notes-cta-section .notes-cta-box::after { width: 50px; height: 50px; } } /* ========================================================= VERY SMALL PHONES 0 — 380px ========================================================= */ @media (max-width: 380px) { .notes-cta-section { padding: 20px 7px 35px; } .notes-cta-section .notes-cta-box { padding: 25px 11px 24px; border-radius: 14px; } .notes-cta-section .notes-cta-box > .row { gap: 19px; } .notes-cta-section .cta-content > span { min-height: 32px; padding: 0 10px; font-size: 9px; } .notes-cta-section .cta-content > h2 { margin-top: 15px; font-size: 20px; line-height: 1.2; } .notes-cta-section .cta-content > p { font-size: 10px; line-height: 1.6; } .notes-cta-section .cta-btn .theme-btn { width: 100%; height: 43px; font-size: 10px; } .notes-cta-section .notes-cta-box::before { width: 55px; height: 55px; } .notes-cta-section .notes-cta-box::after { width: 42px; height: 42px; } } /* ========================================================= EXTREMELY NARROW PHONES 0 — 300px ========================================================= */ @media (max-width: 300px) { .notes-cta-section { padding-left: 5px; padding-right: 5px; } .notes-cta-section .notes-cta-box { padding: 22px 9px; } .notes-cta-section .cta-content > span { font-size: 8px; padding: 0 8px; } .notes-cta-section .cta-content > h2 { font-size: 18px; } .notes-cta-section .cta-content > p { font-size: 9px; } .notes-cta-section .cta-btn .theme-btn { height: 40px; font-size: 9px; } } /* ========================================================= ZONE TECH — TEST SERIES INFORMATION SECTION Completely isolated component Namespace: ZT-SERIES-INFO ========================================================= */ /* ========================================================= SECTION ========================================================= */ .zt-series-info-section { width: 100%; margin: 0; padding: 30px 20px; background: #ffffff; overflow: hidden; box-sizing: border-box; } /* ========================================================= CONTAINER ========================================================= */ .zt-series-info-container { width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } /* ========================================================= MAIN CONTENT BOX ========================================================= */ .zt-series-info-block { width: 100%; margin: 0; padding: 29px 30px 30px; background: #ffffff; border: 1px solid #f0d9d5; border-radius: 18px; box-sizing: border-box; overflow: hidden; } /* ========================================================= TITLE ========================================================= */ .zt-series-info-title { display: block; margin: 0 0 17px; padding: 0; color: #111827; font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: 0; text-align: left; box-sizing: border-box; } /* ========================================================= PARAGRAPHS ========================================================= */ .zt-series-info-paragraph { display: block; width: 100%; max-width: none; margin: 0 0 14px; padding: 0; color: #46566b; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0; text-align: left; overflow-wrap: break-word; word-wrap: break-word; box-sizing: border-box; } /* Last normal paragraph */ .zt-series-info-paragraph:last-of-type { margin-bottom: 17px; } /* ========================================================= ENGINEERING STREAM BOX ========================================================= */ .zt-series-stream-box { width: 100%; margin: 0; padding: 18px 20px; background: #fffaf7; border-left: 4px solid #ed272b; border-radius: 0 14px 14px 0; box-sizing: border-box; overflow: hidden; } /* ========================================================= STREAM ITEMS ========================================================= */ .zt-series-stream-item { width: 100%; margin: 0 0 12px; padding: 0; color: #46566b; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.55; text-align: left; overflow-wrap: break-word; word-wrap: break-word; box-sizing: border-box; } /* Remove spacing from final item */ .zt-series-stream-item:last-child { margin-bottom: 0; } /* ========================================================= STREAM LABEL ========================================================= */ .zt-series-stream-item strong { color: #ed272b; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; line-height: inherit; } /* ========================================================= LARGE DESKTOP 1400px+ ========================================================= */ @media (min-width: 1400px) { .zt-series-info-section { padding: 30px 20px; } .zt-series-info-block { padding: 30px; } .zt-series-info-title { font-size: 22px; } .zt-series-info-paragraph, .zt-series-stream-item, .zt-series-stream-item strong { font-size: 16px; } } /* ========================================================= DESKTOP / LAPTOP 992px — 1399px ========================================================= */ @media (min-width: 992px) and (max-width: 1399px) { .zt-series-info-section { padding: 30px 20px; } .zt-series-info-block { padding: 28px 30px 30px; } .zt-series-info-title { font-size: 22px; } .zt-series-info-paragraph { font-size: 16px; line-height: 1.7; } .zt-series-stream-item { font-size: 16px; line-height: 1.55; } } /* ========================================================= TABLET 768px — 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .zt-series-info-section { padding: 25px 18px; } .zt-series-info-container { max-width: 100%; } .zt-series-info-block { padding: 27px 25px 28px; border-radius: 17px; } .zt-series-info-title { margin-bottom: 16px; font-size: 21px; line-height: 1.4; } .zt-series-info-paragraph { margin-bottom: 14px; font-size: 15px; line-height: 1.75; } .zt-series-stream-box { padding: 17px 18px; } .zt-series-stream-item { margin-bottom: 11px; font-size: 15px; line-height: 1.6; } .zt-series-stream-item strong { font-size: 15px; } } /* ========================================================= MOBILE 576px — 767px ========================================================= */ @media (min-width: 576px) and (max-width: 767px) { .zt-series-info-section { padding: 22px 15px; } .zt-series-info-container { width: 100%; max-width: 100%; } .zt-series-info-block { width: 100%; padding: 24px 20px 25px; border-radius: 16px; } .zt-series-info-title { margin-bottom: 15px; font-size: 20px; line-height: 1.4; } .zt-series-info-paragraph { margin-bottom: 14px; font-size: 15px; line-height: 1.7; } .zt-series-stream-box { padding: 17px 16px; border-left-width: 4px; border-radius: 0 12px 12px 0; } .zt-series-stream-item { margin-bottom: 12px; font-size: 15px; line-height: 1.65; } .zt-series-stream-item strong { font-size: 15px; } } /* ========================================================= SMALL MOBILE 0 — 575px ========================================================= */ @media (max-width: 575px) { .zt-series-info-section { width: 100%; padding: 18px 12px; overflow-x: hidden; } .zt-series-info-container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .zt-series-info-block { width: 100%; margin: 0; padding: 22px 17px 23px; border-radius: 15px; } /* TITLE */ .zt-series-info-title { width: 100%; margin: 0 0 14px; font-size: 19px; line-height: 1.4; word-break: normal; overflow-wrap: break-word; } /* PARAGRAPHS */ .zt-series-info-paragraph { width: 100%; margin: 0 0 14px; font-size: 14px; line-height: 1.72; overflow-wrap: anywhere; word-break: normal; } /* STREAM BOX */ .zt-series-stream-box { width: 100%; margin: 0; padding: 16px 14px; border-left-width: 4px; border-radius: 0 11px 11px 0; } /* STREAM ITEMS */ .zt-series-stream-item { width: 100%; margin: 0 0 12px; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; } .zt-series-stream-item strong { font-size: 14px; } } /* ========================================================= VERY SMALL PHONES 0 — 380px ========================================================= */ @media (max-width: 380px) { .zt-series-info-section { padding: 15px 9px; } .zt-series-info-block { padding: 19px 14px 20px; border-radius: 13px; } .zt-series-info-title { margin-bottom: 13px; font-size: 18px; line-height: 1.4; } .zt-series-info-paragraph { margin-bottom: 13px; font-size: 13px; line-height: 1.7; } .zt-series-stream-box { padding: 14px 12px; } .zt-series-stream-item { margin-bottom: 11px; font-size: 13px; line-height: 1.65; } .zt-series-stream-item strong { font-size: 13px; } } /* ========================================================= PYP CTA SECTION SELF-CONTAINED + FULLY RESPONSIVE ========================================================= */ .pyp-cta-section { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 100px 0 !important; overflow: hidden !important; background: linear-gradient( 135deg, #d52228 0%, #dc292d 50%, #c91d23 100% ) !important; color: #fff; box-sizing: border-box !important; } /* ========================================================= IMPORTANT: BREAK OUT OF ANY FIXED-WIDTH PARENT ========================================================= */ /*.pyp-cta-section { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }*/ /* ========================================================= ALL CHILDREN BOX SIZING ========================================================= */ .pyp-cta-section *, .pyp-cta-section *::before, .pyp-cta-section *::after { box-sizing: border-box !important; } /* ========================================================= BACKGROUND CIRCLES ========================================================= */ .pyp-cta-section::before { content: ""; position: absolute; width: 420px; height: 420px; left: -215px; bottom: -230px; border-radius: 50%; background: rgba(255, 111, 55, 0.20); pointer-events: none; z-index: 0; } .pyp-cta-section::after { content: ""; position: absolute; width: 430px; height: 430px; right: -125px; top: -165px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); pointer-events: none; z-index: 0; } /* ========================================================= CONTAINER DO NOT ALLOW YOUR GLOBAL .container TO BREAK THIS SECTION ========================================================= */ .pyp-cta-section > .container { position: relative !important; z-index: 2; display: block !important; width: 100% !important; max-width: 1320px !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ========================================================= MAIN GRID ========================================================= */ .pyp-cta-wrapper { position: relative; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important; align-items: center; width: 100% !important; max-width: none !important; min-width: 0 !important; gap: 70px; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= LEFT ========================================================= */ .pyp-cta-content { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= TAG ========================================================= */ .pyp-cta-content .section-tag { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 0 !important; margin: 0 0 34px !important; padding: 7px 18px !important; border: 1px solid rgba(255,255,255,.30) !important; border-radius: 30px !important; background: rgba(255,255,255,.12) !important; color: #fff !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 600 !important; white-space: nowrap; } /* ========================================================= HEADING ========================================================= */ .pyp-cta-content h2 { display: block !important; width: 100% !important; max-width: 720px !important; min-width: 0 !important; margin: 0 0 22px !important; padding: 0 !important; color: #fff !important; font-family: inherit !important; font-size: 44px !important; line-height: 1.27 !important; font-weight: 700 !important; letter-spacing: -0.7px !important; word-break: normal !important; overflow-wrap: normal !important; } /* ========================================================= DESCRIPTION ========================================================= */ .pyp-cta-content > p { display: block !important; width: 100% !important; max-width: 720px !important; min-width: 0 !important; margin: 0 0 32px !important; padding: 0 !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; line-height: 1.9 !important; font-weight: 400 !important; word-break: normal !important; } /* ========================================================= FEATURES ========================================================= */ .pyp-cta-features { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 730px !important; min-width: 0 !important; margin: 0 0 38px !important; padding: 0 !important; column-gap: 40px; row-gap: 14px; } .pyp-cta-features > div { display: flex !important; align-items: center; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 10px; color: #fff !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 600 !important; } .pyp-cta-features i { flex: 0 0 auto; color: #ffd43b !important; font-size: 17px !important; } /* ========================================================= BUTTON WRAPPER ========================================================= */ .pyp-cta-buttons { display: flex !important; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 100% !important; max-width: none !important; gap: 16px; margin: 0 !important; padding: 0 !important; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .pyp-cta-buttons .cta-primary-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: auto !important; min-width: 218px !important; height: 52px !important; margin: 0 !important; padding: 0 28px !important; border: 1px solid #fff !important; border-radius: 12px !important; background: #fff !important; color: #d52228 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap; gap: 11px; box-shadow: none; transition: .3s ease; } .pyp-cta-buttons .cta-primary-btn:hover { transform: translateY(-3px); color: #d52228 !important; box-shadow: 0 12px 30px rgba(0,0,0,.18); } /* ========================================================= SECONDARY BUTTON ========================================================= */ .pyp-cta-buttons .cta-secondary-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: auto !important; min-width: 215px !important; height: 52px !important; margin: 0 !important; padding: 0 28px !important; border: 1px solid rgba(255,255,255,.45) !important; border-radius: 12px !important; background: transparent !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap; gap: 11px; transition: .3s ease; } .pyp-cta-buttons .cta-secondary-btn:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; color: #fff !important; transform: translateY(-3px); } /* ========================================================= RIGHT STATS ========================================================= */ .pyp-cta-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: none !important; min-width: 0 !important; gap: 22px; margin: 0 !important; padding: 0 !important; } /* ========================================================= STAT CARD ========================================================= */ .pyp-cta-stats .cta-stat-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; min-width: 0 !important; min-height: 225px; margin: 0 !important; padding: 28px 15px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 20px !important; background: rgba(255,255,255,.14) !important; text-align: center; box-shadow: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: .3s ease; } .pyp-cta-stats .cta-stat-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.18) !important; } /* ========================================================= ICON ========================================================= */ .pyp-cta-stats .cta-stat-card > i { display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 66px !important; height: 66px !important; margin: 0 0 19px !important; border-radius: 15px !important; background: rgba(255,255,255,.16) !important; color: #ffd43b !important; font-size: 27px !important; } /* ========================================================= NUMBER ========================================================= */ .pyp-cta-stats .cta-stat-card h3 { display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; color: #fff !important; font-size: 36px !important; line-height: 1 !important; font-weight: 700 !important; } /* ========================================================= LABEL ========================================================= */ .pyp-cta-stats .cta-stat-card p { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.92) !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* ========================================================= 1200px ========================================================= */ @media (max-width: 1199px) { .pyp-cta-section > .container { max-width: 960px !important; } .pyp-cta-wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 45px; } .pyp-cta-content h2 { font-size: 38px !important; } .pyp-cta-stats { gap: 16px; } .pyp-cta-stats .cta-stat-card { min-height: 200px; } } /* ========================================================= 991px - TABLET ========================================================= */ @media (max-width: 991px) { .pyp-cta-section { padding: 75px 0 !important; } .pyp-cta-section > .container { width: 100% !important; max-width: 720px !important; padding-left: 20px !important; padding-right: 20px !important; } .pyp-cta-wrapper { grid-template-columns: 1fr !important; gap: 50px; } .pyp-cta-content h2 { max-width: 680px !important; font-size: 38px !important; } .pyp-cta-content > p { max-width: 680px !important; } .pyp-cta-features { max-width: 680px !important; } .pyp-cta-stats { width: 100% !important; max-width: 650px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= 767px - MOBILE ========================================================= */ @media (max-width: 767px) { .pyp-cta-section { padding: 60px 0 !important; } .pyp-cta-section > .container { width: 100% !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; } .pyp-cta-wrapper { display: flex !important; flex-direction: column; width: 100% !important; gap: 38px; } /* ---------- LEFT ---------- */ .pyp-cta-content { width: 100% !important; } .pyp-cta-content .section-tag { margin-bottom: 22px !important; padding: 7px 15px !important; font-size: 12px !important; } .pyp-cta-content h2 { width: 100% !important; max-width: none !important; font-size: 31px !important; line-height: 1.25 !important; letter-spacing: -0.3px !important; margin-bottom: 18px !important; } .pyp-cta-content > p { width: 100% !important; max-width: none !important; font-size: 14px !important; line-height: 1.8 !important; margin-bottom: 28px !important; } /* ---------- FEATURES ---------- */ .pyp-cta-features { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: none !important; gap: 12px; margin-bottom: 30px !important; } .pyp-cta-features > div { width: 100% !important; font-size: 13px !important; gap: 9px; } /* ---------- BUTTONS ---------- */ .pyp-cta-buttons { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 10px; } .pyp-cta-buttons .cta-primary-btn, .pyp-cta-buttons .cta-secondary-btn { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 52px !important; flex: none !important; } /* ---------- STATS ---------- */ .pyp-cta-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: none !important; gap: 14px; margin: 0 !important; } .pyp-cta-stats .cta-stat-card { width: 100% !important; min-width: 0 !important; min-height: 170px; padding: 20px 10px !important; border-radius: 17px !important; } .pyp-cta-stats .cta-stat-card > i { width: 52px !important; height: 52px !important; margin-bottom: 13px !important; font-size: 21px !important; } .pyp-cta-stats .cta-stat-card h3 { font-size: 28px !important; margin-bottom: 7px !important; } .pyp-cta-stats .cta-stat-card p { font-size: 11px !important; line-height: 1.35 !important; } /* ---------- CIRCLES ---------- */ .pyp-cta-section::before { width: 280px; height: 280px; left: -180px; bottom: -170px; } .pyp-cta-section::after { width: 280px; height: 280px; right: -150px; top: -150px; } } /* ========================================================= 575px - SMALL MOBILE ========================================================= */ @media (max-width: 575px) { .pyp-cta-section { padding: 50px 0 !important; } .pyp-cta-section > .container { padding-left: 16px !important; padding-right: 16px !important; } .pyp-cta-wrapper { gap: 34px; } .pyp-cta-content .section-tag { font-size: 11px !important; } .pyp-cta-content h2 { font-size: 28px !important; line-height: 1.27 !important; } .pyp-cta-content > p { font-size: 13.5px !important; line-height: 1.8 !important; } .pyp-cta-features > div { font-size: 12.5px !important; } .pyp-cta-buttons .cta-primary-btn, .pyp-cta-buttons .cta-secondary-btn { height: 50px !important; font-size: 14px !important; } .pyp-cta-stats { gap: 11px; } .pyp-cta-stats .cta-stat-card { min-height: 155px; padding: 16px 7px !important; border-radius: 15px !important; } .pyp-cta-stats .cta-stat-card > i { width: 46px !important; height: 46px !important; margin-bottom: 11px !important; font-size: 19px !important; } .pyp-cta-stats .cta-stat-card h3 { font-size: 25px !important; } .pyp-cta-stats .cta-stat-card p { font-size: 10px !important; } } /* ========================================================= 399px AND BELOW ========================================================= */ @media (max-width: 399px) { .pyp-cta-section { padding: 45px 0 !important; } .pyp-cta-section > .container { padding-left: 14px !important; padding-right: 14px !important; } .pyp-cta-content h2 { font-size: 25px !important; } .pyp-cta-content > p { font-size: 12.5px !important; } .pyp-cta-features > div { font-size: 11.5px !important; } .pyp-cta-stats { gap: 9px; } .pyp-cta-stats .cta-stat-card { min-height: 140px; padding: 13px 5px !important; } .pyp-cta-stats .cta-stat-card > i { width: 42px !important; height: 42px !important; font-size: 17px !important; } .pyp-cta-stats .cta-stat-card h3 { font-size: 22px !important; } .pyp-cta-stats .cta-stat-card p { font-size: 9px !important; } } /* ========================================================= PREVIOUS YEAR PAPERS Unique namespace: paper-categories ========================================================= */ .paper-categories { width: 100%; padding: 85px 0 90px; background: #ffffff; box-sizing: border-box; overflow: hidden; } /* ========================================================= CONTAINER ========================================================= */ .paper-categories .container { width: min(100% - 40px, 1260px); margin: 0 auto; padding: 0; box-sizing: border-box; } /* ========================================================= SECTION HEADING ========================================================= */ .paper-categories .section-heading { max-width: 820px; margin: 0 auto 48px; text-align: center; } .paper-categories .section-badge { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 28px; padding: 9px 18px; border-radius: 30px; background: #fff4ee; color: #d92c2c; font-size: 14px; font-weight: 600; line-height: 1; box-shadow: 0 8px 22px rgba(40, 40, 40, 0.08); } .paper-categories .section-badge i { font-size: 14px; color: #d92c2c; } .paper-categories .section-heading h2 { margin: 0 0 20px; color: #101820; font-size: 38px; line-height: 1.2; font-weight: 800; letter-spacing: -0.8px; } .paper-categories .section-heading p { max-width: 700px; margin: 0 auto; color: #657080; font-size: 16px; line-height: 1.75; font-weight: 400; } /* ========================================================= PAPERS GRID ========================================================= */ .paper-categories .papers-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; } /* ========================================================= PAPER CARD ========================================================= */ .paper-categories .paper-card { position: relative; min-width: 0; min-height: 460px; padding: 38px 28px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; background: #ffffff; border: 1px solid #e8e8e8; border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 30, 40, 0.07); box-sizing: border-box; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* ========================================================= TOP GRADIENT LINE ========================================================= */ .paper-categories .paper-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, #ed2024 0%, #ffb000 100% ); border-radius: 18px 18px 0 0; } /* ========================================================= PAPER ICON ========================================================= */ .paper-categories .paper-icon { width: 80px; height: 80px; margin: 0 auto 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 20px; background: #fff3ec; color: #e52a32; font-size: 36px; transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .paper-categories .paper-icon i { line-height: 1; } /* ========================================================= CARD TITLE ========================================================= */ .paper-categories .paper-card h3 { margin: 0 0 16px; color: #111820; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.4px; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .paper-categories .paper-card > p { min-height: 88px; margin: 0 0 24px; color: #5e6b7a; font-size: 15.5px; line-height: 1.8; font-weight: 400; } /* ========================================================= PAPER INFORMATION ========================================================= */ .paper-categories .paper-info { width: 100%; margin-top: auto; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; } .paper-categories .paper-info > span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #263444; font-size: 13px; line-height: 1.4; font-weight: 500; white-space: nowrap; } .paper-categories .paper-info > span:first-child i { color: #e5262e; font-size: 15px; } /* ========================================================= UPDATED BADGE ========================================================= */ .paper-categories .paper-info .updated { display: inline-flex; align-items: center; justify-content: center; padding: 7px 13px; border-radius: 20px; background: #fff2f0; color: #4e5965; font-size: 12px; line-height: 1; font-weight: 500; white-space: nowrap; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .paper-categories .paper-btn { width: 100%; min-height: 48px; padding: 13px 18px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 9px; background: linear-gradient( 90deg, #e8232a 0%, #f43c40 100% ); color: #ffffff; font-size: 14px; line-height: 1; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .paper-categories .paper-btn i { font-size: 14px; transition: transform 0.25s ease; } /* ========================================================= HOVER EFFECT ========================================================= */ .paper-categories .paper-card:hover { transform: translateY(-7px); border-color: #eeeeee; box-shadow: 0 18px 42px rgba(20, 30, 40, 0.11); } .paper-categories .paper-card:hover .paper-icon { transform: translateY(-3px); background: #e92b32; color: #ffffff; } .paper-categories .paper-btn:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(230, 35, 42, 0.22); } .paper-categories .paper-btn:hover i { transform: translateX(4px); } /* ========================================================= LARGE DESKTOP 1200px AND BELOW ========================================================= */ @media (max-width: 1200px) { .paper-categories { padding: 75px 0 80px; } .paper-categories .container { width: min(100% - 36px, 1100px); } .paper-categories .papers-grid { gap: 20px; } .paper-categories .paper-card { min-height: 450px; padding: 34px 22px 30px; } .paper-categories .paper-card h3 { font-size: 25px; } .paper-categories .paper-card > p { font-size: 15px; } } /* ========================================================= TABLET 992px AND BELOW ========================================================= */ @media (max-width: 992px) { .paper-categories { padding: 65px 0 70px; } .paper-categories .container { width: min(100% - 32px, 850px); } .paper-categories .section-heading { margin-bottom: 40px; } .paper-categories .section-badge { margin-bottom: 22px; } .paper-categories .section-heading h2 { font-size: 34px; } .paper-categories .papers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .paper-categories .paper-card { min-height: 440px; padding: 34px 28px 30px; } .paper-categories .paper-card h3 { font-size: 26px; } .paper-categories .paper-card > p { min-height: 82px; } } /* ========================================================= MOBILE 768px AND BELOW ========================================================= */ @media (max-width: 768px) { .paper-categories { padding: 52px 0 58px; } .paper-categories .container { width: calc(100% - 28px); } .paper-categories .section-heading { margin-bottom: 34px; } .paper-categories .section-badge { margin-bottom: 18px; padding: 9px 15px; font-size: 13px; } .paper-categories .section-heading h2 { margin-bottom: 14px; font-size: 30px; line-height: 1.25; } .paper-categories .section-heading p { font-size: 15px; line-height: 1.65; } .paper-categories .papers-grid { grid-template-columns: 1fr; gap: 20px; } .paper-categories .paper-card { width: 100%; min-height: 420px; padding: 30px 24px 24px; border-radius: 15px; } .paper-categories .paper-icon { width: 68px; height: 68px; margin-bottom: 20px; border-radius: 17px; font-size: 30px; } .paper-categories .paper-card h3 { margin-bottom: 12px; font-size: 23px; } .paper-categories .paper-card > p { min-height: 100px; margin-bottom: 20px; font-size: 14px; line-height: 1.65; } .paper-categories .paper-info { margin-bottom: 18px; gap: 6px; } .paper-categories .paper-info > span:first-child { font-size: 11.5px; gap: 5px; } .paper-categories .paper-info > span:first-child i { font-size: 13px; } .paper-categories .paper-info .updated { padding: 6px 9px; font-size: 10.5px; } .paper-categories .paper-btn { min-height: 45px; padding: 12px 10px; gap: 7px; font-size: 12px; } .paper-categories .paper-btn i { font-size: 12px; } .paper-categories .paper-card:hover { transform: none; } .paper-categories .paper-card:hover .paper-icon { transform: none; background: #fff3ec; color: #e52a32; } } /* ========================================================= SMALL MOBILE 576px AND BELOW ========================================================= */ @media (max-width: 576px) { .paper-categories { padding: 44px 0 50px; } .paper-categories .container { width: calc(100% - 22px); } .paper-categories .section-heading { margin-bottom: 28px; } .paper-categories .section-badge { padding: 8px 13px; font-size: 12px; } .paper-categories .section-heading h2 { font-size: 27px; } .paper-categories .section-heading p { font-size: 14px; } .paper-categories .papers-grid { grid-template-columns: 1fr; gap: 18px; } .paper-categories .paper-card { width: 100%; min-height: 390px; padding: 26px 22px 20px; border-radius: 14px; } .paper-categories .paper-icon { width: 60px; height: 60px; margin-bottom: 17px; border-radius: 15px; font-size: 26px; } .paper-categories .paper-card h3 { font-size: 20px; } .paper-categories .paper-card > p { min-height: 104px; font-size: 13px; line-height: 1.6; } .paper-categories .paper-info { align-items: center; flex-wrap: nowrap; } .paper-categories .paper-info > span:first-child { font-size: 10.5px; } .paper-categories .paper-info .updated { padding: 6px 8px; font-size: 9.5px; } .paper-categories .paper-btn { min-height: 42px; padding: 11px 7px; font-size: 11px; gap: 5px; } } /* ========================================================= EXTRA SMALL MOBILE 400px AND BELOW ========================================================= */ @media (max-width: 400px) { .paper-categories { padding: 38px 0 44px; } .paper-categories .container { width: calc(100% - 18px); } .paper-categories .section-heading h2 { font-size: 24px; } .paper-categories .section-heading p { font-size: 13px; } .paper-categories .papers-grid { grid-template-columns: 1fr; gap: 16px; } .paper-categories .paper-card { width: 100%; min-height: 365px; padding: 24px 18px 18px; } .paper-categories .paper-icon { width: 54px; height: 54px; margin-bottom: 14px; font-size: 23px; border-radius: 13px; } .paper-categories .paper-card h3 { margin-bottom: 10px; font-size: 18px; } .paper-categories .paper-card > p { min-height: 106px; font-size: 12px; line-height: 1.55; } .paper-categories .paper-info > span:first-child { font-size: 9.5px; } .paper-categories .paper-info .updated { padding: 5px 7px; font-size: 8.5px; } .paper-categories .paper-btn { min-height: 40px; font-size: 10px; } } /* ========================================================= SUBJECT-WISE ANALYSIS ========================================================= */ .analysis-left { width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; } /* ========================================================= ANALYSIS CARD ========================================================= */ .analysis-card { width: 100%; padding: 36px 36px 34px; background: #ffffff; border: 1px solid #e7e7e7; border-radius: 20px; box-shadow: 0 14px 35px rgba(20, 30, 40, 0.06); box-sizing: border-box; } /* ========================================================= CARD HEADING ========================================================= */ .analysis-card h3 { margin: 0 0 30px; color: #111820; font-size: 26px; line-height: 1.25; font-weight: 800; letter-spacing: -0.4px; } /* ========================================================= PROGRESS ITEM ========================================================= */ .progress-item { width: 100%; margin-bottom: 27px; } .progress-item:last-child { margin-bottom: 0; } /* ========================================================= PROGRESS TITLE ========================================================= */ .progress-title { width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; } .progress-title span { color: #17202a; font-size: 15px; line-height: 1.4; font-weight: 600; } .progress-title strong { flex-shrink: 0; color: #e3262e; font-size: 15px; line-height: 1.4; font-weight: 700; } /* ========================================================= PROGRESS BAR ========================================================= */ .progress-bar { width: 100%; height: 11px; overflow: hidden; background: #f0f0f0; border-radius: 20px; } .progress-bar span { display: block; height: 100%; background: linear-gradient( 90deg, #ed2024 0%, #ffb000 100% ); border-radius: inherit; transition: width 0.5s ease; } /* ========================================================= ADVERTISEMENT BANNER ========================================================= */ .analysis-banner { display: block; width: 95%; margin: 24px auto 0; overflow: hidden; border-radius: 16px; text-decoration: none; box-sizing: border-box; align-items: center; } .analysis-banner img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: cover; border-radius: inherit; } /* ========================================================= LARGE DESKTOP 1200px AND BELOW ========================================================= */ @media (max-width: 1200px) { .analysis-left { max-width: 720px; } .analysis-card { padding: 34px 32px; } .analysis-card h3 { font-size: 25px; } } /* ========================================================= TABLET 992px AND BELOW ========================================================= */ @media (max-width: 992px) { .analysis-left { max-width: 100%; } .analysis-card { padding: 32px 28px; border-radius: 18px; } .analysis-card h3 { margin-bottom: 28px; font-size: 24px; } .progress-item { margin-bottom: 25px; } .progress-title span, .progress-title strong { font-size: 15px; } .progress-bar { height: 10px; } .analysis-banner { margin-top: 22px; border-radius: 15px; } } /* ========================================================= MOBILE 768px AND BELOW ========================================================= */ @media (max-width: 768px) { .analysis-left { width: 100%; max-width: 100%; } .analysis-card { padding: 28px 22px; border-radius: 16px; } .analysis-card h3 { margin-bottom: 25px; font-size: 22px; line-height: 1.3; } .progress-item { margin-bottom: 23px; } .progress-title { margin-bottom: 9px; gap: 12px; } .progress-title span { font-size: 14px; } .progress-title strong { font-size: 14px; } .progress-bar { height: 9px; } .analysis-banner { margin-top: 20px; border-radius: 14px; } } /* ========================================================= SMALL MOBILE 576px AND BELOW ========================================================= */ @media (max-width: 576px) { .analysis-card { padding: 24px 18px; border-radius: 15px; } .analysis-card h3 { margin-bottom: 23px; font-size: 20px; } .progress-item { margin-bottom: 21px; } .progress-title { margin-bottom: 8px; } .progress-title span { font-size: 13px; } .progress-title strong { font-size: 13px; } .progress-bar { height: 8px; } .analysis-banner { margin-top: 18px; border-radius: 12px; } } /* ========================================================= EXTRA SMALL MOBILE 400px AND BELOW ========================================================= */ @media (max-width: 400px) { .analysis-card { padding: 21px 14px; border-radius: 13px; } .analysis-card h3 { margin-bottom: 21px; font-size: 19px; } .progress-item { margin-bottom: 19px; } .progress-title { gap: 8px; margin-bottom: 7px; } .progress-title span { font-size: 12px; } .progress-title strong { font-size: 12px; } .progress-bar { height: 7px; } .analysis-banner { margin-top: 16px; border-radius: 10px; } } /* Floating Circular Button */ .whatsapp-btn { position: fixed; bottom: 16px; right: 20px; width: 48px; height: 48px; background-color: #25D366; color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); text-decoration: none; z-index: 1000; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } /* Sizing the SVG */ .whatsapp-icon { width: 24px; height: 24px; } /* Hover & Active States */ .whatsapp-btn:hover { background-color: #20ba5a; transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } .whatsapp-btn:hover { transform: translateY(0) scale(0.98); } /* Sidebar container fixed to the right screen edge */ .floating-social-bar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; /* Keeps items pinned against the right wall */ gap: 3px; z-index: 9999; } .btn-outline { background: transparent; color: #d62828; border: 2px solid #d62828; padding: 8px 15px; font-size: 16px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; margin: 0 10px 0 10px; } .btn-outline:hover { background: #d62828; color: #ffffff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transform: translateY(-2px); } .btn-outline:active { transform: translateY(0); } .btn-solid { background: #d62828; color: #ffffff; border: none; padding: 8px 15px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2), 0 2px 4px -1px rgba(16, 185, 129, 0.1); transition: all 0.2s ease-in-out; margin: 0 10px 0 10px; } .btn-solid:hover { background: #d62828; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3); transform: translateY(-2px); } .btn-solid:active { transform: translateY(1px); } .btn-gradient { background: linear-gradient(135deg, #d62828 0%, #d62828 100%); color: #ffffff; border: none; padding: 8px 15px; font-size: 16px; font-weight: 600; border-radius: 50px; /* Fully rounded capsule */ cursor: pointer; box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); transition: transform 0.2s, box-shadow 0.2s, background 0.5s; margin: 0 10px 0 10px; } .btn-gradient:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5); } .btn-gradient:active { transform: scale(0.98); } .btn-links { /*background: #d62828;*/ color: #d62828; border: none; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; margin:0 10px 0 10px; } .btn-solid:active { transform: translateY(1px); } :root { --social-red: #d62828; --social-dark-red: #d62828; } .floating-social-wrapper { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Hide checkbox hack element */ .floating-social-wrapper .social-toggle-checkbox { display: none; } /* Default Desktop: Hide mobile trigger button */ .mobile-toggle-btn { display: none; } /* Desktop Sidebar */ .floating-social-wrapper .floating-social-bar { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .floating-social-wrapper .floating-social-bar .social-btn { display: flex; flex-direction: row-reverse; align-items: center; height: 48px; width: 48px; background-color: var(--social-red); color: #ffffff; text-decoration: none; overflow: hidden; border-top-left-radius: 4px; border-bottom-left-radius: 4px; transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease; white-space: nowrap; } .floating-social-wrapper .floating-social-bar .social-btn i { width: 24px; height: 24px; min-width: 48px; display: flex; align-items: center; justify-content: center; } .floating-social-wrapper .floating-social-bar .social-btn .label { padding-left: 16px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity 0.2s ease 0.05s; } /* Desktop Hover & Focus */ .floating-social-wrapper .floating-social-bar .social-btn:hover, .floating-social-wrapper .floating-social-bar .social-btn:focus-visible { width: 170px; background-color: var(--social-dark-red); } .floating-social-wrapper .floating-social-bar .social-btn:hover .label, .floating-social-wrapper .floating-social-bar .social-btn:focus-visible .label { opacity: 1; } /* ========================================= Mobile View (768px and below) ========================================= */ @media screen and (max-width: 768px) { .floating-social-wrapper { top: 40%; } /* Show the mobile trigger button */ .floating-social-wrapper .mobile-toggle-btn { display: flex; align-items: center; justify-content: center; background-color: var(--social-red); color: #ffffff; border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.25); cursor: pointer; position: relative; z-index: 10001; user-select: none; } .floating-social-wrapper .mobile-toggle-btn .toggle-icon { width: 22px; height: 22px; } .floating-social-wrapper .mobile-toggle-btn .default-icon { width: 7px; height: 60px; } .floating-social-wrapper .mobile-toggle-btn .close-icon { display: none; } /* Hide the actual bar off-screen to the right by default */ .floating-social-wrapper .floating-social-bar { position: absolute; right: 0; top: 52px; /* Positioned directly below the toggle icon */ transform: translateX(120%); /* Fully hidden off-screen */ opacity: 0; pointer-events: none; box-shadow: -3px 4px 12px rgba(0, 0, 0, 0.15); } /* When checkbox is checked: Slide in the sidebar */ .floating-social-wrapper .social-toggle-checkbox:checked ~ .floating-social-bar { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Swap icons on toggle */ .floating-social-wrapper .social-toggle-checkbox:checked ~ .mobile-toggle-btn .default-icon { display: none; height: 60px; } .floating-social-wrapper .social-toggle-checkbox:checked ~ .mobile-toggle-btn .close-icon { display: block; padding: 7px; width: 25px; height: 31px; } /* In mobile, touch works better with fixed width showing both icon + label */ .floating-social-wrapper .social-btn { width: 150px; height: 44px; } .floating-social-wrapper .social-btn i { min-width: 44px; } .floating-social-wrapper .social-btn .label { opacity: 1; font-size: 13px; } } /* 1. Theme Tokens (Light Mode by default) */ :root { --table-bg: #ffffff; --table-border: #e5e7eb; --table-row-border: #f3f4f6; --table-text: #374151; --table-header-bg: #f9fafb; --table-header-text: #111827; --table-header-border: #e5e7eb; --table-zebra-bg: #fafbfc; --table-hover-bg: #f1f5f9; --table-shadow: rgba(0, 0, 0, 0.06); /* Badge colors */ --badge-active-bg: #def7ec; --badge-active-text: #03543f; --badge-pending-bg: #fef3c7; --badge-pending-text: #92400e; --badge-inactive-bg: #fde8e8; --badge-inactive-text: #9b1c1c; } /* 2. Dark Mode Overrides (Automatic system detection) */ @media (prefers-color-scheme: dark) { :root { --table-bg: #111827; --table-border: #374151; --table-row-border: #1f2937; --table-text: #d1d5db; --table-header-bg: #1f2937; --table-header-text: #f9fafb; --table-header-border: #374151; --table-zebra-bg: #161f30; --table-hover-bg: #1e293b; --table-shadow: rgba(0, 0, 0, 0.4); /* Badges adjusted for dark mode contrast */ --badge-active-bg: rgba(16, 185, 129, 0.15); --badge-active-text: #6ee7b7; --badge-pending-bg: rgba(245, 158, 11, 0.15); --badge-pending-text: #fcd34d; --badge-inactive-bg: rgba(239, 68, 68, 0.15); --badge-inactive-text: #fca5a5; } } /* 3. Manual toggle override (e.g. or ) */ [data-theme="dark"], .dark { --table-bg: #111827; --table-border: #374151; --table-row-border: #1f2937; --table-text: #d1d5db; --table-header-bg: #1f2937; --table-header-text: #f9fafb; --table-header-border: #374151; --table-zebra-bg: #161f30; --table-hover-bg: #1e293b; --table-shadow: rgba(0, 0, 0, 0.4); --badge-active-bg: rgba(16, 185, 129, 0.15); --badge-active-text: #6ee7b7; --badge-pending-bg: rgba(245, 158, 11, 0.15); --badge-pending-text: #fcd34d; --badge-inactive-bg: rgba(239, 68, 68, 0.15); --badge-inactive-text: #fca5a5; } /* 4. Table Component */ .table-container { width: 100%; margin: 0 auto; overflow-x: auto; background-color: var(--table-bg); border-radius: 8px; box-shadow: 0 4px 12px var(--table-shadow); border: 1px solid var(--table-border); transition: background-color 0.2s ease, border-color 0.2s ease; } .table-container .custom-table { width: 100%; border-collapse: collapse; text-align: left; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.925rem; color: var(--table-text); white-space: nowrap; } .table-container .custom-table thead { background-color: var(--table-header-bg); border-bottom: 2px solid var(--table-header-border); } .table-container .custom-table th { padding: 14px 18px; font-weight: 600; color: var(--table-header-text); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } .table-container .custom-table td { padding: 14px 18px; border-bottom: 1px solid var(--table-row-border); transition: background-color 0.15s ease; } .table-container .custom-table tbody tr:nth-child(even) { background-color: var(--table-zebra-bg); } .table-container .custom-table tbody tr:hover { background-color: var(--table-hover-bg); } .table-container .custom-table tbody tr:last-child td { border-bottom: none; } .table-container .custom-table .text-right { text-align: right; } /* Status Badges */ .table-container .custom-table .badge { display: inline-block; padding: 4px 10px; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; line-height: 1; position: inherit; } .table-container .custom-table .badge-active { background-color: var(--badge-active-bg); color: var(--badge-active-text); } .table-container .custom-table .badge-pending { background-color: var(--badge-pending-bg); color: var(--badge-pending-text); } .table-container .custom-table .badge-inactive { background-color: var(--badge-inactive-bg); color: var(--badge-inactive-text); } .spacer{ padding:10px; width:100%; } .colorRed { color: var(--primary); } /* Card Container */ .rules-card { width: 100%; margin: 1.5rem auto; padding: 1.25rem 1rem; background-color: #ffffff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: #1f2937; } /* Heading */ .rules-title { margin: 0 0 1rem 0; font-size: clamp(1.125rem, 2.5vw, 1.35rem); font-weight: 600; line-height: 1.35; color: #111827; letter-spacing: -0.01em; } /* List Formatting */ .rules-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; list-style-type: disc; } .rules-list li { font-size: clamp(0.9rem, 1.8vw, 0.975rem); line-height: 1.6; color: #374151; padding-left: 0.25rem; } /*========================================= ANIMATIONS =========================================*/ .fade-up{ opacity:0; transform:translateY(60px); transition:all .8s ease; } .fade-up.active{ opacity:1; transform:translateY(0); } .zoom{ transition:.4s; } .zoom:hover{ transform:scale(1.05); } .slide-left{ opacity:0; transform:translateX(-60px); transition:.8s; } .slide-left.active{ opacity:1; transform:none; } .slide-right{ opacity:0; transform:translateX(60px); transition:.8s; } .slide-right.active{ opacity:1; transform:none; } .rotate{ transition:.4s; } .rotate:hover{ transform:rotate(6deg); } .shadow-hover{ transition:.4s; } .shadow-hover:hover{ box-shadow:0 25px 60px rgba(0,0,0,.15); } /* ========================================================= ZONE TECH COURSES PAGE ========================================================= */ .zt-courses-container { width: min(1380px, calc(100% - 80px)); margin: 0 auto; } /* ========================================================= HERO SECTION ========================================================= */ .zt-courses-hero { position: relative; min-height: 650px; display: flex; align-items: center; padding: 85px 0 95px; overflow: hidden; background: radial-gradient( circle at 7% 20%, rgba(214, 40, 40, .11), transparent 27% ), radial-gradient( circle at 93% 88%, rgba(249, 178, 51, .16), transparent 29% ), linear-gradient( 135deg, #fffafa 0%, #ffffff 48%, #fff9f1 100% ); } /* ========================================================= DECORATIVE SHAPES ========================================================= */ .zt-courses-hero-shape { position: absolute; border-radius: 50%; pointer-events: none; } .zt-courses-shape-one { width: 410px; height: 410px; left: -260px; top: -220px; background: rgba(214, 40, 40, .055); } .zt-courses-shape-two { width: 500px; height: 500px; right: -290px; bottom: -330px; background: rgba(249, 178, 51, .09); } /* ========================================================= HERO GRID ========================================================= */ .zt-courses-hero .zt-courses-container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .82fr); align-items: center; gap: 90px; } /* ========================================================= LEFT CONTENT ========================================================= */ .zt-courses-hero-content { min-width: 0; } .zt-courses-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 8px 15px; border: 1px solid rgba(214, 40, 40, .18); border-radius: 50px; background: #fff1f1; color: #D62828; font-size: 13px; font-weight: 700; } .zt-courses-hero-content h1 { max-width: 760px; margin: 0; color: #181818; font-family: Poppins, sans-serif; font-size: clamp( 48px, 5vw, 72px ); font-weight: 800; line-height: 1.05; letter-spacing: -3px; } .zt-courses-hero-content h1 span { display: block; margin-top: 8px; background: linear-gradient( 90deg, #D62828, #F05A28, #F9B233 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .zt-courses-hero-description { max-width: 680px; margin: 25px 0 0; color: #666; font-size: 17px; line-height: 1.8; } /* ========================================================= HERO BUTTONS ========================================================= */ .zt-courses-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 32px; } .zt-courses-primary-btn, .zt-courses-secondary-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 25px; border-radius: 50px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; } .zt-courses-primary-btn { background: linear-gradient( 135deg, #D62828, #F05A28 ); color: #fff; box-shadow: 0 14px 30px rgba(214, 40, 40, .22); } .zt-courses-primary-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(214, 40, 40, .3); } .zt-courses-primary-btn i { transition: transform .3s ease; } .zt-courses-primary-btn:hover i { transform: translateX(5px); } .zt-courses-secondary-btn { border: 1px solid rgba(214, 40, 40, .3); background: #fff; color: #D62828; } .zt-courses-secondary-btn:hover { transform: translateY(-3px); background: #fff5f5; box-shadow: 0 14px 30px rgba(214, 40, 40, .09); } /* ========================================================= HERO STATS ========================================================= */ .zt-courses-hero-stats { display: flex; align-items: center; gap: 24px; margin-top: 35px; } .zt-courses-stat { display: flex; flex-direction: column; gap: 4px; } .zt-courses-stat strong { color: #D62828; font-family: Poppins, sans-serif; font-size: 21px; } .zt-courses-stat span { color: #777; font-size: 11px; } .zt-courses-stat-divider { width: 1px; height: 38px; background: #dedede; } /* ========================================================= RIGHT VISUAL ========================================================= */ .zt-courses-hero-visual { position: relative; width: 100%; max-width: 520px; justify-self: end; } .zt-courses-visual-card { position: relative; padding: 25px; border: 1px solid rgba(214, 40, 40, .12); border-radius: 28px; background: rgba(255, 255, 255, .94); box-shadow: 0 30px 75px rgba(0, 0, 0, .11); overflow: hidden; } .zt-courses-visual-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -80px; top: -90px; border-radius: 50%; background: rgba(249, 178, 51, .14); } /* ========================================================= VISUAL TOP ========================================================= */ .zt-courses-visual-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; } .zt-courses-visual-icon { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: linear-gradient( 135deg, #D62828, #F05A28 ); color: #fff; } .zt-courses-visual-top > span { color: #222; font-size: 12px; font-weight: 800; } .zt-courses-popular { margin-left: auto; padding: 6px 10px; border-radius: 50px; background: #fff1f1; color: #D62828; font-size: 9px; font-weight: 800; letter-spacing: .8px; } /* ========================================================= VISUAL HEADING ========================================================= */ .zt-courses-visual-heading { position: relative; z-index: 2; margin-top: 30px; padding: 31px 28px; border-radius: 22px; background: linear-gradient( 135deg, #ef2e2e, #f45129, #ff7918 ); color: #fff; } .zt-courses-visual-heading small { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; } .zt-courses-visual-heading h2 { margin: 9px 0 8px; font-family: Poppins, sans-serif; font-size: 30px; line-height: 1.25; } .zt-courses-visual-heading p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 12px; line-height: 1.7; } /* ========================================================= VISUAL OPTIONS ========================================================= */ .zt-courses-visual-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } .zt-courses-visual-option { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid #eeeeee; border-radius: 14px; background: #fff; } .zt-courses-visual-option > span { width: 35px; height: 35px; min-width: 35px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff1f1; color: #D62828; } .zt-courses-visual-option strong { display: block; color: #222; font-size: 10px; } .zt-courses-visual-option small { display: block; margin-top: 2px; color: #888; font-size: 8px; } /* ========================================================= VISUAL BOTTOM ========================================================= */ .zt-courses-visual-bottom { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border: 1px solid #eeeeee; border-radius: 15px; background: #fafafa; } .zt-courses-visual-bottom > div { padding: 13px 10px; text-align: center; } .zt-courses-visual-bottom > div:not(:last-child) { border-right: 1px solid #e8e8e8; } .zt-courses-visual-bottom strong { display: block; color: #D62828; font-family: Poppins, sans-serif; font-size: 17px; } .zt-courses-visual-bottom span { display: block; margin-top: 2px; color: #888; font-size: 9px; } /* ========================================================= FLOATING BADGE ========================================================= */ .zt-courses-floating-badge { position: absolute; left: -55px; bottom: -30px; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid #eeeeee; border-radius: 16px; background: #fff; box-shadow: 0 16px 38px rgba(0, 0, 0, .12); } .zt-courses-floating-badge > span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff1f1; color: #D62828; } .zt-courses-floating-badge strong { display: block; color: #222; font-size: 11px; } .zt-courses-floating-badge small { color: #888; font-size: 9px; } /* ========================================= COURSES CONTENT SECTION ========================================= */ .courses-content-section { position: relative; padding: 90px 0 100px; background: radial-gradient(circle at 4% 12%, rgba(230, 35, 35, 0.07), transparent 260px), radial-gradient(circle at 96% 85%, rgba(255, 165, 0, 0.08), transparent 300px), #ffffff; } /* CONTAINER */ .courses-page-container { width: calc(100% - 130px); max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 55px; align-items: start; } /* ========================================= QUICK NAVIGATION ========================================= */ .courses-quick-nav { position: sticky; top: 120px; background: #ffffff; border: 1px solid rgba(225, 35, 35, 0.1); border-radius: 24px; padding: 25px 18px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.07); } /* HEADING */ .quick-nav-heading { display: flex; align-items: center; gap: 13px; padding: 0 8px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .quick-nav-icon { width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 15px; color: #ffffff; font-size: 20px; background: linear-gradient( 135deg, #e52525, #ff5a1f ); box-shadow: 0 10px 25px rgba(229, 37, 37, 0.22); } .quick-nav-heading span:not(.quick-nav-icon) { display: block; color: #e52525; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; margin-bottom: 3px; } .quick-nav-heading h2 { margin: 0; color: #171717; font-size: 20px; line-height: 1.25; } /* LIST */ .quick-nav-list { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; } .quick-nav-item { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 14px; color: #333333; text-decoration: none; font-size: 14px; font-weight: 700; border-radius: 12px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .quick-nav-item i { color: #e52525; font-size: 12px; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.3s ease; } .quick-nav-item:hover, .quick-nav-item.active { color: #e52525; background: #fff3f2; transform: translateX(4px); } .quick-nav-item:hover i, .quick-nav-item.active i { opacity: 1; transform: translateX(0); } /* ========================================= MAIN CONTENT ========================================= */ .courses-main-content { min-width: 0; } /* HEADING */ .courses-content-heading { max-width: 850px; margin-bottom: 38px; } .section-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; margin-bottom: 16px; color: #e52525; background: #fff1ef; border: 1px solid rgba(229, 37, 37, 0.16); border-radius: 50px; font-size: 12px; font-weight: 800; letter-spacing: 0.6px; } .courses-content-heading h2 { margin: 0 0 16px; color: #171717; font-size: clamp(34px, 3vw, 52px); line-height: 1.12; letter-spacing: -1.5px; } .courses-content-heading h2 span { color: #e52525; } .courses-content-heading p { max-width: 760px; margin: 0; color: #666666; font-size: 17px; line-height: 1.8; } /* ========================================= INTRO CARD ========================================= */ .course-intro-card { display: flex; gap: 22px; padding: 30px; margin-bottom: 28px; background: linear-gradient( 135deg, #ffffff, #fff8f6 ); border: 1px solid rgba(229, 37, 37, 0.1); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.055); } .course-intro-icon { width: 65px; height: 65px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 25px; border-radius: 18px; background: linear-gradient( 135deg, #e52525, #ff641d ); } .course-intro-text h3 { margin: 2px 0 10px; color: #1c1c1c; font-size: 23px; } .course-intro-text p { margin: 0 0 10px; color: #666666; font-size: 15px; line-height: 1.75; } .course-intro-text p:last-child { margin-bottom: 0; } /* ========================================= FEATURE CARDS ========================================= */ .course-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 45px; } .course-feature-card { min-height: 170px; display: flex; gap: 18px; padding: 25px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 20px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .course-feature-card:hover { transform: translateY(-5px); border-color: rgba(229, 37, 37, 0.2); box-shadow: 0 22px 55px rgba(229, 37, 37, 0.1); } .course-feature-icon { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #e52525; font-size: 20px; background: #fff0ef; border-radius: 15px; } .course-feature-card h3 { margin: 3px 0 8px; color: #1c1c1c; font-size: 18px; } .course-feature-card p { margin: 0; color: #707070; font-size: 14px; line-height: 1.7; } /* ========================================= COURSE STREAM SECTION ========================================= */ .course-stream-section { padding: 34px; background: linear-gradient( 135deg, #fff6f4, #fffaf4 ); border: 1px solid rgba(229, 37, 37, 0.1); border-radius: 26px; } .course-stream-heading { margin-bottom: 25px; } .course-stream-heading span { display: block; margin-bottom: 7px; color: #e52525; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; } .course-stream-heading h3 { margin: 0; color: #171717; font-size: 28px; } /* STREAM GRID */ .course-stream-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .course-stream-card { position: relative; min-height: 230px; display: flex; flex-direction: column; padding: 24px; color: inherit; text-decoration: none; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 18px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .course-stream-card:hover { transform: translateY(-5px); border-color: rgba(229, 37, 37, 0.22); box-shadow: 0 18px 45px rgba(229, 37, 37, 0.09); } .stream-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #e52525; background: #fff0ee; border-radius: 14px; font-size: 20px; } .course-stream-card h4 { margin: 0 0 9px; color: #1b1b1b; font-size: 18px; } .course-stream-card p { margin: 0; color: #6e6e6e; font-size: 14px; line-height: 1.65; } .stream-arrow { position: absolute; right: 20px; bottom: 20px; color: #e52525; transition: transform 0.3s ease; } .course-stream-card:hover .stream-arrow { transform: translateX(5px); } /* ========================================= COMPLETE COURSES CONTENT ========================================= */ .complete-courses-content { width: 100%; } /* COMMON TEXT BLOCK */ .course-text-block { margin-bottom: 28px; padding: 30px; background: #ffffff; border: 1px solid rgba(229, 37, 37, 0.09); border-radius: 20px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.045); } .course-text-block h3 { margin: 0 0 17px; color: #1c1c1c; font-size: 21px; line-height: 1.4; } .course-text-block p { margin: 0 0 13px; color: #555555; font-size: 15px; line-height: 1.8; } .course-text-block p:last-child { margin-bottom: 0; } /* FEATURE LIST */ .courses-feature-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; } .courses-feature-list li { position: relative; padding: 13px 15px 13px 42px; color: #555555; font-size: 14px; line-height: 1.55; background: #fff8f7; border-radius: 12px; } .courses-feature-list li::before { content: "\f00c"; position: absolute; left: 15px; top: 15px; color: #e52525; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; } /* ENGINEERING STREAM TEXT */ .engineering-stream-text { margin-top: 22px; padding: 22px; background: linear-gradient( 135deg, #fff5f3, #fffaf4 ); border-left: 4px solid #e52525; border-radius: 0 15px 15px 0; } .engineering-stream-text p { margin-bottom: 10px; } .engineering-stream-text strong { color: #e52525; } /* IMPORTANT HEADING */ .important-course-heading { background: linear-gradient( 135deg, #fff4f2, #fffaf4 ); border-left: 5px solid #e52525; } .important-course-heading h3 { margin: 0; font-size: 19px; line-height: 1.65; } /* ========================================= DETAILED FEATURES ========================================= */ .course-detailed-feature { position: relative; display: flex; gap: 22px; padding: 25px 28px; margin-bottom: 16px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.065); border-radius: 18px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .course-detailed-feature:hover { transform: translateY(-3px); border-color: rgba(229, 37, 37, 0.18); box-shadow: 0 18px 45px rgba(229, 37, 37, 0.08); } .detailed-feature-number { width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient( 135deg, #e52525, #ff5b1f ); border-radius: 14px; font-size: 14px; font-weight: 800; } .course-detailed-feature h4 { margin: 2px 0 8px; color: #202020; font-size: 17px; } .course-detailed-feature p { margin: 0; color: #626262; font-size: 14px; line-height: 1.75; } /* ========================================= COURSES FAQ SECTION ========================================= */ .courses-faq-section { padding: 75px 0 90px; background: linear-gradient( 180deg, #ffffff 0%, #fffafa 100% ); } .courses-faq-container { width: min(1480px, calc(100% - 80px)); margin: 0 auto; } /* ========================================= FAQ HEADING ========================================= */ .courses-faq-heading { max-width: 680px; margin-bottom: 38px; } .courses-faq-badge { display: inline-flex; margin-bottom: 10px; color: #e52525; font-size: 13px; font-weight: 800; letter-spacing: 1.7px; } .courses-faq-heading h2 { margin: 0 0 12px; color: #1c1c1c; font-size: clamp(30px, 3vw, 44px); line-height: 1.2; } .courses-faq-heading p { margin: 0; color: #747474; font-size: 15px; line-height: 1.7; } /* ========================================= FAQ LIST ========================================= */ .courses-faq-list { width: 100%; border-top: 1px solid rgba(229, 37, 37, 0.13); } .courses-faq-item { overflow: hidden; background: #ffffff; border-bottom: 1px solid rgba(229, 37, 37, 0.13); transition: background 0.3s ease, box-shadow 0.3s ease; } .courses-faq-item:first-child { border-radius: 18px 18px 0 0; } .courses-faq-item:last-child { border-radius: 0 0 18px 18px; } .courses-faq-item.active { position: relative; z-index: 2; background: linear-gradient( 135deg, #fff7f6, #fffdf9 ); box-shadow: 0 14px 40px rgba(229, 37, 37, 0.07); } /* ========================================= FAQ QUESTION ========================================= */ .courses-faq-question { width: 100%; min-height: 82px; padding: 18px 22px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; gap: 17px; align-items: center; border: 0; outline: none; background: transparent; text-align: left; cursor: pointer; } .courses-faq-number { color: rgba(229, 37, 37, 0.42); font-size: 14px; font-weight: 800; letter-spacing: 1px; } .courses-faq-question-text { color: #282828; font-size: 16px; font-weight: 700; line-height: 1.55; transition: color 0.3s ease; } .courses-faq-item.active .courses-faq-question-text, .courses-faq-question:hover .courses-faq-question-text { color: #e52525; } /* FAQ ICON */ .courses-faq-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; justify-self: end; color: #e52525; background: #fff1ef; border-radius: 50%; font-size: 14px; transition: transform 0.35s ease, color 0.35s ease, background 0.35s ease; } .courses-faq-item.active .courses-faq-icon { color: #ffffff; background: linear-gradient( 135deg, #e52525, #ff5a1f ); transform: none; } /* ========================================= FAQ ANSWER ========================================= */ .courses-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; } .courses-faq-answer-inner { padding: 0 90px 28px 91px; } .courses-faq-answer-inner p { max-width: 1050px; margin: 0; color: #666666; font-size: 15px; line-height: 1.8; } /*==================================== TEST SERIES ====================================*/ .test-series-section{ padding:120px 0; background:#fafafa; } /* heading spacing */ .test-series-section .section-heading{ margin-bottom:50px; } /*==================================== SEARCH ====================================*/ .series-search{ width:100%; max-width:600px; margin:0 auto 45px; position:relative; } .series-search input{ width:100%; height:65px; border:none; border-radius:60px; background:white; padding-left:65px; font-size:17px; box-shadow:0 15px 40px rgba(0,0,0,.08); transition:.35s; } .series-search input:focus{ outline:none; box-shadow:0 20px 50px rgba(214,40,40,.18); } .series-search i{ position:absolute; left:25px; top:23px; color:#D62828; font-size:20px; } /*==================================== FILTERS ====================================*/ .series-filter{ display:flex; justify-content:center; flex-wrap:wrap; gap:15px; margin-bottom:60px; } .series-filter button { border: none; background: white; padding: 12px 15px 12px 15px; font-size: 13px; border-radius: 10px; cursor: pointer; font-weight: 600; transition: .35s; box-shadow: 0 10px 30px rgba(0,0,0,.05); } .series-filter button:hover{ background:#D62828; color:white; } .series-filter .active{ background:#D62828; color:white; } /*==================================== GRID ====================================*/ .series-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:35px; } /*==================================== CARD ====================================*/ .series-card{ position:relative; background:white; border-radius:25px; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,.08); transition:.4s; } .series-card:hover{ transform:translateY(-12px); box-shadow:0 30px 60px rgba(214,40,40,.15); } .new-badge{ position:absolute; top:18px; right:18px; background:#D62828; color:white; padding:8px 18px; border-radius:50px; font-size:13px; font-weight:700; z-index:10; } .series-image{ overflow:hidden; } .series-image img{ width:100%; display:block; transition:.5s; } .series-card:hover img{ transform:scale(1.08); } .series-body{ padding:28px; } .series-body h3{ font-size:18px; margin-bottom:18px; line-height:1.4; } .tests{ color:#666; margin-bottom:20px; } .tests i{ color:#D62828; margin-right:8px; } .price-box{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .price{ color:#D62828; font-size:16px; font-weight:700; } .old{ text-decoration:line-through; color:#999; } .discount { color: #18a957; font-weight: 700; font-size: 15px; } .card-buttons{ display:flex; gap:15px; } .buy-btn { flex: 1; text-align: center; background: #D62828; color: white; padding: 10px; border-radius: 50px; transition: .35s; font-size: 14px; } .buy-btn:hover{ background:#111; } .view-btn{ flex:1; text-align:center; padding:10px; border:2px solid #D62828; color:#D62828; border-radius:50px; transition:.35s; font-size:14px; } .view-btn:hover{ background:#D62828; color:white; } /*==================================== WHY TEST SERIES ====================================*/ .why-test-series{ padding:120px 0; background:#fff; } /* LEFT */ .why-content h3{ font-size:42px; margin-bottom:25px; line-height:1.3; } .why-content p{ color:#666; line-height:2; margin-bottom:22px; } .why-content .btn{ margin-top:15px; } /* RIGHT */ .feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; } .feature-card{ padding:35px; border-radius:25px; background:#fff; border:1px solid #f1f1f1; box-shadow:0 20px 45px rgba(0,0,0,.05); transition:.35s; } .feature-card:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(214,40,40,.12); } .feature-card i{ width:70px; height:70px; border-radius:20px; display:flex; justify-content:center; align-items:center; font-size:28px; color:#D62828; background:#fff4f4; margin-bottom:20px; } .feature-card h4{ font-size:22px; margin-bottom:15px; } .feature-card p{ color:#666; line-height:1.8; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 30px; background:linear-gradient(135deg,#D62828,#F05A28); color:#fff; border-radius:50px; font-size:15px; font-weight:600; text-decoration:none; transition:.35s ease; box-shadow:0 15px 35px rgba(214,40,40,.25); } .btn:hover{ transform:translateY(-4px); box-shadow:0 20px 45px rgba(214,40,40,.35); } .btn:active{ transform:translateY(-1px); } /*==================================== TEST SERIES FEATURES ====================================*/ .ts-features{ padding:110px 0; background:#fff; } /*==========================*/ .ts-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; } /*==========================*/ .ts-feature-card{ position:relative; padding:35px; border-radius:24px; background:#fff; border:1px solid #f1f1f1; box-shadow:0 15px 40px rgba(0,0,0,.06); transition:.4s; overflow:hidden; } .ts-feature-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient( 90deg, #D62828, #F9B233); transform:scaleX(0); transform-origin:left; transition:.4s; } .ts-feature-card:hover::before{ transform:scaleX(1); } .ts-feature-card:hover{ transform:translateY(-12px); box-shadow:0 25px 60px rgba(214,40,40,.16); } /*==========================*/ .ts-icon{ width:72px; height:72px; display:flex; justify-content:center; align-items:center; border-radius:20px; background:linear-gradient( 135deg, #D62828, #F05A28); color:#fff; font-size:30px; margin-bottom:24px; box-shadow:0 12px 28px rgba(214,40,40,.22); } .ts-feature-card h3{ font-size:28px; margin-bottom:18px; font-family:Poppins; } .ts-feature-card p{ color:#666; line-height:1.9; } /*==================================== TEST SERIES HIGHLIGHTS ====================================*/ .ts-highlights{ padding:110px 0; background:#fafafa; } .ts-highlight-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; margin-top:60px; } .ts-highlight-card{ display:flex; align-items:flex-start; gap:22px; background:#fff; padding:28px; border-radius:22px; border:1px solid #efefef; transition:.35s; position:relative; overflow:hidden; box-shadow:0 12px 35px rgba(0,0,0,.05); } .ts-highlight-card::before{ content:""; position:absolute; left:0; top:0; width:5px; height:100%; background:linear-gradient( #D62828, #F9B233); transform:scaleY(0); transition:.35s; transform-origin:top; } .ts-highlight-card:hover::before{ transform:scaleY(1); } .ts-highlight-card:hover{ transform:translateY(-8px); box-shadow:0 20px 45px rgba(214,40,40,.12); } .highlight-icon{ width:70px; height:70px; min-width:70px; border-radius:18px; display:flex; justify-content:center; align-items:center; background:linear-gradient(135deg,#D62828,#F05A28); color:#fff; font-size:28px; box-shadow:0 12px 30px rgba(214,40,40,.25); } .highlight-content{ flex:1; } .highlight-content h3{ font-size:24px; margin-bottom:12px; font-family:Poppins; } .highlight-content p{ color:#666; line-height:1.8; margin:0; } /*========================================= TEST SERIES QUESTIONS & ANSWERS =========================================*/ .ts-guide-section{ position:relative; padding:95px 0; background: linear-gradient( 180deg, #ffffff 0%, #fffafa 50%, #ffffff 100% ); overflow:hidden; } /*========================================= BACKGROUND DECORATION =========================================*/ .ts-guide-glow{ position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; } .ts-guide-glow-left{ width:300px; height:300px; top:120px; left:-170px; background:rgba(214,40,40,.10); } .ts-guide-glow-right{ width:280px; height:280px; right:-150px; bottom:100px; background:rgba(249,178,51,.11); } .ts-guide-section .container{ position:relative; z-index:2; } /*========================================= QUESTIONS GRID =========================================*/ .ts-guide-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:55px; } /*========================================= QUESTION CARD =========================================*/ .ts-guide-item{ position:relative; display:flex; align-items:flex-start; gap:18px; padding:24px; background:rgba(255,255,255,.88); border:1px solid #eeeeee; border-radius:18px; box-shadow: 0 10px 30px rgba(0,0,0,.045); overflow:hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } /*========================================= CARD BOTTOM ACCENT =========================================*/ .ts-guide-item::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background: linear-gradient( 90deg, #D62828, #F9B233 ); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .ts-guide-item:hover{ transform:translateY(-5px); border-color:rgba(214,40,40,.20); box-shadow: 0 18px 38px rgba(214,40,40,.09); } .ts-guide-item:hover::after{ transform:scaleX(1); } /*========================================= QUESTION NUMBER =========================================*/ .ts-guide-number{ width:46px; height:46px; min-width:46px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#fff1f1; color:#D62828; font-size:13px; font-weight:800; letter-spacing:.5px; transition:.35s; } .ts-guide-item:hover .ts-guide-number{ color:#ffffff; background: linear-gradient( 135deg, #D62828, #F05A28 ); transform:rotate(-5deg); } /*========================================= QUESTION CONTENT =========================================*/ .ts-guide-content{ min-width:0; } .ts-guide-content h3{ margin:0 0 9px; color:#1c1c1c; font-family:Poppins,sans-serif; font-size:17px; line-height:1.45; font-weight:700; } .ts-guide-content p{ margin:0; color:#666; font-size:14px; line-height:1.75; white-space:pre-line; } /*========================================= FULL WIDTH QUESTION =========================================*/ .ts-guide-wide{ grid-column:1 / -1; } /*========================================= BOTTOM CTA =========================================*/ .ts-guide-cta{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; margin-top:35px; padding:25px 28px; border-radius:20px; background: linear-gradient( 110deg, #fff2f2 0%, #ffffff 55%, #fff8e9 100% ); border:1px solid rgba(214,40,40,.12); box-shadow: 0 14px 40px rgba(0,0,0,.05); overflow:hidden; } .ts-guide-cta::before{ content:""; position:absolute; top:0; left:0; width:5px; height:100%; background: linear-gradient( #D62828, #F9B233 ); } /*========================================= CTA ICON =========================================*/ .ts-guide-cta-icon{ width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:16px; background: linear-gradient( 135deg, #D62828, #F05A28 ); color:#ffffff; font-size:23px; box-shadow: 0 10px 25px rgba(214,40,40,.22); } /*========================================= CTA CONTENT =========================================*/ .ts-guide-cta-content span{ display:block; margin-bottom:3px; color:#D62828; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; } .ts-guide-cta-content h3{ margin:0 0 4px; font-family:Poppins,sans-serif; font-size:21px; color:#1b1b1b; } .ts-guide-cta-content p{ margin:0; color:#666; font-size:14px; line-height:1.6; } /*========================================= CTA BUTTON =========================================*/ .ts-guide-cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 21px; border-radius:50px; background:#D62828; color:#ffffff; text-decoration:none; white-space:nowrap; font-size:14px; font-weight:700; transition:.35s; } .ts-guide-cta-btn i{ transition:transform .35s; } .ts-guide-cta-btn:hover{ color:#ffffff; background:#111111; transform:translateY(-2px); } .ts-guide-cta-btn:hover i{ transform:translateX(5px); } /*========================================= TEST SERIES FAQ SECTION =========================================*/ .ts-faq-section{ position:relative; padding:90px 0; background: linear-gradient( 180deg, #ffffff 0%, #fffafa 52%, #ffffff 100% ); overflow:hidden; } /*========================================= BACKGROUND GLOW =========================================*/ .ts-faq-glow{ position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; } .ts-faq-glow-left{ width:320px; height:320px; left:-190px; top:100px; background:rgba(214,40,40,.11); } .ts-faq-glow-right{ width:280px; height:280px; right:-150px; bottom:50px; background:rgba(249,178,51,.12); } .ts-faq-section .container{ position:relative; z-index:2; } /*========================================= FAQ GRID =========================================*/ .ts-faq-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; margin-top:50px; } /*========================================= FAQ CARD =========================================*/ .ts-faq-item{ position:relative; background:rgba(255,255,255,.90); border:1px solid #eeeeee; border-radius:16px; box-shadow: 0 8px 28px rgba(0,0,0,.045); overflow:hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .ts-faq-item:hover{ transform:translateY(-3px); border-color:rgba(214,40,40,.22); box-shadow: 0 14px 35px rgba(214,40,40,.08); } /*========================================= QUESTION BUTTON =========================================*/ .ts-faq-question{ width:100%; min-height:78px; display:grid; grid-template-columns:44px 1fr 38px; align-items:center; gap:15px; padding:15px 17px; border:0; outline:0; background:transparent; text-align:left; cursor:pointer; font-family:inherit; } /*========================================= NUMBER =========================================*/ .ts-faq-number{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#fff1f1; color:#D62828; font-size:12px; font-weight:800; transition:.3s ease; } /*========================================= TITLE =========================================*/ .ts-faq-title{ color:#202020; font-family:Poppins,sans-serif; font-size:15px; line-height:1.5; font-weight:500; } /*========================================= PLUS BUTTON =========================================*/ .ts-faq-toggle{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; justify-self:end; border-radius:50%; background:#fff3f3; color:#D62828; font-size:13px; transition: background .3s ease, color .3s ease, transform .35s ease; } /*========================================= HOVER =========================================*/ .ts-faq-item:hover .ts-faq-number{ color:#ffffff; background: linear-gradient( 135deg, #D62828, #F05A28 ); } .ts-faq-item:hover .ts-faq-toggle{ color:#ffffff; background:#D62828; } /*========================================= ANSWER =========================================*/ .ts-faq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease; } .ts-faq-answer-inner{ overflow:hidden; color:#666; font-size:14px; line-height:1.75; padding: 0 18px 0 76px; transition: padding .4s ease; } /*========================================= ACTIVE FAQ =========================================*/ .ts-faq-item.active{ border-color:rgba(214,40,40,.24); box-shadow: 0 15px 38px rgba(214,40,40,.09); } .ts-faq-item.active .ts-faq-answer{ grid-template-rows:1fr; } .ts-faq-item.active .ts-faq-answer-inner{ padding: 0 18px 20px 76px; } .ts-faq-item.active .ts-faq-number{ color:#ffffff; background: linear-gradient( 135deg, #D62828, #F05A28 ); } .ts-faq-item.active .ts-faq-toggle{ color:#ffffff; background: linear-gradient( 135deg, #D62828, #F05A28 ); transform:none; } /*========================================= LAST FAQ CARD =========================================*/ .ts-faq-last{ grid-column:1 / -1; width:calc(50% - 8px); justify-self:center; } /* rrb-sse-je-online-test-series */ /* ========================================================= RRB JE TEST SERIES DETAIL PAGE HERO SECTION ========================================================= */ .rrb-detail-hero { position: relative; overflow: hidden; padding: 85px 0; background: radial-gradient(circle at 8% 15%, rgba(229, 57, 53, 0.09), transparent 27%), radial-gradient(circle at 92% 85%, rgba(255, 152, 0, 0.11), transparent 28%), linear-gradient(135deg, #fffafa 0%, #ffffff 50%, #fffaf4 100%); } /* MAIN CONTAINER */ .rrb-detail-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); align-items: center; gap: 75px; position: relative; z-index: 2; } /* ========================================================= DECORATIVE BACKGROUND GLOWS ========================================================= */ .rrb-detail-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); } .rrb-detail-glow-one { width: 340px; height: 340px; left: -180px; top: -160px; background: rgba(229, 57, 53, 0.06); } .rrb-detail-glow-two { width: 420px; height: 420px; right: -230px; bottom: -250px; background: rgba(255, 152, 0, 0.08); } /* ========================================================= LEFT CONTENT ========================================================= */ .rrb-detail-hero-content { min-width: 0; } /* EYEBROW */ .rrb-detail-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; padding: 8px 14px; border: 1px solid rgba(229, 57, 53, 0.18); border-radius: 50px; background: #fff1f0; color: #d92723; font-size: 13px; font-weight: 700; letter-spacing: 0.25px; } .rrb-detail-eyebrow i { color: #f4512c; } /* MAIN HEADING */ .rrb-detail-title { max-width: 680px; margin: 0; color: #171717; font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.03; letter-spacing: -2.7px; } .rrb-detail-title span { display: block; margin-top: 8px; background: linear-gradient(90deg, #d91f26, #f4512c, #ff9800); -webkit-background-clip: text; background-clip: text; color: transparent; } /* DESCRIPTION */ .rrb-detail-description { max-width: 660px; margin: 23px 0 0; color: #666; font-size: 16px; font-weight: 400; line-height: 1.75; } /* ========================================================= COURSE STATS ========================================================= */ .rrb-detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; } .rrb-detail-stat { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px; background: rgba(255, 255, 255, 0.82); border: 1px solid #eeeeee; border-radius: 13px; box-shadow: 0 8px 28px rgba(20, 20, 20, 0.045); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .rrb-detail-stat:hover { transform: translateY(-3px); border-color: rgba(229, 57, 53, 0.22); box-shadow: 0 12px 30px rgba(229, 57, 53, 0.08); } .rrb-detail-stat-icon { flex: 0 0 39px; width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(135deg, #fff0ef, #fff7ec); color: #e53935; font-size: 15px; } .rrb-detail-stat div { min-width: 0; } .rrb-detail-stat small { display: block; margin-bottom: 3px; color: #8b8b8b; font-size: 11px; font-weight: 600; } .rrb-detail-stat strong { display: block; overflow: hidden; color: #202020; font-size: 13px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= PURCHASE AREA ========================================================= */ .rrb-detail-purchase { display: flex; align-items: center; gap: 28px; margin-top: 31px; } .rrb-detail-price-label { display: block; margin-bottom: 5px; color: #8a8a8a; font-size: 11px; font-weight: 600; } .rrb-detail-price-row { display: flex; align-items: center; gap: 10px; } .rrb-detail-price-row strong { color: #1b1b1b; font-size: 31px; font-weight: 800; line-height: 1; } .rrb-detail-price-row del { color: #999; font-size: 14px; } .rrb-detail-price-row span { padding: 5px 8px; border-radius: 6px; background: #fff0e6; color: #ed4d24; font-size: 10px; font-weight: 800; } /* BUY BUTTON */ .rrb-detail-buy-btn { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border-radius: 10px; background: linear-gradient(135deg, #d92127, #ef3e2f); box-shadow: 0 10px 24px rgba(217, 33, 39, 0.2); color: #fff; text-decoration: none; font-size: 13px; font-weight: 750; transition: transform 0.25s ease, box-shadow 0.25s ease; } .rrb-detail-buy-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(217, 33, 39, 0.28); } .rrb-detail-buy-btn i { font-size: 11px; transition: transform 0.25s ease; } .rrb-detail-buy-btn:hover i { transform: translateX(4px); } /* ========================================================= SMALL BENEFITS ========================================================= */ .rrb-detail-mini-benefits { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 25px; } .rrb-detail-mini-benefits span { display: inline-flex; align-items: center; gap: 7px; color: #666; font-size: 11px; font-weight: 600; } .rrb-detail-mini-benefits i { color: #e53935; font-size: 11px; } /* ========================================================= RIGHT VISUAL AREA ========================================================= */ .rrb-detail-visual { position: relative; width: 100%; max-width: 470px; margin-left: auto; } /* MAIN CARD */ .rrb-detail-visual-card { position: relative; overflow: hidden; padding: 21px; border: 1px solid rgba(229, 57, 53, 0.12); border-radius: 25px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 246, 0.98)); box-shadow: 0 28px 65px rgba(25, 25, 25, 0.11), 0 8px 20px rgba(229, 57, 53, 0.05); } .rrb-detail-visual-card::before { content: ""; position: absolute; width: 170px; height: 170px; top: -95px; right: -80px; border-radius: 50%; background: rgba(255, 152, 0, 0.12); } /* TOP */ .rrb-detail-visual-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; } .rrb-detail-visual-top > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #282828; font-size: 12px; font-weight: 750; } .rrb-detail-visual-top > span:first-child i { color: #e53935; } .rrb-detail-popular { padding: 6px 10px; border-radius: 50px; background: #fff0ef; color: #e53935; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; } /* ========================================================= EXAM GRAPHIC ========================================================= */ .rrb-detail-exam-graphic { min-height: 235px; display: flex; align-items: center; justify-content: center; gap: 35px; margin-top: 17px; padding: 25px; border-radius: 18px; background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(135deg, #e52f2d 0%, #f04c2c 50%, #ff920f 100%); } /* STREAMS */ .rrb-detail-streams { display: flex; flex-direction: column; gap: 9px; } .rrb-detail-streams span { width: 45px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 255, 255, 0.96); color: #d82926; font-size: 12px; font-weight: 800; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); } /* CENTER */ .rrb-detail-exam-center { display: flex; flex-direction: column; align-items: center; text-align: center; } .rrb-detail-rail-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; border-radius: 18px; background: rgba(255, 255, 255, 0.96); color: #e33a2e; font-size: 27px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .rrb-detail-exam-center strong { color: #fff; font-size: 35px; font-weight: 850; line-height: 1; letter-spacing: -1.5px; } .rrb-detail-exam-center small { margin-top: 9px; color: rgba(255, 255, 255, 0.88); font-size: 10px; font-weight: 750; letter-spacing: 1.2px; } /* ========================================================= VISUAL FOOTER ========================================================= */ .rrb-detail-visual-footer { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 17px; border: 1px solid #eeeeee; border-radius: 14px; background: #fff; } .rrb-detail-visual-footer div { position: relative; padding: 13px 8px; text-align: center; } .rrb-detail-visual-footer div:not(:last-child)::after { content: ""; position: absolute; width: 1px; height: 28px; top: 50%; right: 0; transform: translateY(-50%); background: #eeeeee; } .rrb-detail-visual-footer strong { display: block; color: #e53935; font-size: 16px; font-weight: 800; } .rrb-detail-visual-footer span { display: block; margin-top: 3px; color: #888; font-size: 9px; font-weight: 600; } /* ========================================================= FLOATING CARD ========================================================= */ .rrb-detail-floating-card { position: absolute; left: -45px; bottom: -27px; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid #eeeeee; border-radius: 13px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 15px 35px rgba(20, 20, 20, 0.12); } .rrb-detail-floating-card > span { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff0ef; color: #e53935; font-size: 14px; } .rrb-detail-floating-card strong { display: block; color: #252525; font-size: 11px; font-weight: 750; } .rrb-detail-floating-card small { display: block; margin-top: 3px; color: #999; font-size: 9px; font-weight: 500; } /* ===================================================== RRB JE ONLINE TEST SERIES KEY FEATURES ===================================================== */ .rrb-feature-section { position: relative; padding: 72px 0 78px; background: radial-gradient( circle at 5% 45%, rgba(229, 35, 31, 0.07), transparent 25% ), radial-gradient( circle at 95% 60%, rgba(255, 183, 0, 0.08), transparent 25% ), #ffffff; overflow: hidden; } .rrb-feature-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } /* ============================== SECTION HEADING ============================== */ .rrb-feature-heading { max-width: 720px; margin: 0 auto 42px; text-align: center; } .rrb-feature-label { display: inline-block; margin-bottom: 9px; font-size: 14px; font-weight: 700; letter-spacing: 0.6px; color: #e5231f; } .rrb-feature-heading h2 { margin: 0; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; font-weight: 800; color: #171717; } .rrb-feature-heading h2 span { color: #e5231f; } .rrb-feature-heading p { max-width: 610px; margin: 13px auto 0; font-size: 16px; line-height: 1.7; color: #666666; } /* ============================== FEATURES GRID ============================== */ .rrb-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* ============================== FEATURE CARD ============================== */ .rrb-feature-card { position: relative; min-width: 0; padding: 26px 22px 24px; background: rgba(255, 255, 255, 0.96); border: 1px solid #eeeeee; border-radius: 20px; box-shadow: 0 12px 35px rgba(22, 22, 22, 0.06); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .rrb-feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient( 90deg, #e5231f, #f04a24, #ffb700 ); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .rrb-feature-card:hover { transform: translateY(-7px); border-color: rgba(229, 35, 31, 0.2); box-shadow: 0 18px 45px rgba(229, 35, 31, 0.11); } .rrb-feature-card:hover::before { transform: scaleX(1); } /* ============================== CARD NUMBER ============================== */ .rrb-feature-number { position: absolute; top: 18px; right: 20px; font-size: 13px; font-weight: 800; color: rgba(229, 35, 31, 0.35); } /* ============================== FEATURE ICON ============================== */ .rrb-feature-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 15px; font-size: 21px; color: #ffffff; background: linear-gradient( 135deg, #e5231f, #f04a24 ); box-shadow: 0 10px 25px rgba(229, 35, 31, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .rrb-feature-card:hover .rrb-feature-icon { transform: translateY(-3px) rotate(-3deg); box-shadow: 0 14px 30px rgba(229, 35, 31, 0.28); } /* ============================== FEATURE CONTENT ============================== */ .rrb-feature-content h3 { margin: 0 0 10px; font-size: 19px; line-height: 1.35; font-weight: 750; color: #171717; } .rrb-feature-content p { margin: 0; font-size: 14px; line-height: 1.7; color: #696969; } /* ===================================================== RRB JE TEST EXPLORER ===================================================== */ .rrb-explorer-section{ position:relative; padding:85px 0 90px; background: radial-gradient( circle at 0% 25%, rgba(214,40,40,.07), transparent 24% ), radial-gradient( circle at 100% 75%, rgba(249,178,51,.08), transparent 24% ), #fafafa; overflow:hidden; } .rrb-explorer-container{ width:min(1180px,calc(100% - 40px)); margin:0 auto; position:relative; z-index:2; } /* ===================================================== SECTION HEADING ===================================================== */ .rrb-explorer-heading{ max-width:720px; margin:0 auto 38px; text-align:center; } .rrb-explorer-label{ display:inline-block; margin-bottom:9px; color:#D62828; font-size:14px; font-weight:700; letter-spacing:.6px; } .rrb-explorer-heading h2{ margin:0; color:#171717; font-size:clamp(34px,3.5vw,50px); font-weight:800; line-height:1.12; } .rrb-explorer-heading h2 span{ color:#D62828; } .rrb-explorer-heading p{ max-width:620px; margin:14px auto 0; color:#666; font-size:16px; line-height:1.7; } /* ===================================================== SUMMARY ===================================================== */ .rrb-explorer-summary{ max-width:850px; margin:0 auto 32px; padding:18px 24px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #eeeeee; border-radius:18px; box-shadow:0 12px 35px rgba(0,0,0,.05); } .rrb-summary-item{ flex:1; display:flex; align-items:center; justify-content:center; gap:13px; } .rrb-summary-icon{ width:45px; height:45px; min-width:45px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:linear-gradient( 135deg, #fff0ef, #fff7e8 ); color:#D62828; font-size:17px; } .rrb-summary-item strong{ display:block; color:#1d1d1d; font-size:21px; font-weight:800; line-height:1; } .rrb-summary-item span{ display:block; margin-top:5px; color:#777; font-size:11px; font-weight:600; } .rrb-summary-divider{ width:1px; height:42px; background:#eeeeee; } /* ===================================================== TOOLBAR ===================================================== */ .rrb-explorer-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:18px; padding:8px; background:#fff; border:1px solid #eeeeee; border-radius:16px; box-shadow:0 8px 28px rgba(0,0,0,.04); } /* ===================================================== TABS ===================================================== */ .rrb-explorer-tabs{ display:flex; align-items:center; gap:7px; } .rrb-explorer-tab{ min-height:45px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 15px; border:none; border-radius:11px; background:transparent; color:#666; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; transition: background .3s ease, color .3s ease, transform .3s ease; } .rrb-explorer-tab i{ font-size:12px; } .rrb-explorer-tab small{ min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; border-radius:50px; background:#f3f3f3; color:#777; font-size:10px; font-weight:800; transition:.3s; } .rrb-explorer-tab:hover{ color:#D62828; background:#fff3f3; } .rrb-explorer-tab.active{ color:#fff; background:linear-gradient( 135deg, #D62828, #F05A28 ); box-shadow:0 8px 20px rgba(214,40,40,.18); } .rrb-explorer-tab.active small{ color:#D62828; background:#fff; } /* ===================================================== VISIBLE TEST COUNT ===================================================== */ .rrb-explorer-count{ padding-right:14px; color:#888; font-size:12px; white-space:nowrap; } .rrb-explorer-count strong{ color:#D62828; font-size:14px; } /* ===================================================== LIST HEADER ===================================================== */ .rrb-test-list-header{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(350px,.9fr) 145px; align-items:center; gap:24px; margin-bottom:10px; padding:0 22px; color:#999; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; } .rrb-test-list-header div:last-child{ text-align:center; } /* ===================================================== TEST LIST ===================================================== */ .rrb-test-list{ display:flex; flex-direction:column; gap:12px; } /* ===================================================== TEST ROW ===================================================== */ .rrb-test-row{ position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(350px,.9fr) 145px; align-items:center; gap:24px; padding:20px 22px; background:#fff; border:1px solid #eeeeee; border-radius:18px; box-shadow:0 8px 28px rgba(0,0,0,.045); overflow:hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .rrb-test-row::before{ content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:linear-gradient( to bottom, #D62828, #F9B233 ); transform:scaleY(0); transform-origin:top; transition:transform .35s ease; } .rrb-test-row:hover{ transform:translateY(-4px); border-color:rgba(214,40,40,.18); box-shadow:0 15px 38px rgba(214,40,40,.08); } .rrb-test-row:hover::before{ transform:scaleY(1); } /* ===================================================== PRIMARY INFORMATION ===================================================== */ .rrb-test-primary{ display:flex; align-items:flex-start; gap:16px; min-width:0; } .rrb-test-image { width: 50px; min-width: 44px; display: flex; align-items: center; justify-content: center; border-radius: 13px; color: #D62828; font-size: 12px; font-weight: 800; } .rrb-test-index{ width:44px; height:44px; min-width:44px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#fff1f1; color:#D62828; font-size:12px; font-weight:800; transition:.3s; } .rrb-test-row:hover .rrb-test-index{ color:#fff; background:linear-gradient( 135deg, #D62828, #F05A28 ); } .rrb-test-title-area{ min-width:0; } .rrb-test-type{ display:inline-block; margin-bottom:5px; color:#D62828; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; } .rrb-test-type-full{ color:#e78300; } .rrb-test-type-free { color: #0f6405; } .rrb-test-type-previous { color: #46b8da; } .rrb-test-title-area h3{ margin:0; color:#202020; font-size:17px; line-height:1.4; font-weight:750; } .rrb-test-title-area p{ max-width:470px; margin:6px 0 0; color:#777; font-size:12px; line-height:1.6; } /* ===================================================== TEST META INFORMATION ===================================================== */ .rrb-test-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .rrb-test-meta > div{ min-width:0; padding:9px 10px; background:#fafafa; border:1px solid #f0f0f0; border-radius:10px; } .rrb-test-meta span{ display:flex; align-items:center; gap:5px; color:#999; font-size:9px; font-weight:600; } .rrb-test-meta span i{ color:#D62828; font-size:9px; } .rrb-test-meta strong{ display:block; margin-top:4px; color:#333; font-size:12px; font-weight:750; } /* ===================================================== TEST ACTION ===================================================== */ .rrb-test-action{ display:flex; flex-direction:column; align-items:stretch; gap:9px; } .rrb-test-status{ display:flex; align-items:center; justify-content:center; gap:6px; color:#999; font-size:9px; font-weight:700; } .rrb-test-status i{ color:#D62828; } /* ===================================================== UNLOCK BUTTON ===================================================== */ .rrb-test-unlock-btn{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 13px; border-radius:10px; background:#D62828; color:#fff; text-decoration:none; font-size:11px; font-weight:750; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .rrb-test-unlock-btn:hover{ color:#fff; background:#111; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.14); } .rrb-test-unlock-btn i{ font-size:9px; transition:transform .3s; } .rrb-test-unlock-btn:hover i{ transform:translateX(4px); } .rrb-test-success-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border-radius: 10px; background: #0f6405; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .rrb-test-success-btn:hover { color: #fff; background: #79d035; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.14); } .rrb-test-success-btn i { font-size: 9px; transition: transform .3s; } .rrb-test-success-btn:hover i { transform: translateX(4px); } /* ===================================================== LOAD MORE ===================================================== */ .rrb-test-load-more{ display:flex; justify-content:center; margin-top:30px; } .rrb-test-load-btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 24px; border:1px solid rgba(214,40,40,.22); border-radius:50px; background:#fff; color:#D62828; cursor:pointer; font-family:inherit; font-size:12px; font-weight:750; transition:.3s; } .rrb-test-load-btn:hover{ color:#fff; background:#D62828; box-shadow:0 10px 25px rgba(214,40,40,.18); } .rrb-test-load-btn i{ font-size:10px; transition:transform .3s; } .rrb-test-load-btn:hover i{ transform:translateY(3px); } /* ===================================================== ABOUT TEST SERIES SECTION ===================================================== */ .rrb-series-about-section{ position:relative; padding:80px 0 85px; overflow:hidden; background: radial-gradient( circle at 0% 25%, rgba(214,40,40,.06), transparent 27% ), radial-gradient( circle at 100% 80%, rgba(249,178,51,.08), transparent 25% ), #fff; } .rrb-series-about-container{ position:relative; z-index:2; width:min(1180px,calc(100% - 40px)); margin:0 auto; } /* ===================================================== SECTION HEADING ===================================================== */ .rrb-series-about-heading{ max-width:720px; margin:0 auto 38px; text-align:center; } .rrb-series-about-label{ display:inline-block; margin-bottom:8px; color:#D62828; font-size:13px; font-weight:800; letter-spacing:.6px; } .rrb-series-about-heading h2{ margin:0; color:#181818; font-size:clamp(34px,3.5vw,48px); font-weight:800; line-height:1.15; } .rrb-series-about-heading h2 span{ color:#D62828; } .rrb-series-about-heading p{ max-width:640px; margin:12px auto 0; color:#6d6d6d; font-size:15px; line-height:1.7; } /* ===================================================== INTRODUCTION CARD ===================================================== */ .rrb-series-about-intro{ display:grid; grid-template-columns:70px minmax(0,1fr); align-items:start; gap:22px; padding:27px 30px; background:rgba(255,255,255,.95); border:1px solid #ededed; border-radius:20px; box-shadow:0 14px 40px rgba(0,0,0,.055); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .rrb-series-about-intro:hover{ transform:translateY(-4px); border-color:rgba(214,40,40,.2); box-shadow:0 20px 45px rgba(214,40,40,.08); } /* ===================================================== INTRO ICON ===================================================== */ .rrb-series-about-intro-icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:linear-gradient( 135deg, #D62828, #F05A28 ); color:#fff; font-size:25px; box-shadow:0 10px 25px rgba(214,40,40,.2); } /* ===================================================== INTRO CONTENT ===================================================== */ .rrb-series-about-mini-label{ display:block; margin-bottom:5px; color:#D62828; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; } .rrb-series-about-intro-content h3{ margin:0 0 10px; color:#202020; font-size:23px; font-weight:800; line-height:1.35; } .rrb-series-about-intro-content p{ margin:0 0 8px; color:#686868; font-size:13px; line-height:1.75; } /* ===================================================== EXAM TAGS ===================================================== */ .rrb-series-about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; } .rrb-series-about-tags span{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:50px; background:#fff2f2; color:#555; font-size:10px; font-weight:750; } .rrb-series-about-tags span i{ color:#D62828; font-size:9px; } /* ===================================================== FREE RESOURCES ===================================================== */ .rrb-series-about-resources{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; } /* ===================================================== RESOURCE CARD ===================================================== */ .rrb-series-resource-card{ position:relative; display:grid; grid-template-columns:55px minmax(0,1fr); align-items:start; gap:17px; padding:22px 24px; overflow:hidden; background:#fff; border:1px solid #ededed; border-radius:17px; box-shadow:0 10px 30px rgba(0,0,0,.045); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .rrb-series-resource-card::before{ content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:linear-gradient( 180deg, #D62828, #F05A28, #F9B233 ); transform:scaleY(0); transform-origin:top; transition:transform .35s ease; } .rrb-series-resource-card:hover{ transform:translateY(-4px); border-color:rgba(214,40,40,.18); box-shadow:0 16px 38px rgba(214,40,40,.08); } .rrb-series-resource-card:hover::before{ transform:scaleY(1); } /* ===================================================== RESOURCE ICON ===================================================== */ .rrb-series-resource-icon{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:15px; background:linear-gradient( 135deg, #fff0ef, #fff7e8 ); color:#D62828; font-size:20px; transition: background .3s ease, color .3s ease, transform .3s ease; } .rrb-series-resource-card:hover .rrb-series-resource-icon{ color:#fff; background:linear-gradient( 135deg, #D62828, #F05A28 ); transform:rotate(-5deg); } /* ===================================================== RESOURCE CONTENT ===================================================== */ .rrb-series-resource-content > span{ display:block; margin-bottom:4px; color:#D62828; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; } .rrb-series-resource-content h3{ margin:0 0 7px; color:#202020; font-size:18px; font-weight:800; } .rrb-series-resource-content p{ margin:0 0 12px; color:#727272; font-size:12px; line-height:1.65; } .rrb-series-resource-content a{ display:inline-flex; align-items:center; gap:7px; color:#D62828; text-decoration:none; font-size:10px; font-weight:800; } .rrb-series-resource-content a i{ font-size:8px; transition:transform .3s ease; } .rrb-series-resource-content a:hover i{ transform:translate(3px,-3px); } /* ===================================================== SSC JE BENEFITS WRAPPER ===================================================== */ .rrb-series-benefits-wrapper{ display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.35fr); align-items:center; gap:45px; margin-top:55px; padding:32px; background: linear-gradient( 120deg, rgba(255,242,242,.9), #fff 48%, rgba(255,248,233,.85) ); border:1px solid rgba(214,40,40,.11); border-radius:22px; box-shadow:0 16px 45px rgba(0,0,0,.05); } /* ===================================================== BENEFITS LEFT CONTENT ===================================================== */ .rrb-series-benefits-label{ display:block; margin-bottom:6px; color:#D62828; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; } .rrb-series-benefits-content h3{ margin:0; color:#1d1d1d; font-size:28px; font-weight:800; line-height:1.25; } .rrb-series-benefits-content > p{ margin:12px 0 0; color:#6e6e6e; font-size:12.5px; line-height:1.75; } /* ===================================================== BENEFITS HIGHLIGHT ===================================================== */ .rrb-series-benefits-highlight{ display:flex; align-items:center; gap:12px; margin-top:20px; padding:13px; background:#fff; border:1px solid rgba(214,40,40,.12); border-radius:13px; box-shadow:0 8px 25px rgba(0,0,0,.04); } .rrb-series-benefits-highlight > i{ width:39px; height:39px; min-width:39px; display:flex; align-items:center; justify-content:center; border-radius:11px; background:linear-gradient( 135deg, #D62828, #F05A28 ); color:#fff; font-size:15px; } .rrb-series-benefits-highlight span{ display:block; color:#888; font-size:9px; font-weight:700; } .rrb-series-benefits-highlight strong{ display:block; margin-top:2px; color:#292929; font-size:11px; font-weight:800; } /* ===================================================== BENEFITS GRID ===================================================== */ .rrb-series-benefits-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } /* ===================================================== BENEFIT ITEM ===================================================== */ .rrb-series-benefit-item{ display:flex; align-items:flex-start; gap:10px; min-width:0; padding:11px 12px; background:#fff; border:1px solid #ededed; border-radius:11px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .rrb-series-benefit-item:hover{ transform:translateY(-2px); border-color:rgba(214,40,40,.18); box-shadow:0 8px 20px rgba(214,40,40,.06); } .rrb-series-benefit-item > span{ width:27px; height:27px; min-width:27px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#fff0ef; color:#D62828; font-size:9px; font-weight:800; } .rrb-series-benefit-item p{ margin:0; color:#606060; font-size:11px; line-height:1.55; } /* ===================================================== FINAL NOTE ===================================================== */ .rrb-series-about-final{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:17px; margin-top:25px; padding:20px 23px; overflow:hidden; background:linear-gradient( 110deg, #fff1f1, #fff 52%, #fff7e6 ); border:1px solid rgba(214,40,40,.12); border-radius:17px; box-shadow:0 10px 30px rgba(0,0,0,.045); } .rrb-series-about-final::before{ content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:linear-gradient( #D62828, #F9B233 ); } /* ===================================================== FINAL NOTE ICON ===================================================== */ .rrb-series-about-final-icon{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient( 135deg, #D62828, #F05A28 ); color:#fff; font-size:18px; box-shadow:0 9px 22px rgba(214,40,40,.18); } /* ===================================================== FINAL NOTE CONTENT ===================================================== */ .rrb-series-about-final-content > span{ display:block; margin-bottom:3px; color:#D62828; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; } .rrb-series-about-final-content h3{ margin:0; color:#202020; font-size:17px; font-weight:800; line-height:1.35; } .rrb-series-about-final-content p{ margin:4px 0 0; color:#777; font-size:11px; line-height:1.55; } /* ===================================================== FINAL BUTTON ===================================================== */ .rrb-series-about-final-btn{ min-height:41px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; border-radius:50px; background:#D62828; color:#fff; text-decoration:none; white-space:nowrap; font-size:10px; font-weight:800; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .rrb-series-about-final-btn:hover{ color:#fff; background:#171717; transform:translateY(-2px); box-shadow:0 9px 22px rgba(0,0,0,.12); } .rrb-series-about-final-btn i{ font-size:8px; transition:transform .3s ease; } .rrb-series-about-final-btn:hover i{ transform:translateY(-3px); } /* ===================================================== RRB COURSE TOPPERS BANNER ===================================================== */ .rrb-course-toppers-section{ position:relative; padding:70px 0; overflow:hidden; background: radial-gradient( circle at 10% 50%, rgba(230,45,39,.08), transparent 32% ), linear-gradient( 135deg, #fffafa 0%, #ffffff 48%, #fff8f4 100% ); } .rrb-course-toppers-container{ width:min(1180px, calc(100% - 40px)); margin:auto; display:grid; grid-template-columns:330px minmax(0, 1fr); align-items:center; gap:55px; } /* ===================================================== HEADING ===================================================== */ .rrb-course-toppers-heading{ position:relative; } .rrb-course-toppers-label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:#e62d27; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; } .rrb-course-toppers-label i{ color:#ff8a00; } .rrb-course-toppers-heading h2{ margin:0; color:#171717; font-family:"Poppins", sans-serif; font-size:38px; font-weight:800; line-height:1.18; } .rrb-course-toppers-heading h2 span{ display:block; color:#e62d27; } .rrb-course-toppers-heading > p{ margin:17px 0 24px; color:#666; font-size:15px; line-height:1.75; } /* ===================================================== TRUST STATS ===================================================== */ .rrb-course-toppers-trust{ display:flex; align-items:center; gap:28px; } .rrb-course-toppers-trust div{ position:relative; display:flex; flex-direction:column; } .rrb-course-toppers-trust div:first-child::after{ content:""; position:absolute; top:3px; right:-15px; width:1px; height:38px; background:#e4e4e4; } .rrb-course-toppers-trust strong{ color:#171717; font-size:22px; font-weight:800; } .rrb-course-toppers-trust span{ margin-top:2px; color:#777; font-size:12px; } /* ===================================================== TOPPERS LIST ===================================================== */ .rrb-course-toppers-list{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; } /* ===================================================== TOPPER CARD ===================================================== */ .rrb-course-topper-card{ position:relative; min-width:0; padding:16px; background:#fff; border:1px solid #ededed; border-radius:20px; box-shadow: 0 12px 35px rgba(20,20,20,.07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .rrb-course-topper-card:hover{ transform:translateY(-6px); border-color:rgba(230,45,39,.25); box-shadow: 0 20px 45px rgba(230,45,39,.12); } /* RANK */ .rrb-course-topper-rank{ position:absolute; top:26px; left:7px; z-index:2; padding:6px 10px; color:#fff; background:linear-gradient( 135deg, #e62d27, #ff5a32 ); border-radius:0 20px 20px 0; box-shadow:0 5px 15px rgba(230,45,39,.25); font-size:11px; font-weight:800; } /* IMAGE */ .rrb-course-topper-photo{ width:100%; height:190px; overflow:hidden; background:#fff; border-radius:15px; } .rrb-course-topper-photo img { width: auto; height: 100%; /* display: block; */ object-fit: cover; object-position: center; transition: transform .4s ease; margin: 0 auto; } .rrb-course-topper-card:hover .rrb-course-topper-photo img{ transform:scale(1.04); } /* INFORMATION */ .rrb-course-topper-info{ padding:15px 3px 3px; } .rrb-course-topper-info h3{ margin:0 0 4px; color:#171717; font-family:"Poppins", sans-serif; font-size:16px; font-weight:700; } .rrb-course-topper-info p{ margin:0 0 11px; color:#777; font-size:12px; } .rrb-course-topper-info > span{ display:inline-flex; align-items:center; gap:6px; padding:6px 9px; color:#c72b26; background:#fff2f1; border-radius:20px; font-size:10px; font-weight:700; } .rrb-course-topper-info > span i{ color:#ff8a00; } /* ===================================================== RRB RECOMMENDED COURSES ===================================================== */ .rrb-recommended-section{ position:relative; padding:72px 0; overflow:hidden; background:#ffffff; } .rrb-recommended-container{ width:min(1180px, calc(100% - 40px)); margin:auto; } /* ===================================================== SECTION HEADING ===================================================== */ .rrb-recommended-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:34px; } .rrb-recommended-heading-content{ max-width:680px; } .rrb-recommended-label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:#e62d27; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; } .rrb-recommended-label i{ color:#ff8a00; } .rrb-recommended-heading h2{ margin:0; color:#171717; font-family:"Poppins", sans-serif; font-size:38px; font-weight:800; line-height:1.2; } .rrb-recommended-heading h2 span{ color:#e62d27; } .rrb-recommended-heading p{ margin:12px 0 0; color:#6d6d6d; font-size:14px; line-height:1.7; } .rrb-recommended-view-all{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:45px; padding:0 20px; color:#e62d27; background:#fff5f4; border:1px solid rgba(230,45,39,.18); border-radius:10px; font-size:13px; font-weight:700; text-decoration:none; transition:.3s ease; } .rrb-recommended-view-all:hover{ color:#fff; background:#e62d27; border-color:#e62d27; } .rrb-recommended-view-all i{ transition:transform .3s ease; } .rrb-recommended-view-all:hover i{ transform:translateX(4px); } /* ===================================================== COURSES GRID ===================================================== */ .rrb-recommended-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; } /* ===================================================== COURSE CARD ===================================================== */ .rrb-recommended-card{ min-width:0; overflow:hidden; background:#fff; border:1px solid #ececec; border-radius:18px; box-shadow:0 12px 35px rgba(25,25,25,.07); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .rrb-recommended-card:hover{ transform:translateY(-6px); border-color:rgba(230,45,39,.24); box-shadow:0 20px 45px rgba(230,45,39,.11); } /* ===================================================== COURSE IMAGE ===================================================== */ .rrb-recommended-image{ position:relative; height:178px; overflow:hidden; background:#f5f5f5; } .rrb-recommended-image::after{ content:""; position:absolute; inset:0; background:linear-gradient( to top, rgba(15,15,15,.48), transparent 58% ); pointer-events:none; } .rrb-recommended-image img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; } .rrb-recommended-card:hover .rrb-recommended-image img{ transform:scale(1.05); } /* BADGE */ .rrb-recommended-badge{ position:absolute; top:13px; left:13px; z-index:2; padding:6px 10px; color:#fff; background:linear-gradient( 135deg, #e62d27, #ff5936 ); border-radius:20px; font-size:10px; font-weight:700; } /* EXAM NAME */ .rrb-recommended-exam{ position:absolute; left:16px; bottom:13px; z-index:2; color:#fff; font-family:"Poppins", sans-serif; font-size:20px; font-weight:800; } /* ===================================================== COURSE CONTENT ===================================================== */ .rrb-recommended-content{ padding:20px; } .rrb-recommended-category{ display:block; margin-bottom:7px; color:#e62d27; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; } .rrb-recommended-content h3{ min-height:48px; margin:0; color:#181818; font-family:"Poppins", sans-serif; font-size:17px; font-weight:700; line-height:1.45; } .rrb-recommended-content > p{ min-height:64px; margin:10px 0 16px; color:#747474; font-size:12px; line-height:1.65; } /* ===================================================== COURSE META ===================================================== */ .rrb-recommended-meta{ display:flex; flex-wrap:wrap; gap:8px; padding-bottom:17px; border-bottom:1px solid #eeeeee; } .rrb-recommended-meta span{ display:inline-flex; align-items:center; gap:5px; padding:6px 8px; color:#666; background:#fafafa; border-radius:6px; font-size:10px; font-weight:600; } .rrb-recommended-meta i{ color:#e62d27; } /* ===================================================== CARD FOOTER ===================================================== */ .rrb-recommended-footer{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:17px; } .rrb-recommended-price{ display:flex; flex-direction:column; } .rrb-recommended-price small{ color:#888; font-size:9px; } .rrb-recommended-price strong{ margin-top:2px; color:#171717; font-size:18px; font-weight:800; } .rrb-recommended-footer > a{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 13px; color:#fff; background:linear-gradient( 135deg, #e62d27, #f04b2e ); border-radius:8px; font-size:11px; font-weight:700; text-decoration:none; transition:.3s ease; } .rrb-recommended-footer > a:hover{ box-shadow:0 8px 18px rgba(230,45,39,.22); transform:translateY(-2px); } .rrb-recommended-footer > a i{ font-size:10px; } /* ===================================================== RRB DETAIL PAGE CONSISTENT DESKTOP CONTAINER WIDTH ===================================================== */ .rrb-detail-container, .rrb-feature-container, .rrb-explorer-container, .rrb-course-toppers-container, .rrb-recommended-container, .rrb-series-about-container { width: 92%; max-width: 1500px; margin-left: auto; margin-right: auto; } /* ============================== FEATURE CARD ============================== */ .rrb-feature-ul-grid ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .rrb-feature-ul-grid ul li { position: relative; min-width: 0; font-size: 14px; padding: 20px 18px 20px; background: rgba(255, 255, 255, 0.96); border: 1px solid #eeeeee; border-radius: 20px; box-shadow: 0 12px 35px rgba(22, 22, 22, 0.06); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .rrb-feature-ul-grid ul li:hover { transform: translateY(-7px); border-color: rgba(229, 35, 31, 0.2); box-shadow: 0 18px 45px rgba(229, 35, 31, 0.11); } .rrb-feature-ul-grid ul li:hover::before { transform: scaleX(1); } /* ============================== CARD NUMBER ============================== */ .rrb-feature-ul-grid:hover .rrb-feature-icon { transform: translateY(-3px) rotate(-3deg); box-shadow: 0 14px 30px rgba(229, 35, 31, 0.28); } /* ============================== FEATURE CONTENT ============================== */ .rrb-feature-ul-grid ul li h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.35; font-weight: 700; color: #171717; } .rrb-feature-ul-grid ul li p { margin: 0; font-size: 14px; line-height: 1.7; color: #696969; } .rrb-feature-ul-grid ul { list-style: none; /* 1. Remove default bullets/numbers */ counter-reset: my-counter; /* 2. Initialize a new counter */ padding-left: 0; } .rrb-feature-ul-grid ul li { counter-increment: my-counter; /* 3. Increment the counter for each li */ margin-bottom: 10px; align-items: center; } .rrb-feature-ul-grid ul li::before { content: counter(my-counter); /* background-color: #0081a7; */ color: white; font-weight: bold; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 12px; position: absolute; top: 5px; right: 0; background: linear-gradient(90deg, #e5231f, #f04a24, #ffb700); transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; font-size: 9px; } .rrb-test-download-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border-radius: 10px; background: #0e71ab; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } .rrb-test-download-btn:hover { color: #fff; background: #61baef; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.14); } .rrb-test-download-btn i { font-size: 9px; transition: transform .3s; } .rrb-test-download-btn:hover i { transform: translateX(4px); } .question-row { position: relative; align-items: center; gap: 24px; padding: 20px 22px; background: #fff; border: 1px solid #eeeeee; border-radius: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.045); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; margin-bottom:15px; } /* ========================================================= ZONE TECH LOGIN PAGE ========================================================= */ .zt-login-page { position: relative; min-height: calc(100vh - 150px); display: flex; align-items: center; padding: 85px 0 95px; overflow: hidden; background: radial-gradient( circle at 8% 15%, rgba(214, 40, 40, .09), transparent 28% ), radial-gradient( circle at 92% 88%, rgba(249, 178, 51, .13), transparent 30% ), linear-gradient( 135deg, #fffafa 0%, #ffffff 50%, #fffaf3 100% ); } /* ========================================================= BACKGROUND GLOWS ========================================================= */ .zt-login-glow { position: absolute; border-radius: 50%; pointer-events: none; } .zt-login-glow-one { width: 420px; height: 420px; left: -250px; top: -210px; background: rgba(214, 40, 40, .055); } .zt-login-glow-two { width: 480px; height: 480px; right: -270px; bottom: -290px; background: rgba(249, 178, 51, .08); } /* ========================================================= MAIN CONTAINER ========================================================= */ .zt-login-container { position: relative; z-index: 2; width: min(1160px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr); align-items: center; gap: 90px; } /* ========================================================= LEFT CONTENT ========================================================= */ .zt-login-content { min-width: 0; } .zt-login-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 8px 15px; border: 1px solid rgba(214, 40, 40, .16); border-radius: 50px; background: #fff1f1; color: #D62828; font-size: 13px; font-weight: 700; } .zt-login-content h1 { max-width: 680px; margin: 0; color: #181818; font-family: Poppins, sans-serif; font-size: clamp( 45px, 5vw, 67px ); font-weight: 800; line-height: 1.06; letter-spacing: -2.5px; } .zt-login-content h1 span { display: block; margin-top: 7px; background: linear-gradient( 90deg, #D62828, #F05A28, #F9B233 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .zt-login-description { max-width: 620px; margin: 23px 0 0; color: #666; font-size: 16px; line-height: 1.8; } /* ========================================================= BENEFITS ========================================================= */ .zt-login-benefits { display: grid; gap: 12px; max-width: 590px; margin-top: 32px; } .zt-login-benefit { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, .055); border-radius: 15px; background: rgba( 255, 255, 255, .76 ); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .zt-login-benefit:hover { transform: translateX(5px); border-color: rgba(214, 40, 40, .17); box-shadow: 0 12px 30px rgba(214, 40, 40, .07); } .zt-login-benefit > span { width: 46px; height: 46px; min-width: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: linear-gradient( 135deg, #D62828, #F05A28 ); color: #fff; font-size: 18px; box-shadow: 0 9px 22px rgba(214, 40, 40, .2); } .zt-login-benefit strong { display: block; margin-bottom: 3px; color: #222; font-size: 14px; } .zt-login-benefit small { display: block; color: #777; font-size: 12px; line-height: 1.5; } /* ========================================================= TRUST ========================================================= */ .zt-login-trust { display: flex; align-items: center; gap: 24px; margin-top: 28px; } .zt-login-trust div:not(.zt-login-trust-divider) { display: flex; flex-direction: column; gap: 3px; } .zt-login-trust strong { color: #D62828; font-family: Poppins, sans-serif; font-size: 23px; } .zt-login-trust span { color: #777; font-size: 12px; } .zt-login-trust-divider { width: 1px; height: 38px; background: #dedede; } /* ========================================================= CARD WRAPPER ========================================================= */ .zt-login-card-wrapper { position: relative; padding-top: 42px; } /* ========================================================= LOGIN CARD ========================================================= */ .zt-login-card { position: relative; padding: 42px 38px 32px; border: 1px solid rgba(214, 40, 40, .1); border-radius: 26px; background: rgba( 255, 255, 255, .94 ); box-shadow: 0 28px 70px rgba(0, 0, 0, .105); backdrop-filter: blur(15px); } /* TOP ACCENT */ .zt-login-card::before { content: ""; position: absolute; top: 0; left: 50%; width: 120px; height: 4px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient( 90deg, #D62828, #F05A28, #F9B233 ); } /* ========================================================= CARD ICON ========================================================= */ .zt-login-card-icon { position: absolute; top: -43px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0; border: 7px solid #fff; border-radius: 22px; background: linear-gradient( 135deg, #D62828, #F05A28 ); color: #fff; font-size: 27px; box-shadow: 0 14px 30px rgba(214, 40, 40, .25); z-index: 5; } /* ========================================================= CARD HEADING ========================================================= */ .zt-login-card-heading { text-align: center; } .zt-login-card-heading > span { display: inline-block; margin-bottom: 6px; color: #D62828; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; } .zt-login-card-heading h2 { margin: 0; color: #1c1c1c; font-family: Poppins, sans-serif; font-size: 29px; line-height: 1.3; } .zt-login-card-heading p { max-width: 340px; margin: 10px auto 0; color: #777; font-size: 13px; line-height: 1.65; } /* ========================================================= FORM ========================================================= */ .zt-login-form { margin-top: 29px; } .zt-login-field label { display: block; margin-bottom: 9px; color: #333; font-size: 13px; font-weight: 700; } .zt-login-field label span { color: #D62828; } /* ========================================================= INPUT ========================================================= */ .zt-login-input-wrapper { height: 57px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; border: 1px solid #dedede; border-radius: 13px; background: #fafafa; overflow: hidden; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; } .zt-login-input-wrapper:focus-within { border-color: rgba(214, 40, 40, .6); background: #fff; box-shadow: 0 0 0 4px rgba(214, 40, 40, .075); } .zt-login-country-code { height: 100%; display: flex; align-items: center; padding: 0 14px; border-right: 1px solid #e2e2e2; color: #333; font-size: 14px; font-weight: 700; } .zt-login-input-wrapper input { width: 100%; height: 100%; padding: 0 13px; border: 0; outline: 0; background: transparent; color: #222; font-family: Inter, sans-serif; font-size: 14px; } .zt-login-input-wrapper input::placeholder { color: #aaa; } .zt-login-input-icon { padding-right: 15px; color: #aaa; } /* ========================================================= ERROR ========================================================= */ .zt-login-error { min-height: 17px; display: block; margin-top: 6px; color: #D62828; font-size: 11px; } /* ========================================================= SUBMIT BUTTON ========================================================= */ .zt-login-submit { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; border: 0; border-radius: 50px; background: linear-gradient( 135deg, #D62828, #F05A28 ); color: #fff; font-family: Inter, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px rgba(214, 40, 40, .22); transition: transform .3s ease, box-shadow .3s ease; } .zt-login-submit i { transition: transform .3s ease; } .zt-login-submit:hover { transform: translateY(-3px); box-shadow: 0 19px 38px rgba(214, 40, 40, .3); } .zt-login-submit:hover i { transform: translateX(5px); } /* ========================================================= SECURITY ========================================================= */ .zt-login-security { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 18px; color: #888; font-size: 10.5px; line-height: 1.5; } .zt-login-security i { margin-top: 2px; color: #35a85b; } /* ========================================================= SUPPORT ========================================================= */ .zt-login-support { margin-top: 23px; padding-top: 19px; border-top: 1px solid #eeeeee; text-align: center; color: #777; font-size: 12px; } .zt-login-support a { margin-left: 4px; color: #D62828; font-weight: 700; text-decoration: none; } /* ========================================================= FLOATING SECURITY BADGE ========================================================= */ .zt-login-floating-badge { position: absolute; right: -30px; bottom: 45px; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid #eeeeee; border-radius: 15px; background: #fff; box-shadow: 0 14px 35px rgba(0, 0, 0, .11); } .zt-login-floating-badge > span { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff1f1; color: #D62828; } .zt-login-floating-badge strong { display: block; margin-bottom: 2px; color: #222; font-size: 12px; } .zt-login-floating-badge small { color: #888; font-size: 10px; } /* ========================================================= ZONE TECH CART PAGE ========================================================= */ .zt-cart-container { width: min(1380px, calc(100% - 80px)); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .zt-cart-hero { position: relative; min-height: 475px; display: flex; align-items: center; padding: 75px 0 85px; overflow: hidden; background: radial-gradient( circle at 8% 15%, rgba(214, 40, 40, .10), transparent 28% ), radial-gradient( circle at 92% 90%, rgba(249, 178, 51, .16), transparent 30% ), linear-gradient( 135deg, #fffafa, #ffffff 48%, #fff8ef ); } .zt-cart-hero-shape { position: absolute; border-radius: 50%; pointer-events: none; } .zt-cart-shape-one { width: 420px; height: 420px; left: -280px; top: -250px; background: rgba(214, 40, 40, .06); } .zt-cart-shape-two { width: 500px; height: 500px; right: -300px; bottom: -350px; background: rgba(249, 178, 51, .10); } .zt-cart-hero .zt-cart-container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .65fr); align-items: center; gap: 90px; } /* ========================================================= HERO CONTENT ========================================================= */ .zt-cart-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 8px 15px; border: 1px solid rgba(214, 40, 40, .18); border-radius: 50px; background: #fff1f1; color: #d62828; font-size: 12px; font-weight: 800; } .zt-cart-hero-content h1 { max-width: 720px; margin: 0; color: #181818; font-family: Poppins, sans-serif; font-size: clamp(48px, 5vw, 70px); font-weight: 800; line-height: 1.05; letter-spacing: -3px; } .zt-cart-hero-content h1 span { display: block; margin-top: 7px; background: linear-gradient( 90deg, #d62828, #f05a28, #f9b233 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .zt-cart-hero-content > p { max-width: 650px; margin: 23px 0 0; color: #666; font-size: 16px; line-height: 1.8; } /* ========================================================= CHECKOUT STEPS ========================================================= */ .zt-cart-steps { display: flex; align-items: center; gap: 17px; margin-top: 32px; } .zt-cart-step { display: flex; align-items: center; gap: 10px; } .zt-cart-step > span { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #f4f4f4; color: #999; font-size: 11px; font-weight: 800; } .zt-cart-step.active > span { background: linear-gradient( 135deg, #d62828, #f05a28 ); color: #fff; } .zt-cart-step strong, .zt-cart-step small { display: block; } .zt-cart-step strong { color: #222; font-size: 12px; } .zt-cart-step small { margin-top: 2px; color: #999; font-size: 9px; } .zt-cart-steps > i { color: #ccc; font-size: 11px; } /* ========================================================= HERO VISUAL ========================================================= */ .zt-cart-hero-visual { justify-self: end; width: 100%; max-width: 390px; } .zt-cart-visual-card { padding: 35px; border: 1px solid rgba(214, 40, 40, .12); border-radius: 28px; background: rgba(255, 255, 255, .95); box-shadow: 0 30px 75px rgba(0, 0, 0, .10); text-align: center; } .zt-cart-visual-icon { width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; margin: 0 auto 19px; border-radius: 22px; background: linear-gradient( 135deg, #d62828, #f05a28 ); color: #fff; font-size: 27px; box-shadow: 0 14px 30px rgba(214, 40, 40, .22); } .zt-cart-visual-card > span { display: block; color: #d62828; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; } .zt-cart-visual-card > strong { display: block; margin-top: 6px; color: #222; font-family: Poppins, sans-serif; font-size: 28px; } .zt-cart-visual-card > p { margin: 9px 0 0; color: #777; font-size: 12px; line-height: 1.6; } .zt-cart-secure { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 8px 13px; border-radius: 50px; background: #fff5e8; color: #e08a13; font-size: 10px; font-weight: 700; } /* ========================================================= MAIN CART SECTION ========================================================= */ .zt-cart-section { padding: 80px 0 110px; background: radial-gradient( circle at 3% 20%, rgba(214, 40, 40, .055), transparent 260px ), #ffffff; } .zt-cart-main-container { width: min(1380px, calc(100% - 80px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 35px; } /* ========================================================= CART CONTENT ========================================================= */ .zt-cart-content { min-width: 0; border: 1px solid rgba(0, 0, 0, .07); border-radius: 25px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .06); overflow: hidden; } .zt-cart-content-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 24px 30px; border-bottom: 1px solid rgba(0, 0, 0, .07); } .zt-cart-label { color: #d62828; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; } .zt-cart-content-header h2 { margin: 5px 0 0; color: #181818; font-family: Poppins, sans-serif; font-size: 26px; } .zt-cart-count { padding: 8px 13px; border-radius: 50px; background: #fff1f1; color: #d62828; font-size: 11px; font-weight: 700; } /* ========================================================= EMPTY CART ========================================================= */ .zt-cart-empty { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 30px; text-align: center; } .zt-cart-empty-visual { position: relative; width: 160px; height: 150px; } .zt-cart-empty-circle { position: absolute; width: 130px; height: 130px; left: 15px; top: 8px; border-radius: 50%; background: linear-gradient( 135deg, #fff0ef, #fff8ee ); } .zt-cart-empty-icon { position: absolute; left: 43px; top: 35px; width: 75px; height: 75px; display: flex; align-items: center; justify-content: center; border-radius: 23px; background: #fff; color: #d62828; font-size: 29px; box-shadow: 0 16px 40px rgba(214, 40, 40, .15); } .zt-cart-empty-dot { position: absolute; border-radius: 50%; } .dot-one { width: 12px; height: 12px; right: 7px; top: 28px; background: #f9b233; } .dot-two { width: 8px; height: 8px; left: 5px; bottom: 33px; background: #d62828; } .dot-three { width: 7px; height: 7px; right: 17px; bottom: 13px; background: #f05a28; } .zt-cart-empty h3 { margin: 9px 0 0; color: #202020; font-family: Poppins, sans-serif; font-size: 25px; } .zt-cart-empty > p { max-width: 500px; margin: 10px auto 0; color: #777; font-size: 14px; line-height: 1.7; } .zt-cart-explore-btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding: 0 24px; border-radius: 50px; background: linear-gradient( 135deg, #d62828, #f05a28 ); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; box-shadow: 0 14px 30px rgba(214, 40, 40, .20); transition: transform .3s ease, box-shadow .3s ease; } .zt-cart-explore-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(214, 40, 40, .28); } /* ========================================================= CART ITEMS ========================================================= */ .zt-cart-items { padding: 12px 30px 30px; } .zt-cart-item { display: grid; grid-template-columns: 115px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 25px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); } .zt-cart-item-image { width: 115px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 17px; background: linear-gradient( 135deg, #fff0ef, #fff8ec ); color: #d62828; font-size: 32px; } .zt-cart-item-category { color: #d62828; font-size: 9px; font-weight: 800; letter-spacing: 1px; } .zt-cart-item-info h3 { margin: 5px 0 7px; color: #222; font-family: Poppins, sans-serif; font-size: 18px; } .zt-cart-item-info p { margin: 0; color: #888; font-size: 12px; line-height: 1.6; } .zt-cart-item-bottom { display: flex; align-items: center; gap: 16px; margin-top: 14px; } .zt-cart-quantity { display: flex; align-items: center; border: 1px solid #e5e5e5; border-radius: 50px; overflow: hidden; } .zt-cart-quantity button { width: 32px; height: 31px; border: 0; background: #fff; color: #555; cursor: pointer; } .zt-cart-quantity span { min-width: 30px; text-align: center; font-size: 11px; font-weight: 700; } .zt-cart-remove { border: 0; background: transparent; color: #d62828; font-size: 10px; font-weight: 700; cursor: pointer; margin-left: 50px; float: right; } .zt-cart-item-price { color: #d62828; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 700; } /* ========================================================= ORDER SUMMARY ========================================================= */ .zt-cart-summary { position: sticky; top: 120px; padding: 30px; border: 1px solid rgba(0, 0, 0, .07); border-radius: 25px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .07); } .zt-cart-summary-heading { padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, .07); } .zt-cart-summary-heading span { color: #d62828; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; } .zt-cart-summary-heading h2 { margin: 5px 0 0; color: #181818; font-family: Poppins, sans-serif; font-size: 25px; } .zt-cart-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; color: #777; font-size: 13px; } .zt-cart-summary-row strong { color: #333; } .zt-cart-summary-row .zt-cart-discount { color: #25934b; } .zt-cart-summary-divider { height: 1px; margin: 22px 0; background: #ececec; } .zt-cart-summary-total { display: flex; align-items: center; justify-content: space-between; } .zt-cart-summary-total span { color: #222; font-size: 15px; font-weight: 700; } .zt-cart-summary-total strong { color: #d62828; font-family: Poppins, sans-serif; font-size: 27px; } .zt-cart-checkout-btn { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; border: 0; border-radius: 50px; background: linear-gradient( 135deg, #d62828, #f05a28 ); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px rgba(214, 40, 40, .20); } .zt-cart-checkout-btn:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; } .zt-cart-security { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 15px; border-radius: 15px; background: #fff8ed; } .zt-cart-security > div { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 11px; background: #fff; color: #e59a22; } .zt-cart-security p { margin: 0; } .zt-cart-security strong, .zt-cart-security span { display: block; } .zt-cart-security strong { color: #333; font-size: 11px; } .zt-cart-security span { margin-top: 3px; color: #888; font-size: 9px; } .zt-cart-benefits { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; } .zt-cart-benefits span { color: #777; font-size: 11px; } .zt-cart-benefits i { margin-right: 7px; color: #25934b; } /* ========================================================= ZONE TECH DOWNLOAD PAGE ========================================================= */ .zt-download-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .zt-download-hero, .zt-download-discovery, .zt-download-library { overflow: clip; } /* ========================================================= HERO ========================================================= */ .zt-download-hero { position: relative; padding: 95px 0 110px; background: radial-gradient( circle at 90% 15%, rgba(255, 181, 0, .17), transparent 25% ), radial-gradient( circle at 4% 90%, rgba(230, 45, 39, .11), transparent 25% ), linear-gradient( 135deg, #fff 0%, #fff9f7 48%, #fffaf0 100% ); } .zt-download-hero::before { content: ""; position: absolute; width: 360px; height: 360px; top: -190px; right: -120px; border-radius: 50%; background: rgba(230, 45, 39, .045); } .zt-download-hero .zt-download-container { position: relative; /* display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .75fr); */ align-items: center; gap: 80px; z-index: 1; } .zt-download-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 8px 14px; border-radius: 50px; background: #fff0ef; color: #e62d27; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; } .zt-download-hero-content h1 { margin: 0; color: #111827; font-size: 62px; line-height: 1.05; letter-spacing: -2.7px; } .zt-download-hero-content h1 span { display: block; color: #e62d27; } .zt-download-hero-content > p { max-width: 670px; margin: 23px 0 0; color: #697386; font-size: 17px; line-height: 1.8; } .zt-download-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; } .zt-download-primary-btn, .zt-download-secondary-btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 23px; border-radius: 13px; text-decoration: none; font-size: 14px; font-weight: 800; transition: transform .25s ease, box-shadow .25s ease; } .zt-download-primary-btn { color: #fff; background: linear-gradient( 135deg, #e62d27, #ff4b32 ); box-shadow: 0 15px 30px rgba(230, 45, 39, .20); } .zt-download-secondary-btn { border: 1px solid #e4e7ec; color: #111827; background: #fff; } .zt-download-primary-btn:hover, .zt-download-secondary-btn:hover { transform: translateY(-3px); } .zt-download-hero-features { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 27px; } .zt-download-hero-features span { display: inline-flex; align-items: center; gap: 7px; color: #394150; font-size: 13px; font-weight: 700; } .zt-download-hero-features i { color: #e62d27; } /* ========================================================= HERO VISUAL ========================================================= */ .zt-download-hero-visual { position: relative; min-width: 0; } .zt-download-visual-card { padding: 22px; border: 1px solid rgba(230, 45, 39, .11); border-radius: 25px; background: rgba(255, 255, 255, .91); box-shadow: 0 30px 80px rgba(17, 24, 39, .12); backdrop-filter: blur(12px); } .zt-download-visual-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid #edf0f4; } .zt-download-visual-top div { min-width: 0; } .zt-download-visual-top span:first-child { display: block; margin-bottom: 5px; color: #e62d27; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; } .zt-download-visual-top strong { display: block; color: #111827; font-size: 18px; } .zt-download-visual-status { flex-shrink: 0; padding: 6px 9px; border-radius: 20px; background: #fff0ef; color: #e62d27; font-size: 8px; font-weight: 800; } .zt-download-file-list { display: grid; gap: 10px; margin-top: 16px; } .zt-download-file-row { min-width: 0; display: grid; grid-template-columns: 47px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #edf0f4; border-radius: 15px; background: #fff; } .zt-download-file-icon { width: 47px; height: 47px; display: flex; align-items: center; justify-content: center; border-radius: 13px; font-size: 17px; } .zt-download-file-icon.pdf { color: #e62d27; background: #fff0ef; } .zt-download-file-icon.notes { color: #ef7d00; background: #fff4e8; } .zt-download-file-icon.syllabus { color: #b81e1a; background: #fff0ef; } .zt-download-file-row div { min-width: 0; } .zt-download-file-row strong, .zt-download-file-row small { display: block; } .zt-download-file-row strong { overflow-wrap: anywhere; color: #111827; font-size: 13px; } .zt-download-file-row small { margin-top: 4px; color: #8a93a2; font-size: 10px; } .zt-download-file-row > i { color: #e62d27; font-size: 12px; } .zt-download-visual-footer { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 17px; padding-top: 17px; border-top: 1px solid #edf0f4; } .zt-download-visual-footer div { text-align: center; border-right: 1px solid #edf0f4; } .zt-download-visual-footer div:last-child { border-right: 0; } .zt-download-visual-footer strong, .zt-download-visual-footer span { display: block; } .zt-download-visual-footer strong { color: #111827; font-size: 18px; } .zt-download-visual-footer span { margin-top: 3px; color: #8a93a2; font-size: 9px; } .zt-download-floating-card { position: absolute; left: -35px; bottom: -27px; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid #eceff3; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(17, 24, 39, .13); } .zt-download-floating-card > span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px; background: linear-gradient( 135deg, #e62d27, #ff5a38 ); color: #fff; } .zt-download-floating-card strong, .zt-download-floating-card small { display: block; } .zt-download-floating-card strong { color: #111827; font-size: 12px; } .zt-download-floating-card small { margin-top: 3px; color: #8a93a2; font-size: 9px; } /* ========================================================= SEARCH + CATEGORIES ========================================================= */ .zt-download-discovery { padding: 40px 0 28px; background: #f7f8fa; } .zt-download-search-wrapper { max-width: 950px; margin: 0 auto; } .zt-download-search-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 8px 8px 8px 19px; border: 1px solid #e4e7ec; border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(17, 24, 39, .06); } .zt-download-search-box > i { color: #e62d27; } .zt-download-search-box input { width: 100%; min-width: 0; height: 47px; border: 0; outline: 0; color: #111827; background: transparent; font: inherit; font-size: 13px; } .zt-download-search-box button { height: 47px; padding: 0 20px; border: 0; border-radius: 11px; background: #111827; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800; } .zt-download-category-tabs { display: flex; justify-content: center; gap: 9px; margin-top: 25px; } .zt-download-category { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid #e2e5ea; border-radius: 11px; background: #fff; color: #5d6675; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; } .zt-download-category.active { border-color: #e62d27; background: #e62d27; color: #fff; } /* ========================================================= DOWNLOAD LIBRARY ========================================================= */ .zt-download-library { padding: 85px 0 100px; background: #fff; } .zt-download-section-heading { max-width: 700px; margin-bottom: 45px; } .zt-download-section-heading > span, .zt-download-content-label { color: #e62d27; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; } .zt-download-section-heading h2 { margin: 9px 0 0; color: #111827; font-size: 42px; line-height: 1.15; letter-spacing: -1.4px; } .zt-download-section-heading p { margin: 13px 0 0; color: #737c8b; font-size: 14px; line-height: 1.7; } .zt-download-layout { display: grid; grid-template-columns: 315px minmax(0, 1fr); align-items: start; gap: 45px; } /* ========================================================= SIDEBAR ========================================================= */ .zt-download-sidebar { min-width: 0; } .zt-download-sidebar-inner { position: sticky; top: 110px; overflow: hidden; border: 1px solid #e7e9ed; border-radius: 21px; background: #fff; box-shadow: 0 18px 50px rgba(17, 24, 39, .07); } .zt-download-sidebar-heading { display: flex; align-items: center; gap: 13px; padding: 23px; border-bottom: 1px solid #eceef2; } .zt-download-sidebar-heading > span { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 12px; background: #fff0ef; color: #e62d27; } .zt-download-sidebar-heading small { display: block; margin-bottom: 4px; color: #e62d27; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; } .zt-download-sidebar-heading h3 { margin: 0; color: #111827; font-size: 20px; } .zt-download-sidebar-nav { display: grid; } .zt-download-sidebar-nav a { width: 100%; min-width: 0; align-items: center; gap: 11px; padding: 13px 17px; border: 0; border-bottom: 1px solid #eceef2; background: #fff; color: #313846; cursor: pointer; text-align: left; font-size: 12px; font-weight: 700; } .zt-download-sidebar-nav a > span { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff3f2; color: #e62d27; } .zt-download-sidebar-nav a > i { color: #adb3bd; font-size: 9px; } .zt-download-sidebar-nav a.active { background: linear-gradient( 135deg, #e62d27, #ff4931 ); color: #fff; } .zt-download-sidebar-nav a.active > span { background: #fff; color: #e62d27; } .zt-download-sidebar-nav a.active > i { color: #fff; } .zt-download-sidebar-help { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; margin: 16px; padding: 17px; border-radius: 15px; background: #fff8f4; } .zt-download-sidebar-help > span { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e62d27; color: #fff; } .zt-download-sidebar-help strong { color: #111827; font-size: 12px; } .zt-download-sidebar-help p { margin: 6px 0 9px; color: #737c8b; font-size: 10px; line-height: 1.55; } .zt-download-sidebar-help a { display: inline-flex; align-items: center; gap: 6px; color: #e62d27; text-decoration: none; font-size: 10px; font-weight: 800; } /* ========================================================= RESOURCE CONTENT ========================================================= */ .zt-download-content { min-width: 0; } .zt-download-content-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .zt-download-content-top h3 { margin: 7px 0 0; color: #111827; font-size: 27px; line-height: 1.3; } .zt-download-result-count { flex-shrink: 0; padding: 7px 11px; border-radius: 30px; background: #fff0ef; color: #e62d27; font-size: 10px; font-weight: 800; } .zt-download-resource-list { display: grid; gap: 14px; } .zt-download-resource-card { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 17px; padding: 20px; border: 1px solid #e6e8ec; border-radius: 17px; background: #fff; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .zt-download-resource-card:hover { transform: translateY(-3px); border-color: rgba(230, 45, 39, .35); box-shadow: 0 16px 40px rgba(17, 24, 39, .07); } .zt-download-resource-card.featured { border-color: rgba(230, 45, 39, .45); background: linear-gradient( 135deg, #fff 0%, #fff8f5 100% ); } .zt-download-resource-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 16px; font-size: 21px; } .zt-download-resource-icon.notification { color: #e62d27; background: #fff0ef; } .zt-download-resource-icon.syllabus { color: #c8201b; background: #fff0ef; } .zt-download-resource-icon.notes { color: #ed7d00; background: #fff4e8; } .zt-download-resource-icon.papers { color: #c8201b; background: #fff0ef; } .zt-download-resource-info { min-width: 0; } .zt-download-resource-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 7px; } .zt-download-resource-meta span { color: #e62d27; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; } .zt-download-resource-meta small { padding: 4px 7px; border-radius: 20px; background: #f2f4f7; color: #7d8592; font-size: 8px; } .zt-download-resource-info h3 { margin: 0; overflow-wrap: anywhere; color: #111827; font-size: 17px; line-height: 1.4; } .zt-download-resource-info > p { margin: 7px 0 0; color: #737c8b; font-size: 11px; line-height: 1.65; } .zt-download-resource-details { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; } .zt-download-resource-details span { display: inline-flex; align-items: center; gap: 6px; color: #858d99; font-size: 9px; font-weight: 700; } .zt-download-resource-details i { color: #e62d27; } .zt-download-resource-btn { min-width: 112px; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 11px; background: #111827; color: #fff; text-decoration: none; font-size: 10px; font-weight: 800; transition: background .25s ease, transform .25s ease; } .zt-download-resource-btn:hover { transform: translateY(-2px); background: #e62d27; } /* ========================================================= EMPTY STATE ========================================================= */ .zt-download-empty { padding: 70px 20px; text-align: center; } .zt-download-empty > span { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; border-radius: 50%; background: #fff0ef; color: #e62d27; font-size: 25px; } .zt-download-empty h3 { margin: 0; color: #111827; font-size: 22px; } .zt-download-empty p { margin: 8px 0 0; color: #7b8492; font-size: 12px; } /*==================================================== ROOT VARIABLES ====================================================*/ :root{ --primary:#d62828; --primary-dark:#b71c1c; --secondary:#f4b400; --heading:#1f1f1f; --text:#666; --white:#fff; --bg:#fffdf8; --border:#ececec; --radius:18px; --transition:.35s ease; } body{ background:var(--bg); } section{ position:relative; } /*==================================================== BUTTONS ====================================================*/ .theme-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 34px; background:linear-gradient( 135deg, #d62828, #ef4444); color:#fff; border-radius:14px; text-decoration:none; font-weight:600; transition:.35s; border:none; } .theme-btn:hover{ color:#fff; transform:translateY(-4px); box-shadow: 0 18px 35px rgba(214,40,40,.25); } .theme-btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 34px; border-radius:14px; border:2px solid var(--primary); color:var(--primary); text-decoration:none; transition:.35s; font-weight:600; } .theme-btn-outline:hover{ background:var(--primary); color:#fff; } /*==================================================== HERO ====================================================*/ .enquiry-hero{ padding:150px 0 100px; background:linear-gradient( 135deg, #fffdf8, #fff5e8); overflow:hidden; } .hero-content{ position:relative; z-index:5; text-align:center; } .hero-content h1{ font-size:64px; font-weight:700; color:#222; margin-bottom:22px; } .hero-content h1 span{ color:var(--primary); } .hero-content p{ max-width:800px; margin:auto; font-size:18px; line-height:1.9; color:var(--text); } .hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:40px; background:#fff; color:var(--primary); border:1px solid #ffe3d9; font-weight:600; margin-bottom:30px; box-shadow: 0 12px 35px rgba(0,0,0,.06); } .hero-badge i{ color:var(--secondary); } .hero-buttons{ margin-top:35px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; } .breadcrumb-area{ margin-top:35px; display:flex; justify-content:center; gap:12px; font-weight:600; } .breadcrumb-area a{ color:var(--primary); text-decoration:none; } .breadcrumb-area span{ color:#777; } .hero-shape{ position:absolute; border-radius:50%; } .shape-one{ width:520px; height:520px; background:rgba(214,40,40,.05); right:-180px; top:-220px; } .shape-two{ width:330px; height:330px; background:rgba(244,180,0,.08); left:-120px; bottom:-120px; } .shape-three{ width:150px; height:150px; background:rgba(214,40,40,.08); left:10%; top:80px; } /*==================================================== ANIMATION ====================================================*/ @keyframes fadeCard{ from{ opacity:0; transform:translateY(35px); } to{ opacity:1; transform:translateY(0); } } .contact-card, .enquiry-form-card{ animation:fadeCard .6s ease; } /*==================================================== ENQUIRY SECTION ====================================================*/ .enquiry-section{ padding:100px 0; background:#fffdf8; } .enquiry-section .row{ display:flex; gap:35px; align-items:flex-start; } /*==================================================== CONTACT CARD ====================================================*/ .contact-card{ position:sticky; top:120px; background:linear-gradient( 135deg, #d62828, #b71c1c); border-radius:24px; padding:40px; overflow:hidden; color:#fff; box-shadow: 0 25px 60px rgba(214,40,40,.18); } .contact-card::before{ content:""; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.06); right:-120px; top:-120px; } .contact-card::after{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,193,7,.10); left:-60px; bottom:-60px; } .contact-card>*{ position:relative; z-index:2; } /*==================================================== CONTACT TAG ====================================================*/ .contact-tag{ display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:40px; background:rgba(255,255,255,.12); color:#fff; font-weight:600; margin-bottom:28px; } .contact-tag i{ color:#f4b400; } /*==================================================== CARD TEXT ====================================================*/ .contact-card h2{ font-size:38px; font-weight:700; margin-bottom:18px; } .contact-card>p{ color:rgba(255,255,255,.92); line-height:1.9; margin-bottom:35px; } /*==================================================== CONTACT INFO ====================================================*/ .contact-info{ display:flex; flex-direction:column; gap:22px; } .contact-item{ display:flex; gap:18px; align-items:flex-start; } .contact-item .icon{ width:58px; height:58px; border-radius:16px; background:rgba(255,255,255,.12); display:flex; justify-content:center; align-items:center; flex-shrink:0; } .contact-item .icon i{ font-size:20px; color:#f4b400; } .contact-item h6{ color:#fff; margin-bottom:6px; font-size:17px; } .contact-item a{ color:#fff; text-decoration:none; transition:.3s; } .contact-item a:hover{ color:#f4b400; } .contact-item p{ margin:0; color:rgba(255,255,255,.90); line-height:1.7; } /*==================================================== FORM CARD ====================================================*/ .enquiry-form-card{ background:#fff; border-radius:24px; padding:50px; border:1px solid #ececec; box-shadow: 0 25px 70px rgba(0,0,0,.07); position:relative; overflow:hidden; } .enquiry-form-card::before{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(214,40,40,.04); right:-120px; top:-120px; } .enquiry-form-card>*{ position:relative; z-index:2; } /*==================================================== FORM HEADING ====================================================*/ .form-heading{ margin-bottom:40px; } .form-heading span{ display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-radius:40px; background:#fff3ed; color:#d62828; font-weight:600; margin-bottom:18px; } .form-heading h3{ font-size:38px; font-weight:700; color:#222; margin-bottom:12px; } .form-heading p{ color:#666; line-height:1.8; } /*==================================================== FORM LAYOUT ====================================================*/ .enquiry-form .row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; } .enquiry-form .col-lg-6{ width:100%; } .enquiry-form .col-lg-12{ grid-column:1/-1; } /*==================================================== FORM GROUP ====================================================*/ .form-group{ margin-bottom:0; } .form-group label{ display:block; font-size:15px; font-weight:600; color:#333; margin-bottom:10px; } /*==================================================== INPUT BOX ====================================================*/ .input-box{ position:relative; } .input-box i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:#d62828; font-size:16px; z-index:2; } .input-box input, .input-box select{ width:100%; height:58px; border:1px solid #e5e5e5; border-radius:14px; background:#fff; padding:0 18px 0 55px; outline:none; transition:.35s; font-size:15px; } .input-box select{ appearance:none; cursor:pointer; } .input-box input:focus, .input-box select:focus{ border-color:#d62828; box-shadow: 0 0 0 4px rgba(214,40,40,.08); } .input-box:hover input, .input-box:hover select{ border-color:#d62828; } /*==================================================== TEXTAREA ====================================================*/ .form-group textarea{ width:100%; min-height:180px; border:1px solid #e5e5e5; border-radius:16px; padding:20px; resize:none; outline:none; transition:.35s; line-height:1.8; font-size:15px; } .form-group textarea:focus{ border-color:#d62828; box-shadow: 0 0 0 4px rgba(214,40,40,.08); } /*==================================================== PLACEHOLDER ====================================================*/ ::placeholder{ color:#999; } /*==================================================== DECLARATION ====================================================*/ .declaration-box{ padding:22px; border-radius:16px; background:#fff8f5; border:1px solid #ffe2d8; } .check-container{ display:flex; align-items:flex-start; gap:15px; cursor:pointer; line-height:1.8; color:#555; } .check-container input{ width:18px; height:18px; margin-top:5px; accent-color:#d62828; flex-shrink:0; } /*==================================================== SUBMIT BUTTON ====================================================*/ .submit-area{ text-align:center; margin-top:10px; } .submit-area .theme-btn{ min-width:240px; height:56px; border-radius:14px; font-size:16px; display:inline-flex; justify-content:center; align-items:center; gap:10px; } .submit-area .theme-btn i{ transition:.35s; } .submit-area .theme-btn:hover i{ transform:translateX(6px); } /*==================================================== FORM ANIMATION ====================================================*/ .enquiry-form-card{ animation:fadeCard .6s ease; } @keyframes fadeCard{ from{ opacity:0; transform:translateY(35px); } to{ opacity:1; transform:translateY(0); } } /*==================================================== EXAM RESULT PAGE ====================================================*/ :root{ --primary:#d62828; --primary-dark:#b71c1c; --secondary:#f4b400; --heading:#1f1f1f; --text:#666; --white:#fff; --bg:#fffdf8; --border:#ececec; --radius:18px; --transition:.35s ease; } /*==================================================== COMMON ====================================================*/ body{ background:var(--bg); } section{ position:relative; } .section-heading{ max-width:760px; margin:auto auto 70px; } .section-heading span{ display:inline-flex; align-items:center; gap:8px; padding:8px 22px; border-radius:40px; background:#fff3ed; color:var(--primary); font-weight:600; font-size:15px; margin-bottom:18px; } .section-heading h2{ font-size:48px; font-weight:700; color:var(--heading); margin-bottom:18px; } .section-heading h2 span{ padding:0; background:none; color:var(--primary); } .section-heading p{ font-size:17px; line-height:1.9; color:var(--text); } /*==================================================== BUTTONS ====================================================*/ .theme-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:16px 36px; border-radius:12px; background:linear-gradient( 135deg, #d62828, #ef4444); color:#fff; text-decoration:none; border:none; font-weight:600; transition:.35s; } .theme-btn:hover{ color:#fff; transform:translateY(-4px); box-shadow: 0 18px 40px rgba(214,40,40,.25); } .theme-btn-outline{ display:inline-flex; align-items:center; justify-content:center; padding:16px 36px; border-radius:12px; border:2px solid var(--primary); color:var(--primary); text-decoration:none; transition:.35s; font-weight:600; } .theme-btn-outline:hover{ background:var(--primary); color:#fff; } /*==================================================== HERO ====================================================*/ .result-hero{ overflow:hidden; padding: 150px 0 100px; background: linear-gradient( 135deg, #fffdf8, #fff5e8); } .hero-content{ position:relative; z-index:5; } .hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:12px 26px; border-radius:50px; background:#fff; color:var(--primary); border:1px solid #ffe2d7; font-weight:600; margin-bottom:30px; box-shadow: 0 12px 35px rgba(0,0,0,.05); } .hero-badge i{ color:var(--secondary); } .hero-content h1{ font-size:48px; font-weight:700; color:#222; margin-bottom:25px; } .hero-content h1 span{ color:var(--primary); } .hero-content p{ max-width:820px; margin:auto; color:var(--text); font-size:18px; line-height:1.9; } /*==================================================== HERO BUTTONS ====================================================*/ .hero-buttons{ margin-top:40px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; } /*==================================================== BREADCRUMB ====================================================*/ .breadcrumb-area{ margin-top:35px; display:flex; justify-content:center; gap:12px; font-weight:600; } .breadcrumb-area a{ color:var(--primary); text-decoration:none; } .breadcrumb-area span{ color:#777; } /*==================================================== FLOATING SHAPES ====================================================*/ .hero-shape{ position:absolute; border-radius:50%; } .shape-one{ width:520px; height:520px; background: rgba(214,40,40,.05); top:-220px; right:-180px; } .shape-two{ width:350px; height:350px; background: rgba(244,180,0,.08); left:-120px; bottom:-120px; } .shape-three{ width:140px; height:140px; background: rgba(214,40,40,.08); top:90px; left:12%; } /*==================================================== RESULT FORM SECTION ====================================================*/ .result-form-section{ padding:100px 0; background:#ffffff; } .result-form-card{ max-width:1100px; margin:auto; background:#ffffff; border-radius:24px; padding:55px; border:1px solid #ececec; box-shadow: 0 25px 70px rgba(0,0,0,.08); position:relative; overflow:hidden; } .result-form-card::before{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(214,40,40,.04); top:-180px; right:-120px; } .result-form-card::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(244,180,0,.08); left:-120px; bottom:-120px; } .result-form{ position:relative; z-index:2; } /*==================================================== FORM GROUP ====================================================*/ .form-group{ margin-bottom:28px; } .form-group label{ display:block; font-size:15px; font-weight:600; color:#333; margin-bottom:10px; } /*==================================================== INPUT BOX ====================================================*/ .input-box{ position:relative; } .input-box i{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--primary); font-size:16px; z-index:5; } .input-box input, .input-box select{ width:100%; height:58px; border:1px solid var(--border); border-radius:14px; background:#fff; padding-left:52px; padding-right:18px; transition:var(--transition); font-size:15px; outline:none; } .input-box input:focus, .input-box select:focus{ border-color:var(--primary); box-shadow: 0 0 0 4px rgba(214,40,40,.08); } .input-box:hover input, .input-box:hover select{ border-color:#d62828; } /*==================================================== SELECT ====================================================*/ .input-box select{ appearance:none; cursor:pointer; } /*==================================================== TEXTAREA ====================================================*/ .form-group textarea{ width:100%; border:1px solid var(--border); border-radius:16px; padding:18px 20px; min-height:180px; resize:none; transition:var(--transition); outline:none; font-size:15px; line-height:1.8; } .form-group textarea:focus{ border-color:var(--primary); box-shadow: 0 0 0 4px rgba(214,40,40,.08); } /*==================================================== UPLOAD BOX ====================================================*/ .upload-box{ position:relative; border:2px dashed #d8d8d8; border-radius:18px; overflow:hidden; background:#fafafa; transition:var(--transition); min-height:170px; } .upload-box:hover{ border-color:var(--primary); background:#fff8f5; } .upload-box input{ position:absolute; width:100%; height:100%; opacity:0; cursor:pointer; z-index:5; } .upload-content{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:170px; padding:25px; } .upload-content i{ font-size:42px; color:var(--primary); margin-bottom:18px; } .upload-content h6{ font-size:18px; font-weight:700; margin-bottom:8px; color:#222; } .upload-content span{ font-size:14px; color:#777; } /*==================================================== DECLARATION ====================================================*/ .declaration-box{ background:#fff8f5; border:1px solid #ffe2d8; border-radius:16px; padding:22px; } .check-container{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; color:#555; line-height:1.8; position:relative; } .check-container input{ margin-top:5px; width:18px; height:18px; accent-color:var(--primary); } /*==================================================== SUBMIT BUTTON ====================================================*/ .submit-area{ text-align:center; margin-top:20px; } .submit-area .theme-btn{ min-width:260px; height:58px; font-size:17px; border-radius:14px; } .submit-area .theme-btn i{ transition:.35s; } .submit-area .theme-btn:hover i{ transform:translateX(6px); } /*==================================================== PLACEHOLDER ====================================================*/ ::placeholder{ color:#999; } /*==================================================== RECENT ACHIEVERS ====================================================*/ .recent-achievers{ padding:100px 0; background:linear-gradient( 180deg, #fffdf8, #ffffff); overflow:hidden; } .achieverSwiper{ padding:10px 10px 60px; } .achiever-card{ background:#fff; border-radius:22px; overflow:hidden; border:1px solid #ececec; box-shadow: 0 18px 45px rgba(0,0,0,.06); transition:.35s; } .achiever-card:hover{ transform:translateY(-10px); box-shadow: 0 28px 70px rgba(214,40,40,.12); } /*============================== IMAGE ==============================*/ .achiever-image{ position:relative; overflow:hidden; } .achiever-image img{ width:100%; height:280px; object-fit:cover; transition:.5s; } .achiever-card:hover img{ transform:scale(1.08); } /*============================== AIR BADGE ==============================*/ .air-badge{ position:absolute; top:18px; left:18px; padding:8px 18px; border-radius:30px; background:linear-gradient( 135deg, #d62828, #ef4444); color:#fff; font-weight:700; font-size:13px; box-shadow: 0 10px 25px rgba(214,40,40,.30); } /*============================== CONTENT ==============================*/ .achiever-content{ padding:28px; } .achiever-content h4{ font-size:24px; color:#222; margin-bottom:6px; } .achiever-content>span{ display:block; color:var(--primary); font-weight:600; margin-bottom:20px; } .achiever-content ul{ list-style:none; padding:0; margin:0; } .achiever-content li{ display:flex; align-items:center; gap:10px; margin-bottom:14px; color:#666; } .achiever-content li:last-child{ margin-bottom:0; } .achiever-content li i{ width:34px; height:34px; display:flex; justify-content:center; align-items:center; border-radius:50%; background:#fff5ef; color:var(--primary); } /*============================== PAGINATION ==============================*/ .achieverSwiper .swiper-pagination{ bottom:0; } .achieverSwiper .swiper-pagination-bullet{ width:12px; height:12px; opacity:1; background:#d8d8d8; } .achieverSwiper .swiper-pagination-bullet-active{ width:34px; border-radius:30px; background:var(--primary); } /*==================================================== CTA ====================================================*/ .result-cta{ padding:90px 0; background:#ffffff; } .cta-wrapper{ background: linear-gradient( 135deg, #d62828, #b71c1c); border-radius:28px; padding:65px; overflow:hidden; position:relative; } .cta-wrapper::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.06); right:-180px; top:-180px; } .cta-wrapper::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(255,193,7,.12); left:-100px; bottom:-100px; } .cta-content{ position:relative; z-index:2; } .cta-content span{ display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:40px; background:rgba(255,255,255,.12); color:#fff; margin-bottom:22px; } .cta-content span i{ color:#ffc107; } .cta-content h2{ font-size:48px; color:#fff; margin-bottom:18px; } .cta-content h2 span{ background:none; padding:0; color:#ffc107; } .cta-content p{ color:rgba(255,255,255,.90); line-height:1.9; margin-bottom:0; } .cta-buttons{ display:flex; justify-content:flex-end; align-items:center; gap:18px; position:relative; z-index:2; } /*==================================================== SMALL ANIMATIONS ====================================================*/ .achiever-card, .result-form-card, .cta-wrapper{ animation:fadeCard .6s ease; } @keyframes fadeCard{ from{ opacity:0; transform:translateY(35px); } to{ opacity:1; transform:translateY(0); } } /*===================================== FORM GRID ======================================*/ .result-form .row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .result-form .col-lg-6{ width:100%; } .result-form .col-lg-12{ grid-column:1/-1; } @media(max-width:991px){ .result-form .row{ grid-template-columns:1fr; } .result-form .col-lg-12{ grid-column:auto; } } /* ========================================================= ZONE TECH PUBLICATIONS PAGE EXACT CSS FOR YOUR CURRENT HTML ========================================================= */ /* ========================================================= RESET / PAGE PROTECTION ========================================================= */ .publication-hero, .publication-search-section, .publication-categories, .featured-publications, .publication-best-selling, .publication-benefits, .all-publications-section, .publication-faq-section { box-sizing: border-box; width: 100%; } .publication-hero *, .publication-search-section *, .publication-categories *, .featured-publications *, .publication-best-selling *, .publication-benefits *, .all-publications-section *, .publication-faq-section * { box-sizing: border-box; } .publication-container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; } /* ========================================================= HERO ========================================================= */ .publication-hero { position: relative; min-height: 640px; display: flex; align-items: center; padding: 80px 0; overflow: hidden; background: radial-gradient( circle at 80% 35%, rgba(255, 183, 77, 0.20), transparent 32% ), radial-gradient( circle at 12% 85%, rgba(239, 45, 45, 0.10), transparent 30% ), linear-gradient( 135deg, #ffffff 0%, #fffafa 52%, #fff8ee 100% ); } .publication-hero::before { content: ""; position: absolute; width: 480px; height: 480px; top: -280px; right: -150px; border-radius: 50%; background: rgba(239, 45, 45, 0.06); } .publication-hero::after { content: ""; position: absolute; width: 360px; height: 360px; left: -210px; bottom: -210px; border-radius: 50%; background: rgba(255, 179, 0, 0.08); } .publication-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr); align-items: center; gap: 80px; } /* ========================================================= HERO LEFT ========================================================= */ .publication-hero-content { min-width: 0; } .publication-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #ef2d2d; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .publication-hero-content h1 { max-width: 720px; margin: 0; color: #171717; font-family: "Poppins", sans-serif; font-size: clamp(48px, 5vw, 72px); line-height: 1.07; font-weight: 800; letter-spacing: -3px; } .publication-hero-content h1 span { display: block; color: #ef2d2d; } .publication-hero-content > p { max-width: 720px; margin: 24px 0 0; color: #6f6f6f; font-family: "Inter", sans-serif; font-size: 17px; line-height: 1.8; } .publication-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .publication-primary-btn, .publication-secondary-btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; border-radius: 11px; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; } .publication-primary-btn { border: 1px solid #ef2d2d; background: linear-gradient( 135deg, #ef2d2d, #ff512f ); color: #ffffff; box-shadow: 0 13px 30px rgba(239, 45, 45, 0.24); } .publication-primary-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(239, 45, 45, 0.30); } .publication-secondary-btn { border: 1px solid #dddddd; background: #ffffff; color: #171717; } .publication-secondary-btn:hover { transform: translateY(-3px); border-color: #ef2d2d; color: #ef2d2d; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08); } /* ========================================================= HERO FEATURES ========================================================= */ .publication-hero-features { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 30px; } .publication-hero-features > span { display: inline-flex; align-items: center; gap: 8px; color: #3e3e3e; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; } .publication-hero-features > span i { color: #ef2d2d; } /* ========================================================= HERO RIGHT VISUAL ========================================================= */ .publication-hero-visual { position: relative; min-width: 0; min-height: 490px; display: flex; align-items: center; justify-content: center; } .publication-hero-visual::before { content: ""; position: absolute; width: 410px; height: 410px; border-radius: 50%; background: radial-gradient( circle, rgba(239, 45, 45, 0.15), rgba(255, 179, 0, 0.08) 48%, transparent 72% ); } /* ========================================================= BOOK SHOWCASE ========================================================= */ .publication-book-showcase { position: relative; width: 390px; height: 410px; z-index: 2; } .publication-book-card { position: absolute; width: 245px; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 28px 24px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 18px 24px 24px 18px; box-shadow: 0 30px 65px rgba(0, 0, 0, 0.16); font-family: "Poppins", sans-serif; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .publication-book-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13px; background: rgba(0, 0, 0, 0.15); box-shadow: inset -3px 0 6px rgba(255, 255, 255, 0.18); } .publication-book-card i { margin-bottom: 20px; color: rgba(255, 255, 255, 0.95); font-size: 62px; } .publication-book-card span { color: #ffffff; font-size: 17px; font-weight: 700; } .publication-book-card-back { top: 52px; left: 0; z-index: 1; background: linear-gradient( 150deg, #252525, #5a5a5a ); transform: rotate(-11deg); } .publication-book-card-middle { top: 30px; right: 0; z-index: 2; background: linear-gradient( 150deg, #152f64, #386bc7 ); transform: rotate(10deg); } .publication-book-card-front { top: 30px; left: 72px; z-index: 3; justify-content: flex-start; padding-top: 72px; background: linear-gradient( 160deg, #c91f2d, #ef2d2d 45%, #ff6247 ); transform: rotate(-1deg); } .publication-book-card-front:hover { transform: rotate(-1deg) translateY(-8px); } .publication-book-label { position: absolute; top: 18px; left: 22px; padding: 7px 11px; border-radius: 999px; background: #ffb300; color: #171717 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.8px; } .publication-book-card-front h3 { margin: 0; color: #ffffff; font-size: 31px; font-weight: 800; } .publication-book-card-front p { margin: 7px 0 0; color: rgba(255, 255, 255, 0.92); font-size: 14px; font-weight: 600; } .publication-book-card-front small { margin-top: auto; color: rgba(255, 255, 255, 0.8); font-size: 10px; letter-spacing: 1px; } /* ========================================================= FLOATING HERO CARDS ========================================================= */ .publication-floating-card { position: absolute; z-index: 5; min-width: 220px; display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 14px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10); } .publication-floating-card > i { flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff0f0; color: #ef2d2d; font-size: 17px; } .publication-floating-card div { display: flex; flex-direction: column; } .publication-floating-card strong { color: #171717; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; } .publication-floating-card span { margin-top: 2px; color: #888888; font-size: 11px; } .publication-floating-one { top: 38px; right: -10px; } .publication-floating-two { left: -15px; bottom: 25px; } /* ========================================================= SEARCH SECTION ========================================================= */ .publication-search-section { position: relative; z-index: 10; padding: 0 0 65px; background: #f8f9fb; } .publication-search-box { position: relative; top: -34px; width: 100%; min-height: 74px; display: grid; grid-template-columns: 50px minmax(0, 1fr) 160px; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e7e7e7; border-radius: 18px; background: #ffffff; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08); } .publication-search-box > i { display: flex; align-items: center; justify-content: center; color: #ef2d2d; font-size: 19px; } .publication-search-box input { width: 100%; height: 50px; border: none; outline: none; background: transparent; color: #171717; font-family: "Inter", sans-serif; font-size: 14px; } .publication-search-box button { height: 52px; border: none; border-radius: 10px; background: linear-gradient( 135deg, #ef2d2d, #ff512f ); color: #ffffff; cursor: pointer; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; } /* ========================================================= COMMON SECTION HEADINGS ========================================================= */ .publication-section-heading { margin-bottom: 38px; } .publication-section-heading > span, .publication-best-content > span { display: inline-block; margin-bottom: 11px; color: #ef2d2d; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; } .publication-section-heading h2, .publication-best-content h2 { margin: 0; color: #171717; font-family: "Poppins", sans-serif; font-size: clamp(34px, 4vw, 50px); line-height: 1.15; font-weight: 800; letter-spacing: -1.7px; } .publication-section-heading p { max-width: 720px; margin: 13px 0 0; color: #777777; font-size: 15px; line-height: 1.75; } .publication-heading-center { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; } .publication-heading-center p { margin-left: auto; margin-right: auto; } .publication-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; } .publication-heading-row > a { display: inline-flex; align-items: center; gap: 8px; color: #ef2d2d; font-size: 13px; font-weight: 700; text-decoration: none; } /* ========================================================= CATEGORIES ========================================================= */ .publication-categories { padding: 85px 0; background: #ffffff; } .publication-category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; } .publication-category-card { min-width: 0; min-height: 155px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px 12px; border: 1px solid #ececec; border-radius: 17px; background: #ffffff; color: #171717; cursor: pointer; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .publication-category-card:hover, .publication-category-card.active { transform: translateY(-6px); border-color: rgba(239, 45, 45, 0.35); color: #ef2d2d; box-shadow: 0 18px 38px rgba(239, 45, 45, 0.10); } .publication-category-icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; border-radius: 15px; background: #fff0f0; color: #ef2d2d; font-size: 21px; } .publication-category-card strong { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; } .publication-category-card small { color: #8a8a8a; font-size: 11px; } /* ========================================================= FEATURED PUBLICATIONS ========================================================= */ .featured-publications { padding: 85px 0; background: linear-gradient( 180deg, #f8f9fb, #ffffff ); } .publication-product-grid { display: grid; gap: 24px; } .publication-featured-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .publication-product-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #ebebeb; border-radius: 18px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.045); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .publication-product-card:hover { transform: translateY(-7px); border-color: rgba(239, 45, 45, 0.25); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10); } /* ========================================================= PRODUCT IMAGE ========================================================= */ .publication-product-image { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; padding: 30px; overflow: hidden; background: linear-gradient( 180deg, #f7f7f7, #ffffff ); } .publication-product-badge { position: absolute; z-index: 4; top: 16px; left: 16px; padding: 7px 11px; border-radius: 999px; background: #ef2d2d; color: #ffffff; font-size: 9px; font-weight: 800; letter-spacing: 0.8px; } .publication-badge-blue { background: #315fb5; } .publication-badge-dark { background: #252525; } .publication-wishlist-btn { position: absolute; z-index: 4; top: 15px; right: 15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #e8e8e8; border-radius: 50%; background: #ffffff; color: #555555; cursor: pointer; } /* ========================================================= BOOK PLACEHOLDER ========================================================= */ .publication-book-placeholder { position: relative; width: 180px; height: 235px; display: flex; flex-direction: column; align-items: center; padding: 24px 18px; border-radius: 8px 14px 14px 8px; color: #ffffff; text-align: center; box-shadow: 12px 18px 30px rgba(0, 0, 0, 0.17); } .publication-book-placeholder::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: rgba(0, 0, 0, 0.17); border-radius: 8px 0 0 8px; } .publication-book-placeholder small { font-size: 9px; font-weight: 700; letter-spacing: 1px; } .publication-book-placeholder i { margin-top: 28px; font-size: 43px; } .publication-book-placeholder h3 { margin: 14px 0 0; color: #ffffff; font-size: 27px; font-weight: 800; } .publication-book-placeholder p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.92); font-size: 10px; font-weight: 700; } .red-book { background: linear-gradient( 150deg, #a91421, #ef2d2d, #ff6348 ); } .blue-book { background: linear-gradient( 150deg, #173269, #315fb5, #5585dc ); } .orange-book { background: linear-gradient( 150deg, #c55b00, #ff7a00, #ffab45 ); } .dark-book { background: linear-gradient( 150deg, #181818, #363636, #626262 ); } /* ========================================================= PRODUCT CONTENT ========================================================= */ .publication-product-content { padding: 20px; } .publication-product-category { display: block; margin-bottom: 8px; color: #ef2d2d; font-size: 10px; font-weight: 800; letter-spacing: 1px; } .publication-product-content > h3 { min-height: 72px; margin: 0; color: #171717; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.55; font-weight: 700; } .publication-rating { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .publication-rating span { color: #ffb300; font-size: 11px; } .publication-rating small { color: #888888; font-size: 11px; } .publication-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; } .publication-price-row > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; } .publication-price-row strong { color: #171717; font-size: 20px; font-weight: 800; } .publication-price-row del { color: #999999; font-size: 12px; } .publication-discount { color: #259943; font-size: 10px; font-weight: 800; } .publication-cart-btn-outofstock { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; border: 1px solid #ef2d2d; border-radius: 9px; background: #ef2d2d; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800; transition: background 0.25s ease, color 0.25s ease; } .publication-cart-btn-outofstock:hover { background: #ef2d2d; color: #ffffff; } .publication-cart-btn { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; border: 1px solid #ef2d2d; border-radius: 9px; background: #ffffff; color: #ef2d2d; cursor: pointer; font-size: 12px; font-weight: 800; transition: background 0.25s ease, color 0.25s ease; } .publication-cart-btn:hover { background: #ef2d2d; color: #ffffff; } /* ========================================================= BEST SELLING ========================================================= */ .publication-best-selling { padding: 95px 0; overflow: hidden; background: #171717; } .publication-best-selling-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr); align-items: center; gap: 80px; } .publication-best-content h2 { color: #ffffff; } .publication-best-content > p { max-width: 650px; margin: 20px 0 0; color: #bdbdbd; font-size: 15px; line-height: 1.8; } .publication-best-content ul { display: grid; gap: 13px; margin: 27px 0 32px; padding: 0; list-style: none; } .publication-best-content li { display: flex; align-items: center; gap: 10px; color: #dddddd; font-size: 14px; } .publication-best-content li i { color: #ef2d2d; } .publication-best-books { position: relative; min-height: 390px; } .publication-best-book { position: absolute; width: 210px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; border-radius: 12px 20px 20px 12px; color: #ffffff; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); } .publication-best-book i { font-size: 54px; } .publication-best-book strong { font-size: 14px; letter-spacing: 1px; } .publication-best-book-one { left: 0; top: 50px; z-index: 1; background: #c92532; transform: rotate(-12deg); } .publication-best-book-two { left: 125px; top: 10px; z-index: 3; background: #315fb5; } .publication-best-book-three { right: 0; top: 55px; z-index: 2; background: #e47b16; transform: rotate(12deg); } /* ========================================================= BENEFITS ========================================================= */ .publication-benefits { padding: 90px 0; background: #ffffff; } .publication-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .publication-benefit-card { min-height: 245px; padding: 28px; border: 1px solid #eeeeee; border-radius: 18px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease; } .publication-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08); } .publication-benefit-card > span { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 23px; border-radius: 15px; background: linear-gradient( 135deg, #ef2d2d, #ff512f ); color: #ffffff; font-size: 20px; } .publication-benefit-card h3 { margin: 0 0 11px; color: #171717; font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 700; } .publication-benefit-card p { margin: 0; color: #777777; font-size: 13px; line-height: 1.75; } /* ========================================================= ALL PUBLICATIONS ========================================================= */ .all-publications-section { padding: 90px 0; background: #f8f9fb; } .publication-shop-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 34px; } /* ========================================================= SIDEBAR ========================================================= */ .publication-sidebar-column { position: relative; align-self: stretch; min-width: 0; } .publication-sidebar { position: sticky; top: 105px; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 18px; background: #ffffff; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06); } .publication-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px; border-bottom: 1px solid #eeeeee; } .publication-sidebar-header h3 { margin: 0; color: #171717; font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 700; } .publication-filter-close { display: none; } .publication-sidebar-group { padding: 20px; } .publication-sidebar-group + .publication-sidebar-group { border-top: 1px solid #eeeeee; } .publication-sidebar-group h4 { margin: 0 0 13px; color: #777777; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .publication-side-filter { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: none; border-radius: 9px; background: transparent; color: #333333; cursor: pointer; text-align: left; } .publication-side-filter > span { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; } .publication-side-filter small { min-width: 25px; padding: 4px 6px; border-radius: 999px; background: #f1f1f1; color: #777777; text-align: center; font-size: 9px; } .publication-side-filter:hover, .publication-side-filter.active { background: #fff0f0; color: #ef2d2d; } .publication-checkbox { min-height: 42px; display: flex; align-items: center; gap: 9px; color: #555555; cursor: pointer; font-size: 12px; } .publication-checkbox input { accent-color: #ef2d2d; } /* ========================================================= SHOP CONTENT ========================================================= */ .publication-shop-content { min-width: 0; } .publication-shop-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 25px; padding: 10px 14px; border: 1px solid #e7e7e7; border-radius: 12px; background: #ffffff; } .publication-shop-toolbar p { margin: 0; color: #777777; font-size: 12px; } .publication-shop-toolbar select { height: 40px; padding: 0 35px 0 12px; border: 1px solid #dddddd; border-radius: 8px; outline: none; background: #ffffff; color: #444444; font-size: 11px; } .publication-filter-open { display: none; } .publication-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .publication-no-results { display: none; padding: 60px 25px; border: 1px dashed #dddddd; border-radius: 15px; background: #ffffff; text-align: center; } .publication-no-results i { margin-bottom: 14px; color: #ef2d2d; font-size: 34px; } .publication-no-results h3 { margin: 0 0 7px; font-size: 20px; } .publication-no-results p { margin: 0; color: #777777; font-size: 13px; } /* ========================================================= FAQ ========================================================= */ .publication-faq-section { padding: 90px 0; background: #ffffff; } .publication-faq-list { margin-top: 38px; border-top: 1px solid #ffd2d2; } .publication-faq-item { border-bottom: 1px solid #ffd2d2; } .publication-faq-question { width: 100%; min-height: 86px; display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; align-items: center; gap: 15px; padding: 14px 0; border: none; background: transparent; cursor: pointer; text-align: left; } .publication-faq-number { color: #f2a0a0; font-size: 12px; font-weight: 800; } .publication-faq-question > strong { color: #ef2d2d; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.55; font-weight: 700; } .publication-faq-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; justify-self: end; border-radius: 50%; background: linear-gradient( 135deg, #ef2d2d, #ff512f ); color: #ffffff; transition: transform 0.3s ease; } .publication-faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.35s ease, opacity 0.3s ease, visibility 0.3s ease; } .publication-faq-answer > div { overflow: hidden; } .publication-faq-answer p { margin: 0; padding: 0 65px 28px; color: #666666; font-size: 14px; line-height: 1.8; } .publication-faq-item.active .publication-faq-answer { grid-template-rows: 1fr; opacity: 1; visibility: visible; } .publication-faq-item.active .publication-faq-icon { transform: rotate(45deg); } /* ========================================================= GLOBAL CONFLICT PROTECTION ========================================================= */ .publication-hero-grid, .publication-category-grid, .publication-product-grid, .publication-best-selling-wrapper, .publication-benefit-grid, .publication-shop-layout { float: none !important; clear: none !important; } .publication-hero-visual, .publication-hero-content, .publication-shop-content, .publication-sidebar-column { width: auto; max-width: none; } .publication-category-card, .publication-side-filter, .publication-cart-btn, .publication-faq-question { font-family: "Inter", sans-serif; } /* ========================================================= PUBLICATION FAQ - FINAL FIX ========================================================= */ .publication-faq-list { width: 100%; margin-top: 40px; border-top: 1px solid #f1d6d6; } .publication-faq-item { width: 100%; overflow: hidden; border-bottom: 1px solid #f1d6d6; } /* QUESTION */ .publication-faq-question { width: 100%; min-height: 95px; display: grid; grid-template-columns: 55px minmax(0, 1fr) 55px; align-items: center; gap: 20px; padding: 20px 28px; border: none; background: #ffffff; cursor: pointer; text-align: left; transition: background 0.3s ease; } .publication-faq-number { color: #f29a9a; font-size: 17px; font-weight: 700; } .publication-faq-question strong { color: #ef2d2d; font-family: "Poppins", sans-serif; font-size: 18px; line-height: 1.5; font-weight: 700; } /* ICON */ .publication-faq-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; justify-self: end; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, #ef2d2d, #ff512f ); color: #ffffff; } .publication-faq-icon i { transition: transform 0.3s ease; } /* ========================================================= ANSWER CLOSED STATE ========================================================= */ .publication-faq-answer { display: block !important; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; background: #fff8f7; transition: max-height 0.45s ease, opacity 0.3s ease, visibility 0.3s ease; } /* IMPORTANT: PADDING ON INNER DIV */ .publication-faq-answer > div { padding: 5px 83px 30px 103px; } .publication-faq-answer p { margin: 0 0 14px; padding: 0 !important; color: #555555; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.8; } .publication-faq-answer p:last-child { margin-bottom: 0; } /* ========================================================= ANSWER OPEN STATE ========================================================= */ .publication-faq-item.faq-open .publication-faq-answer { opacity: 1; visibility: visible; } .publication-faq-item.faq-open .publication-faq-question { background: #fff8f7; } .publication-faq-item.faq-open .publication-faq-number { color: #ef2d2d; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { .publication-faq-question { min-height: 82px; grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 12px; padding: 16px 12px; } .publication-faq-number { font-size: 14px; } .publication-faq-question strong { font-size: 15px; } .publication-faq-icon { width: 40px; height: 40px; } .publication-faq-answer > div { padding: 4px 16px 24px 62px; } .publication-faq-answer p { font-size: 14px; line-height: 1.7; } } /* ========================================================== RPSC INTERVIEW PAGE ========================================================== */ .rpsc-hero { position: relative; padding: 90px 0 85px; overflow: hidden; background: radial-gradient( circle at 10% 20%, rgba(255, 187, 0, 0.14), transparent 25% ), radial-gradient( circle at 90% 80%, rgba(238, 48, 38, 0.12), transparent 28% ), linear-gradient( 135deg, #fff8f4, #ffffff ); } .rpsc-hero-shape { position: absolute; border-radius: 50%; pointer-events: none; } .rpsc-shape-one { width: 260px; height: 260px; top: -150px; right: 8%; background: rgba(238, 48, 38, 0.06); } .rpsc-shape-two { width: 190px; height: 190px; left: 5%; bottom: -130px; background: rgba(255, 183, 0, 0.10); } .rpsc-hero-content { position: relative; z-index: 2; max-width: 900px; text-align: center; } .rpsc-hero-label { display: inline-block; margin-bottom: 16px; color: #ee3026; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .rpsc-hero h1 { margin: 0; color: #191919; font-family: "Poppins", sans-serif; font-size: clamp(28px, 5vw, 48px); line-height: 1.15; font-weight: 800; } .rpsc-hero p { max-width: 700px; margin: 20px auto 0; color: #727272; font-family: "Inter", sans-serif; font-size: 18px; line-height: 1.8; } .rpsc-hero-line { width: 80px; height: 5px; margin: 30px auto 0; border-radius: 30px; background: linear-gradient( 90deg, #ee3026, #ffb700 ); } /* ========================================================== BREADCRUMB ========================================================== */ .rpsc-breadcrumb-section { padding: 26px 0; border-bottom: 1px solid #eeeeee; background: #ffffff; } .rpsc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #777777; font-family: "Inter", sans-serif; font-size: 14px; } .rpsc-breadcrumb a { color: #ee3026; font-weight: 600; text-decoration: none; } .rpsc-breadcrumb i { color: #aaaaaa; font-size: 10px; } /* ========================================================== MAIN LAYOUT ========================================================== */ .rpsc-page { padding: 65px 0 100px; background: #ffffff; } .rpsc-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: 50px; } /* ========================================================== SIDEBAR ========================================================== */ .rpsc-sidebar { position: sticky; top: 110px; overflow: hidden; border: 1px solid #eeeeee; border-radius: 18px; background: #ffffff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.07); } .rpsc-sidebar-title { padding: 25px 25px 20px; } .rpsc-sidebar-title span { display: block; padding-bottom: 15px; border-bottom: 2px solid #ee3026; color: #1d1d1d; font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 700; } .rpsc-side-nav { display: flex; flex-direction: column; } .rpsc-side-nav a { display: flex; align-items: center; gap: 14px; min-height: 65px; padding: 13px 20px; border-top: 1px solid #eeeeee; color: #343434; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .rpsc-side-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #ee3026; background: #fff1ef; } .rpsc-side-nav a:hover { color: #ee3026; background: #fff8f7; } .rpsc-side-nav a.active { color: #ffffff; background: linear-gradient( 135deg, #ee3026, #ff542f ); } .rpsc-side-nav a.active .rpsc-side-icon { color: #ee3026; background: #ffffff; } /* ========================================================== CONTENT ========================================================== */ .rpsc-content { min-width: 0; } .rpsc-section-heading { margin-bottom: 35px; } .rpsc-section-heading > span, .rpsc-details-heading > span { display: inline-block; margin-bottom: 9px; color: #ee3026; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; } .rpsc-section-heading h2, .rpsc-details-heading h2 { margin: 0; color: #1b1b1b; font-family: "Poppins", sans-serif; font-size: 38px; line-height: 1.25; font-weight: 800; } .rpsc-section-heading p, .rpsc-details-heading p { max-width: 760px; margin: 12px 0 0; color: #777777; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.8; } /* ========================================================== INTRO CARD ========================================================== */ .rpsc-intro-card { padding: 38px; border: 1px solid #eeeeee; border-radius: 22px; background: #ffffff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06); } .rpsc-intro-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 25px; color: #1d1d1d; font-family: "Poppins", sans-serif; font-size: 22px; line-height: 1.4; } .rpsc-intro-card h3 i { color: #ee3026; } .rpsc-intro-card > p { margin: 0 0 22px; color: #4c4c4c; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.9; } .rpsc-intro-card > p:last-child { margin-bottom: 0; } /* ========================================================== IMPORTANT NOTE ========================================================== */ .rpsc-important-note { display: flex; align-items: flex-start; gap: 18px; margin: 30px 0; padding: 25px; border: 1px solid rgba(238, 48, 38, 0.18); border-left: 5px solid #ee3026; border-radius: 14px; background: linear-gradient( 135deg, #fff6f4, #fffaf5 ); } .rpsc-note-icon { display: grid; flex: 0 0 50px; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: #ffffff; background: linear-gradient( 135deg, #ee3026, #ff8b27 ); font-size: 19px; } .rpsc-important-note h4 { margin: 0 0 8px; color: #242424; font-family: "Poppins", sans-serif; font-size: 18px; } .rpsc-important-note p { margin: 0; color: #555555; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.8; } /* ========================================================== OVERVIEW CARDS ========================================================== */ .rpsc-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 35px 0 75px; } .rpsc-overview-card { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 24px; border: 1px solid #eeeeee; border-radius: 18px; background: #ffffff; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.05); } .rpsc-overview-icon { display: grid; flex: 0 0 55px; width: 55px; height: 55px; place-items: center; border-radius: 15px; color: #ffffff; background: linear-gradient( 135deg, #ee3026, #ff8b27 ); font-size: 21px; } .rpsc-overview-card span { display: block; margin-bottom: 5px; color: #858585; font-family: "Inter", sans-serif; font-size: 13px; } .rpsc-overview-card strong { display: block; color: #222222; font-family: "Poppins", sans-serif; font-size: 18px; line-height: 1.3; } /* ========================================================== DETAILS ========================================================== */ .rpsc-details-heading { margin-bottom: 35px; } .rpsc-detail-list { overflow: hidden; border: 1px solid #eeeeee; border-radius: 20px; background: #ffffff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05); } .rpsc-detail-item { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 25px; padding: 30px; border-bottom: 1px solid #eeeeee; } .rpsc-detail-item:last-child { border-bottom: 0; } .rpsc-detail-number { color: rgba(238, 48, 38, 0.42); font-family: "Poppins", sans-serif; font-size: 30px; font-weight: 800; } .rpsc-detail-item h3 { margin: 0 0 10px; color: #222222; font-family: "Poppins", sans-serif; font-size: 19px; } .rpsc-detail-item p { margin: 0 0 10px; color: #555555; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.85; } .rpsc-detail-item p:last-child { margin-bottom: 0; } .notes-video-section{ padding:110px 0; background:#fff; } .video-slider{ margin-top:60px; } .video-track{ display:flex; gap:30px; } .video-card{ flex-shrink:0; background:#fff; border-radius:22px; border:1px solid #ececec; box-shadow:0 18px 45px rgba(0,0,0,.08); margin:0 10px 0 10px; } .video-card:hover{ transform:translateY(-10px); border-color:#d62828; } .video-card iframe{ width:100%; height:230px; border:none; } .video-card h4{ padding:22px; text-align:center; font-size:20px; color:#222; } /*==================================================== HERO SECTION ====================================================*/ .papers-hero{ position:relative; overflow:hidden; padding:100px 0 100px; background:linear-gradient( 135deg, #fffdf8, #fff4e8); } .hero-shape{ position:absolute; border-radius:50%; z-index:1; } .hero-shape-one{ width:520px; height:520px; background:rgba(214,40,40,.05); top:-220px; right:-180px; } .hero-shape-two{ width:340px; height:340px; background:rgba(244,180,0,.08); left:-120px; bottom:-120px; } .hero-content{ position:relative; z-index:5; } .hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:50px; background:#fff; border:1px solid #ffe2d8; color:#d62828; font-weight:600; margin-bottom:28px; box-shadow: 0 10px 30px rgba(0,0,0,.05); } .hero-badge i{ color:#f4b400; } .hero-content h1{ font-size:48px !important; line-height:1.15; font-weight:700; color:#222; margin-bottom:22px; } .hero-content h1 span{ display:block; color:#d62828; } .hero-content p{ color:#666; font-size:18px; line-height:1.9; margin-bottom:35px; max-width:700px; } .hero-buttons{ display:flex; gap:18px; flex-wrap:wrap; margin-top:35px; } .theme-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 34px; background:linear-gradient(135deg,#d62828,#ef4444); color:#fff !important; border-radius:14px; font-weight:600; text-decoration:none; border:none; transition:.35s; } .theme-btn:hover{ color:#fff; transform:translateY(-4px); box-shadow:0 20px 45px rgba(214,40,40,.25); } .theme-btn-outline{ display:inline-flex; align-items:center; justify-content:center; padding:16px 34px; border:2px solid #d62828; border-radius:14px; color:#d62828 !important; font-weight:600; text-decoration:none; background:#fff; transition:.35s; } .theme-btn-outline:hover{ background:#d62828; color:#fff !important; } /*==================================================== SEARCH ====================================================*/ .hero-search{ position:relative; max-width:520px; margin-bottom:35px; } .hero-search input{ width:100%; height:64px; border:none; border-radius:18px; background:#fff; padding:0 75px 0 24px; font-size:16px; outline:none; box-shadow: 0 18px 45px rgba(0,0,0,.08); transition:.35s; } .hero-search input:focus{ box-shadow: 0 20px 60px rgba(214,40,40,.15); } .hero-search button{ position:absolute; top:7px; right:7px; width:50px; height:50px; border:none; border-radius:14px; background:linear-gradient( 135deg, #d62828, #ef4444); color:#fff; cursor:pointer; transition:.35s; } .hero-search button:hover{ transform:scale(1.05); } /*==================================================== BUTTONS ====================================================*/ .hero-buttons{ display:flex; gap:18px; flex-wrap:wrap; } /*==================================================== IMAGE ====================================================*/ .hero-image{ position:relative; z-index:5; } .hero-image img{ width:100%; animation:floatImage 5s ease-in-out infinite; } /*==================================================== FLOATING CARDS ====================================================*/ .floating-card{ position:absolute; display:flex; align-items:center; gap:15px; background:#fff; padding:18px 22px; border-radius:18px; box-shadow: 0 20px 50px rgba(0,0,0,.10); } .floating-card i{ width:55px; height:55px; border-radius:16px; background:#fff3ed; display:flex; justify-content:center; align-items:center; color:#d62828; font-size:22px; } .floating-card h5{ margin:0; color:#222; font-size:24px; font-weight:700; } .floating-card span{ color:#777; font-size:14px; } .card-one{ top:40px; left:-20px; animation:floatCard 4s ease-in-out infinite; } .card-two{ bottom:30px; right:-20px; animation:floatCard 5s ease-in-out infinite; } /*==================================================== ANIMATION ====================================================*/ @keyframes floatImage{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } @keyframes floatCard{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } 100%{ transform:translateY(0); } } /*==================================================== QUICK STATS ====================================================*/ .paper-stats{ padding:100px 0; background:#fff; } .paper-stats .stat-card { background: #fff; border: 1px solid #ececec; border-radius: 24px; text-align: center; transition: .35s; height: 100%; box-shadow: 0 18px 45px rgba(0,0,0,.05); position: relative; overflow: hidden; } .paper-stats .stat-card::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(214,40,40,.04); right: -80px; top: -80px; transition: .4s; } .paper-stats .stat-card:hover { transform: translateY(-10px); box-shadow: 0 30px 70px rgba(214,40,40,.15); } .paper-stats .stat-card:hover::before { transform: scale(1.3); } .paper-stats .stat-icon { width: 50px; height: 50px; margin: auto; border-radius: 24px; display: flex; justify-content: center; align-items: center; background: #fff3ed; color: #d62828; font-size: 20px; margin-bottom: 20px; } .paper-stats .stat-card h3 { display: inline-block; font-size: 40px; font-weight: 700; color: #222; margin-bottom: 0; } .paper-stats .stat-card span { font-size: 24px; color: #d62828; font-weight: 700; } .paper-stats .stat-card p { margin-top: 15px; margin-bottom: 0; color: #666; font-size: 16px; line-height: 1.7; } .paper-stats .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top: 60px; } .paper-stats .stat-card { width: 100%; } /*==================================================== ABOUT PREVIOUS PAPERS ====================================================*/ .about-papers{ padding:110px 0; background:#fffdf8; } .about-image{ position:relative; height: 600px; } .about-image img{ width:100%; height: 100%; border-radius:28px; box-shadow: 0 25px 70px rgba(0,0,0,.08); } .experience-card{ position:absolute; right:-25px; bottom:40px; width:190px; background:#fff; padding:25px; border-radius:22px; text-align:center; box-shadow: 0 20px 60px rgba(214,40,40,.15); } .experience-card h3{ font-size:42px; color:#d62828; margin-bottom:8px; } .experience-card p{ margin:0; color:#666; font-weight:500; } .about-content h2{ font-size:46px; line-height:1.25; margin:20px 0; color:#222; } .about-content h2 span{ color:#d62828; } .about-content>p{ color:#666; line-height:1.9; margin-bottom:40px; } .about-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:40px; } .feature-box{ display:flex; gap:16px; padding:22px; background:#fff; border-radius:18px; border:1px solid #ececec; transition:.35s; } .feature-box:hover{ transform:translateY(-6px); box-shadow: 0 20px 50px rgba(214,40,40,.12); } .feature-icon{ width:60px; height:60px; flex-shrink:0; display:flex; justify-content:center; align-items:center; border-radius:16px; background:#fff3ed; color:#d62828; font-size:22px; } .feature-box h4{ font-size:18px; margin-bottom:8px; color:#222; } .feature-box p{ margin:0; color:#666; font-size:14px; line-height:1.7; } .section-tag{ display:inline-flex; align-items:center; padding:10px 20px; background:#fff3ed; color:#d62828; border-radius:40px; font-weight:600; font-size:15px; margin-bottom:20px; } /*==================================================== PROMO BANNER ====================================================*/ .promo-banner-section{ padding:40px 0 90px; background:#fff; } .promo-banner{ position:relative; overflow:hidden; border-radius:28px; height:420px; box-shadow: 0 25px 70px rgba(0,0,0,.08); } .promo-banner img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:.5s; } .promo-banner:hover img{ transform:scale(1.05); } .promo-overlay{ position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.72), rgba(0,0,0,.25)); display:flex; align-items:center; padding:60px; } .promo-content{ max-width:520px; } .promo-content span{ display:inline-block; padding:10px 22px; background:#fff; color:#d62828; border-radius:40px; font-weight:600; margin-bottom:20px; } .promo-content h2{ color:#fff; font-size:46px; line-height:1.25; margin-bottom:20px; } .promo-content p{ color:rgba(255,255,255,.92); font-size:18px; margin-bottom:30px; } /*==================================================== FILTER SECTION ====================================================*/ .paper-filter-section{ padding:90px 0; background:#fffdf8; } .filter-wrapper{ background:#fff; border-radius:30px; padding:35px; /* box-shadow: 0 25px 70px rgba(0,0,0,.08);*/ border:1px solid #ececec; } .filter-title{ text-align:center; margin-bottom:35px; } .filter-title span{ display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:40px; background:#fff3ed; color:#d62828; font-weight:600; margin-bottom:18px; } .filter-title h2{ font-size:32px; color:#222; } .paper-filter{ display:grid; grid-template-columns: repeat(5,1fr); gap:22px; align-items:end; } .filter-group label{ display:block; margin-bottom:10px; font-weight:600; color:#444; } .filter-input{ position:relative; } .filter-input i{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#d62828; } .filter-input input, .filter-input select{ width:100%; height:58px; border:1px solid #e5e5e5; border-radius:16px; padding:0 18px 0 50px; background:#fff; outline:none; transition:.35s; } .filter-input input:focus, .filter-input select:focus{ border-color:#d62828; box-shadow: 0 0 0 4px rgba(214,40,40,.08); } .filter-btn{ display:flex; align-items:end; } .filter-btn .theme-btn{ width:100%; justify-content:center; height:58px; } /*==================================================== YEAR WISE PAPERS ====================================================*/ .papers-list-section{ padding:110px 0; background:#fff; } .paper-year{ margin-bottom:35px; } .year-header{ background:#fff; border:1px solid #ececec; border-radius:22px; padding:22px 30px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:.35s; box-shadow: 0 15px 40px rgba(0,0,0,.05); } .year-header:hover{ border-color:#d62828; } .year-header.active{ background:linear-gradient( 135deg, #d62828, #ef4444); color:#fff; } .year-header h3{ margin:0; font-size:26px; } .year-content{ padding-top:35px; } .paper-card{ background:#fff; border:1px solid #ececec; border-radius:22px; padding:30px; height:100%; position:relative; transition:.35s; box-shadow: 0 18px 45px rgba(0,0,0,.05); } .paper-card:hover{ transform:translateY(-8px); box-shadow: 0 30px 70px rgba(214,40,40,.15); } .paper-badge{ position:absolute; top:20px; right:20px; background:#d62828; color:#fff; padding:7px 14px; border-radius:30px; font-size:12px; } .paper-card h4{ margin-bottom:8px; } .paper-card p{ color:#d62828; font-weight:600; } .paper-card ul{ list-style:none; padding:0; margin:22px 0; } .paper-card ul li{ margin-bottom:12px; display:flex; gap:12px; align-items:center; color:#666; } .paper-card ul li i{ color:#d62828; } .paper-buttons{ display:flex; gap:12px; margin-top:20px; } .paper-buttons a{ flex:1; justify-content:center; } .paper-ad{ margin:60px 0; } .paper-ad img{ width:100%; border-radius:22px; } .year-content{ display:none; padding-top:35px; } .year-content.show{ display:block; } .year-header{ user-select:none; } .accordion-icon{ transition:.35s ease; font-size:18px; } .year-header.active .accordion-icon{ transform:rotate(180deg); } /*==================================================== PAPER ANALYSIS ====================================================*/ .paper-analysis-section{ padding:110px 0; background:#fffdf8; } .analysis-wrapper{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; } /*========================== LEFT CARD ==========================*/ .analysis-card{ background:#fff; padding:40px; border-radius:24px; box-shadow: 0 20px 60px rgba(0,0,0,.06); } .analysis-card h3{ margin-bottom:35px; font-size:30px; } /*========================== PROGRESS ==========================*/ .progress-item{ margin-bottom:28px; } .progress-title{ display:flex; justify-content:space-between; margin-bottom:10px; font-weight:600; } .progress{ height:12px; background:#f2f2f2; border-radius:30px; overflow:hidden; } .math{ width:32%; background:#d62828; } .reasoning{ width:24%; background:#ef4444; } .science{ width:18%; background:#f4b400; } .technical{ width:26%; background:#ff7043; } /*========================== RIGHT GRID ==========================*/ .analysis-info{ display:grid; grid-template-columns:repeat(2,1fr); gap:25px; } .info-card{ background:#fff; border-radius:22px; padding:35px 25px; text-align:center; transition:.35s; box-shadow: 0 20px 55px rgba(0,0,0,.06); } .info-card:hover{ transform:translateY(-8px); box-shadow: 0 30px 70px rgba(214,40,40,.15); } .info-icon{ width:75px; height:75px; margin:auto; border-radius:20px; background:#fff3ed; color:#d62828; display:flex; justify-content:center; align-items:center; font-size:28px; margin-bottom:22px; } .info-card h4{ color:#777; font-size:16px; margin-bottom:12px; } .info-card h3{ color:#222; font-size:30px; } /*==================================================== PREPARATION STRATEGY ====================================================*/ .strategy-section{ padding:110px 0; background:#ffffff; } .strategy-wrapper{ display:grid; grid-template-columns:repeat(5,1fr); gap:25px; position:relative; } .strategy-wrapper::before{ content:""; position:absolute; top:75px; left:8%; width:84%; height:3px; background:#f0d7d7; z-index:0; } .strategy-card{ position:relative; z-index:2; background:#fff; border:1px solid #ececec; border-radius:24px; padding:35px 25px; text-align:center; transition:.35s; box-shadow: 0 18px 45px rgba(0,0,0,.05); } .strategy-card:hover{ transform:translateY(-10px); box-shadow: 0 30px 70px rgba(214,40,40,.15); } .step-number{ position:absolute; top:18px; right:18px; font-size:42px; font-weight:700; color:#f6dede; } .strategy-icon{ width:90px; height:90px; margin:auto; border-radius:24px; background:#fff3ed; color:#d62828; display:flex; justify-content:center; align-items:center; font-size:34px; margin-bottom:28px; } .strategy-card h4{ font-size:22px; margin-bottom:15px; color:#222; } .strategy-card p{ color:#666; line-height:1.8; margin:0; } .page-hero { background: linear-gradient( 135deg, #fff4f4 0%, #fff 48%, #fff8ed 100% ); border-bottom: 1px solid #ececf0; padding: 28px 0 32px; } .breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #777; } .breadcrumb a { color: #e92727; font-weight: 600; } .breadcrumb i { font-size: 10px; } .page-hero-content { margin-top: 20px; } .eyebrow { display: inline-block; color: #e92727; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 7px; } .page-hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; color: #191c22; margin-bottom: 10px; } .page-hero p { color: #686b73; max-width: 650px; font-size: 15px; } /* ===================================================== MAIN LAYOUT ===================================================== */ .objective-page { padding: 45px 0 70px; } .objective-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; align-items: start; } /* ===================================================== PAPER ===================================================== */ .question-paper { background: #fff; border: 1px solid #e7e8ec; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 35px rgba(25, 30, 45, .055); } .paper-header { padding: 25px 28px; background: linear-gradient( 135deg, #fff 0%, #fff6f6 100% ); border-bottom: 1px solid #e9eaee; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .paper-label { color: #e92727; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; } .paper-header h2 { margin-top: 4px; font-size: 24px; color: #1d2026; } .paper-header p { margin-top: 3px; color: #777; font-size: 13px; } .paper-meta { display: flex; gap: 12px; } .paper-meta > div { min-width: 85px; padding: 10px 12px; background: #fff; border: 1px solid #e6e7eb; border-radius: 8px; text-align: center; } .paper-meta span { display: block; font-size: 10px; color: #85878e; text-transform: uppercase; letter-spacing: .5px; } .paper-meta strong { display: block; margin-top: 2px; color: #e92727; font-size: 16px; } /* ===================================================== QUESTION ===================================================== */ .questions-container { padding: 5px 28px 25px; } .question { padding: 27px 0; border-bottom: 1px solid #e9eaed; } .question:last-child { border-bottom: 0; } .question-heading { display: flex; align-items: flex-start; gap: 14px; } .question-number { flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: #fff0f0; color: #e92727; display: grid; place-items: center; font-size: 12px; font-weight: 800; } .question-text { flex: 1; color: #202329; font-size: 15px; font-weight: 650; line-height: 1.65; } /* ===================================================== OPTIONS ===================================================== */ .options { margin-top: 17px; margin-left: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .option { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #e5e6ea; border-radius: 8px; background: #fff; color: #484b52; font-size: 14px; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .option:hover { border-color: #e92727; background: #fff8f8; transform: translateY(-1px); } .option-label { flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%; background: #f1f2f5; display: grid; place-items: center; color: #555; font-size: 11px; font-weight: 800; } /* ===================================================== QUESTION IMAGE / TABLE / DIAGRAM ===================================================== */ .question-media { margin: 18px 0 10px 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .question-media img { width: auto; max-width: 100%; height: auto; margin: auto; border: 1px solid #e1e2e5; border-radius: 7px; } .question-table { width: 100%; border-collapse: collapse; min-width: 500px; font-size: 13px; } .question-table th, .question-table td { border: 1px solid #d8d9dd; padding: 9px 12px; text-align: left; } .question-table th { background: #f8f8fa; font-weight: 700; } /* ===================================================== ANSWER / SOLUTION ===================================================== */ .answer { margin: 16px 0 0 48px; padding: 13px 15px; background: #f7faf7; border-left: 3px solid #36a269; border-radius: 0 7px 7px 0; font-size: 13px; color: #444; } .answer strong { color: #238250; } /* ===================================================== PAPER END ===================================================== */ .paper-end { margin: 10px 28px 30px; padding: 30px; border-radius: 12px; text-align: center; background: #fafafa; border: 1px dashed #ddd; } .paper-end-icon { width: 42px; height: 42px; margin: auto; border-radius: 50%; display: grid; place-items: center; background: #eaf7f0; color: #2b9a62; } .paper-end h3 { margin-top: 10px; font-size: 17px; } .paper-end p { color: #777; font-size: 13px; margin-top: 3px; } /* ===================================================== SIDEBAR ===================================================== */ .question-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; } .sidebar-card { background: #fff; border: 1px solid #e7e8ec; border-radius: 12px; padding: 19px; box-shadow: 0 6px 25px rgba(25, 30, 45, .04); } .sidebar-title { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; margin-bottom: 4px; border-bottom: 1px solid #ececef; } .sidebar-title i { color: #e92727; } .sidebar-title h3 { font-size: 15px; } /* INFO */ .info-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f2; font-size: 12px; } .info-row:last-child { border-bottom: 0; } .info-row span { color: #777; } .info-row strong { color: #25272c; } /* QUICK NAV */ #questionNavigation { max-height: 330px; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding-top: 10px; } .question-nav-btn { width: 100%; aspect-ratio: 1; border: 1px solid #e2e3e7; background: #fafafa; border-radius: 6px; color: #555; font-size: 11px; cursor: pointer; } .question-nav-btn:hover { border-color: #e92727; color: #e92727; background: #fff5f5; } /* PREPARATION */ .preparation-card { background: linear-gradient( 145deg, #fff2f2, #fffaf0 ); border-color: #f1dddd; } .preparation-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: #e92727; color: #fff; margin-bottom: 12px; } .preparation-card h3 { font-size: 17px; } .preparation-card p { color: #70727a; font-size: 12px; margin: 7px 0 14px; } .sidebar-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fff; border-radius: 7px; color: #e92727; font-size: 12px; font-weight: 800; } /* ===================================================== CTA ===================================================== */ .objective-cta { padding: 55px 0; background: linear-gradient(135deg, #875858, #798eea); color: #fff; } .objective-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .cta-content > span { font-size: 11px; letter-spacing: 1.5px; font-weight: 800; opacity: .8; } .cta-content h2 { margin-top: 5px; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; } .cta-content p { margin-top: 8px; max-width: 600px; opacity: .85; font-size: 14px; } .cta-actions { flex-shrink: 0; display: flex; gap: 10px; } .cta-primary, .cta-secondary { padding: 12px 17px; border-radius: 7px; font-size: 13px; font-weight: 800; } .cta-primary { background: #fff; color: #e92727; } .cta-secondary { border: 1px solid rgba(255,255,255,.4); color: #fff; } /* ===================================================== BILINGUAL QUESTIONS ===================================================== */ .english-question { margin-bottom: 12px; } .hindi-question { margin-top: 8px; font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; font-weight: 500; color: #363940; line-height: 1.8; } /* ===================================================== MATCHING / TABULAR QUESTION ===================================================== */ .matching-question { margin-top: 22px; margin-left: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Table */ .matching-table { width: 100%; min-width: 650px; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.55; } .matching-table th, .matching-table td { border: 1px solid #d9dadd; padding: 12px 13px; vertical-align: top; } .matching-table thead th { background: #fff5f5; color: #292c32; font-weight: 800; text-align: left; } .matching-table tbody tr:nth-child(even) { background: #fcfcfd; } /* List letters */ .match-letter { width: 45px; text-align: center !important; font-weight: 800; color: #e92727; background: #fff8f8; } /* List numbers */ .match-number { width: 50px; text-align: center !important; font-weight: 800; color: #e92727; background: #fff8f8; } /* Hindi inside table */ .hindi-text { display: inline-block; margin-top: 3px; font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; line-height: 1.75; color: #4b4e55; } /* ===================================================== CODES ===================================================== */ .codes-title { margin-top: 18px; font-size: 15px; font-weight: 800; color: #202329; } .codes-table { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; max-width: 500px; } .codes-table div { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid #e3e4e8; border-radius: 7px; background: #fafafa; font-size: 13px; } .codes-table span { font-weight: 800; color: #444; } .codes-table strong { color: #e92727; } /* ===================================================== MATCHING QUESTION OPTIONS ===================================================== */ .matching-question + .options { margin-top: 18px; } /* ========================================================= QUESTION ANSWER PAGE ========================================================= */ .question-answer-page { padding: 42px 0 70px; background: #f7f8fc; } .question-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; } /* ========================================================= MAIN CONTENT ========================================================= */ .question-main { min-width: 0; } /* ========================================================= COMMON CARD ========================================================= */ .qa-card { background: #fff; border: 1px solid #e4e6eb; border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 5px 22px rgba(20, 25, 40, .045); } /* ========================================================= QUESTION CARD ========================================================= */ .question-card { border-top: 3px solid #e92727; } .qa-card-header { min-height: 68px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: linear-gradient( 135deg, #fff, #fff7f7 ); border-bottom: 1px solid #ececef; } .qa-card-heading { display: flex; align-items: center; gap: 12px; } .qa-icon { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: #fff0f0; color: #e92727; flex-shrink: 0; } .qa-label { display: block; color: #e92727; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; } .qa-card-header h2 { margin-top: 2px; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.25; color: #20232a; } .question-number { padding: 6px 10px; border-radius: 6px; background: #e92727; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; } .qa-card-body { padding: 23px 22px 25px; } /* ========================================================= QUESTION TEXT ========================================================= */ .question-text p { font-family: "Poppins", sans-serif; color: #272a30; font-size: 16px; line-height: 1.75; margin: 0 0 12px; } .hindi-text { font-family: "Noto Sans Devanagari", "Nirmala UI", sans-serif !important; color: #45484e !important; } /* ========================================================= OPTIONS ========================================================= */ .options-list { display: grid; gap: 10px; margin-top: 20px; } .answer-option { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 10px 13px; background: #fafafa; border: 1px solid #ececef; border-radius: 8px; color: #34373d; font-size: 14px; transition: all .2s ease; } .answer-option:hover { background: #fff7f7; border-color: #e92727; transform: translateX(2px); } .option-letter { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: #fff0f0; color: #e92727; font-size: 11px; font-weight: 800; } /* ========================================================= ANSWER ========================================================= */ .answer-card { border-top: 3px solid #4ca66a; } .answer-header { padding: 12px 20px; background: #edf8ef; color: #278048; font-size: 14px; font-weight: 800; border-bottom: 1px solid #dceede; } .answer-header i { margin-right: 7px; } .answer-header span { font-weight: 600; } .answer-body { min-height: 88px; padding: 22px; align-items: center; font-size: 15px; color: #333; } /* ========================================================= SOLUTION ========================================================= */ .solution-card { border-top: 3px solid #369ac1; } .solution-header { padding: 12px 20px; background: #eef9fd; color: #237b9e; font-size: 14px; font-weight: 800; border-bottom: 1px solid #d9edf4; } .solution-header i { margin-right: 7px; } .solution-body { padding: 22px; color: #41444a; font-size: 14px; line-height: 1.7; } .solution-body p { margin-bottom: 8px; } .solution-body ul { padding-left: 20px; } .solution-body li { margin: 4px 0; } /* ========================================================= TABLE QUESTION ========================================================= */ .question-table-wrapper { width: 100%; overflow-x: auto; margin-top: 22px; border: 1px solid #dfe1e5; border-radius: 8px; -webkit-overflow-scrolling: touch; } .match-table { width: 100%; min-width: 680px; border-collapse: collapse; font-family: "Poppins", sans-serif; font-size: 13px; } .match-table th, .match-table td { border: 1px solid #d5d7db; padding: 12px 13px; vertical-align: top; } .match-table th { background: #f6f7f9; color: #24272d; font-size: 13px; text-align: left; } .match-table td { color: #373a40; line-height: 1.55; } .match-table tbody tr:hover td { background: #fffafa; } .list-code { width: 45px; text-align: center !important; font-weight: 800; color: #e92727 !important; } .hindi-small { font-family: "Noto Sans Devanagari", "Nirmala UI", sans-serif; color: #555; line-height: 1.65; } /* ========================================================= CODES ========================================================= */ .codes-section { margin-top: 20px; padding: 15px; border-radius: 8px; background: #fafafa; border: 1px solid #e8e9ec; } .codes-section strong { font-size: 13px; } .codes { margin-top: 10px; display: flex; gap: 10px; } .codes span { min-width: 42px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #fff; border: 1px solid #dddfe4; color: #e92727; font-weight: 800; } .table-question-hindi { margin-top: 20px !important; } /* ========================================================= SIDEBAR ========================================================= */ .question-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; } .sidebar-card { background: #fff; border: 1px solid #e5e6ea; border-radius: 12px; padding: 18px; box-shadow: 0 5px 22px rgba(20, 25, 40, .04); } /* ========================================================= SIDEBAR HEADING ========================================================= */ .sidebar-heading { padding-bottom: 15px; margin-bottom: 5px; border-bottom: 1px solid #ececef; } .sidebar-heading > span { color: #e92727; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; } .sidebar-heading h3 { margin-top: 4px; font-family: "Poppins", sans-serif; font-size: 18px; line-height: 1.3; text-transform: capitalize; } .sidebar-heading p { margin-top: 5px; color: #777b82; font-size: 12px; line-height: 1.5; } /* ========================================================= TEST SERIES ========================================================= */ .test-series-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .test-series-item { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e7e8eb; border-radius: 8px; color: #3d4148; font-size: 12px; background: #fff; transition: all .2s ease; } .test-series-item:hover { border-color: #e92727; background: #fff7f7; color: #e92727; } .series-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff2f2; color: #e92727; flex-shrink: 0; } .test-series-item > span:nth-child(2) { flex: 1; } .test-series-item > i { font-size: 10px; color: #999; } .view-all-series { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e7e8eb; border-radius: 7px; color: #e92727; font-size: 12px; font-weight: 700; } /* ========================================================= PREPARATION ========================================================= */ .preparation-sidebar { background: linear-gradient( 145deg, #fff2f2, #fffaf0 ); border-color: #f0dede; } .sidebar-small-label { color: #e92727; font-size: 10px; font-weight: 800; letter-spacing: 1px; } .preparation-sidebar h3 { margin-top: 5px; font-family: "Poppins", sans-serif; font-size: 18px; } .preparation-sidebar p { margin: 8px 0 15px; color: #71747a; font-size: 12px; line-height: 1.6; } .preparation-sidebar a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #e92727; border-radius: 7px; color: #fff; font-size: 12px; font-weight: 700; } /* ========================================================= DAILY QUIZ ========================================================= */ .quiz-heading { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #ececef; } .quiz-heading span { color: #e92727; font-size: 10px; font-weight: 800; letter-spacing: 1px; } .quiz-heading h3 { margin-top: 3px; font-family: "Poppins", sans-serif; font-size: 16px; } .quiz-heading > a { color: #e92727; font-size: 10px; font-weight: 700; } .quiz-item { padding: 13px 0; border-bottom: 1px solid #eee; } .quiz-item:last-child { border-bottom: 0; padding-bottom: 0; } .quiz-item h4 { font-size: 12px; line-height: 1.4; color: #363940; } .quiz-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; color: #888; font-size: 9px; } .quiz-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; } .quiz-actions a { padding: 5px 8px; border: 1px solid #e92727; border-radius: 5px; color: #e92727; font-size: 9px; font-weight: 700; } .quiz-actions a:last-child { border-color: #55b875; color: #39995b; } /* ========================================================= RELATED ========================================================= */ .related-section { margin-top: 42px; } .section-heading > span { color: #e92727; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; } .section-heading h2 { margin-top: 4px; font-family: "Poppins", sans-serif; font-size: 25px; } .related-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; } .related-card { position: relative; padding: 18px; min-height: 120px; background: #fff; border: 1px solid #e4e5e9; border-radius: 10px; transition: all .2s ease; } .related-card:hover { transform: translateY(-3px); border-color: #e92727; box-shadow: 0 8px 25px rgba(25, 30, 45, .07); } .related-card span { color: #e92727; font-size: 10px; font-weight: 700; } .related-card h3 { margin-top: 8px; max-width: 190px; font-family: "Poppins", sans-serif; font-size: 14px; line-height: 1.4; } .related-card > i { position: absolute; right: 17px; bottom: 17px; color: #e92727; font-size: 12px; } /* ========================================================= CTA ========================================================= */ .question-cta { padding: 50px 0; background: linear-gradient( 135deg, #e92727, #c91e1e ); color: #fff; } .question-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; } .question-cta > .container > div:first-child > span { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; opacity: .8; } .question-cta h2 { margin-top: 5px; font-family: "Poppins", sans-serif; font-size: clamp(23px, 3vw, 32px); line-height: 1.25; } .question-cta p { margin-top: 7px; font-size: 13px; opacity: .85; } .cta-actions { display: flex; gap: 10px; flex-shrink: 0; } .cta-actions a { padding: 11px 15px; border-radius: 7px; font-size: 12px; font-weight: 800; } .cta-actions a:first-child { background: #fff; color: #e92727; } .cta-actions a:last-child { border: 1px solid rgba(255,255,255,.45); color: #fff; } /* ========================================================= MOBILE BOTTOM NAV ========================================================= */ .mobile-bottom-nav { display: none; } /* ========================================================= PAGE HERO ========================================================= */ .page-hero { position: relative; padding: 42px 0 48px; background: linear-gradient( 135deg, #fff5f5 0%, #ffffff 55%, #f7f8fc 100% ); border-bottom: 1px solid #ececef; overflow: hidden; } /* Decorative background */ .page-hero::before { content: ""; position: absolute; width: 280px; height: 280px; top: -150px; right: 8%; border-radius: 50%; background: rgba(233, 39, 39, .055); pointer-events: none; } .page-hero::after { content: ""; position: absolute; width: 180px; height: 180px; bottom: -110px; left: 5%; border-radius: 50%; background: rgba(233, 39, 39, .035); pointer-events: none; } /* Breadcrumb */ .breadcrumb { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: #777b82; font-size: 12px; line-height: 1.5; } .breadcrumb a { color: #555960; font-weight: 600; transition: color .2s ease; } .breadcrumb a:hover { color: #e92727; } .breadcrumb i { color: #a1a4aa; font-size: 9px; } .breadcrumb span { color: #e92727; font-weight: 700; } /* Hero Content */ .page-hero-content { position: relative; z-index: 1; max-width: 760px; } .page-hero-content .eyebrow { display: inline-block; margin-bottom: 8px; color: #e92727; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; line-height: 1.4; } .page-hero-content h1 { margin: 0; font-family: "Poppins", sans-serif; color: #20232a; font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.15; letter-spacing: -.5px; } .page-hero-content p { max-width: 650px; margin: 12px 0 0; color: #686c73; font-size: 14px; line-height: 1.7; } .loading-spinner { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999; top: 0; left: 0; overflow: hidden; -webkit-transition: background-color .5s ease; transition: background-color .5s ease } .loading-spinner .loadme { text-align: center; position: relative; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); top: 50%; left: 50% } .loading-spinner .text { color: #fff; display: block; border-top: 5px solid #fff; width: 100px; margin: 0 auto; text-align: center; font-weight: 800; padding: 5px } .loading-spinner .bounceball { position: relative; display: block; height: 55px; width: 20px; margin: 0 auto } .loading-spinner .bounceball:before { position: absolute; content: ""; display: block; top: 0; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: bounce .5s ease infinite alternate; animation: bounce .5s ease infinite alternate } @-webkit-keyframes bounce { 0% { top: 50px; height: 5px; border-radius: 60px 60px 20px 20px; -webkit-transform: scaleX(2); transform: scaleX(2) } 35% { height: 20px; border-radius: 50%; -webkit-transform: scaleX(1); transform: scaleX(1) } to { top: 0 } } @keyframes bounce { 0% { top: 50px; height: 5px; border-radius: 60px 60px 20px 20px; -webkit-transform: scaleX(2); transform: scaleX(2) } 35% { height: 20px; border-radius: 50%; -webkit-transform: scaleX(1); transform: scaleX(1) } to { top: 0 } } .loading-spinner.off { opacity: 0; z-index: -9999999; visibility: hidden } .loading-spinner.on { opacity: 1; z-index: 9999999; visibility: visible } /*========================================= RESPONSIVE DESIGN =========================================*/ @media(max-width:768px) { .back-to-top { bottom: 130px; } .whatsapp-btn { bottom: 90px; } .stat-card h2 { font-size: 44px; } .announcement-bar { height: 42px; padding: 20px 0 !important; } .announcement-icon { width: 50px; height: 42px; } .announcement-track span { font-size: 13px; padding-right: 50px; } } @media(max-width:480px) { .back-to-top { bottom: 125px; } .whatsapp-btn { bottom: 80px; } .stat-card h2 { font-size: 40px; } .announcement-bar { height: 38px; } .announcement-icon { width: 45px; height: 38px; } .announcement-icon i { font-size: 15px; } .announcement-track span { font-size: 12px; padding-right: 40px; } } /*============================= 992px ==============================*/ @media(max-width:992px) { .top-bar { display: none; } .header-container { gap: 20px; } .search-box { display: none; } .call-btn { display: none; } .navbar { display: none; } .hamburger { display: block; } .hero-container { grid-template-columns: 1fr; text-align: center; } .hero-content { order: 2; } .hero p { margin: auto; margin-top: 25px; margin-bottom: 35px; } .hero-buttons { justify-content: center; } .hero-stats { justify-content: center; flex-wrap: wrap; } } /*============================= 768px ==============================*/ @media(max-width:768px) { .header { position: sticky; top: 0; } .logo img { width: 200px; } /* .login-btn{ display:none; } */ .cart-btn { width: 38px; height: 38px; } .hero { padding: 60px 0; } .hero h1 { font-size: 40px; } .hero p { font-size: 16px; } .hero-buttons { flex-direction: column; align-items: center; } .btn { width: 230px; } .hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; } .hero-stats div { min-width: auto; padding: 20px 15px; } .hero-stats h2 { font-size: 26px; } } /*============================= 576px ==============================*/ @media(max-width:576px) { .stat-card h2 { font-size: 40px; } .container { width: 92%; overflow: visible; } .hero { padding: 40px 0; } .hero-tag { font-size: 14px; } .hero h1 { font-size: 34px; } .hero p { font-size: 15px; } .hero-stats div { width: 100%; } .btn { width: 100%; } .header-actions { gap: 10px; } .cart-btn { width: 42px; height: 42px; } .hamburger { font-size: 24px; } } /*============================= 400px ==============================*/ @media(max-width:400px) { .hero-stats h2 { font-size: 22px; } .hero-stats span { font-size: 14px; } .hero h1 { font-size: 30px; } .hero p { font-size: 14px; } .logo img { width: 150px; } } .categories { padding: 80px 0; } .section-heading { text-align: center; margin-bottom: 50px; } .section-heading span { color: var(--primary); font-weight: 600; } .section-heading h2 { font-size: 42px; margin-top: 10px; font-family: 'Poppins'; } .category-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 25px; } .category-card { background: white; border-radius: 20px; padding: 35px; text-align: center; transition: .35s; box-shadow: 0 10px 35px rgba(0,0,0,.06); } .category-card i { font-size: 42px; color: var(--primary); margin-bottom: 20px; } .category-card:hover { transform: translateY(-10px); background: var(--primary); color: white; } .category-card:hover i { color: var(--secondary); } @media(max-width:992px) { .course-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:768px) { .course-grid { grid-template-columns: 1fr; } .course-footer { flex-direction: column; gap: 20px; align-items: flex-start; } .course-content h3 { font-size: 22px; } } @media(max-width:992px) { .batch-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:768px) { .batch-grid { grid-template-columns: 1fr; } } @media(max-width:992px) { .why-wrapper { grid-template-columns: 1fr; } .why-grid { grid-template-columns: repeat(2,1fr); } .stats-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:768px) { .why-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .feature-card { padding: 25px; } } /*============================= 1400px ==============================*/ @media(max-width:1400px) { .container { width: 95%; } .hero h1 { font-size: 56px; } .buy-btn, .view-btn { padding: 6px; font-size: 12px; } } /*============================= 1200px ==============================*/ @media(max-width:1200px) { .logo img { width: 200px; } .hero { padding: 70px 0; } .hero h1 { font-size: 48px; } .hero-container { gap: 40px; } .navbar ul { gap: 28px; } .price { font-size: 12px; } .old { font-size: 12px; } .discount { font-size: 12px; } } /* ===================================================== TESTIMONIAL SECTION RESPONSIVE CSS ===================================================== */ /* ===================================================== SMALL LAPTOP / LARGE TABLET ===================================================== */ @media (max-width: 1100px) { .testimonials { padding: 90px 0; } .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 50px; } .testimonial-card { padding: 30px; } } /* ===================================================== TABLET ===================================================== */ @media (max-width: 768px) { .testimonials { padding: 75px 0; } .testimonials .section-heading { margin-bottom: 0; } .testimonials .section-heading h2 { font-size: 34px; line-height: 1.25; } .testimonials .section-heading p { max-width: 600px; margin: 12px auto 0; font-size: 15px; line-height: 1.7; } .testimonial-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; } .testimonial-card { border-radius: 20px; } .student-top { gap: 17px; margin-bottom: 20px; } .student-top img { width: 70px; height: 70px; flex-shrink: 0; } .student-top h3 { margin-bottom: 6px; font-size: 20px; } .student-top span { font-size: 14px; } .stars { margin-bottom: 16px; font-size: 18px; } .testimonial-card p { font-size: 15px; line-height: 1.75; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 576px) { .testimonials { padding: 60px 0; } .testimonials .container { width: calc(100% - 24px); } .testimonials .section-heading h2 { font-size: 29px; } .testimonials .section-heading p { margin-top: 10px; font-size: 14px; line-height: 1.6; } .testimonial-grid { gap: 16px; margin-top: 32px; } .testimonial-card { padding: 22px; border-radius: 18px; } .student-top { gap: 14px; margin-bottom: 17px; } .student-top img { width: 60px; height: 60px; } .student-top h3 { margin-bottom: 4px; font-size: 18px; line-height: 1.3; } .student-top span { display: block; font-size: 12px; line-height: 1.45; } .stars { margin-bottom: 14px; font-size: 16px; letter-spacing: 1px; } .testimonial-card p { font-size: 13px; line-height: 1.7; } /* Remove hover movement on touch screens */ .testimonial-card:hover { transform: none; } } /* ===================================================== VERY SMALL MOBILE ===================================================== */ @media (max-width: 400px) { .testimonials { padding: 50px 0; } .testimonials .container { width: calc(100% - 20px); } .testimonials .section-heading h2 { font-size: 26px; } .testimonial-grid { gap: 14px; margin-top: 28px; } .testimonial-card { padding: 18px; border-radius: 16px; } .student-top { gap: 12px; } .student-top img { width: 54px; height: 54px; } .student-top h3 { font-size: 16px; } .student-top span { font-size: 11px; } .stars { font-size: 15px; } .testimonial-card p { font-size: 12.5px; line-height: 1.65; } } @media(max-width:992px) { .faculty-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:768px) { .faculty-grid { grid-template-columns: 1fr; } .faculty-image img { height: 300px; } } @media(max-width:992px) { .app-wrapper { grid-template-columns: 1fr; text-align: center; } .app-buttons { justify-content: center; } } @media(max-width:992px) { .blog-grid { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: repeat(2,1fr); } .newsletter-wrapper { flex-direction: column; text-align: center; } .newsletter form { width: 100%; justify-content: center; } } @media(max-width:768px) { .blog-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .newsletter form { flex-direction: column; } .newsletter input { width: 100%; } .newsletter .btn { width: 100%; } } /*===================================== LEARNING SECTION RESPONSIVE ======================================*/ /*========================= 1200px =========================*/ @media(max-width:1200px) { .learning-grid { gap: 25px; } .learning-card { padding: 30px; } .card-top h3 { font-size: 26px; } } /* */ /*========================= 992px =========================*/ @media(max-width:992px) { .learning-grid { grid-template-columns: repeat(2,1fr); } /* Featured card takes full width */ .featured { /*grid-column: 1/-1; order: -1;*/ transform: none; } .learning-card { min-height: auto; } } /*========================= 768px =========================*/ @media(max-width:768px) { .learning-section { padding: 80px 0; } .learning-grid { grid-template-columns: 1fr; gap: 25px; } .featured { order: 0; } .learning-card { padding: 30px; } .card-top { flex-direction: column; text-align: center; } .mode-icon { margin-bottom: 10px; } .learning-card p { text-align: center; } .chips { justify-content: center; } .learn-btn { width: 100%; justify-content: center; } } /*========================= 576px =========================*/ @media(max-width:576px) { .learning-section { padding: 70px 0; } .learning-card { padding: 25px; border-radius: 22px; } .card-top h3 { font-size: 22px; } .mode-label { font-size: 12px; } .mode-icon { width: 65px; height: 65px; } .mode-icon img { width: 40px; } .learning-card p { font-size: 15px; line-height: 1.7; } .chips { gap: 8px; } .chips span { padding: 8px 14px; font-size: 13px; } .popular { position: static; display: inline-block; margin-bottom: 20px; } } /*========================= 400px =========================*/ @media(max-width:400px) { .learning-card { padding: 20px; } .card-top h3 { font-size: 20px; } .chips span { font-size: 12px; padding: 7px 12px; } } /*============================ 992px ============================*/ @media(max-width:992px) { .series-grid { grid-template-columns: repeat(2,1fr); } } /*============================ 768px ============================*/ @media(max-width:768px) { .series-grid { grid-template-columns: 1fr; } .series-search input { height: 58px; } } /*============================ 576px ============================*/ @media(max-width:576px) { .series-body { padding: 22px; } .series-body h3 { font-size: 20px; } .card-buttons { flex-direction: column; } } @media(max-width:992px) { .why-grid { grid-template-columns: 1fr; } } @media(max-width:576px) { .feature-grid { grid-template-columns: 1fr; } .why-content h3 { font-size: 32px; } } /*========================= 992px =========================*/ @media(max-width:992px) { .ts-feature-grid { grid-template-columns: repeat(2,1fr); } } /*========================= 768px =========================*/ @media(max-width:768px) { .ts-features { padding: 80px 0; } .ts-feature-grid { grid-template-columns: 1fr; gap: 25px; } .ts-feature-card { padding: 30px; } .ts-feature-card h3 { font-size: 24px; } } /*========================= 576px =========================*/ @media(max-width:576px) { .ts-feature-card { padding: 25px; } .ts-icon { width: 60px; height: 60px; font-size: 24px; border-radius: 16px; } .ts-feature-card h3 { font-size: 22px; } } /*========================== 992px ==========================*/ @media(max-width:992px) { .ts-highlight-grid { grid-template-columns: 1fr; } } /*========================== 768px ==========================*/ @media(max-width:768px) { .ts-highlights { padding: 80px 0; } .ts-highlight-card { padding: 24px; } .highlight-content h3 { font-size: 22px; } } /*========================== 576px ==========================*/ @media(max-width:576px) { .ts-highlight-card { flex-direction: column; align-items: center; text-align: center; } .highlight-icon { margin-bottom: 8px; } .highlight-content h3 { font-size: 20px; } } /*========================================= TEST SERIES QUESTIONS RESPONSIVE =========================================*/ /*========================================= 992px =========================================*/ @media(max-width:992px) { .ts-guide-section { padding: 80px 0; } .ts-guide-grid { grid-template-columns: 1fr; margin-top: 45px; } .ts-guide-wide { grid-column: auto; } .ts-guide-cta { grid-template-columns: auto 1fr; } .ts-guide-cta-btn { grid-column: 1 / -1; width: 100%; } } /* Responsive Mobile Breakpoints */ @media (max-width: 480px) { .tags-grid { grid-template-columns: 1fr; /* Switch to full-width tags on compact screens */ gap: 8px; } } /*========================================= 768px =========================================*/ @media(max-width:768px) { .ts-guide-section { padding: 70px 0; } .ts-guide-grid { gap: 14px; margin-top: 40px; } .ts-guide-item { padding: 20px; gap: 15px; } .ts-guide-content h3 { font-size: 16px; } .ts-guide-cta { margin-top: 28px; padding: 22px; } } /*========================================= 576px =========================================*/ @media(max-width:576px) { .ts-guide-section { padding: 60px 0; } .ts-guide-item { gap: 12px; padding: 17px; border-radius: 15px; } .ts-guide-number { width: 38px; height: 38px; min-width: 38px; border-radius: 11px; font-size: 11px; } .ts-guide-content h3 { margin-bottom: 7px; font-size: 15px; line-height: 1.5; } .ts-guide-content p { font-size: 13px; line-height: 1.7; } .ts-guide-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } .ts-guide-cta-icon { width: 50px; height: 50px; font-size: 20px; } .ts-guide-cta-content h3 { font-size: 18px; } .ts-guide-cta-btn { width: 100%; } } /*========================================= 400px =========================================*/ @media(max-width:400px) { .ts-guide-item { display: block; } .ts-guide-number { margin-bottom: 12px; } .ts-guide-content h3 { font-size: 14px; } } /*========================================= TEST SERIES FAQ RESPONSIVE =========================================*/ /*========================================= 992px =========================================*/ @media(max-width:992px) { .ts-faq-section { padding: 80px 0; } .ts-faq-grid { grid-template-columns: 1fr; margin-top: 45px; } .ts-faq-last { grid-column: auto; width: 100%; } } /*========================================= 768px =========================================*/ @media(max-width:768px) { .ts-faq-section { padding: 70px 0; } .ts-faq-grid { margin-top: 40px; gap: 14px; } .ts-faq-question { min-height: 72px; } } /*========================================= 576px =========================================*/ @media(max-width:576px) { .ts-faq-section { padding: 60px 0; } .ts-faq-grid { gap: 12px; } .ts-faq-question { min-height: 68px; grid-template-columns: 38px 1fr 32px; gap: 11px; padding: 13px; } .ts-faq-number { width: 38px; height: 38px; border-radius: 11px; font-size: 11px; } .ts-faq-title { font-size: 14px; line-height: 1.45; } .ts-faq-toggle { width: 31px; height: 31px; font-size: 12px; } .ts-faq-answer-inner { font-size: 13px; line-height: 1.7; padding: 0 14px 0 62px; } .ts-faq-item.active .ts-faq-answer-inner { padding: 0 14px 17px 62px; } } /*========================================= 400px =========================================*/ @media(max-width:400px) { .ts-faq-question { grid-template-columns: 34px 1fr 30px; gap: 9px; padding: 12px 10px; } .ts-faq-number { width: 34px; height: 34px; font-size: 10px; } .ts-faq-title { font-size: 13px; } .ts-faq-toggle { width: 29px; height: 29px; } .ts-faq-answer-inner { padding: 0 11px 0 53px; } .ts-faq-item.active .ts-faq-answer-inner { padding: 0 11px 15px 53px; } } /* ========================================================= RRB JE DETAIL HERO RESPONSIVE CSS ========================================================= */ /* ========================= LAPTOP / SMALL DESKTOP ========================= */ @media (max-width: 1100px) { .rrb-detail-hero { padding: 72px 0; } .rrb-detail-container { width: min(960px, calc(100% - 36px)); grid-template-columns: minmax(0, 1fr) minmax(350px, 0.82fr); gap: 45px; } .rrb-detail-title { font-size: 52px; } .rrb-detail-stats { gap: 9px; } .rrb-detail-stat { padding: 12px 10px; } .rrb-detail-floating-card { left: -20px; } } /* ========================= TABLET ========================= */ @media (max-width: 900px) { .rrb-detail-hero { padding: 62px 0 75px; } .rrb-detail-container { width: min(720px, calc(100% - 32px)); grid-template-columns: 1fr; gap: 48px; } .rrb-detail-hero-content { text-align: center; } .rrb-detail-title, .rrb-detail-description { margin-left: auto; margin-right: auto; } .rrb-detail-title { font-size: 51px; } .rrb-detail-description { max-width: 630px; } .rrb-detail-stats { max-width: 650px; margin-left: auto; margin-right: auto; } .rrb-detail-stat { text-align: left; } .rrb-detail-purchase { justify-content: center; } .rrb-detail-mini-benefits { justify-content: center; } .rrb-detail-visual { max-width: 520px; margin: 0 auto; } .rrb-detail-floating-card { left: -28px; } } /* ========================= LARGE MOBILE ========================= */ @media (max-width: 650px) { .rrb-detail-hero { padding: 48px 0 65px; } .rrb-detail-container { width: min(100% - 28px, 540px); gap: 38px; } .rrb-detail-eyebrow { margin-bottom: 14px; padding: 7px 12px; font-size: 11px; } .rrb-detail-title { font-size: 40px; letter-spacing: -1.8px; } .rrb-detail-description { margin-top: 18px; font-size: 14px; line-height: 1.65; } .rrb-detail-stats { grid-template-columns: 1fr; max-width: 420px; margin-top: 24px; } .rrb-detail-stat { padding: 11px 13px; } .rrb-detail-purchase { flex-direction: column; gap: 19px; margin-top: 26px; } .rrb-detail-price { text-align: center; } .rrb-detail-price-row { justify-content: center; } .rrb-detail-buy-btn { width: min(100%, 300px); } .rrb-detail-mini-benefits { gap: 9px 14px; margin-top: 21px; } .rrb-detail-visual-card { padding: 16px; border-radius: 20px; } .rrb-detail-exam-graphic { min-height: 210px; gap: 27px; padding: 20px; } .rrb-detail-exam-center strong { font-size: 31px; } .rrb-detail-floating-card { position: relative; left: auto; bottom: auto; width: max-content; max-width: 90%; margin: 13px auto 0; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 430px) { .rrb-detail-hero { padding: 42px 0 52px; } .rrb-detail-container { width: calc(100% - 22px); } .rrb-detail-title { font-size: 34px; letter-spacing: -1.4px; } .rrb-detail-title span { margin-top: 6px; } .rrb-detail-description { font-size: 13px; } .rrb-detail-stat-icon { flex-basis: 36px; width: 36px; height: 36px; } .rrb-detail-price-row strong { font-size: 28px; } .rrb-detail-mini-benefits { flex-direction: column; align-items: center; } .rrb-detail-visual-top { align-items: flex-start; } .rrb-detail-exam-graphic { min-height: 190px; gap: 19px; padding: 18px 12px; } .rrb-detail-streams { gap: 7px; } .rrb-detail-streams span { width: 39px; height: 35px; font-size: 11px; } .rrb-detail-rail-icon { width: 55px; height: 55px; font-size: 23px; } .rrb-detail-exam-center strong { font-size: 27px; } .rrb-detail-exam-center small { font-size: 8px; letter-spacing: 0.8px; } .rrb-detail-visual-footer div { padding: 11px 4px; } .rrb-detail-visual-footer strong { font-size: 14px; } .rrb-detail-visual-footer span { font-size: 8px; } .rrb-detail-floating-card { max-width: 100%; } } /* ===================================================== RRB KEY FEATURES RESPONSIVE CSS ===================================================== */ /* ============================== LARGE TABLETS ============================== */ @media (max-width: 1100px) { .rrb-feature-section { padding: 64px 0 70px; } .rrb-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .rrb-feature-ul-grid ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .rrb-feature-card { padding: 25px 22px; } } /* ============================== TABLETS ============================== */ @media (max-width: 768px) { .rrb-feature-section { padding: 55px 0 60px; } .rrb-feature-container { width: min(100% - 30px, 1180px); } .rrb-feature-heading { margin-bottom: 32px; } .rrb-feature-heading h2 { font-size: 34px; } .rrb-feature-heading p { font-size: 15px; line-height: 1.6; } .rrb-feature-card { padding: 23px 20px; } .rrb-feature-icon { width: 48px; height: 48px; margin-bottom: 17px; font-size: 19px; } .rrb-feature-content h3 { font-size: 18px; } } /* ============================== MOBILE ============================== */ @media (max-width: 580px) { .rrb-feature-section { padding: 46px 0 50px; } .rrb-feature-container { width: calc(100% - 24px); } .rrb-feature-heading { margin-bottom: 26px; } .rrb-feature-label { margin-bottom: 7px; font-size: 12px; } .rrb-feature-heading h2 { font-size: 29px; line-height: 1.16; } .rrb-feature-heading p { margin-top: 10px; font-size: 14px; line-height: 1.55; } .rrb-feature-grid { grid-template-columns: 1fr; gap: 13px; } .rrb-feature-ul-grid ul { grid-template-columns: 1fr; gap: 13px; } .rrb-feature-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 42px 18px 18px; border-radius: 16px; } .rrb-feature-number { top: 14px; right: 15px; font-size: 11px; } .rrb-feature-icon { width: 46px; height: 46px; margin: 0; border-radius: 13px; font-size: 18px; } .rrb-feature-content h3 { margin-bottom: 5px; font-size: 16px; line-height: 1.3; } .rrb-feature-content p { font-size: 13px; line-height: 1.55; } /* Disable hover movement on touch screens */ .rrb-feature-card:hover { transform: none; } .rrb-feature-card:hover .rrb-feature-icon { transform: none; } } /* ============================== VERY SMALL MOBILE ============================== */ @media (max-width: 380px) { .rrb-feature-section { padding: 40px 0 44px; } .rrb-feature-heading h2 { font-size: 26px; } .rrb-feature-card { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; padding: 16px 36px 16px 15px; } .rrb-feature-icon { width: 42px; height: 42px; font-size: 16px; } .rrb-feature-content h3 { font-size: 15px; } .rrb-feature-content p { font-size: 12.5px; } } /* ===================================================== RRB JE TEST EXPLORER RESPONSIVE ===================================================== */ /* ============================== 1100px ============================== */ @media(max-width:1100px) { .rrb-explorer-section { padding: 75px 0 80px; } .rrb-test-list-header, .rrb-test-row { grid-template-columns: minmax(0,1.2fr) 310px 125px; gap: 18px; } .rrb-test-row { padding: 18px; } .rrb-test-title-area h3 { font-size: 16px; } } /* ============================== 900px ============================== */ @media(max-width:900px) { .rrb-explorer-section { padding: 65px 0 70px; } .rrb-explorer-summary { max-width: 700px; } .rrb-explorer-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .rrb-explorer-tabs { display: grid; grid-template-columns: repeat(3,1fr); } .rrb-explorer-tab { padding: 0 10px; } .rrb-explorer-count { padding: 3px 8px 5px; text-align: center; } .rrb-test-list-header { display: none; } .rrb-test-row { grid-template-columns: 1fr 145px; gap: 18px; } .rrb-test-primary { grid-column: 1 / 2; } .rrb-test-meta { grid-column: 1 / 2; } .rrb-test-action { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; } } /* ============================== 700px ============================== */ @media(max-width:700px) { .rrb-explorer-container { width: min(100% - 30px,1180px); } .rrb-explorer-heading { margin-bottom: 30px; } .rrb-explorer-heading h2 { font-size: 36px; } .rrb-explorer-heading p { font-size: 14px; } .rrb-explorer-summary { padding: 15px; } .rrb-summary-item { gap: 8px; } .rrb-summary-icon { width: 39px; height: 39px; min-width: 39px; font-size: 14px; } .rrb-summary-item strong { font-size: 18px; } .rrb-summary-item span { font-size: 9px; } .rrb-explorer-tabs { display: flex; overflow-x: auto; scrollbar-width: none; } .rrb-explorer-tabs::-webkit-scrollbar { display: none; } .rrb-explorer-tab { min-width: max-content; flex-shrink: 0; } .rrb-test-row { grid-template-columns: 1fr; gap: 15px; } .rrb-test-primary, .rrb-test-meta, .rrb-test-action { grid-column: auto; grid-row: auto; } .rrb-test-action { flex-direction: row; align-items: center; justify-content: space-between; } .rrb-test-unlock-btn { min-width: 140px; } } /* ============================== 520px ============================== */ @media(max-width:520px) { .rrb-explorer-section { padding: 52px 0 58px; } .rrb-explorer-container { width: calc(100% - 24px); } .rrb-explorer-heading { margin-bottom: 25px; } .rrb-explorer-label { font-size: 12px; } .rrb-explorer-heading h2 { font-size: 30px; } .rrb-explorer-heading p { margin-top: 10px; font-size: 13px; line-height: 1.6; } .rrb-explorer-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 12px 7px; border-radius: 14px; } .rrb-summary-item { flex-direction: column; gap: 6px; text-align: center; } .rrb-summary-icon { width: 36px; height: 36px; min-width: 36px; } .rrb-summary-item strong { font-size: 16px; } .rrb-summary-item span { margin-top: 3px; font-size: 8px; } .rrb-summary-divider { display: none; } .rrb-explorer-toolbar { margin-bottom: 14px; padding: 6px; } .rrb-explorer-tab { min-height: 41px; padding: 0 12px; font-size: 11px; } .rrb-test-list { gap: 10px; } .rrb-test-row { padding: 16px; border-radius: 15px; } .rrb-test-primary { gap: 12px; } .rrb-test-index { width: 38px; height: 38px; min-width: 38px; border-radius: 11px; font-size: 10px; } .rrb-test-title-area h3 { font-size: 15px; } .rrb-test-title-area p { font-size: 11px; line-height: 1.55; } .rrb-test-meta { gap: 6px; } .rrb-test-meta > div { padding: 8px; } .rrb-test-action { flex-direction: column; align-items: stretch; } .rrb-test-unlock-btn { width: 100%; } .rrb-test-load-more { margin-top: 23px; } } /* ============================== 380px ============================== */ @media(max-width:380px) { .rrb-explorer-heading h2 { font-size: 27px; } .rrb-explorer-summary { grid-template-columns: 1fr; gap: 9px; } .rrb-summary-item { flex-direction: row; justify-content: flex-start; padding: 4px 10px; text-align: left; } .rrb-test-meta { grid-template-columns: 1fr; } } /* ===================================================== ABOUT TEST SERIES - RESPONSIVE CSS ===================================================== */ /* ===================================================== TABLET / SMALL LAPTOP ===================================================== */ @media (max-width: 1024px) { .rrb-series-about-section { padding: 65px 0 70px; } .rrb-series-about-container { width: min(100% - 34px,1180px); } .rrb-series-about-heading { margin-bottom: 32px; } .rrb-series-about-heading h2 { font-size: 38px; } /* INTRO */ .rrb-series-about-intro { grid-template-columns: 60px minmax(0,1fr); gap: 18px; padding: 24px; } .rrb-series-about-intro-icon { width: 56px; height: 56px; font-size: 22px; } /* BENEFITS */ .rrb-series-benefits-wrapper { grid-template-columns: 1fr; gap: 28px; margin-top: 42px; padding: 28px; } .rrb-series-benefits-content { max-width: 680px; } /* FINAL NOTE */ .rrb-series-about-final { grid-template-columns: auto minmax(0,1fr); } .rrb-series-about-final-btn { grid-column: 2; justify-self: start; } } /* ===================================================== TABLET ===================================================== */ @media (max-width: 768px) { .rrb-series-about-section { padding: 55px 0 60px; } .rrb-series-about-container { width: calc(100% - 28px); } /* HEADING */ .rrb-series-about-heading { margin-bottom: 28px; } .rrb-series-about-label { font-size: 11px; } .rrb-series-about-heading h2 { font-size: 32px; } .rrb-series-about-heading p { font-size: 13px; line-height: 1.65; } /* INTRODUCTION */ .rrb-series-about-intro { grid-template-columns: 1fr; gap: 15px; padding: 22px; border-radius: 17px; } .rrb-series-about-intro-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 19px; } .rrb-series-about-intro-content h3 { font-size: 20px; } .rrb-series-about-intro-content p { font-size: 12px; } /* TAGS */ .rrb-series-about-tags { gap: 6px; margin-top: 14px; } .rrb-series-about-tags span { padding: 6px 9px; font-size: 9px; } /* RESOURCES */ .rrb-series-about-resources { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; } .rrb-series-resource-card { padding: 20px; } /* BENEFITS */ .rrb-series-benefits-wrapper { gap: 24px; margin-top: 35px; padding: 24px; border-radius: 19px; } .rrb-series-benefits-content h3 { font-size: 24px; } .rrb-series-benefits-grid { gap: 8px; } /* FINAL NOTE */ .rrb-series-about-final { padding: 18px 20px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 576px) { .rrb-series-about-section { padding: 45px 0 50px; } .rrb-series-about-container { width: calc(100% - 22px); } /* HEADING */ .rrb-series-about-heading { margin-bottom: 24px; } .rrb-series-about-label { margin-bottom: 6px; font-size: 10px; } .rrb-series-about-heading h2 { font-size: 27px; line-height: 1.2; } .rrb-series-about-heading p { margin-top: 9px; font-size: 12px; line-height: 1.6; } /* INTRODUCTION CARD */ .rrb-series-about-intro { padding: 18px; border-radius: 15px; } .rrb-series-about-intro-icon { width: 46px; height: 46px; font-size: 17px; } .rrb-series-about-mini-label { font-size: 9px; } .rrb-series-about-intro-content h3 { margin-bottom: 8px; font-size: 18px; } .rrb-series-about-intro-content p { margin-bottom: 7px; font-size: 11px; line-height: 1.65; } /* TAGS */ .rrb-series-about-tags { gap: 5px; margin-top: 12px; } .rrb-series-about-tags span { padding: 5px 8px; font-size: 8px; } /* RESOURCE CARDS */ .rrb-series-resource-card { grid-template-columns: 45px minmax(0,1fr); gap: 13px; padding: 17px; } .rrb-series-resource-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 17px; } .rrb-series-resource-content h3 { font-size: 16px; } .rrb-series-resource-content p { margin-bottom: 9px; font-size: 11px; } .rrb-series-resource-content a { font-size: 9px; } /* BENEFITS WRAPPER */ .rrb-series-benefits-wrapper { gap: 20px; margin-top: 30px; padding: 19px; border-radius: 16px; } .rrb-series-benefits-content h3 { font-size: 21px; } .rrb-series-benefits-content > p { margin-top: 9px; font-size: 11px; line-height: 1.65; } /* BENEFITS HIGHLIGHT */ .rrb-series-benefits-highlight { margin-top: 16px; padding: 11px; } .rrb-series-benefits-highlight > i { width: 35px; height: 35px; min-width: 35px; font-size: 13px; } .rrb-series-benefits-highlight strong { font-size: 10px; } /* BENEFITS GRID */ .rrb-series-benefits-grid { grid-template-columns: 1fr; gap: 7px; } .rrb-series-benefit-item { padding: 10px; } .rrb-series-benefit-item p { font-size: 10px; } /* FINAL NOTE */ .rrb-series-about-final { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; padding: 17px; border-radius: 15px; } .rrb-series-about-final-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; } .rrb-series-about-final-content h3 { font-size: 15px; } .rrb-series-about-final-content p { font-size: 10px; } .rrb-series-about-final-btn { grid-column: auto; width: 100%; min-height: 40px; justify-self: stretch; } } /* ===================================================== VERY SMALL MOBILE ===================================================== */ @media (max-width: 380px) { .rrb-series-about-container { width: calc(100% - 18px); } .rrb-series-about-heading h2 { font-size: 24px; } .rrb-series-about-intro { padding: 16px; } .rrb-series-resource-card { grid-template-columns: 1fr; } .rrb-series-benefits-wrapper { padding: 16px; } .rrb-series-about-tags span { width: 100%; justify-content: center; } .rrb-series-about-final { padding: 15px; } } /* ===================================================== WHY CHOOSE TEST SERIES RESPONSIVE CSS ===================================================== */ /* ===================================================== SMALL LAPTOP / LARGE TABLET ===================================================== */ @media (max-width: 1100px) { .why-test-series { padding: 95px 0; } .why-test-series .why-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 45px; margin-top: 55px; } .why-test-series .why-content h3 { font-size: 36px; } .why-test-series .feature-grid { gap: 20px; } .why-test-series .feature-card { padding: 28px; } .why-test-series .feature-card i { width: 62px; height: 62px; font-size: 24px; } .why-test-series .feature-card h4 { font-size: 20px; } } /* ===================================================== TABLET ===================================================== */ @media (max-width: 992px) { .social-media-mobile { display: flex; } .why-test-series { padding: 80px 0; } .why-test-series .section-heading { margin-bottom: 0; } .why-test-series .why-grid { grid-template-columns: 1fr; gap: 45px; margin-top: 45px; } .why-test-series .why-content { max-width: 760px; margin: 0 auto; text-align: center; } .why-test-series .why-content h3 { font-size: 34px; line-height: 1.3; } .why-test-series .why-content p { line-height: 1.8; } .why-test-series .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .why-test-series .feature-card { padding: 28px; } } /* ===================================================== LARGE MOBILE ===================================================== */ @media (max-width: 768px) { .social-media-mobile { display: flex; } .why-test-series { padding: 70px 0; } .why-test-series .section-heading h2 { font-size: 34px; line-height: 1.25; } .why-test-series .section-heading p { max-width: 600px; margin: 12px auto 0; font-size: 15px; line-height: 1.7; } .why-test-series .why-grid { gap: 35px; margin-top: 38px; } .why-test-series .why-content h3 { font-size: 30px; } .why-test-series .why-content p { margin-bottom: 18px; font-size: 15px; line-height: 1.75; } .why-test-series .why-content .btn { width: auto; min-width: 210px; } .why-test-series .feature-grid { gap: 16px; } .why-test-series .feature-card { padding: 24px; border-radius: 20px; } .why-test-series .feature-card i { width: 58px; height: 58px; margin-bottom: 17px; border-radius: 17px; font-size: 22px; } .why-test-series .feature-card h4 { margin-bottom: 10px; font-size: 18px; } .why-test-series .feature-card p { font-size: 14px; line-height: 1.65; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 576px) { .social-media-mobile { display: flex; } .why-test-series { padding: 60px 0; } .why-test-series .container { width: calc(100% - 24px); } .why-test-series .section-heading h2 { font-size: 29px; } .why-test-series .section-heading p { margin-top: 10px; font-size: 14px; line-height: 1.6; } .why-test-series .why-grid { gap: 30px; margin-top: 32px; } .why-test-series .why-content h3 { margin-bottom: 18px; font-size: 25px; line-height: 1.35; } .why-test-series .why-content p { margin-bottom: 15px; font-size: 14px; line-height: 1.7; } .why-test-series .why-content .btn { width: 100%; min-width: 0; margin-top: 10px; } .why-test-series .feature-grid { grid-template-columns: 1fr; gap: 14px; } .why-test-series .feature-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 15px; align-items: start; padding: 20px; border-radius: 18px; } .why-test-series .feature-card i { grid-column: 1; grid-row: 1 / span 2; width: 54px; height: 54px; margin: 0; border-radius: 15px; font-size: 20px; } .why-test-series .feature-card h4 { grid-column: 2; margin: 0 0 6px; font-size: 17px; line-height: 1.35; } .why-test-series .feature-card p { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.6; } /* Disable hover movement on touch screens */ .why-test-series .feature-card:hover { transform: none; } } /* ===================================================== VERY SMALL MOBILE ===================================================== */ @media (max-width: 400px) { .social-media-mobile { display: flex; } .why-test-series { padding: 50px 0; } .why-test-series .container { width: calc(100% - 20px); } .why-test-series .section-heading h2 { font-size: 26px; } .why-test-series .why-content h3 { font-size: 22px; } .why-test-series .why-content p { font-size: 13px; line-height: 1.65; } .why-test-series .feature-card { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 17px; border-radius: 16px; } .why-test-series .feature-card i { width: 48px; height: 48px; border-radius: 13px; font-size: 18px; } .why-test-series .feature-card h4 { font-size: 15px; } .why-test-series .feature-card p { font-size: 12px; line-height: 1.55; } } /* ===================================================== MOBILE NAVIGATION ===================================================== */ .social-media-mobile { display: none; margin-top: 30px; justify-content: center; } @media(max-width:992px) { .social-media-mobile { display: flex; } .header { position: sticky; top: 0; z-index: 1000; } .navbar { display: block; position: fixed; top: 0; right: -100%; width: min(320px, 85%); height: 100vh; padding: 110px 25px 90px; background: #fff; z-index: 999; overflow-y: auto; box-shadow: -15px 0 40px rgba(0,0,0,.15); transition: right .35s ease; } .navbar.mobile-nav-open { right: 0; } .navbar .container { width: 100%; } .navbar ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .navbar ul li { width: 100%; border-bottom: 1px solid #eeeeee; } .navbar ul li a { display: block; width: 100%; padding: 17px 5px; color: #222; font-size: 15px; font-weight: 600; } .hamburger { position: relative; z-index: 1001; cursor: pointer; } } /* ===================================================== RRB COURSE TOPPERS RESPONSIVE ===================================================== */ /* ============================== TABLET ============================== */ @media(max-width:1100px) { .rrb-course-toppers-container { grid-template-columns: 280px minmax(0, 1fr); gap: 35px; } .rrb-course-toppers-heading h2 { font-size: 32px; } .rrb-course-toppers-list { gap: 14px; } .rrb-course-topper-photo { height: 165px; } } /* ============================== SMALL TABLET ============================== */ @media(max-width:900px) { .rrb-course-toppers-section { padding: 60px 0; } .rrb-course-toppers-container { grid-template-columns: 1fr; gap: 32px; } .rrb-course-toppers-heading { max-width: 620px; } .rrb-course-toppers-heading h2 span { display: inline; } .rrb-course-toppers-list { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; padding: 3px 3px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; } .rrb-course-toppers-list::-webkit-scrollbar { display: none; } .rrb-course-topper-card { scroll-snap-align: start; } } /* ============================== MOBILE ============================== */ @media(max-width:600px) { .rrb-course-toppers-section { padding: 48px 0; } .rrb-course-toppers-container { width: min(100% - 30px, 1180px); gap: 26px; } .rrb-course-toppers-label { margin-bottom: 10px; font-size: 11px; } .rrb-course-toppers-heading h2 { font-size: 27px; } .rrb-course-toppers-heading > p { margin: 13px 0 20px; font-size: 13px; line-height: 1.65; } .rrb-course-toppers-trust { gap: 24px; } .rrb-course-toppers-trust strong { font-size: 19px; } .rrb-course-toppers-list { grid-template-columns: repeat(3, 78vw); gap: 14px; margin-right: -15px; } .rrb-course-topper-card { padding: 13px; border-radius: 17px; } .rrb-course-topper-photo { height: 220px; border-radius: 13px; } .rrb-course-topper-info { padding-top: 13px; } .rrb-course-topper-info h3 { font-size: 15px; } } /* ============================== VERY SMALL MOBILE ============================== */ @media(max-width:380px) { .rrb-course-toppers-heading h2 { font-size: 24px; } .rrb-course-toppers-list { grid-template-columns: repeat(3, 82vw); } .rrb-course-topper-photo { height: 200px; } } /* ===================================================== RRB RECOMMENDED COURSES RESPONSIVE ===================================================== */ /* ============================== TABLET ============================== */ @media(max-width:1050px) { .rrb-recommended-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rrb-recommended-heading h2 { font-size: 34px; } } /* ============================== SMALL TABLET ============================== */ @media(max-width:768px) { .rrb-recommended-section { padding: 58px 0; } .rrb-recommended-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 28px; } .rrb-recommended-heading-content { max-width: 100%; } .rrb-recommended-view-all { min-height: 42px; } .rrb-recommended-grid { grid-template-columns: repeat(3, 310px); gap: 16px; overflow-x: auto; padding: 3px 3px 18px; margin-right: -20px; scroll-snap-type: x mandatory; scrollbar-width: none; } .rrb-recommended-grid::-webkit-scrollbar { display: none; } .rrb-recommended-card { scroll-snap-align: start; } } /* ============================== MOBILE ============================== */ @media(max-width:600px) { .rrb-recommended-section { padding: 48px 0; } .rrb-recommended-container { width: min(100% - 30px, 1180px); } .rrb-recommended-label { margin-bottom: 8px; font-size: 10px; } .rrb-recommended-heading h2 { font-size: 27px; } .rrb-recommended-heading p { margin-top: 9px; font-size: 12px; line-height: 1.65; } .rrb-recommended-view-all { min-height: 40px; padding: 0 16px; font-size: 11px; } .rrb-recommended-grid { grid-template-columns: repeat(3, 82vw); gap: 14px; margin-right: -15px; } .rrb-recommended-image { height: 170px; } .rrb-recommended-content { padding: 17px; } .rrb-recommended-content h3 { min-height: auto; font-size: 15px; } .rrb-recommended-content > p { min-height: auto; font-size: 11px; } .rrb-recommended-price strong { font-size: 16px; } } /* ============================== VERY SMALL MOBILE ============================== */ @media(max-width:380px) { .rrb-recommended-heading h2 { font-size: 24px; } .rrb-recommended-grid { grid-template-columns: repeat(3, 85vw); } .rrb-recommended-footer { align-items: flex-end; } .rrb-recommended-footer > a { padding: 0 11px; } } /* ===================================================== RECOMMENDED COURSES MOBILE SLIDER + DOTS ===================================================== */ .rrb-recommended-dots { display: none; } @media (max-width: 600px) { .rrb-recommended-grid { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 3px 0 12px; margin-right: 0; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .rrb-recommended-grid::-webkit-scrollbar { display: none; } .rrb-recommended-card { flex: 0 0 100%; width: 100%; min-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; } /* DOTS CONTAINER */ .rrb-recommended-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; } /* DOT */ .rrb-recommended-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d7d7d7; cursor: pointer; transition: width .3s ease, background .3s ease, transform .3s ease; } /* ACTIVE DOT */ .rrb-recommended-dot.active { width: 24px; border-radius: 20px; background: #e62d27; } } /* ===================================================== TOPPERS CONTINUOUS MOBILE CAROUSEL ===================================================== */ @media (max-width: 768px) { .rrb-course-toppers-list { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 3px 0 16px; scroll-behavior: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .rrb-course-toppers-list::-webkit-scrollbar { display: none; } .rrb-course-topper-card { flex: 0 0 82vw; width: 82vw; min-width: 82vw; } } @media (max-width: 380px) { .rrb-course-topper-card { flex-basis: 85vw; width: 85vw; min-width: 85vw; } } /* ========================================================= ZONE TECH LOGIN PAGE RESPONSIVE CSS ========================================================= */ /* ========================================================= TABLET 993px and below ========================================================= */ @media (max-width: 992px) { .zt-login-page { min-height: auto; padding:40px 0 95px; } .zt-login-container { width: min(720px, calc(100% - 36px)); grid-template-columns: 1fr; gap: 85px; } /* ========================= LEFT CONTENT ========================= */ .zt-login-content { text-align: center; } .zt-login-content h1 { max-width: 720px; margin: 0 auto; font-size: 52px; } .zt-login-description { max-width: 620px; margin: 20px auto 0; } /* ========================= BENEFITS ========================= */ .zt-login-benefits { max-width: 620px; margin: 30px auto 0; text-align: left; } /* ========================= TRUST ========================= */ .zt-login-trust { justify-content: center; } /* ========================= LOGIN CARD ========================= */ .zt-login-card-wrapper { width: min(470px, 100%); margin: 0 auto; padding-top: 42px; } .zt-login-card { padding: 60px 38px 32px; } .zt-login-card-icon { top: -43px; margin: 0; } /* Prevent floating badge overflow */ .zt-login-floating-badge { right: -15px; } } /* ========================================================= MOBILE 601px and below ========================================================= */ @media (max-width: 600px) { .zt-login-page { padding: 0 0 75px; } .zt-login-container { width: calc(100% - 28px); gap: 72px; } /* ========================= LEFT CONTENT ========================= */ .zt-login-eyebrow { margin-bottom: 15px; padding: 7px 13px; font-size: 11px; } .zt-login-content h1 { font-size: 38px; line-height: 1.1; letter-spacing: -1.5px; } .zt-login-description { margin-top: 17px; font-size: 14px; line-height: 1.7; } /* ========================= BENEFITS ========================= */ .zt-login-benefits { gap: 10px; margin-top: 25px; } .zt-login-benefit { padding: 12px; gap: 12px; } .zt-login-benefit > span { width: 42px; height: 42px; min-width: 42px; font-size: 16px; } .zt-login-benefit strong { font-size: 13px; } .zt-login-benefit small { font-size: 11px; } /* ========================= TRUST ========================= */ .zt-login-trust { gap: 16px; } .zt-login-trust strong { font-size: 20px; } .zt-login-trust span { font-size: 10px; } /* ========================= LOGIN CARD ========================= */ .zt-login-card-wrapper { width: 100%; padding-top: 36px; } .zt-login-card { padding: 54px 21px 25px; border-radius: 22px; } /* IMPORTANT: Keep absolute positioning. Do NOT use negative margin here. */ .zt-login-card-icon { width: 64px; height: 64px; top: -39px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 24px; } .zt-login-card-heading h2 { font-size: 25px; } .zt-login-card-heading p { max-width: 320px; font-size: 12px; } /* ========================= FORM ========================= */ .zt-login-form { margin-top: 25px; } .zt-login-input-wrapper { height: 54px; } .zt-login-submit { height: 52px; } /* ========================= FLOATING BADGE ========================= */ .zt-login-floating-badge { display: none; } } /* ========================================================= SMALL MOBILE 481px and below ========================================================= */ @media (max-width: 480px) { .zt-login-page { padding: 0 0 65px; } .zt-login-container { width: calc(100% - 24px); gap: 65px; } /* ========================= HERO CONTENT ========================= */ .zt-login-content h1 { font-size: 34px; letter-spacing: -1px; } .zt-login-description { font-size: 13px; } /* ========================= TRUST ========================= */ .zt-login-trust { gap: 12px; } .zt-login-trust strong { font-size: 18px; } .zt-login-trust span { font-size: 9.5px; } .zt-login-trust-divider { height: 34px; } /* ========================= CARD ========================= */ .zt-login-card-wrapper { padding-top: 34px; } .zt-login-card { padding: 52px 18px 24px; border-radius: 20px; } .zt-login-card-icon { width: 62px; height: 62px; top: -37px; border-width: 6px; border-radius: 20px; font-size: 23px; } .zt-login-card-heading h2 { font-size: 23px; } .zt-login-card-heading p { font-size: 11.5px; line-height: 1.6; } /* ========================= INPUT ========================= */ .zt-login-country-code { padding: 0 12px; font-size: 13px; } .zt-login-input-wrapper input { padding: 0 11px; font-size: 13px; } .zt-login-input-icon { padding-right: 12px; } /* ========================= SUPPORT ========================= */ .zt-login-support { font-size: 11px; } } /* ========================================================= VERY SMALL MOBILE 381px and below ========================================================= */ @media (max-width: 380px) { .zt-login-page { padding: 0 0 60px; } .zt-login-container { width: calc(100% - 20px); gap: 60px; } /* ========================= HERO ========================= */ .zt-login-content h1 { font-size: 31px; letter-spacing: -0.8px; } .zt-login-description { font-size: 12.5px; } /* ========================= BENEFITS ========================= */ .zt-login-benefit { align-items: flex-start; } /* ========================= TRUST ========================= */ .zt-login-trust { gap: 10px; } .zt-login-trust strong { font-size: 17px; } .zt-login-trust span { font-size: 9px; } /* ========================= CARD ========================= */ .zt-login-card-wrapper { padding-top: 32px; } .zt-login-card { padding: 49px 15px 22px; } .zt-login-card-icon { width: 58px; height: 58px; top: -35px; border-width: 6px; font-size: 21px; } .zt-login-card-heading h2 { font-size: 21px; } /* ========================= INPUT ========================= */ .zt-login-country-code { padding: 0 10px; font-size: 12px; } .zt-login-input-wrapper input { min-width: 0; padding: 0 9px; font-size: 12px; } .zt-login-input-icon { padding-right: 10px; font-size: 12px; } /* ========================= BUTTON ========================= */ .zt-login-submit { height: 50px; font-size: 13px; } /* ========================= SECURITY ========================= */ .zt-login-security { font-size: 9.5px; } } /* ========================================================= ZONE TECH COURSES PAGE RESPONSIVE CSS ========================================================= */ /* ========================================================= LARGE TABLET ========================================================= */ @media (max-width: 1200px) { .zt-courses-container { width: min(1100px, calc(100% - 50px)); } .zt-courses-hero .zt-courses-container { grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr); gap: 55px; } .zt-courses-hero-content h1 { font-size: 56px; } .zt-courses-floating-badge { left: -25px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 992px) { .zt-courses-hero { min-height: auto; padding: 80px 0 105px; } .zt-courses-container { width: min(720px, calc(100% - 36px)); } .zt-courses-hero .zt-courses-container { grid-template-columns: 1fr; gap: 75px; } .zt-courses-hero-content { text-align: center; } .zt-courses-hero-content h1 { max-width: 720px; margin: 0 auto; font-size: 54px; } .zt-courses-hero-description { max-width: 650px; margin: 23px auto 0; } .zt-courses-hero-actions { justify-content: center; } .zt-courses-hero-stats { justify-content: center; } .zt-courses-hero-visual { width: min(520px, 100%); justify-self: center; } .zt-courses-floating-badge { left: -20px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .zt-courses-hero { padding: 65px 0 85px; } .zt-courses-container { width: calc(100% - 28px); } .zt-courses-hero .zt-courses-container { gap: 60px; } .zt-courses-eyebrow { margin-bottom: 16px; padding: 7px 13px; font-size: 11px; } .zt-courses-hero-content h1 { font-size: 39px; line-height: 1.1; letter-spacing: -1.7px; } .zt-courses-hero-description { margin-top: 18px; font-size: 14px; line-height: 1.7; } .zt-courses-hero-actions { margin-top: 26px; } .zt-courses-primary-btn, .zt-courses-secondary-btn { min-height: 49px; padding: 0 20px; font-size: 13px; } .zt-courses-hero-stats { gap: 15px; margin-top: 29px; } .zt-courses-stat strong { font-size: 18px; } .zt-courses-stat span { font-size: 9px; } /* RIGHT CARD */ .zt-courses-visual-card { padding: 18px; border-radius: 23px; } .zt-courses-visual-heading { margin-top: 23px; padding: 26px 20px; } .zt-courses-visual-heading h2 { font-size: 25px; } .zt-courses-visual-options { grid-template-columns: 1fr; } .zt-courses-visual-option { padding: 11px 12px; } .zt-courses-visual-option strong { font-size: 11px; } .zt-courses-visual-option small { font-size: 9px; } .zt-courses-floating-badge { display: none; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .zt-courses-container { width: calc(100% - 20px); } .zt-courses-hero-content h1 { font-size: 33px; } .zt-courses-primary-btn, .zt-courses-secondary-btn { width: 100%; } .zt-courses-hero-stats { gap: 10px; } .zt-courses-stat-divider { height: 32px; } .zt-courses-stat strong { font-size: 16px; } .zt-courses-visual-card { padding: 15px; } .zt-courses-visual-heading { padding: 23px 17px; } .zt-courses-visual-heading h2 { font-size: 22px; } .zt-courses-visual-bottom strong { font-size: 15px; } } /* ========================================= COURSES PAGE RESPONSIVE ========================================= */ /* LAPTOP / SMALL DESKTOP */ @media (max-width: 1200px) { .courses-page-container { width: calc(100% - 70px); grid-template-columns: 260px minmax(0, 1fr); gap: 35px; } .course-stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* TABLET */ @media (max-width: 991px) { .courses-content-section { padding: 70px 0 80px; } .courses-page-container { width: calc(100% - 40px); display: block; } /* QUICK NAVIGATION */ .courses-quick-nav { position: relative; top: auto; margin-bottom: 45px; padding: 22px; } .quick-nav-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } .quick-nav-item { background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.05); } .quick-nav-item i { display: none; } .quick-nav-item:hover, .quick-nav-item.active { transform: none; } .course-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* MOBILE */ @media (max-width: 767px) { .courses-content-section { padding: 55px 0 65px; overflow: hidden; } .courses-page-container { width: calc(100% - 30px); } /* QUICK NAV */ .courses-quick-nav { margin-bottom: 38px; padding: 20px 15px; border-radius: 20px; } .quick-nav-heading { padding: 0 4px 17px; } .quick-nav-icon { width: 46px; height: 46px; border-radius: 13px; } .quick-nav-heading h2 { font-size: 18px; } /* HORIZONTAL SCROLL NAVIGATION */ .quick-nav-list { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none; } .quick-nav-list::-webkit-scrollbar { display: none; } .quick-nav-item { min-width: max-content; min-height: 43px; flex-shrink: 0; padding: 10px 16px; border-radius: 50px; font-size: 13px; scroll-snap-align: start; } .quick-nav-item.active { color: #ffffff; background: linear-gradient( 135deg, #e52525, #ff5b1f ); } /* CONTENT HEADING */ .courses-content-heading { margin-bottom: 30px; } .section-tag { font-size: 10px; padding: 7px 12px; } .courses-content-heading h2 { font-size: 34px; letter-spacing: -1px; } .courses-content-heading p { font-size: 15px; line-height: 1.7; } /* INTRO CARD */ .course-intro-card { flex-direction: column; padding: 23px; border-radius: 19px; } .course-intro-icon { width: 56px; height: 56px; border-radius: 15px; font-size: 21px; } .course-intro-text h3 { font-size: 20px; line-height: 1.35; } .course-intro-text p { font-size: 14px; } /* FEATURES */ .course-feature-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 35px; } .course-feature-card { min-height: auto; padding: 21px; gap: 15px; border-radius: 17px; } .course-feature-icon { width: 48px; height: 48px; border-radius: 13px; } .course-feature-card h3 { font-size: 17px; } /* STREAMS */ .course-stream-section { padding: 25px 18px; border-radius: 21px; } .course-stream-heading h3 { font-size: 24px; line-height: 1.3; } .course-stream-grid { grid-template-columns: 1fr; gap: 13px; } .course-stream-card { min-height: auto; padding: 21px; padding-bottom: 50px; } } /* SMALL MOBILE */ @media (max-width: 480px) { .courses-page-container { width: calc(100% - 24px); } .courses-content-heading h2 { font-size: 30px; } .courses-content-heading p { font-size: 14px; } .course-intro-card { padding: 20px; } .course-feature-card { align-items: flex-start; padding: 19px; } .course-feature-icon { width: 45px; height: 45px; font-size: 18px; } .course-stream-section { padding: 22px 15px; } .course-stream-heading h3 { font-size: 22px; } .course-stream-card h4 { font-size: 17px; } .course-stream-card p { font-size: 13px; } } /* ========================================= COMPLETE COURSES CONTENT RESPONSIVE ========================================= */ @media (max-width: 991px) { .courses-feature-list { grid-template-columns: 1fr; } } @media (max-width: 767px) { .course-text-block { padding: 22px 18px; margin-bottom: 20px; border-radius: 17px; } .course-text-block h3 { font-size: 19px; line-height: 1.45; } .course-text-block p { font-size: 14px; line-height: 1.75; } .courses-feature-list { gap: 9px; } .courses-feature-list li { padding: 12px 12px 12px 38px; font-size: 13px; } .courses-feature-list li::before { left: 13px; top: 14px; } .engineering-stream-text { padding: 18px; margin-top: 18px; } .important-course-heading h3 { font-size: 17px; line-height: 1.6; } /* DETAILED FEATURES */ .course-detailed-feature { gap: 15px; padding: 20px 17px; margin-bottom: 13px; border-radius: 16px; } .detailed-feature-number { width: 43px; height: 43px; flex-basis: 43px; border-radius: 12px; font-size: 12px; } .course-detailed-feature h4 { font-size: 16px; } .course-detailed-feature p { font-size: 13px; line-height: 1.7; } } @media (max-width: 480px) { .course-text-block { padding: 20px 15px; } .course-text-block h3 { font-size: 18px; } .course-detailed-feature { flex-direction: column; gap: 13px; } .detailed-feature-number { width: 42px; height: 42px; flex-basis: 42px; } } /* ========================================= COURSES FAQ RESPONSIVE ========================================= */ @media (max-width: 1199px) { .courses-faq-container { width: min(100% - 48px, 1200px); } } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .courses-faq-section { padding: 60px 0 70px; } .courses-faq-container { width: calc(100% - 40px); } .courses-faq-heading { margin-bottom: 30px; } .courses-faq-question { min-height: 76px; grid-template-columns: 42px minmax(0, 1fr) 44px; gap: 14px; padding: 17px 18px; } .courses-faq-answer-inner { padding: 0 75px 25px 74px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .courses-faq-section { padding: 48px 0 55px; } .courses-faq-container { width: calc(100% - 30px); } .courses-faq-heading { margin-bottom: 25px; } .courses-faq-heading h2 { font-size: 28px; } .courses-faq-heading p { font-size: 14px; } .courses-faq-question { min-height: 72px; grid-template-columns: minmax(0, 1fr) 38px; gap: 12px; padding: 16px 14px; } /* HIDE NUMBER ON MOBILE */ .courses-faq-number { display: none; } .courses-faq-question-text { font-size: 14px; line-height: 1.5; } .courses-faq-icon { width: 36px; height: 36px; font-size: 12px; } .courses-faq-answer-inner { padding: 0 62px 22px 14px; } .courses-faq-answer-inner p { font-size: 13px; line-height: 1.7; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .courses-faq-container { width: calc(100% - 24px); } .courses-faq-section { padding: 42px 0 48px; } .courses-faq-heading h2 { font-size: 25px; } .courses-faq-question { min-height: 68px; padding: 14px 12px; grid-template-columns: minmax(0, 1fr) 34px; gap: 10px; } .courses-faq-question-text { font-size: 13px; } .courses-faq-icon { width: 32px; height: 32px; } .courses-faq-answer-inner { padding: 0 50px 20px 12px; } } /* ========================================================= ZONE TECH CART PAGE - RESPONSIVE CSS Desktop CSS remains inside: cart.css Responsive CSS remains inside: cart-responsive.css ========================================================= */ /* ========================================================= LARGE TABLET / SMALL LAPTOP 1100px AND BELOW ========================================================= */ @media (max-width: 1100px) { .zt-cart-hero .zt-cart-container { grid-template-columns: minmax(0, 1fr) 340px; gap: 50px; } .zt-cart-main-container { grid-template-columns: minmax(0, 1fr) 330px; gap: 25px; } .zt-cart-hero-content h1 { font-size: 52px; } .zt-cart-summary { padding: 26px; } } /* ========================================================= TABLET 900px AND BELOW ========================================================= */ @media (max-width: 900px) { .zt-cart-container, .zt-cart-main-container { width: min(720px, calc(100% - 32px)); } /* ========================= HERO ========================= */ .zt-cart-hero { min-height: auto; padding: 65px 0 75px; } .zt-cart-hero .zt-cart-container { grid-template-columns: 1fr; gap: 45px; } .zt-cart-hero-content { text-align: center; } .zt-cart-eyebrow { margin-left: auto; margin-right: auto; } .zt-cart-hero-content h1 { max-width: 700px; margin-left: auto; margin-right: auto; font-size: 52px; } .zt-cart-hero-content > p { margin-left: auto; margin-right: auto; } /* ========================= CART STEPS ========================= */ .zt-cart-steps { justify-content: center; } /* ========================= HERO CART CARD ========================= */ .zt-cart-hero-visual { justify-self: center; max-width: 420px; } /* ========================= CART SECTION ========================= */ .zt-cart-section { padding: 65px 0 90px; } .zt-cart-main-container { grid-template-columns: 1fr; } /* ========================= ORDER SUMMARY ========================= */ .zt-cart-summary { position: static; width: 100%; } } /* ========================================================= MOBILE LANDSCAPE / LARGE MOBILE 650px AND BELOW ========================================================= */ @media (max-width: 650px) { .zt-cart-container, .zt-cart-main-container { width: calc(100% - 28px); } /* ========================= HERO ========================= */ .zt-cart-hero { padding: 48px 0 58px; } .zt-cart-hero-content h1 { font-size: 40px; line-height: 1.08; letter-spacing: -1.8px; } .zt-cart-hero-content > p { margin-top: 18px; font-size: 14px; line-height: 1.7; } .zt-cart-eyebrow { margin-bottom: 15px; padding: 7px 13px; font-size: 10px; } /* ========================= CHECKOUT STEPS ========================= */ .zt-cart-steps { width: 100%; align-items: flex-start; justify-content: space-between; gap: 6px; margin-top: 28px; } .zt-cart-step { min-width: 0; flex: 1; flex-direction: column; gap: 7px; } .zt-cart-step > span { width: 37px; height: 37px; margin: 0 auto; } .zt-cart-step > div { text-align: center; } .zt-cart-step strong { font-size: 10px; } .zt-cart-step small { font-size: 8px; } .zt-cart-steps > i { flex-shrink: 0; margin-top: 14px; font-size: 9px; } /* ========================= HERO CART VISUAL ========================= */ .zt-cart-hero-visual { width: 100%; max-width: 380px; } .zt-cart-visual-card { padding: 30px 24px; } .zt-cart-visual-icon { width: 68px; height: 68px; font-size: 25px; } .zt-cart-visual-card > strong { font-size: 25px; } /* ========================= MAIN CART SECTION ========================= */ .zt-cart-section { padding: 52px 0 75px; } /* ========================= CART CONTENT ========================= */ .zt-cart-content { border-radius: 20px; } .zt-cart-content-header { min-height: auto; padding: 20px 20px; gap: 15px; } .zt-cart-content-header h2 { font-size: 22px; } .zt-cart-count { flex-shrink: 0; } /* ========================= EMPTY CART ========================= */ .zt-cart-empty { min-height: 420px; padding: 40px 20px; } .zt-cart-empty-visual { transform: scale(.92); margin-bottom: -5px; } .zt-cart-empty h3 { font-size: 22px; } .zt-cart-empty > p { max-width: 400px; font-size: 13px; } .zt-cart-explore-btn { min-height: 48px; padding: 0 21px; } /* ========================= CART ITEMS ========================= */ .zt-cart-items { padding: 5px 20px 20px; } .zt-cart-item { grid-template-columns: 85px minmax(0, 1fr); gap: 15px; padding: 22px 0; } .zt-cart-item-image { width: 85px; height: 85px; border-radius: 15px; font-size: 27px; } .zt-cart-item-info h3 { font-size: 16px; line-height: 1.4; } .zt-cart-item-info p { font-size: 11px; } .zt-cart-item-bottom { flex-wrap: wrap; gap: 12px; } .zt-cart-item-price { grid-column: 1 / -1; justify-self: end; font-size: 19px; } /* ========================= ORDER SUMMARY ========================= */ .zt-cart-summary { padding: 25px 22px; border-radius: 20px; } .zt-cart-summary-heading h2 { font-size: 23px; } .zt-cart-summary-total strong { font-size: 25px; } } /* ========================================================= SMALL MOBILE 430px AND BELOW ========================================================= */ @media (max-width: 430px) { .zt-cart-container, .zt-cart-main-container { width: calc(100% - 22px); } /* ========================= HERO ========================= */ .zt-cart-hero { padding: 42px 0 52px; } .zt-cart-eyebrow { font-size: 9px; } .zt-cart-hero-content h1 { font-size: 34px; line-height: 1.1; letter-spacing: -1.4px; } .zt-cart-hero-content > p { font-size: 13px; } /* ========================= STEPS ========================= */ .zt-cart-steps { margin-top: 25px; } .zt-cart-step > span { width: 34px; height: 34px; border-radius: 10px; font-size: 9px; } .zt-cart-step small { display: none; } .zt-cart-step strong { font-size: 9px; } .zt-cart-steps > i { margin-top: 12px; } /* ========================= HERO CART CARD ========================= */ .zt-cart-hero-visual { max-width: 100%; } .zt-cart-visual-card { padding: 27px 20px; border-radius: 22px; } .zt-cart-visual-icon { width: 62px; height: 62px; border-radius: 18px; font-size: 22px; } .zt-cart-visual-card > strong { font-size: 23px; } /* ========================= CART SECTION ========================= */ .zt-cart-section { padding: 45px 0 65px; } /* ========================= CART HEADER ========================= */ .zt-cart-content-header { align-items: flex-start; padding: 18px 17px; } .zt-cart-content-header h2 { font-size: 20px; } .zt-cart-count { white-space: nowrap; padding: 7px 10px; font-size: 9px; } /* ========================= EMPTY CART ========================= */ .zt-cart-empty { min-height: 390px; padding: 35px 17px; } .zt-cart-empty-visual { width: 145px; height: 140px; transform: scale(.87); } .zt-cart-empty h3 { font-size: 20px; } .zt-cart-empty > p { font-size: 12px; line-height: 1.65; } .zt-cart-explore-btn { min-height: 46px; padding: 0 19px; font-size: 12px; } /* ========================= CART ITEMS STACK EACH ITEM VERTICALLY ========================= */ .zt-cart-items { padding: 4px 17px 18px; } .zt-cart-item { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; } .zt-cart-item-image { width: 100%; height: 135px; border-radius: 16px; } .zt-cart-item-info h3 { font-size: 16px; } .zt-cart-item-bottom { justify-content: space-between; } .zt-cart-item-price { grid-column: auto; justify-self: start; font-size: 18px; } /* ========================= ORDER SUMMARY ========================= */ .zt-cart-summary { padding: 23px 18px; border-radius: 18px; } .zt-cart-summary-heading { padding-bottom: 18px; } .zt-cart-summary-heading h2 { font-size: 21px; } .zt-cart-summary-row { margin-top: 17px; font-size: 12px; } .zt-cart-summary-divider { margin: 19px 0; } .zt-cart-summary-total span { font-size: 14px; } .zt-cart-summary-total strong { font-size: 23px; } .zt-cart-checkout-btn { min-height: 49px; margin-top: 21px; font-size: 12px; } .zt-cart-security { padding: 13px; gap: 10px; } .zt-cart-benefits { gap: 10px; } .zt-cart-benefits span { font-size: 10px; } } /* ========================================================= EXTRA SMALL MOBILE 360px AND BELOW ========================================================= */ @media (max-width: 360px) { .zt-cart-hero-content h1 { font-size: 30px; } .zt-cart-hero-content > p { font-size: 12px; } .zt-cart-steps { gap: 3px; } .zt-cart-step strong { font-size: 8px; } .zt-cart-steps > i { font-size: 8px; } .zt-cart-content-header { gap: 8px; } .zt-cart-content-header h2 { font-size: 18px; } .zt-cart-count { font-size: 8px; } .zt-cart-empty h3 { font-size: 19px; } .zt-cart-summary { padding: 21px 16px; } } /* ========================================================== RPSC INTERVIEW PAGE COMPLETE RESPONSIVE FIX ========================================================== */ /* ========================================================== GLOBAL OVERFLOW PROTECTION ========================================================== */ html, body { width: 100%; max-width: 100%; } /* IMPORTANT: Grid and flex children use min-width:auto by default. That allows long text/content to make the page wider than the viewport. These rules prevent that. */ .rpsc-page, .rpsc-layout, .rpsc-sidebar, .rpsc-content, .rpsc-section-heading, .rpsc-intro-card, .rpsc-important-note, .rpsc-important-note > div, .rpsc-overview, .rpsc-overview-card, .rpsc-overview-card > div, .rpsc-details-section, .rpsc-detail-list, .rpsc-detail-item, .rpsc-detail-item > div { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Allow all RPSC text to wrap */ .rpsc-page h1, .rpsc-page h2, .rpsc-page h3, .rpsc-page h4, .rpsc-page p, .rpsc-page span, .rpsc-page strong, .rpsc-page a { overflow-wrap: anywhere; word-break: normal; } /* ========================================================== 1200px ========================================================== */ @media (max-width: 1200px) { .rpsc-layout { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 32px; } .rpsc-intro-card { padding: 32px; } .rpsc-overview { gap: 15px; } .rpsc-overview-card { padding: 20px; } .rpsc-section-heading h2, .rpsc-details-heading h2 { font-size: 34px; } } /* ========================================================== 992px ========================================================== */ @media (max-width: 992px) { /* HERO */ .rpsc-hero { padding: 65px 0; } .rpsc-hero-content { width: 92%; max-width: 760px; margin-left: auto; margin-right: auto; } .rpsc-hero h1 { font-size: 44px; } .rpsc-hero p { font-size: 16px; } /* MAIN PAGE */ .rpsc-page { padding: 50px 0 75px; } /* Critical fix. Remove desktop columns. */ .rpsc-layout { display: grid; width: 95%; max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: 42px; margin-left: auto; margin-right: auto; } /* SIDEBAR */ .rpsc-sidebar { position: static; top: auto; width: 100%; max-width: 100%; } .rpsc-side-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpsc-side-nav a { min-width: 0; } /* CONTENT */ .rpsc-content { width: 100%; max-width: 100%; } /* OVERVIEW */ .rpsc-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rpsc-overview-card:last-child { grid-column: 1 / -1; } } /* ========================================================== 768px ========================================================== */ @media (max-width: 768px) { /* PAGE CONTAINERS Override global .container styles specifically for the RPSC page. */ .rpsc-hero .container, .rpsc-breadcrumb-section .container, .rpsc-page > .container { width: calc(100% - 28px); max-width: 100%; margin-left: auto; margin-right: auto; } /* HERO */ .rpsc-hero { padding: 52px 0; } .rpsc-hero-content { width: calc(100% - 28px); } .rpsc-hero-label { margin-bottom: 11px; font-size: 11px; letter-spacing: 1.3px; } .rpsc-hero h1 { font-size: 35px; line-height: 1.2; overflow-wrap: break-word; } .rpsc-hero p { max-width: 100%; margin-top: 15px; font-size: 14px; line-height: 1.7; } .rpsc-hero-line { width: 65px; height: 4px; margin-top: 22px; } /* BREADCRUMB */ .rpsc-breadcrumb-section { padding: 18px 0; } .rpsc-breadcrumb { width: 100%; gap: 7px; font-size: 12px; } /* PAGE */ .rpsc-page { padding: 38px 0 60px; } .rpsc-layout { display: block; width: 100%; max-width: 100%; } /* ====================================================== QUICK NAVIGATION ====================================================== */ .rpsc-sidebar { width: 100%; max-width: 100%; margin-bottom: 38px; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; } .rpsc-sidebar-title { padding: 0 0 14px; } .rpsc-sidebar-title span { padding-bottom: 11px; font-size: 18px; } /* Horizontal scrolling navigation. The navigation itself must never increase page width. */ .rpsc-side-nav { display: flex; flex-direction: row; width: 100%; max-width: 100%; gap: 9px; padding: 1px 1px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rpsc-side-nav::-webkit-scrollbar { display: none; } .rpsc-side-nav a { flex: 0 0 min(230px, calc(100vw - 55px)); width: min(230px, calc(100vw - 55px)); min-width: 0; max-width: calc(100vw - 55px); min-height: 58px; padding: 10px 12px; gap: 10px; border: 1px solid #eeeeee; border-radius: 13px; font-size: 13px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; } .rpsc-side-icon { flex: 0 0 35px; width: 35px; height: 35px; } /* ====================================================== CONTENT ====================================================== */ .rpsc-content { width: 100%; max-width: 100%; overflow: hidden; } /* SECTION HEADING */ .rpsc-section-heading { width: 100%; max-width: 100%; margin-bottom: 25px; } .rpsc-section-heading > span, .rpsc-details-heading > span { font-size: 11px; letter-spacing: 1.4px; } .rpsc-section-heading h2, .rpsc-details-heading h2 { width: 100%; max-width: 100%; font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; } .rpsc-section-heading p, .rpsc-details-heading p { width: 100%; max-width: 100%; margin-top: 9px; font-size: 14px; line-height: 1.7; } /* ====================================================== INTRO CARD ====================================================== */ .rpsc-intro-card { width: 100%; max-width: 100%; padding: 22px; overflow: hidden; border-radius: 17px; } .rpsc-intro-card h3 { display: flex; width: 100%; max-width: 100%; align-items: flex-start; gap: 9px; margin-bottom: 18px; font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; } .rpsc-intro-card h3 i { flex-shrink: 0; margin-top: 4px; } .rpsc-intro-card > p { width: 100%; max-width: 100%; margin-bottom: 17px; font-size: 14px; line-height: 1.8; } /* ====================================================== IMPORTANT NOTE ====================================================== */ .rpsc-important-note { display: flex; width: 100%; max-width: 100%; gap: 12px; margin: 22px 0; padding: 17px; overflow: hidden; } /* Critical flexbox fix. Without min-width:0 the text can expand beyond viewport. */ .rpsc-important-note > div:last-child { flex: 1 1 0; width: 0; min-width: 0; } .rpsc-note-icon { flex: 0 0 42px; width: 42px; height: 42px; font-size: 16px; } .rpsc-important-note h4 { width: 100%; max-width: 100%; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; } .rpsc-important-note p { width: 100%; max-width: 100%; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; } /* ====================================================== OVERVIEW CARDS ====================================================== */ .rpsc-overview { width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 27px 0 48px; } .rpsc-overview-card, .rpsc-overview-card:last-child { width: 100%; max-width: 100%; grid-column: auto; padding: 17px; } .rpsc-overview-icon { flex: 0 0 48px; width: 48px; height: 48px; font-size: 18px; } .rpsc-overview-card strong { font-size: 16px; } /* ====================================================== DETAILS ====================================================== */ .rpsc-details-section { width: 100%; max-width: 100%; } .rpsc-details-heading { width: 100%; max-width: 100%; margin-bottom: 25px; } .rpsc-detail-list { width: 100%; max-width: 100%; overflow: hidden; border-radius: 16px; } .rpsc-detail-item { width: 100%; max-width: 100%; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 21px 17px; } .rpsc-detail-number { font-size: 22px; } .rpsc-detail-item h3 { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; } .rpsc-detail-item p { font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; } } /* ========================================================== 576px ========================================================== */ @media (max-width: 576px) { .rpsc-hero .container, .rpsc-breadcrumb-section .container, .rpsc-page > .container { width: calc(100% - 22px); } /* HERO */ .rpsc-hero { padding: 45px 0; } .rpsc-hero-content { width: calc(100% - 22px); } .rpsc-hero h1 { font-size: 29px; } .rpsc-hero p { font-size: 13px; } /* PAGE */ .rpsc-page { padding: 32px 0 50px; } /* QUICK NAVIGATION */ .rpsc-sidebar { margin-bottom: 32px; } .rpsc-side-nav a { flex-basis: min(205px, calc(100vw - 45px)); width: min(205px, calc(100vw - 45px)); max-width: calc(100vw - 45px); min-height: 56px; padding: 9px 11px; font-size: 12px; } /* HEADINGS */ .rpsc-section-heading h2, .rpsc-details-heading h2 { font-size: 24px; } /* INTRO CARD */ .rpsc-intro-card { padding: 17px; } .rpsc-intro-card h3 { font-size: 16px; } .rpsc-intro-card > p { font-size: 13px; } /* IMPORTANT NOTE */ .rpsc-important-note { flex-direction: column; padding: 15px; } /* Reset width:0 used for flex layout above. */ .rpsc-important-note > div:last-child { width: 100%; flex: none; } .rpsc-important-note h4 { font-size: 15px; } .rpsc-important-note p { font-size: 12.5px; } /* DETAILS */ .rpsc-detail-item { grid-template-columns: 1fr; gap: 7px; padding: 19px 15px; } .rpsc-detail-number { font-size: 19px; } } /* ========================================================== 400px ========================================================== */ @media (max-width: 400px) { .rpsc-hero .container, .rpsc-breadcrumb-section .container, .rpsc-page > .container { width: calc(100% - 18px); } .rpsc-hero-content { width: calc(100% - 18px); } .rpsc-hero h1 { font-size: 26px; } .rpsc-side-nav a { flex-basis: min(190px, calc(100vw - 38px)); width: min(190px, calc(100vw - 38px)); max-width: calc(100vw - 38px); } .rpsc-section-heading h2, .rpsc-details-heading h2 { font-size: 22px; } .rpsc-intro-card { padding: 15px; } .rpsc-important-note { padding: 14px; } } /* ========================================================= ZONE TECH PUBLICATIONS PAGE RESPONSIVE CSS Breakpoints: 1200px - Small Desktop 992px - Tablet / Small Laptop 768px - Tablet / Large Mobile 576px - Mobile 400px - Small Mobile ========================================================= */ /* ========================================================= SMALL DESKTOP MAX WIDTH: 1200PX ========================================================= */ @media (max-width: 1200px) { .publication-container { width: min(1120px, calc(100% - 40px)); } /* HERO */ .publication-hero { min-height: 590px; padding: 70px 0; } .publication-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr); gap: 55px; } .publication-hero-content h1 { font-size: clamp(43px, 5vw, 64px); } .publication-hero-visual { min-height: 450px; } .publication-book-showcase { width: 355px; height: 390px; } .publication-book-card { width: 220px; height: 315px; } .publication-book-card-front { left: 66px; } .publication-floating-card { min-width: 195px; } .publication-floating-one { right: -5px; } .publication-floating-two { left: -5px; } /* CATEGORY */ .publication-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* FEATURED PRODUCTS */ .publication-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* BEST SELLING */ .publication-best-selling-wrapper { gap: 55px; } .publication-best-books { min-height: 370px; } .publication-best-book { width: 190px; height: 280px; } /* BENEFITS */ .publication-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* SHOP */ .publication-shop-layout { grid-template-columns: 255px minmax(0, 1fr); gap: 28px; } .publication-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= TABLET / SMALL LAPTOP MAX WIDTH: 992PX ========================================================= */ @media (max-width: 992px) { .publication-container { width: min(920px, calc(100% - 36px)); } /* ===================================================== HERO ===================================================== */ .publication-hero { min-height: auto; padding: 75px 0 95px; } .publication-hero-grid { grid-template-columns: 1fr; gap: 45px; } .publication-hero-content { max-width: 760px; margin: 0 auto; text-align: center; } .publication-eyebrow { justify-content: center; } .publication-hero-content h1 { max-width: 780px; margin-left: auto; margin-right: auto; font-size: clamp(43px, 7vw, 62px); } .publication-hero-content > p { max-width: 720px; margin-left: auto; margin-right: auto; } .publication-hero-actions { justify-content: center; } .publication-hero-features { justify-content: center; } /* HERO VISUAL */ .publication-hero-visual { width: 100%; min-height: 450px; margin: 0 auto; } .publication-book-showcase { width: 410px; height: 410px; } .publication-book-card { width: 245px; height: 340px; } .publication-book-card-front { left: 82px; } .publication-floating-one { top: 25px; right: calc(50% - 315px); } .publication-floating-two { left: calc(50% - 315px); bottom: 20px; } /* ===================================================== SEARCH ===================================================== */ .publication-search-section { padding-bottom: 55px; } /* ===================================================== SECTION SPACING ===================================================== */ .publication-categories, .featured-publications, .publication-benefits, .all-publications-section, .publication-faq-section { padding-top: 75px; padding-bottom: 75px; } /* ===================================================== CATEGORY GRID ===================================================== */ .publication-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* ===================================================== FEATURED PRODUCTS ===================================================== */ .publication-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ===================================================== BEST SELLING ===================================================== */ .publication-best-selling { padding: 80px 0; } .publication-best-selling-wrapper { grid-template-columns: 1fr; gap: 50px; } .publication-best-content { max-width: 760px; } .publication-best-books { width: min(540px, 100%); min-height: 370px; margin: 0 auto; } .publication-best-book { width: 210px; height: 300px; } /* ===================================================== SHOP / FILTER SIDEBAR ===================================================== */ .publication-shop-layout { display: block; } .publication-sidebar-column { position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; } .publication-sidebar-column::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); opacity: 0; transition: opacity 0.3s ease; } .publication-sidebar-column.active { visibility: visible; pointer-events: auto; } .publication-sidebar-column.active::before { opacity: 1; } .publication-sidebar { position: absolute; top: 0; left: 0; width: min(340px, 88%); height: 100%; overflow-y: auto; border: none; border-radius: 0; transform: translateX(-100%); transition: transform 0.32s ease; } .publication-sidebar-column.active .publication-sidebar { transform: translateX(0); } .publication-filter-close { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #fff0f0; color: #ef2d2d; cursor: pointer; font-size: 16px; } .publication-filter-open { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid #ef2d2d; border-radius: 8px; background: #ffffff; color: #ef2d2d; cursor: pointer; font-size: 12px; font-weight: 700; } .publication-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================= TABLET / LARGE MOBILE MAX WIDTH: 768PX ========================================================= */ @media (max-width: 768px) { .publication-container { width: calc(100% - 30px); } /* ===================================================== HERO ===================================================== */ .publication-hero { padding: 60px 0 80px; } .publication-eyebrow { margin-bottom: 14px; font-size: 11px; letter-spacing: 1.5px; } .publication-hero-content h1 { font-size: clamp(38px, 9vw, 52px); letter-spacing: -2px; } .publication-hero-content > p { margin-top: 20px; font-size: 15px; line-height: 1.7; } .publication-hero-actions { margin-top: 28px; } .publication-primary-btn, .publication-secondary-btn { min-height: 50px; padding: 0 20px; font-size: 13px; } .publication-hero-features { gap: 14px; margin-top: 24px; } .publication-hero-features > span { font-size: 12px; } /* HERO VISUAL */ .publication-hero-visual { min-height: 410px; } .publication-book-showcase { width: 355px; height: 375px; } .publication-book-card { width: 215px; height: 305px; } .publication-book-card-front { left: 70px; padding-top: 65px; } .publication-book-card-front h3 { font-size: 27px; } .publication-book-card i { font-size: 53px; } .publication-floating-card { min-width: 175px; padding: 12px 14px; } .publication-floating-card > i { flex-basis: 38px; width: 38px; height: 38px; } .publication-floating-one { top: 15px; right: 0; } .publication-floating-two { left: 0; bottom: 10px; } /* ===================================================== SEARCH ===================================================== */ .publication-search-section { padding-bottom: 45px; } .publication-search-box { top: -28px; min-height: 68px; grid-template-columns: 44px minmax(0, 1fr) 125px; border-radius: 15px; } .publication-search-box button { height: 48px; font-size: 12px; } /* ===================================================== HEADINGS ===================================================== */ .publication-section-heading { margin-bottom: 30px; } .publication-section-heading h2, .publication-best-content h2 { font-size: clamp(30px, 7vw, 42px); letter-spacing: -1.2px; } .publication-section-heading p { font-size: 14px; } .publication-heading-row { align-items: center; } /* ===================================================== CATEGORIES ===================================================== */ .publication-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .publication-category-card { min-height: 145px; } /* ===================================================== FEATURED PRODUCTS ===================================================== */ .publication-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .publication-product-image { height: 275px; padding: 24px; } .publication-book-placeholder { width: 165px; height: 220px; } .publication-product-content { padding: 17px; } .publication-product-content > h3 { font-size: 14px; } /* ===================================================== BEST SELLING ===================================================== */ .publication-best-selling { padding: 70px 0; } .publication-best-books { min-height: 340px; } .publication-best-book { width: 185px; height: 270px; } .publication-best-book-one { left: 5%; } .publication-best-book-two { left: 50%; transform: translateX(-50%); } .publication-best-book-three { right: 5%; } /* ===================================================== BENEFITS ===================================================== */ .publication-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* ===================================================== SHOP ===================================================== */ .publication-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .publication-shop-toolbar { flex-wrap: wrap; } /* ===================================================== FAQ ===================================================== */ .publication-faq-question { grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 10px; } .publication-faq-question > strong { font-size: 14px; } .publication-faq-answer p { padding: 0 54px 25px; font-size: 13px; } } /* ========================================================= MOBILE MAX WIDTH: 576PX ========================================================= */ @media (max-width: 576px) { .publication-container { width: calc(100% - 24px); } /* ===================================================== HERO ===================================================== */ .publication-hero { padding: 48px 0 65px; } .publication-hero-grid { gap: 35px; } .publication-eyebrow { font-size: 10px; letter-spacing: 1.3px; } .publication-hero-content h1 { font-size: clamp(33px, 10vw, 44px); line-height: 1.1; letter-spacing: -1.5px; } .publication-hero-content > p { font-size: 14px; } /* HERO BUTTONS */ .publication-hero-actions { display: grid; grid-template-columns: 1fr; gap: 11px; } .publication-primary-btn, .publication-secondary-btn { width: 100%; } /* HERO FEATURES */ .publication-hero-features { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px 18px; } /* HERO VISUAL */ .publication-hero-visual { min-height: 355px; } .publication-hero-visual::before { width: 300px; height: 300px; } .publication-book-showcase { width: 295px; height: 330px; } .publication-book-card { width: 180px; height: 265px; padding: 20px 16px; } .publication-book-card-back { top: 42px; } .publication-book-card-middle { top: 25px; } .publication-book-card-front { top: 25px; left: 57px; padding-top: 58px; } .publication-book-card i { margin-bottom: 15px; font-size: 43px; } .publication-book-card-front h3 { font-size: 23px; } .publication-book-card-front p { font-size: 11px; } .publication-book-label { top: 14px; left: 17px; padding: 5px 8px; font-size: 8px !important; } /* FLOATING CARDS */ .publication-floating-card { min-width: 155px; gap: 9px; padding: 10px 11px; } .publication-floating-card > i { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; } .publication-floating-card strong { font-size: 11px; } .publication-floating-card span { font-size: 9px; } .publication-floating-one { top: 5px; right: -4px; } .publication-floating-two { left: -4px; bottom: 5px; } /* ===================================================== SEARCH ===================================================== */ .publication-search-section { padding-bottom: 40px; } .publication-search-box { top: -24px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px; padding: 9px; border-radius: 14px; } .publication-search-box input { height: 46px; font-size: 12px; } .publication-search-box button { grid-column: 1 / -1; width: 100%; height: 46px; } /* ===================================================== SECTIONS ===================================================== */ .publication-categories, .featured-publications, .publication-benefits, .all-publications-section, .publication-faq-section { padding-top: 60px; padding-bottom: 60px; } /* ===================================================== HEADINGS ===================================================== */ .publication-section-heading { margin-bottom: 27px; } .publication-section-heading > span, .publication-best-content > span { font-size: 10px; letter-spacing: 1.4px; } .publication-section-heading h2, .publication-best-content h2 { font-size: 29px; line-height: 1.2; letter-spacing: -1px; } .publication-section-heading p { font-size: 13px; } .publication-heading-row { display: block; } .publication-heading-row > a { margin-top: 15px; } /* ===================================================== CATEGORIES ===================================================== */ .publication-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .publication-category-card { min-height: 130px; padding: 15px 8px; } .publication-category-icon { width: 48px; height: 48px; font-size: 18px; } .publication-category-card strong { font-size: 11px; } .publication-category-card small { font-size: 9px; } /* ===================================================== FEATURED PRODUCTS ===================================================== */ .publication-featured-grid, .publication-all-grid { grid-template-columns: 1fr; } .publication-product-card { width: 100%; max-width: 390px; margin-left: auto; margin-right: auto; } .publication-product-image { height: 300px; } .publication-book-placeholder { width: 180px; height: 235px; } .publication-product-content { padding: 19px; } .publication-product-content > h3 { min-height: auto; font-size: 15px; } /* ===================================================== BEST SELLING ===================================================== */ .publication-best-selling { padding: 60px 0; } .publication-best-selling-wrapper { gap: 35px; } .publication-best-content > p { font-size: 13px; } .publication-best-content li { align-items: flex-start; font-size: 12px; } .publication-best-books { min-height: 300px; } .publication-best-book { width: 155px; height: 235px; gap: 18px; } .publication-best-book i { font-size: 42px; } .publication-best-book strong { font-size: 10px; } .publication-best-book-one { left: 2%; top: 45px; } .publication-best-book-two { top: 10px; } .publication-best-book-three { right: 2%; top: 45px; } /* ===================================================== BENEFITS ===================================================== */ .publication-benefit-grid { grid-template-columns: 1fr; } .publication-benefit-card { min-height: auto; padding: 24px; } /* ===================================================== SHOP TOOLBAR ===================================================== */ .publication-shop-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px; } .publication-filter-open { width: fit-content; } .publication-shop-toolbar p { text-align: right; } .publication-shop-toolbar select { grid-column: 1 / -1; width: 100%; } /* ===================================================== SIDEBAR ===================================================== */ .publication-sidebar { width: min(320px, 90%); } /* ===================================================== FAQ ===================================================== */ .publication-faq-question { min-height: 76px; grid-template-columns: 30px minmax(0, 1fr) 38px; gap: 8px; } .publication-faq-number { font-size: 10px; } .publication-faq-question > strong { font-size: 12px; line-height: 1.55; } .publication-faq-icon { width: 35px; height: 35px; font-size: 12px; } .publication-faq-answer p { padding: 0 42px 22px; font-size: 12px; line-height: 1.7; } } /* ========================================================= SMALL MOBILE MAX WIDTH: 400PX ========================================================= */ @media (max-width: 400px) { .publication-container { width: calc(100% - 20px); } /* HERO */ .publication-hero-content h1 { font-size: 31px; } .publication-hero-content > p { font-size: 13px; } .publication-hero-features { grid-template-columns: 1fr; justify-items: center; } /* HERO VISUAL */ .publication-hero-visual { min-height: 325px; } .publication-book-showcase { width: 260px; height: 300px; } .publication-book-card { width: 160px; height: 240px; } .publication-book-card-front { left: 50px; } .publication-book-card-front h3 { font-size: 20px; } .publication-book-card i { font-size: 37px; } .publication-floating-card { min-width: 140px; } .publication-floating-one { right: -5px; } .publication-floating-two { left: -5px; } /* CATEGORY */ .publication-category-grid { grid-template-columns: 1fr 1fr; } /* PRODUCT */ .publication-product-image { height: 280px; } /* BEST SELLING */ .publication-best-books { min-height: 270px; } .publication-best-book { width: 135px; height: 210px; } .publication-best-book-one { left: 1%; } .publication-best-book-three { right: 1%; } /* SHOP TOOLBAR */ .publication-shop-toolbar { grid-template-columns: 1fr; } .publication-filter-open { width: 100%; } .publication-shop-toolbar p { text-align: left; } .publication-shop-toolbar select { grid-column: auto; } /* FAQ */ .publication-faq-question { grid-template-columns: minmax(0, 1fr) 36px; } .publication-faq-number { display: none; } .publication-faq-answer p { padding: 0 44px 20px 0; } } /* ========================================================= MOBILE LANDSCAPE ========================================================= */ @media ( max-width: 900px ) and ( orientation: landscape ) and ( max-height: 520px ) { .publication-hero { padding: 50px 0 70px; } .publication-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); gap: 30px; } .publication-hero-content { text-align: left; } .publication-eyebrow, .publication-hero-actions, .publication-hero-features { justify-content: flex-start; } .publication-hero-content h1 { font-size: 38px; } .publication-hero-visual { min-height: 350px; } .publication-floating-card { display: none; } } /* ========================================================= TOUCH DEVICE IMPROVEMENTS ========================================================= */ @media (hover: none) and (pointer: coarse) { .publication-category-card:hover, .publication-product-card:hover, .publication-benefit-card:hover, .publication-primary-btn:hover, .publication-secondary-btn:hover { transform: none; } } /* ========================================================= REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .publication-hero *, .publication-search-section *, .publication-categories *, .featured-publications *, .publication-best-selling *, .publication-benefits *, .all-publications-section *, .publication-faq-section * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= PUBLICATION FAQ MOBILE ALIGNMENT FIX ========================================================= */ @media (max-width: 768px) { .publication-faq-answer > div { padding: 8px 16px 24px 16px; } } /* ========================================================= ZONE TECH DOWNLOAD PAGE RESPONSIVE CSS ========================================================= */ /* ========================================================= 1200PX ========================================================= */ @media (max-width: 1200px) { .zt-download-hero .zt-download-container { grid-template-columns: minmax(0, 1fr) minmax(370px, .78fr); gap: 55px; } .zt-download-hero-content h1 { font-size: 54px; } .zt-download-layout { grid-template-columns: 285px minmax(0, 1fr); gap: 32px; } .zt-download-floating-card { left: -20px; } } /* ========================================================= 992PX ========================================================= */ @media (max-width: 992px) { .zt-download-hero { padding: 75px 0 95px; } .zt-download-hero .zt-download-container { width: min(760px, calc(100% - 36px)); grid-template-columns: 1fr; gap: 65px; } .zt-download-hero-content { text-align: center; } .zt-download-hero-content h1, .zt-download-hero-content > p { margin-left: auto; margin-right: auto; } .zt-download-hero-content h1 { font-size: 52px; } .zt-download-hero-actions, .zt-download-hero-features { justify-content: center; } .zt-download-hero-visual { width: min(520px, 100%); margin: 0 auto; } .zt-download-layout { grid-template-columns: 1fr; } /* IMPORTANT: Sidebar becomes horizontal navigation on tablet/mobile. Do not keep sticky sidebar on small screens. */ .zt-download-sidebar-inner { position: static; overflow: visible; border: 0; border-radius: 0; box-shadow: none; } .zt-download-sidebar-heading, .zt-download-sidebar-help { display: none; } .zt-download-sidebar-nav { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; overscroll-behavior-x: contain; align-items: center; white-space: nowrap; --card-count: 6; /* Total unique items (before duplicating) */ --speed-per-card: 14s; animation: tickerMove1 calc(var(--card-count) * var(--speed-per-card)) linear infinite; } @keyframes tickerMove1 { from { transform: translateX(0); } to { transform: translateX(-50%); } } .zt-download-sidebar-nav::-webkit-scrollbar { display: none; } .zt-download-sidebar-nav a { width: auto; min-width: max-content; grid-template-columns: 34px auto; gap: 8px; padding: 10px 13px 10px 7px; border: 1px solid #e5e7eb; border-radius: 11px; } .zt-download-sidebar-nav a > span { width: 34px; height: 34px; } .zt-download-sidebar-nav a > i { display: none; } .zt-download-section-heading { margin-bottom: 35px; } } /* ========================================================= 768PX ========================================================= */ @media (max-width: 768px) { .zt-download-container { width: calc(100% - 30px); } .zt-download-hero { padding: 65px 0 80px; } .zt-download-hero-content h1 { font-size: 43px; letter-spacing: -1.8px; } .zt-download-hero-content > p { font-size: 15px; } .zt-download-discovery { padding: 30px 0 24px; } .zt-download-search-box { padding-left: 15px; } .zt-download-search-box button { padding: 0 15px; } .zt-download-category-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 7px; scrollbar-width: none; overscroll-behavior-x: contain; } .zt-download-category-tabs::-webkit-scrollbar { display: none; } .zt-download-category { flex-shrink: 0; } .zt-download-library { padding: 70px 0 80px; } .zt-download-section-heading h2 { font-size: 36px; } .zt-download-content-top h3 { font-size: 24px; } .zt-download-resource-card { grid-template-columns: 53px minmax(0, 1fr); gap: 15px; padding: 18px; } .zt-download-resource-icon { width: 53px; height: 53px; border-radius: 14px; font-size: 19px; } .zt-download-resource-btn { grid-column: 2; justify-self: start; min-width: 120px; } } /* ========================================================= 576PX ========================================================= */ @media (max-width: 576px) { .zt-download-container { width: calc(100% - 24px); } .zt-download-hero { padding: 50px 0 65px; } .zt-download-hero .zt-download-container { width: calc(100% - 24px); gap: 45px; } .zt-download-eyebrow { margin-bottom: 13px; padding: 7px 11px; font-size: 10px; } .zt-download-hero-content h1 { font-size: 34px; line-height: 1.12; letter-spacing: -1.3px; } .zt-download-hero-content > p { margin-top: 17px; font-size: 13px; line-height: 1.7; } .zt-download-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 25px; } .zt-download-primary-btn, .zt-download-secondary-btn { width: 100%; min-height: 50px; } .zt-download-hero-features { gap: 9px 14px; margin-top: 21px; } .zt-download-hero-features span { font-size: 11px; } /* HERO VISUAL */ .zt-download-visual-card { padding: 15px; border-radius: 20px; } .zt-download-visual-top { gap: 10px; padding-bottom: 15px; } .zt-download-visual-top strong { font-size: 15px; } .zt-download-file-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; padding: 11px; } .zt-download-file-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 15px; } .zt-download-file-row strong { font-size: 11px; } .zt-download-file-row small { font-size: 8px; } .zt-download-floating-card { position: relative; left: auto; bottom: auto; width: max-content; max-width: 100%; margin: 13px auto 0; } /* SEARCH */ .zt-download-search-box { grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 7px 12px; } .zt-download-search-box input { height: 44px; font-size: 12px; } .zt-download-search-box button { grid-column: 1 / -1; width: 100%; height: 44px; } .zt-download-category-tabs { margin-top: 18px; } .zt-download-category { min-height: 40px; padding: 0 13px; font-size: 10px; } /* LIBRARY */ .zt-download-library { padding: 55px 0 65px; } .zt-download-section-heading { margin-bottom: 28px; } .zt-download-section-heading > span { font-size: 9px; } .zt-download-section-heading h2 { margin-top: 7px; font-size: 29px; } .zt-download-section-heading p { margin-top: 10px; font-size: 12px; } .zt-download-layout { gap: 25px; } /* CONTENT TOP */ .zt-download-content-top { align-items: flex-start; flex-direction: column; gap: 11px; } .zt-download-content-label { font-size: 9px; } .zt-download-content-top h3 { font-size: 21px; } /* RESOURCE CARDS */ .zt-download-resource-list { gap: 11px; } .zt-download-resource-card { grid-template-columns: 45px minmax(0, 1fr); gap: 12px; padding: 15px; border-radius: 15px; } .zt-download-resource-card:hover { transform: none; } .zt-download-resource-icon { width: 45px; height: 45px; border-radius: 12px; font-size: 16px; } .zt-download-resource-meta { gap: 6px; margin-bottom: 6px; } .zt-download-resource-meta span { font-size: 7px; } .zt-download-resource-meta small { font-size: 7px; } .zt-download-resource-info h3 { font-size: 14px; line-height: 1.45; } .zt-download-resource-info > p { font-size: 10.5px; line-height: 1.6; } .zt-download-resource-details { gap: 8px 12px; margin-top: 9px; } .zt-download-resource-details span { font-size: 8px; } .zt-download-resource-btn { grid-column: 1 / -1; width: 100%; min-height: 42px; justify-self: stretch; } } /* ========================================================= 400PX ========================================================= */ @media (max-width: 400px) { .zt-download-container, .zt-download-hero .zt-download-container { width: calc(100% - 20px); } .zt-download-hero { padding: 45px 0 58px; } .zt-download-hero-content h1 { font-size: 30px; } .zt-download-hero-content > p { font-size: 12px; } .zt-download-visual-card { padding: 13px; } .zt-download-visual-top strong { font-size: 14px; } .zt-download-visual-status { padding: 5px 7px; font-size: 7px; } .zt-download-file-row { grid-template-columns: 39px minmax(0, 1fr) auto; padding: 9px; } .zt-download-file-icon { width: 39px; height: 39px; } .zt-download-visual-footer strong { font-size: 15px; } .zt-download-section-heading h2 { font-size: 26px; } .zt-download-content-top h3 { font-size: 19px; } .zt-download-resource-card { grid-template-columns: 1fr; padding: 14px; } .zt-download-resource-icon { width: 43px; height: 43px; } .zt-download-resource-btn { grid-column: auto; } } /*================================================== LARGE LAPTOPS ==================================================*/ @media(max-width:1400px) { .hero-content h1 { font-size: 48px; } .price { font-size: 13px; } .old { font-size: 13px; } .discount { font-size: 13px; } } /*================================================== LAPTOP ==================================================*/ @media(max-width:1200px) { .container { width: min(95%,1100px); } .hero-content h1 { font-size: 46px; } .section-heading h2 { font-size: 38px; } /*========================= STATS =========================*/ .stats-grid { grid-template-columns: repeat(2,1fr); } /*========================= CATEGORY =========================*/ .category-grid { grid-template-columns: repeat(3,1fr); } /*========================= FEATURED =========================*/ .featured-paper-grid { grid-template-columns: repeat(2,1fr); } /*========================= SYLLABUS =========================*/ .syllabus-grid { grid-template-columns: repeat(2,1fr); } /*========================= RESOURCES =========================*/ .resources-grid { grid-template-columns: repeat(3,1fr); } /*========================= WHY SECTION =========================*/ .why-papers-wrapper { grid-template-columns: 430px 1fr; gap: 50px; } /*========================= ANALYSIS =========================*/ .analysis-wrapper { grid-template-columns: 1fr; } .analysis-right { grid-template-columns: repeat(3,1fr); } /*========================= CTA =========================*/ .pyp-cta-wrapper { grid-template-columns: 1fr; gap: 50px; } } /*================================================== TABLET ==================================================*/ @media(max-width:992px) { .hero-content h1 { font-size: 42px; } .hero-content p { font-size: 17px; } .section-heading { margin-bottom: 55px; } .section-heading h2 { font-size: 34px; } /*========================= SEARCH =========================*/ .hero-search { width: 100%; max-width: 650px; margin: 40px auto 0; display: flex; align-items: stretch; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 40px rgba(214,40,40,.15); } .hero-search input { flex: 1; min-width: 0; height: 64px; border: none; outline: none; padding: 0 22px; font-size: 16px; background: #fff; } .hero-search button { width: 70px; flex-shrink: 0; border: none; background: linear-gradient( 135deg, #d62828, #ef4444); color: #fff; cursor: pointer; font-size: 18px; transition: .3s; } .hero-search button:hover { background: #b71c1c; } /*========================= CATEGORY =========================*/ .category-grid { grid-template-columns: repeat(2,1fr); } /*========================= FEATURED =========================*/ .featured-paper-grid { grid-template-columns: repeat(2,1fr); } /*========================= PAPER ROW =========================*/ .paper-row { flex-direction: column; align-items: flex-start; } .paper-middle { width: 100%; flex-direction: row; justify-content: space-between; } .paper-right { width: 100%; } .paper-right a { flex: 1; } /*========================= WHY =========================*/ .why-papers-wrapper { grid-template-columns: 1fr; } .why-papers-ads { position: static; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 40px; } .why-papers-image { max-width: 520px; margin: auto; } /*========================= ANALYSIS =========================*/ .analysis-right { grid-template-columns: repeat(2,1fr); } /*========================= RESOURCE =========================*/ .resources-grid { grid-template-columns: repeat(2,1fr); } /*========================= CTA =========================*/ .pyp-cta-features { grid-template-columns: 1fr; } .pyp-cta-stats { grid-template-columns: repeat(2,1fr); } .price { font-size: 15px; } .old { font-size: 15px; } .discount { font-size: 15px; } } /*================================================== LARGE MOBILE ==================================================*/ @media(max-width:768px) { .row-content { margin: 0; padding: 0; } .container { width: 92%; } section { padding: 80px 0 ; } .hero-content h1 { font-size: 36px; line-height: 1.25; } .hero-content p { font-size: 16px; } .hero-search { max-width: 100%; margin-top: 30px; } .hero-search input { height: 56px; font-size: 15px; padding: 0 18px; } .hero-search button { width: 60px; font-size: 16px; } .section-heading { margin-bottom: 45px; } .section-heading h2 { font-size: 30px; } .section-heading p { font-size: 15px; } /*========================= STATS =========================*/ .stats-grid { grid-template-columns: 1fr; gap: 20px; } /*========================= CATEGORY =========================*/ .category-grid { grid-template-columns: 1fr; } /*========================= FEATURED =========================*/ .featured-paper-grid { grid-template-columns: 1fr; } /*========================= SYLLABUS =========================*/ .syllabus-grid { grid-template-columns: 1fr; } /*========================= PAPER =========================*/ .paper-row { padding: 25px; } .paper-left h3 { font-size: 22px; } .paper-middle { flex-direction: column; align-items: flex-start; gap: 10px; } .paper-right { flex-direction: column; } .paper-right a { width: 100%; padding: 10px 0; } /*========================= WHY =========================*/ .why-papers-wrapper { gap: 45px; } .floating-box { position: relative; right: auto; bottom: auto; margin-top: 20px; } .why-papers-content h2 { font-size: 32px; } .strategy-item { flex-direction: column; text-align: center; } .strategy-number { margin: auto; } .why-paper-buttons { flex-direction: column; } .primary-btn, .secondary-btn { width: 100%; } /*========================= ANALYSIS =========================*/ .analysis-card { padding: 25px; } .analysis-right { grid-template-columns: 1fr; } /*========================= RESOURCES =========================*/ .resources-grid { grid-template-columns: 1fr; } /*========================= CTA =========================*/ .pyp-cta-content h2 { font-size: 34px; } .pyp-cta-buttons { flex-direction: column; } .cta-primary-btn, .cta-secondary-btn { width: 100%; } .pyp-cta-stats { grid-template-columns: 1fr; } /*========================= FAQ =========================*/ .faq-question { padding: 20px; font-size: 17px; } .faq-item.active .faq-answer { padding: 0 20px 20px; } } /*================================================== MOBILE ==================================================*/ @media(max-width:576px) { .hero-content h1 { font-size: 30px; } .hero-tag { font-size: 12px; padding: 8px 18px; } .section-tag { font-size: 12px; } .section-heading h2 { font-size: 26px; } .section-heading p { font-size: 14px; } .stat-card { padding: 28px 20px; } .stat-card h3 { font-size: 28px; } .category-card, .featured-paper-card, .syllabus-card, .analysis-card, .resource-card, .cta-stat-card { padding: 25px; } .paper-row { padding: 20px; } .paper-left h3 { font-size: 20px; } .strategy-item h4 { font-size: 20px; } .analysis-info-card { padding: 22px; } .hero-search { width: 100%; border-radius: 14px; } .hero-search input { height: 52px; font-size: 14px; padding: 0 14px; } .hero-search button { width: 55px; } .why-papers-ads { grid-template-columns: 1fr; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:400px) { .hero-content h1 { font-size: 26px; } .hero-content p { font-size: 14px; } .hero-search input { font-size: 14px; } .hero-search button { font-size: 18px; } .section-heading h2 { font-size: 23px; } .paper-category { font-size: 12px; padding: 7px 14px; } .paper-left h3 { font-size: 18px; } .paper-right a { min-width: 100%; font-size: 14px; padding: 10px 0; } .faq-question { font-size: 15px; } .faq-question i { width: 36px; height: 36px; font-size: 13px; } .hero-search input { font-size: 13px; padding: 0 12px; } .hero-search button { width: 50px; } } /*================================================== RESPONSIVE CSS ==================================================*/ /*========================= Large Desktop =========================*/ @media (max-width:1400px) { .paper-categories .container { width: 95%; } .papers-grid { grid-template-columns: repeat(4,1fr); gap: 28px; } } /*========================= Laptop =========================*/ @media (max-width:1200px) { .section-heading h2 { font-size: 2.6rem; } .papers-grid { grid-template-columns: repeat(3,1fr); gap: 25px; } .paper-card { min-height: 450px; padding: 35px 28px; } } /*========================= Tablet =========================*/ @media (max-width:992px) { .paper-categories { padding: 70px 0; } .section-heading { margin-bottom: 50px; } .section-heading h2 { font-size: 2.2rem; line-height: 1.3; } .section-heading p { font-size: 1rem; line-height: 1.8; } .papers-grid { grid-template-columns: repeat(2,1fr); gap: 22px; } .paper-card { min-height: auto; padding: 32px 24px; } .paper-icon { width: 80px; height: 80px; } .paper-icon i { font-size: 2.3rem; } .paper-card h3 { font-size: 1.7rem; } .paper-card p { min-height: auto; margin-bottom: 25px; font-size: 1rem; } } /*========================= Large Mobile =========================*/ @media (max-width:768px) { .paper-categories { padding: 60px 0; } .paper-categories .container { width: 92%; } .section-heading { margin-bottom: 40px; } .section-badge { font-size: .85rem; padding: 8px 18px; } .section-heading h2 { font-size: 2rem; } .section-heading p { font-size: .95rem; line-height: 1.8; } .papers-grid { grid-template-columns: 1fr; gap: 22px; } .paper-card { min-height: auto; padding: 30px 24px; } .paper-icon { width: 75px; height: 75px; margin-bottom: 24px; } .paper-icon i { font-size: 2.2rem; } .paper-card h3 { font-size: 1.6rem; } .paper-card p { min-height: auto; margin-bottom: 24px; font-size: .98rem; line-height: 1.8; } .paper-info { flex-direction: column; align-items: flex-start; gap: 12px; } .paper-btn { margin-top: 10px; padding: 15px; font-size: .95rem; } } /*========================= Small Mobile =========================*/ @media (max-width:576px) { .paper-categories { padding: 50px 0; } .paper-categories .container { width: 94%; } .section-heading h2 { font-size: 1.75rem; } .section-heading p { font-size: .92rem; } .paper-card { border-radius: 18px; padding: 28px 20px; } .paper-icon { width: 68px; height: 68px; } .paper-icon i { font-size: 2rem; } .paper-card h3 { font-size: 1.45rem; } .paper-card p { font-size: .95rem; } .paper-info span { font-size: .92rem; } .updated { font-size: .8rem; padding: 7px 12px; } .paper-btn { padding: 14px; font-size: .92rem; border-radius: 10px; } } /*========================= Extra Small =========================*/ @media (max-width:400px) { .section-heading h2 { font-size: 1.55rem; } .paper-card { padding: 24px 18px; } .paper-icon { width: 60px; height: 60px; } .paper-icon i { font-size: 1.8rem; } .paper-card h3 { font-size: 1.3rem; } .paper-card p { font-size: .9rem; } .paper-info { gap: 10px; } .paper-btn { font-size: .9rem; padding: 13px; } } /*==================================================== RESPONSIVE ====================================================*/ /*============= Large Laptop =============*/ @media (max-width: 1400px) { .hero-content h1 { font-size: 56px; } .section-heading h2 { font-size: 42px; } .cta-content h2 { font-size: 42px; } } /*============= Laptop =============*/ @media (max-width:1200px) { .result-form-card { max-width: 960px; padding: 45px; } .result-form .row { gap: 22px; } .hero-content h1 { font-size: 44px; } .section-heading h2 { font-size: 38px; } .cta-content h2 { font-size: 38px; } } /*============= Tablet =============*/ @media (max-width:991px) { section { overflow: hidden; } .result-hero { padding: 120px 0 80px; } .hero-content h1 { font-size: 42px; } .hero-content p { font-size: 16px; } .section-heading { margin-bottom: 45px; } .section-heading h2 { font-size: 34px; } .result-form-card { padding: 35px; border-radius: 20px; } .result-form .row { grid-template-columns: 1fr; gap: 18px; } .col-lg-12 { grid-column: auto; } .upload-content { height: 150px; } .cta-wrapper { padding: 45px 35px; text-align: center; } .cta-buttons { justify-content: center; margin-top: 35px; flex-wrap: wrap; } } /*============= Mobile =============*/ @media (max-width:768px) { .result-hero { padding: 100px 0 70px; } .hero-badge { padding: 10px 18px; font-size: 14px; } .hero-content h1 { font-size: 34px; line-height: 1.25; } .hero-content p { font-size: 15px; } .hero-buttons { flex-direction: column; align-items: center; } .hero-buttons a { width: 100%; max-width: 320px; } .breadcrumb-area { flex-wrap: wrap; gap: 8px; font-size: 14px; } .section-heading h2 { font-size: 30px; } .section-heading p { font-size: 15px; } .result-form-section { padding: 70px 0; } .result-form-card { padding: 28px 22px; border-radius: 18px; } .form-group { margin-bottom: 18px; } .form-group label { font-size: 14px; } .input-box input, .input-box select { height: 54px; font-size: 14px; } .upload-box { min-height: 140px; } .upload-content { height: 140px; padding: 20px; } .upload-content i { font-size: 34px; } .upload-content h6 { font-size: 16px; } textarea { min-height: 150px; } .submit-area .theme-btn { width: 100%; min-width: 100%; } .cta-wrapper { padding: 35px 25px; border-radius: 22px; } .cta-content h2 { font-size: 30px; } .cta-buttons { flex-direction: column; width: 100%; gap: 15px; margin-top: 30px; } .cta-buttons a { width: 100%; } } /*============= Small Mobile =============*/ @media (max-width:576px) { .result-hero { padding: 90px 0 60px; } .hero-content h1 { font-size: 28px; } .hero-content p { font-size: 14px; } .section-heading { margin-bottom: 35px; } .section-heading span { font-size: 13px; padding: 7px 16px; } .section-heading h2 { font-size: 26px; } .result-form-card { padding: 22px 18px; } .input-box i { left: 15px; font-size: 14px; } .input-box input, .input-box select { padding-left: 45px; height: 50px; font-size: 14px; } .form-group textarea { padding: 15px; font-size: 14px; } .declaration-box { padding: 16px; } .check-container { font-size: 13px; gap: 10px; } .cta-content span { font-size: 13px; } .cta-content h2 { font-size: 25px; } .cta-content p { font-size: 14px; } } /*============= Extra Small =============*/ @media (max-width:400px) { .hero-content h1 { font-size: 24px; } .section-heading h2 { font-size: 22px; } .theme-btn, .theme-btn-outline { padding: 14px 22px; font-size: 14px; } .result-form-card { padding: 18px 15px; } } /*==================================================== RESPONSIVE CSS ====================================================*/ /*============================ 1400px ============================*/ @media (max-width:1400px) { .hero-content h1 { font-size: 58px; } .contact-card h2 { font-size: 34px; } .form-heading h3 { font-size: 34px; } } /*============================ 1200px ============================*/ @media (max-width:1200px) { .enquiry-section { padding: 90px 0; } .enquiry-section .row { gap: 30px; } .contact-card { padding: 35px; } .enquiry-form-card { padding: 40px; } } /*============================ 991px ============================*/ @media (max-width:991px) { .enquiry-section { padding: 80px 0; } .enquiry-section .row { display: block; } .contact-card { position: relative; top: 0; margin-bottom: 35px; } .contact-card h2 { font-size: 30px; } .form-heading { text-align: center; } .form-heading h3 { font-size: 30px; } .enquiry-form .row { grid-template-columns: 1fr; gap: 18px; } .enquiry-form .col-lg-12 { grid-column: auto; } } /*============================ 768px ============================*/ @media (max-width:768px) { .enquiry-section { padding: 70px 0; } .contact-card { padding: 30px; border-radius: 20px; } .contact-tag { font-size: 14px; padding: 8px 18px; } .contact-card h2 { font-size: 28px; } .contact-item { gap: 14px; } .contact-item .icon { width: 50px; height: 50px; } .contact-item .icon i { font-size: 18px; } .enquiry-form-card { padding: 30px 24px; border-radius: 20px; } .form-heading span { font-size: 14px; } .form-heading h3 { font-size: 28px; } .form-group label { font-size: 14px; } .input-box input, .input-box select { height: 54px; font-size: 14px; } .input-box i { left: 18px; } .form-group textarea { min-height: 160px; font-size: 14px; } .submit-area .theme-btn { width: 100%; min-width: 100%; } } /*============================ 576px ============================*/ @media (max-width:576px) { .enquiry-section { padding: 60px 0; } .contact-card { padding: 24px 20px; border-radius: 18px; } .contact-card h2 { font-size: 24px; } .contact-card > p { font-size: 14px; } .contact-info { gap: 18px; } .contact-item { gap: 12px; } .contact-item .icon { width: 45px; height: 45px; border-radius: 12px; } .contact-item h6 { font-size: 15px; } .contact-item a, .contact-item p { font-size: 14px; } .enquiry-form-card { padding: 22px 18px; border-radius: 18px; } .form-heading { margin-bottom: 30px; } .form-heading h3 { font-size: 24px; } .form-heading p { font-size: 14px; } .input-box input, .input-box select { height: 50px; padding-left: 46px; font-size: 14px; } .input-box i { left: 15px; font-size: 14px; } .form-group textarea { min-height: 150px; padding: 16px; } .declaration-box { padding: 16px; } .check-container { font-size: 13px; gap: 10px; line-height: 1.7; } } /*============================ 400px ============================*/ @media (max-width:400px) { .contact-card { padding: 20px 16px; } .contact-card h2 { font-size: 22px; } .contact-tag { width: 100%; justify-content: center; } .enquiry-form-card { padding: 18px 15px; } .form-heading span { width: 100%; justify-content: center; } .form-heading h3 { font-size: 22px; } .input-box input, .input-box select { font-size: 13px; } .form-group textarea { font-size: 13px; } .theme-btn, .theme-btn-outline { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14px; } } /*============================ Overflow Fix ============================*/ img { max-width: 100%; height: auto; } * { box-sizing: border-box; } /*==================================================== RESPONSIVE CSS ====================================================*/ /*============================== 1400px ==============================*/ @media (max-width:1400px) { .hero-content h1 { font-size: 56px; } .contact-card h2 { font-size: 34px; } .form-heading h3 { font-size: 34px; } } /*============================== 1200px ==============================*/ @media (max-width:1200px) { .enquiry-hero { padding: 130px 0 90px; } .hero-content h1 { font-size: 50px; } .contact-card { padding: 35px; } .enquiry-form-card { padding: 40px; } } @media(max-width:1199px) { .hero-content h1 { font-size: 40px; } } /*============================== 991px ==============================*/ @media (max-width:991px) { .enquiry-hero { padding: 110px 0 80px; } .hero-content h1 { font-size: 48px; } .hero-content p { font-size: 16px; } .hero-buttons { justify-content: center; } .breadcrumb-area { justify-content: center; } .enquiry-section .row { display: flex; flex-direction: column; gap: 30px; } .col-lg-4, .col-lg-8 { width: 100%; } .contact-card { position: relative; top: 0; } .enquiry-form .row { grid-template-columns: 1fr; gap: 20px; } .enquiry-form .col-lg-12 { grid-column: auto; } } /*============================== 768px ==============================*/ @media (max-width:768px) { .enquiry-hero { padding: 90px 0 70px; } .hero-badge { padding: 10px 18px; font-size: 14px; } .hero-content h1 { font-size: 34px; line-height: 1.3; } .hero-content p { font-size: 15px; } .hero-buttons { flex-direction: column; align-items: center; } .hero-buttons a { width: 100%; max-width: 300px; } .breadcrumb-area { flex-wrap: wrap; gap: 8px; } .contact-card { padding: 28px; } .contact-card h2 { font-size: 28px; } .contact-item { gap: 15px; } .contact-item .icon { width: 50px; height: 50px; } .contact-item .icon i { font-size: 18px; } .enquiry-form-card { padding: 28px 24px; } .form-heading { text-align: center; } .form-heading h3 { font-size: 30px; } .form-heading p { font-size: 15px; } .input-box input, .input-box select { height: 54px; font-size: 14px; } .input-box i { left: 18px; } .form-group textarea { min-height: 160px; } .submit-area .theme-btn { width: 100%; min-width: 100%; } } /*============================== 576px ==============================*/ @media (max-width:576px) { .enquiry-hero { padding: 80px 0 60px; } .hero-content h1 { font-size: 28px; } .hero-content p { font-size: 14px; } .hero-buttons { gap: 15px; } .hero-buttons a { width: 100%; max-width: 100%; } .contact-card { padding: 22px 18px; border-radius: 18px; } .contact-tag { font-size: 13px; padding: 8px 16px; } .contact-card h2 { font-size: 24px; } .contact-card > p { font-size: 14px; } .contact-info { gap: 18px; } .contact-item { gap: 12px; } .contact-item .icon { width: 45px; height: 45px; border-radius: 12px; } .contact-item .icon i { font-size: 16px; } .contact-item h6 { font-size: 15px; } .contact-item a, .contact-item p { font-size: 14px; } .enquiry-form-card { padding: 22px 18px; border-radius: 18px; } .form-heading { margin-bottom: 30px; } .form-heading span { font-size: 13px; } .form-heading h3 { font-size: 24px; } .form-heading p { font-size: 14px; } .form-group label { font-size: 14px; } .input-box i { left: 15px; font-size: 14px; } .input-box input, .input-box select { height: 50px; padding-left: 45px; font-size: 14px; } .form-group textarea { min-height: 150px; padding: 16px; font-size: 14px; } .declaration-box { padding: 16px; } .check-container { gap: 10px; font-size: 13px; line-height: 1.7; } .check-container input { margin-top: 4px; } .submit-area { margin-top: 0; } } /*============================== 400px ==============================*/ @media (max-width:400px) { .hero-content h1 { font-size: 24px; } .hero-content p { font-size: 13px; } .contact-card { padding: 18px 15px; } .contact-tag { width: 100%; justify-content: center; } .contact-card h2 { font-size: 22px; } .enquiry-form-card { padding: 18px 15px; } .form-heading span { width: 100%; justify-content: center; } .form-heading h3 { font-size: 22px; } .input-box input, .input-box select { font-size: 13px; } .form-group textarea { font-size: 13px; } .theme-btn, .theme-btn-outline { width: 100%; justify-content: center; padding: 14px 18px; font-size: 14px; } } /*============================== Global Fixes ==============================*/ * { box-sizing: border-box; } img { max-width: 100%; height: auto; } textarea, input, select { max-width: 100%; } .enquiry-form .row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; } @media(max-width:768px) { .enquiry-form .row { grid-template-columns: 1fr !important; } } /*========================================= Mobile Only =========================================*/ @media(max-width:768px) { .mobile-bottom-nav { display: flex; } body { padding-bottom: 75px; } } /*========================================= Desktop =========================================*/ @media(min-width:769px) { .mobile-bottom-nav { display: none; } } @media (max-width:991px) { .mid-advertisement { padding: 30px 0 50px; } .mid-ad-banner { border-radius: 18px; } } @media (max-width:767px) { .mid-advertisement { padding: 25px 0 40px; } .mid-ad-banner { border-radius: 14px; } } /* rrb-je-previous-year-papers.html */ @media(max-width:991px) { .paper-stats { padding: 80px 0; } .stat-card { padding: 35px 20px; } } @media(max-width:767px) { .paper-stats { padding: 60px 0; } .stat-icon { width: 75px; height: 75px; font-size: 28px; } .stat-card h3 { font-size: 42px; } .stat-card span { font-size: 28px; } } @media(max-width:480px) { .stat-card { border-radius: 18px; padding: 30px 18px; } .stat-card h3 { font-size: 36px; } .stat-card p { font-size: 15px; } } @media(max-width:991px) { .about-papers { padding: 80px 0; } .about-content { padding-left: 0; margin-top: 60px; } .about-content h2 { font-size: 38px; } .experience-card { right: 20px; } } @media(max-width:767px) { .about-content h2 { font-size: 30px; } .about-features { grid-template-columns: 1fr; } .feature-box { padding: 18px; } .experience-card { width: 150px; padding: 18px; } .experience-card h3 { font-size: 32px; } } @media(max-width:480px) { .about-papers { padding: 60px 0; } .about-content h2 { font-size: 26px; } .about-content > p { font-size: 15px; } .feature-icon { width: 50px; height: 50px; font-size: 18px; } .experience-card { position: relative; right: auto; bottom: auto; margin: 20px auto 0; } } @media(max-width:991px) { .promo-overlay { padding: 40px; } .promo-content h2 { font-size: 36px; } } @media(max-width:767px) { .promo-banner { border-radius: 20px; } .promo-overlay { padding: 25px; } .promo-content { max-width: 100%; } .promo-content span { font-size: 13px; padding: 8px 16px; } .promo-content h2 { font-size: 28px; } .promo-content p { font-size: 15px; } } @media(max-width:480px) { .promo-banner-section { padding: 30px 0 60px; } .promo-overlay { padding: 20px; } .promo-content h2 { font-size: 22px; } .promo-content p { font-size: 14px; margin-bottom: 20px; } .promo-content .theme-btn { width: 100%; justify-content: center; } } @media(max-width:1200px) { .paper-filter { grid-template-columns: repeat(2,1fr); } .filter-btn { grid-column: 1/-1; } } @media(max-width:768px) { .paper-filter-section { padding: 70px 0; } .filter-wrapper { padding: 30px; border-radius: 22px; } .filter-title h2 { font-size: 32px; } .paper-filter { grid-template-columns: 1fr; gap: 18px; } .filter-btn { grid-column: auto; } .filter-btn .theme-btn { width: 100%; } } @media(max-width:480px) { .filter-wrapper { padding: 20px; } .filter-title h2 { font-size: 26px; } .filter-title span { font-size: 13px; } .filter-input input, .filter-input select { height: 52px; font-size: 14px; } } @media(max-width:991px) { .paper-card { padding: 25px; } .year-header { padding: 20px; } } @media(max-width:768px) { .papers-list-section { padding: 80px 0; } .year-header { border-radius: 18px; } .year-header h3 { font-size: 20px; } .paper-buttons { flex-direction: column; } .paper-buttons a { width: 100%; } .paper-ad { margin: 40px 0; } } @media(max-width:480px) { .paper-card { padding: 20px; } .paper-card h4 { font-size: 18px; } .paper-card ul li { font-size: 14px; } .year-header { padding: 18px; } } @media(max-width:991px) { .analysis-wrapper { grid-template-columns: 1fr; } .analysis-card { margin-bottom: 35px; } } @media(max-width:768px) { .paper-analysis-section { padding: 80px 0; } .analysis-card { padding: 28px; } .analysis-info { grid-template-columns: 1fr; } .info-card { padding: 28px; } } @media(max-width:480px) { .analysis-card h3 { font-size: 24px; } .progress-title { font-size: 14px; } .info-card h3 { font-size: 24px; } .info-icon { width: 60px; height: 60px; font-size: 22px; } } @media(max-width:1200px) { .strategy-wrapper { grid-template-columns: repeat(3,1fr); } .strategy-wrapper::before { display: none; } } @media(max-width:768px) { .strategy-section { padding: 80px 0; } .strategy-wrapper { grid-template-columns: 1fr; } .strategy-card { padding: 28px; } .strategy-icon { width: 75px; height: 75px; font-size: 28px; } .strategy-card h4 { font-size: 20px; } .step-number { font-size: 34px; } } @media(max-width:480px) { .strategy-card { padding: 22px; } .strategy-icon { width: 65px; height: 65px; font-size: 24px; } .strategy-card h4 { font-size: 18px; } .strategy-card p { font-size: 14px; } } @media(max-width:991px) { .papers-hero { padding: 120px 0 80px; text-align: center; } .hero-content { margin-bottom: 60px; } .hero-content p { margin: auto auto 30px; } .hero-search { margin: 0 auto 30px; } .hero-buttons { justify-content: center; } .card-one { left: 0; } .card-two { right: 0; } } @media(max-width:767px) { .papers-hero { padding: 100px 0 70px; } .hero-content h1 { font-size: 38px; } .hero-content p { font-size: 16px; } .hero-search input { height: 58px; font-size: 15px; } .hero-search button { width: 46px; height: 46px; } .hero-buttons { flex-direction: column; } .hero-buttons a { width: 100%; justify-content: center; } .floating-card { padding: 14px 18px; } .floating-card h5 { font-size: 20px; } .floating-card i { width: 48px; height: 48px; font-size: 18px; } } @media(max-width:480px) { .hero-content h1 { font-size: 30px; } .hero-badge { font-size: 13px; padding: 10px 18px; } .hero-search input { padding-left: 18px; } .card-one { top: 20px; left: 10px; } .card-two { bottom: 10px; right: 10px; } } /* Handwritten Notes */ /*==================================================== NOTES HERO RESPONSIVE ====================================================*/ /* ---------- Laptop ---------- */ @media (max-width:1199px) { .notes-hero { padding: 100px 0; } .notes-hero-wrapper { gap: 50px; } .hero-left h1 { font-size: 52px; } .buy-btn, .view-btn { padding: 6px; font-size: 11px; } } /* ---------- Tablet ---------- */ @media (max-width:991px) { .notes-hero { padding: 80px 0; } .notes-hero-wrapper { grid-template-columns: 1fr; gap: 60px; text-align: center; } .hero-left { order: 2; } .hero-right { order: 1; } .hero-badge { margin: auto; } .hero-left h1 { font-size: 42px; line-height: 1.25; margin: 20px 0; } .hero-left p { max-width: 700px; margin: 0 auto 35px; } .hero-stats { justify-content: center; gap: 15px; } .hero-stat { flex: none; width: 170px; } .hero-price { justify-content: center; } .hero-buttons { justify-content: center; } .hero-image-box { max-width: 450px; margin: auto; } .hero-image-box img { width: 100%; } .floating-box { display: none; } } /* ---------- Mobile ---------- */ @media (max-width:767px) { .notes-hero { padding: 60px 0; } .notes-hero-wrapper { gap: 40px; } .hero-badge { font-size: 13px; padding: 10px 16px; margin: auto; text-align: center; flex-wrap: wrap; justify-content: center; } .hero-left h1 { font-size: 30px; line-height: 1.35; margin: 18px 0; } .hero-left p { font-size: 15px; line-height: 1.8; margin-bottom: 30px; } .hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .hero-stat { width: 100%; padding: 18px 10px; border-radius: 14px; } .hero-stat h3 { font-size: 26px; margin-bottom: 5px; } .hero-stat span { font-size: 13px; } .hero-price { justify-content: center; align-items: flex-end; gap: 15px; margin: 30px 0; } .hero-price h2 { font-size: 36px; } .hero-price span { font-size: 18px; } .hero-buttons { display: flex; flex-direction: column; gap: 12px; } .hero-buttons a { width: 100%; justify-content: center; } .hero-image-box { max-width: 320px; margin: auto; } .hero-image-box::before { inset: 20px; } .hero-image-box img { width: 100%; } .hero-circle-1 { width: 170px; height: 170px; top: -80px; right: -80px; } .hero-circle-2 { width: 130px; height: 130px; left: -60px; bottom: -60px; } } /* ---------- Small Mobile ---------- */ @media (max-width:480px) { .notes-hero { padding: 50px 0; } .hero-left h1 { font-size: 26px; } .hero-left p { font-size: 14px; } .hero-stat { padding: 16px 8px; } .hero-stat h3 { font-size: 22px; } .hero-price { flex-direction: column; align-items: center; gap: 8px; } .hero-price h2 { font-size: 30px; } .hero-price span { margin: 0; font-size: 16px; } .hero-buttons .theme-btn, .hero-buttons .theme-btn-outline { height: 52px; font-size: 15px; } } /* ---------- Very Small Phones ---------- */ @media (max-width:360px) { .hero-left h1 { font-size: 22px; } .hero-badge { font-size: 12px; padding: 8px 12px; } .hero-stats { grid-template-columns: 1fr; } .hero-stat { width: 100%; } } /*============================== WHY CHOOSE NOTES ==============================*/ /*==================================================== NOTES ABOUT RESPONSIVE ====================================================*/ @media(max-width:991px) { .notes-about-section { padding: 90px 0; } .notes-about-wrapper { grid-template-columns: 1fr; gap: 50px; } .notes-about-content { text-align: center; } .notes-about-content h2 { font-size: 38px; } .about-item { text-align: left; } } @media(max-width:767px) { .notes-about-section { padding: 70px 0; } .notes-about-content h2 { font-size: 30px; } .notes-about-content > p { font-size: 15px; } .about-item { padding: 18px; } .about-item h4 { font-size: 18px; } .image-badge { position: static; margin-top: 20px; justify-content: center; } .notes-image-box { padding: 20px; } } /*==================================================== NOTES LIBRARY RESPONSIVE ====================================================*/ @media(max-width:1200px) { .notes-library-grid { grid-template-columns: repeat(3,1fr); } } @media(max-width:991px) { .notes-library { padding: 90px 0; } .notes-library-grid { grid-template-columns: repeat(2,1fr); gap: 25px; } } @media(max-width:767px) { .notes-library { padding: 70px 0; } .notes-library-grid { grid-template-columns: 1fr; } .note-card img { height: 250px; } .note-content { padding: 20px; } .note-content h4 { font-size: 18px; } .note-content p { font-size: 14px; } } /*============================== SAMPLE NOTES ==============================*/ @media(max-width:991px) { .sample-notes-section { padding: 80px 0; } } @media(max-width:767px) { .sample-slider { margin-top: 40px; } .sample-arrow { width: 45px; height: 45px; font-size: 16px; } .sample-arrow.prev { left: -10px; } .sample-arrow.next { right: -10px; } } @media(max-width:480px) { .sample-notes-section { padding: 60px 0; } .sample-frame { padding: 10px; border-radius: 18px; } .sample-frame img { border-radius: 12px; } .sample-arrow { width: 38px; height: 38px; font-size: 14px; } } /*============================================== NOTES FEATURES RESPONSIVE ==============================================*/ @media (max-width:1200px) { .notes-features-grid { gap: 24px; } .feature-card { padding: 35px 25px; } } @media (max-width:991px) { .notes-features-section { padding: 80px 0; } .notes-features-grid { grid-template-columns: repeat(2,1fr); gap: 22px; } .feature-card { padding: 30px 22px; } .feature-icon { width: 75px; height: 75px; font-size: 28px; } .feature-card h4 { font-size: 20px; } .feature-card p { font-size: 15px; line-height: 1.8; } } @media (max-width:767px) { .notes-features-section { padding: 70px 0; } .notes-features-grid { grid-template-columns: 1fr; gap: 20px; } .feature-card { padding: 28px 20px; } .feature-top { margin-bottom: 18px; } .feature-icon { width: 70px; height: 70px; font-size: 26px; } .feature-card h4 { font-size: 22px; margin-bottom: 12px; } .feature-card p { font-size: 15px; line-height: 1.7; } } @media (max-width:480px) { .notes-features-section { padding: 60px 0; } .notes-features-grid { gap: 18px; } .feature-card { border-radius: 18px; padding: 25px 18px; } .feature-icon { width: 65px; height: 65px; font-size: 24px; } .feature-card h4 { font-size: 20px; } .feature-card p { font-size: 14px; line-height: 1.7; } } @media(max-width:991px) { .notes-benefits-section { padding: 80px 0; } .benefits-box { padding: 35px; } } @media(max-width:767px) { .notes-benefits-section { padding: 70px 0; } .benefits-box { margin-top: 40px; padding: 25px; } .benefits-box li { font-size: 15px; gap: 12px; padding: 14px 0; } } @media(max-width:480px) { .notes-benefits-section { padding: 60px 0; } .benefits-box { padding: 20px; border-radius: 18px; } .benefits-box li { font-size: 14px; line-height: 1.7; } } @media(max-width:991px) { .notes-trust-section { padding: 80px 0; } .trust-box { padding: 35px; } } @media(max-width:767px) { .notes-trust-section { padding: 70px 0; } .trust-box { margin-top: 40px; padding: 25px; } .trust-item { gap: 15px; padding: 18px 0; } .trust-item h5 { font-size: 18px; } .trust-item p { font-size: 15px; } } @media(max-width:480px) { .notes-trust-section { padding: 60px 0; } .trust-box { padding: 20px; border-radius: 18px; } .trust-item { flex-direction: column; align-items: flex-start; } .trust-item i { width: 38px; height: 38px; font-size: 16px; } .trust-item h5 { font-size: 17px; } .trust-item p { font-size: 14px; line-height: 1.7; } } /*==================================================== OFFER TIMER RESPONSIVE ====================================================*/ @media (max-width:1199px) { .offer-box { padding: 60px 45px; } .offer-box h2 { font-size: 42px; } } @media (max-width:991px) { .offer-timer-section { padding: 90px 0; } .offer-box { padding: 50px 35px; border-radius: 24px; } .offer-box h2 { font-size: 36px; } .offer-box p { font-size: 16px; } .offer-timer { flex-wrap: wrap; gap: 18px; } .timer-item { width: 100px; height: 100px; } .timer-item h3 { font-size: 34px; } } @media (max-width:767px) { .offer-timer-section { padding: 70px 0; } .offer-box { padding: 40px 20px; border-radius: 20px; } .offer-box span { font-size: 14px; padding: 10px 18px; } .offer-box h2 { font-size: 28px; line-height: 1.35; } .offer-box p { font-size: 15px; margin-bottom: 30px; } .offer-timer { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; margin-bottom: 30px; } .timer-item { width: 100%; height: 95px; } .timer-item h3 { font-size: 30px; } .timer-item span { font-size: 12px; } .offer-box .theme-btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 16px; } } @media (max-width:575px) { .offer-timer-section { padding: 50px 0; } .offer-box { padding: 30px 15px; border-radius: 18px; } .offer-box span { font-size: 13px; padding: 8px 16px; margin-bottom: 15px; } .offer-box h2 { font-size: 24px; line-height: 1.35; margin-bottom: 15px; } .offer-box p { font-size: 14px; margin-bottom: 25px; line-height: 1.6; } .offer-timer { display: grid; grid-template-columns: repeat(2,minmax(90px,1fr)); justify-content: center; align-items: center; gap: 14px; width: 100%; max-width: 210px; margin: 0 auto 30px; } .timer-item { width: 100%; height: 88px; border-radius: 14px; } .timer-item h3 { font-size: 28px; } .timer-item span { font-size: 11px; margin-top: 5px; } .offer-box .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 210px; height: 48px; margin: auto; } .offer-box::before { width: 140px; height: 140px; top: -60px; right: -60px; } .offer-box::after { width: 100px; height: 100px; left: -40px; bottom: -40px; } } /*==================================================== FINAL CTA RESPONSIVE ====================================================*/ @media(max-width:991px) { .notes-cta-section { padding: 80px 0; } .notes-cta-box { padding: 45px; } .cta-content { text-align: center; } .cta-content h2 { font-size: 38px; } .cta-content p { margin: 0 auto 35px; } } @media(max-width:767px) { .notes-cta-section { padding: 70px 0; } .notes-cta-box { padding: 35px 25px; border-radius: 22px; } .cta-content h2 { font-size: 30px; } .cta-content p { font-size: 15px; } .cta-btn .theme-btn { width: 100%; } } @media(max-width:480px) { .notes-cta-section { padding: 60px 0; } .notes-cta-box { padding: 28px 20px; } .cta-content span { font-size: 13px; padding: 8px 16px; } .cta-content h2 { font-size: 25px; } .cta-content p { font-size: 14px; } } @media(max-width:991px) { .offer-box, .notes-cta-box { padding: 45px; } .offer-box h2, .cta-content h2 { font-size: 36px; } .offer-timer { flex-wrap: wrap; } .cta-content { text-align: center; } .cta-content p { margin: 0 auto 35px; } } @media(max-width:767px) { .offer-timer-section, .notes-cta-section { padding: 70px 0; } .offer-box, .notes-cta-box { padding: 30px 22px; border-radius: 22px; } .offer-box h2, .cta-content h2 { font-size: 28px; } .offer-timer { gap: 15px; flex-wrap: wrap; } .timer-item { width: 90px; height: 90px; } .timer-item h3 { font-size: 30px; } .cta-btn .theme-btn { width: 100%; } } @media(max-width:480px) { .offer-box h2, .cta-content h2 { font-size: 24px; } .timer-item { width: 80px; height: 80px; } .timer-item h3 { font-size: 26px; } } @media(max-width:991px) { .notes-faq-section { padding: 90px 0; } } @media(max-width:767px) { .notes-faq-section { padding: 70px 0; } .faq-title { padding: 20px; font-size: 17px; } .faq-content { padding: 20px; font-size: 15px; } } @media(max-width:480px) { .faq-title { font-size: 16px; gap: 15px; } .faq-title i { font-size: 15px; } } /* rpsc video section */ @media(max-width:991px) { .video-card iframe { height: 200px; } } @media(max-width:767px) { .video-card iframe { height: 180px; } } /*============================= MOBILE =============================*/ @media(max-width:768px) { .notes-testimonials { padding: 80px 0; } .testimonial-track { gap: 20px; } .testimonial-card { padding: 25px; } .student img { width: 60px; height: 60px; } .student h4 { font-size: 18px; } .stars { font-size: 18px; } .testimonial-card p { font-size: 15px; } } @media (max-width:1200px) { .hero-carousel { max-width: 500px; height: 500px; } } @media (max-width:991px) { .hero-carousel { max-width: 560px; height: 560px; } .hero-carousel-btn { opacity: 1; } } @media (max-width:767px) { .hero-carousel { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 24px; } .hero-carousel .hero-slide img { object-fit: contain; } .hero-carousel .hero-carousel-btn { width: 40px; height: 40px; font-size: 13px; } .hero-carousel .hero-prev { left: 10px; } .hero-carousel .hero-next { right: 10px; } .hero-carousel .hero-carousel-dots { bottom: 12px; } } @media (max-width:575px) { .hero-carousel .hero-image { width: calc(100% - 45px); } .hero-carousel .hero-carousel { border-radius: 20px; } .hero-carousel .hero-carousel-btn { width: 35px; height: 35px; font-size: 11px; } .hero-carousel .hero-carousel-dots { gap: 6px; padding: 6px 9px; bottom: 8px; } .hero-carousel .hero-dot { width: 7px; height: 7px; } .hero-carousel .hero-dot.active { width: 20px; } } @media (max-width:400px) { .hero-carousel .hero-image { width: calc(100% - 35px); } .hero-carousel { border-radius: 17px; } .hero-carousel .hero-carousel-btn { width: 32px; height: 32px; } } @media (max-width: 1200px) { .floating-card.card1 { left: -15px; } .floating-card { padding: 15px 18px; font-size: 14px; } } @media (max-width: 991px) { .floating-card.card1 { left: -10px; top: 60px; } .floating-card { font-size: 13px; padding: 14px 17px; } } @media (max-width: 767px) { .floating-card.card1 { left: -12px; top: 35px; } .floating-card { padding: 10px 13px; border-radius: 12px; font-size: 11px; } .floating-card { padding: 14px 18px; } } @media (max-width: 575px) { .floating-card.card1 { left: -10px; top: 25px; } .floating-card { padding: 8px 10px; font-size: 9px; border-radius: 9px; } } /* Objective-questions.html */ /* ===================================================== TABLET ===================================================== */ @media (max-width: 900px) { .objective-layout { grid-template-columns: 1fr; } .question-sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); } .preparation-card { grid-column: span 2; } .search-box { display: none; } .footer-grid { grid-template-columns: repeat(2, 1fr); } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 650px) { .container { width: min( 100% - 24px, 1180px ); } /* HEADER */ .announcement-bar { font-size: 10px; } .announcement-inner { min-height: 31px; } .announcement-link { display: none; } .header-container { min-height: 62px; gap: 8px; } .logo img { width: 150px; } .header-actions { gap: 6px; } .call-btn { display: none; } .login-btn { min-height: 24px; font-size: 12px; } .cart-btn { width: 36px; height: 36px; } .hamburger { display: grid; place-items: center; } /* MOBILE NAV */ .mobile-nav { position: fixed; top: 93px; left: 12px; right: 12px; z-index: 1100; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 15px 45px rgba(0,0,0,.15); display: none; flex-direction: column; gap: 2px; } .mobile-nav.open { display: flex; } .mobile-nav a { padding: 11px 12px; border-radius: 6px; display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; } .mobile-nav a:hover { background: #fff2f2; color: #e92727; } /* HERO */ .page-hero { padding: 22px 0 25px; } .breadcrumb { font-size: 11px; } .page-hero h1 { font-size: 28px; } .page-hero p { font-size: 13px; } /* MAIN */ .objective-page { padding: 20px 0 45px; } /* PAPER */ .question-paper { border-radius: 10px; } .paper-header { padding: 18px; display: block; } .paper-header h2 { font-size: 20px; } .paper-meta { margin-top: 14px; display: grid; grid-template-columns: repeat(2, 1fr); } .paper-meta > div { min-width: 0; } .questions-container { padding: 0 18px 20px; } /* QUESTION */ .question { padding: 22px 0; } .question-heading { gap: 10px; } .question-number { width: 30px; height: 30px; font-size: 10px; } .question-text { font-size: 14px; line-height: 1.65; } /* OPTIONS */ .options { margin-left: 40px; grid-template-columns: 1fr; gap: 8px; } .option { font-size: 13px; padding: 10px 11px; } /* MEDIA */ .question-media { margin-left: 40px; } .question-media img { max-width: none; width: auto; min-width: 450px; } /* ANSWER */ .answer { margin-left: 40px; font-size: 12px; } /* SIDEBAR */ .question-sidebar { display: flex; flex-direction: column; gap: 12px; } .preparation-card { grid-column: auto; } /* CTA */ .objective-cta { padding: 38px 0; } .objective-cta .container { display: block; } .cta-content h2 { font-size: 25px; } .cta-actions { margin-top: 20px; flex-wrap: wrap; } /* FOOTER */ .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-brand { grid-column: span 2; } .footer-bottom .container { display: block; } .footer-bottom div { margin-top: 8px; flex-wrap: wrap; } .back-to-top { width: 38px; height: 38px; right: 12px; bottom: 12px; } } /* ===================================================== VERY SMALL PHONES ===================================================== */ @media (max-width: 380px) { .login-btn { padding: 3px 8px; } .question-text { font-size: 13px; } .options { margin-left: 0; } .question-media, .answer { margin-left: 0; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 768px) { .matching-question { margin-left: 0; margin-right: 0; } .matching-table { min-width: 620px; font-size: 13px; } .matching-table th, .matching-table td { padding: 10px; } .codes-table { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; } .question-heading { gap: 10px; } .question-number { width: 32px; height: 32px; } .question-text { font-size: 14px; } .hindi-question { font-size: 14px; } .options { margin-left: 42px; grid-template-columns: 1fr; } } @media (max-width: 480px) { .matching-table { min-width: 580px; font-size: 12px; } .matching-table th, .matching-table td { padding: 8px; } .codes-table { grid-template-columns: 1fr 1fr; } .question-media { margin-left: 0; margin-right: 0; } } /* how-many-units-are-available-in-autocad */ /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1050px) { .question-layout { grid-template-columns: minmax(0, 1fr) 280px; } .question-sidebar { top: 90px; } } @media (max-width: 900px) { .question-layout { grid-template-columns: 1fr; } .question-sidebar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .question-sidebar .daily-quiz { grid-column: 1 / -1; } .question-cta .container { align-items: flex-start; flex-direction: column; } } @media (max-width: 700px) { .question-answer-page { padding: 25px 0 90px; } .question-layout { gap: 20px; } /* Question */ .qa-card { margin-bottom: 15px; border-radius: 9px; } .qa-card-header { padding: 12px 14px; } .qa-card-body { padding: 17px 14px 19px; } .qa-icon { width: 34px; height: 34px; } .qa-card-header h2 { font-size: 14px; } .question-number { font-size: 10px; } .question-text p { font-size: 14px; line-height: 1.7; } .answer-option { font-size: 13px; min-height: 44px; } /* Sidebar */ .question-sidebar { display: flex; flex-direction: column; } /* Table */ .question-table-wrapper { margin-left: -3px; margin-right: -3px; } .match-table { min-width: 650px; font-size: 12px; } .match-table th, .match-table td { padding: 9px 10px; } /* Related */ .related-grid { grid-template-columns: 1fr; } /* CTA */ .question-cta { padding: 35px 0 90px; } .question-cta .container { gap: 20px; } .cta-actions { width: 100%; flex-direction: column; } .cta-actions a { text-align: center; } /* Mobile bottom navigation */ .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: 62px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid #dddfe4; box-shadow: 0 -4px 20px rgba(0,0,0,.08); z-index: 2000; } .mobile-nav-item { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #777; font-size: 9px; font-weight: 600; } .mobile-nav-item i { font-size: 16px; } .mobile-nav-item.active, .mobile-nav-item:hover { color: #e92727; } } /*================================ APP RESPONSIVE ================================*/ @media (max-width: 992px) { .app-section { padding: 70px 0 65px; } .app-heading h2 { font-size: 42px; } .app-heading p { font-size: 16px; } .app-grid { gap: 30px; max-width: 900px; } .app-column { min-height: 430px; } .app-image { height: 370px; } .app-image img { max-width: 430px; height: 300px; } } /*================================ TABLET / MOBILE ================================*/ @media (max-width: 768px) { .app-section { padding: 65px 0 60px; } .app-heading span { font-size: 15px; } .app-heading h2 { font-size: 34px; } .app-heading p { font-size: 15px; line-height: 1.6; padding: 0 10px; } .app-grid { grid-template-columns: 1fr; gap: 45px; margin-top: 30px; } .app-column { min-height: auto; } .app-image { height: 360px; } .app-image img { max-width: 430px; height: 300px; } .app-buttons { margin-top: 5px; } } /*================================ SMALL MOBILE ================================*/ @media (max-width: 480px) { .app-section { padding: 55px 0; } .app-heading h2 { font-size: 29px; line-height: 1.2; } .app-heading p { font-size: 14px; } .app-grid { gap: 35px; } .app-image { height: 320px; } .app-image img { max-width: 360px; height: 280px; } .app-buttons .btn { min-width: 150px; padding: 14px 28px; font-size: 14px; } } /* =================================================== 3. Responsive Mobile View (<= 640px) Transforms rows into stacked cards =================================================== */ @media (max-width: 640px) { /* Remove container box shadow & borders on mobile for a cleaner feed look */ .table-container { border: none; box-shadow: none; background: transparent; padding: 0 8px; } /* Make table components behave like blocks */ .custom-table, .custom-table tbody, .custom-table tr, .custom-table td { display: block; width: 100%; } /* Hide the desktop header row accessibly */ .custom-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Turn each row into an elevated card */ .custom-table tbody tr { margin-bottom: 1rem; background-color: var(--table-bg); border: 1px solid var(--table-border); border-radius: 8px; box-shadow: 0 2px 6px var(--table-shadow); overflow: hidden; } /* Keep regular row background on mobile */ .custom-table tbody tr:nth-child(even) { background-color: var(--table-bg); } /* Format each cell as a key-value row */ .custom-table td { display: flex; /*justify-content: space-between;*/ align-items: center; padding: 10px 14px; font-size: 0.875rem; border-bottom: 1px solid var(--table-row-border); } .custom-table td:last-child { border-bottom: none; } /* Insert column headers using the data-label attribute */ .custom-table td::before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--table-label-color); text-align: left; padding-right: 12px; } } /* Tablet & Desktop Adjustments */ @media (min-width: 640px) { .rules-card { padding: 1.75rem 2rem; margin: 2rem auto; } .rules-list { gap: 0.75rem; padding-left: 1.5rem; } }