1
1
body {
2
- background-color : # 000 ;
3
- color : # fff ;
4
- margin : 0 ;
5
- padding : 0 ;
6
- overflow-x : hidden;
2
+ background-color : # 000 ;
3
+ color : # fff ;
4
+ margin : 0 ;
5
+ padding : 0 ;
6
+ overflow-x : hidden;
7
7
}
8
8
9
9
/* .about-container {
10
- padding: 20px;
10
+ padding: 20px;
11
11
} */
12
12
13
13
/* .about-content {
14
- display: flex;
15
- margin-bottom: 50px;
14
+ display: flex;
15
+ margin-bottom: 50px;
16
16
}
17
17
18
18
.text-container {
19
- flex: 1;
19
+ flex: 1;
20
20
} */
21
21
/* Hover effects for About Us */
22
22
.about-content .about-title {
23
- /* font-style: italic; */
24
- /* font-size: 32px; */
25
- /* font-weight: bold; */
26
- /* margin-bottom: 20px; */
27
- /* margin-top: 100px; */
28
- /* margin-left: 35%; */
29
- transition : all 0.3s ease;
23
+ /* font-style: italic; */
24
+ /* font-size: 32px; */
25
+ /* font-weight: bold; */
26
+ /* margin-bottom: 20px; */
27
+ /* margin-top: 100px; */
28
+ /* margin-left: 35%; */
29
+ transition : all 0.3s ease;
30
30
}
31
31
32
32
.about-content .about-title : hover {
33
- font-size : 2.6em ;
33
+ font-size : 2.6em ;
34
34
}
35
35
36
-
37
36
.about-text {
38
- /* font-style: italic; */
39
- /* font-size: 18px; */
40
- /* line-height: 1.6; */
41
- /* margin-bottom: 20px; */
42
- /* margin-left: 20px; */
37
+ /* font-style: italic; */
38
+ /* font-size: 18px; */
39
+ /* line-height: 1.6; */
40
+ /* margin-bottom: 20px; */
41
+ /* margin-left: 20px; */
43
42
}
44
43
45
44
.image-container {
46
- /* margin-right: 20px; */
45
+ /* margin-right: 20px; */
47
46
}
48
47
49
48
.about-image {
50
- /* width: 500px; */
51
- /* height: auto; */
52
- /* margin-top: 70px; */
53
- /* border-radius: 50%; */
54
- /* transition: transform 0.3s ease; */
49
+ /* width: 500px; */
50
+ /* height: auto; */
51
+ /* margin-top: 70px; */
52
+ /* border-radius: 50%; */
53
+ /* transition: transform 0.3s ease; */
55
54
}
56
55
57
56
.about-image : hover {
58
- transform : scale (1.1 );
57
+ transform : scale (1.1 );
59
58
}
60
59
61
60
.our-vision {
62
- /* display: flex; */
63
- /* margin-bottom: 50px; */
61
+ /* display: flex; */
62
+ /* margin-bottom: 50px; */
64
63
}
65
64
66
65
.our-vision .text-container {
67
- /* flex: 1; */
68
- /* text-align: left; */
66
+ /* flex: 1; */
67
+ /* text-align: left; */
69
68
}
70
69
71
70
.our-vision .image-container {
72
- /* margin-right: auto; */
73
- /* margin-left: 0; */
71
+ /* margin-right: auto; */
72
+ /* margin-left: 0; */
74
73
}
75
74
76
75
.our-vision .about-title {
77
- /* margin-top: 0; */
78
- transition : font-size 0.3s ease;
76
+ /* margin-top: 0; */
77
+ transition : font-size 0.3s ease;
79
78
}
80
79
81
-
82
80
.our-vision .about-title : hover {
83
- font-size : 2.6em ;
81
+ font-size : 2.6em ;
84
82
}
85
83
86
84
.our-vision .about-text {
87
- /* margin-bottom: 0; */
85
+ /* margin-bottom: 0; */
88
86
}
89
87
90
88
::-webkit-scrollbar {
91
- width : 10px ;
92
- background-color : # 000 ;
89
+ width : 10px ;
90
+ background-color : # 000 ;
93
91
}
94
92
95
93
::-webkit-scrollbar-thumb : hover {
96
- background : black;
94
+ background : black;
97
95
}
98
96
99
97
::-webkit-scrollbar-thumb {
100
- background : # 0a86c8 ;
101
- border-radius : 5px ;
98
+ background : # 0a86c8 ;
99
+ border-radius : 5px ;
102
100
}
103
101
104
102
::-webkit-scrollbar-track {
105
- background : # 000 ;
103
+ background : # 000 ;
106
104
}
107
105
108
106
.team-container {
109
- /* display: flex; */
110
- /* justify-content: space-between; */
111
- /* flex-wrap: wrap; */
112
- /* margin-top: 20px; */
107
+ /* display: flex; */
108
+ /* justify-content: space-between; */
109
+ /* flex-wrap: wrap; */
110
+ /* margin-top: 20px; */
113
111
}
114
112
115
113
.team-member {
116
- /* text-align: center; */
117
- /* width: 23%; */
118
- /* margin-bottom: 20px; */
119
- transition : transform 0.3s ease;
114
+ /* text-align: center; */
115
+ /* width: 23%; */
116
+ /* margin-bottom: 20px; */
117
+ transition : transform 0.3s ease;
120
118
}
121
119
.middle-boy {
122
- text-align : center;
123
- margin-bottom : 70px ;
124
- font-style : italic;
120
+ text-align : center;
121
+ margin-bottom : 70px ;
122
+ font-style : italic;
125
123
}
126
124
/* Hover effects for headings */
127
- h1 ::before {
128
- transform : scaleX (0 );
129
- transform-origin : bottom right;
130
- }
131
-
132
- h1 : hover ::before {
133
- transform : scaleX (1 );
134
- transform-origin : bottom left;
135
-
136
- }
137
-
138
- h1 ::before {
139
- content : " " ;
140
- display : block;
141
- position : absolute;
142
- top : 0 ; right : 0 ; bottom : 0 ; left : 0 ;
143
- inset : 0 0 0 0 ;
144
- background : hsl (200 100% 80% );
145
- z-index : -1 ;
146
- transition : transform .3s ease;
147
- }
148
-
149
- h1 {
150
- position : relative;
151
-
152
-
153
- }
125
+ h1 ::before {
126
+ transform : scaleX (0 );
127
+ transform-origin : bottom right;
128
+ }
154
129
155
- /* hover effects for our team */
130
+ h1 : hover ::before {
131
+ transform : scaleX (1 );
132
+ transform-origin : bottom left;
133
+ }
156
134
157
- .our-team-section .our-team-heading : hover {
158
- font-size : 1.5em ;
135
+ h1 ::before {
136
+ content : " " ;
137
+ display : block;
138
+ position : absolute;
139
+ top : 0 ;
140
+ right : 0 ;
141
+ bottom : 0 ;
142
+ left : 0 ;
143
+ inset : 0 0 0 0 ;
144
+ background : hsl (200 100% 80% );
145
+ z-index : -1 ;
146
+ transition : transform 0.3s ease;
159
147
}
160
- .our-team-section .our-team-heading {
161
- transition : font-size 0.3s ease;
162
-
163
- }
164
148
149
+ h1 {
150
+ position : relative;
151
+ }
165
152
166
- img : hover {
167
- transform : scale (1.1 );
168
- }
169
- img {
170
- transition : all 0.3s ease;
171
- }
172
-
173
-
174
-
175
- @media (orientation : landscape) {
176
- body {
177
- grid-auto-flow : column;
178
- }
179
- }
180
-
181
-
182
- .team-member p {
183
- /* margin-top: 10px;
184
- font-size: 20px;
185
- font-weight: bold; */
153
+ /* hover effects for our team */
154
+
155
+ .our-team-section .our-team-heading : hover {
156
+ font-size : 1.5em ;
157
+ }
158
+ .our-team-section .our-team-heading {
159
+ transition : font-size 0.3s ease;
186
160
}
187
161
188
- # tsparticles {
189
- position : absolute ;
190
- top : 0 ;
191
- left : 0 ;
192
- z-index : -1 ;
162
+ img : hover {
163
+ transform : scale ( 1.1 ) ;
164
+ }
165
+ img {
166
+ transition : all 0.3 s ease ;
193
167
}
194
168
169
+ @media (orientation : landscape) {
170
+ body {
171
+ grid-auto-flow : column;
172
+ }
173
+ }
195
174
175
+ .team-member p {
176
+ /* margin-top: 10px;
177
+ font-size: 20px;
178
+ font-weight: bold; */
179
+ }
180
+
181
+ # tsparticles {
182
+ position : absolute;
183
+ top : 0 ;
184
+ left : 0 ;
185
+ z-index : -1 ;
186
+ }
196
187
197
188
.about-container {
198
- position : relative; /* positioning context */
199
- overflow-x : hidden;
200
-
189
+ position : relative; /* positioning context */
190
+ overflow-x : hidden;
201
191
}
202
192
203
193
@media screen and (max-width : 1198px ) {
204
- .flex {
205
- flex-direction : column !important ;
206
- }
194
+ .flex {
195
+ flex-direction : column !important ;
196
+ }
207
197
208
- .image-container-one {
209
- order : -1 ;
210
- }
211
- .team-member {
212
- width : 48% !important ;
213
- }
198
+ .image-container-one {
199
+ order : -1 ;
200
+ }
201
+ .team-member {
202
+ width : 48% !important ;
203
+ }
214
204
215
- .team-container {
216
- align-items : center;
217
- }
205
+ .team-container {
206
+ align-items : center;
207
+ }
218
208
}
219
209
220
210
@media screen and (max-width : 576px ) {
221
- .team-member {
222
- width : 100% ;
223
- }
211
+ .team-member {
212
+ width : 100% ;
213
+ }
224
214
}
225
215
226
-
227
216
.marquee {
228
- overflow : hidden;
229
- white-space : nowrap;
230
- }
231
-
232
- .marquee-content {
233
- display : flex;
234
- animation : marquee 15s linear infinite;
217
+ overflow : hidden;
218
+ white-space : nowrap;
219
+ }
220
+
221
+ .marquee-content {
222
+ display : flex;
223
+ animation : marquee 30s linear infinite;
224
+ }
225
+
226
+ @keyframes marquee {
227
+ from {
228
+ transform : translateX (100% );
235
229
}
236
-
237
- @keyframes marquee {
238
- from {
239
- transform : translateX (100% );
240
- }
241
- to {
242
- transform : translateX (-100% );
243
- }
230
+ to {
231
+ transform : translateX (-660% );
244
232
}
245
-
233
+ }
0 commit comments