-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.css
305 lines (292 loc) · 13.7 KB
/
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
:root{--grey:#eeeeee; --green:#b9ff66; --dl-color-gray-700: #eeeeee;
--dl-size-size-large: 144px;
--dl-size-size-small: 48px;
--dl-color-gray-black: #000000;
--dl-color-gray-white: #FFFFFF;
--dl-size-size-medium: 96px;
--dl-size-size-xlarge: 192px;
--dl-size-size-xsmall: 16px;
--dl-space-space-unit: 16px;
--dl-size-size-xxlarge: 288px;
--dl-color-primary-grey: #eeeeeeff;
--dl-size-size-maxwidth: 1400px;
--dl-color-primary-black: #000000;
--dl-color-primary-green: #b9ff66;
--dl-radius-radius-round: 50%;
--dl-space-space-halfunit: 8px;
--dl-space-space-sixunits: 96px;
--dl-space-space-twounits: 32px;
--dl-radius-radius-radius2: 2px;
--dl-radius-radius-radius4: 4px;
--dl-radius-radius-radius8: 8px;
--dl-space-space-fiveunits: 80px;
--dl-space-space-fourunits: 64px;
--dl-space-space-threeunits: 48px;
--dl-space-space-oneandhalfunits: 24px;}
*{box-sizing:border-box; border-width:0; border-style:solid;}
p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption{margin:0; padding:0;}
button{background-color:transparent;}
button,input,optgroup,select,textarea{font-family:inherit; font-size:100%; line-height:1.15; margin:0;}
button,select{text-transform:none;}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none; padding:0;}
button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus{outline:1px dotted ButtonText;}
a{color:inherit; text-decoration:inherit;}
input{padding:2px 4px;}
img{display:block;}
html{scroll-behavior:smooth}
html{font-family:"Space Grotesk"; font-size:16px;}
body{margin:0;font-weight:400; font-family:"Space Grotesk", sans-serif; font-style:normal; text-decoration:none; text-transform:none; letter-spacing:normal; line-height:24px; color:var(--dl-color-gray-black); background-color:var(--dl-color-gray-white);}
.alert-success {
padding-block: 8px;
}
#anchor{
position:relative;
top:-40px;
}
.myGreen{color:var(--green);}
.py-6{padding-block:6em;}
.my-6{margin-block:6em;}
.rounded20{border-radius:20px;}
.rounded16{border-radius:16px;}
.bgGrey{background:var(--grey);}
.bgDark{background:#000000; color:#ffffff;}
.button {
color: var(--dl-color-gray-black);
cursor: pointer;
display: inline-block;
padding: 0.5rem 1rem;
border-color: var(--dl-color-gray-black);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-gray-white);
}
.input {
color: var(--dl-color-gray-black);
cursor: auto;
padding: 0.5rem 1rem;
border-color: var(--dl-color-gray-black);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-gray-white);
}
.textarea {
color: var(--dl-color-gray-black);
cursor: auto;
padding: 0.5rem;
border-color: var(--dl-color-gray-black);
border-width: 1px;
border-radius: 4px;
background-color: var(--dl-color-gray-white);
}
/* Navbar */
.navBar.container-fluid{padding-block:2rem; position:fixed; top:0; z-index:999;}
#navBar.sticky{background:#000000;}
.navBar .logo{width:250px;}
.navBar .logoW{display:none;}
.sticky .logoW{display:block;}
.sticky .logoB{display:none !important;}
.sticky .home-button4 {color:var(--green); border-color: var(--green);}
.sticky .myLogo h2 {color:var(--green);}
.home-container{width:100%; display:flex; min-height:100vh; overflow-x:hidden; align-items:center; flex-direction:column;}
/* Hero */
.home-hero{gap:var(--dl-space-space-twounits); width:100%; height:calc(100vh - 120px); display:flex; align-items:center; flex-direction:column; justify-content:center; }
.home-text{width:497px; font-size:3em; font-family:"Space Grotesk";}
.heroBanner{width:100%; height:auto; object-fit:cover;}
.about{display:flex; align-items:flex-start; gap:24px; justify-content:flex-start;}
.heroTagline {
font-size: 22px;
max-width: 490px;
font-weight: 400;
line-height: 1.5;
}
.cta img{width:300px; margin-block:-10px;}
.mySwiper{padding-block:2rem; background:var(--green);}
.mySwiper img{width:70px; border-radius:14px;}
.secTitle{padding:var(--dl-space-space-halfunit); font-size:2rem; font-family:"Space Grotesk"; border-radius:var(--dl-radius-radius-radius8); margin-bottom:0; background-color:var(--green); display:inline-block;}
.subTitle{font-size:16px; max-width:768px; text-align:left; line-height:1.3; border-color:#b9ff66; border-width:2px; padding-left:var(--dl-space-space-unit); border-top-width:0; border-right-width:0; border-bottom-width:0;}
.servicesGrid{height:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; padding-top:var(--dl-space-space-unit); padding-bottom:var(--dl-space-space-unit);}
/* Process */
.processAccordion .accordion{color:rgba(255,255,255,0.6); width:100%; cursor:pointer; display:flex; align-items:flex-start; padding-top:var(--dl-space-space-oneandhalfunits); border-color:#949AA5; flex-direction:row; padding-bottom:var(--dl-space-space-oneandhalfunits); justify-content:space-between; border-top-width:1px; border-bottom-width:1px; border:none;}
.processAccordion .accordion-button{font-size:18px; font-family:'Space Grotesk'; font-weight:600; background:#eeeeee; border-radius:10px !important; padding-block:1.5rem;}
.processAccordion .accordion-item{width:100%; margin-bottom:1.5rem; border:none;}
.processAccordion .accordion-item ul li{margin-top:1rem;}
.accordion-button:focus{z-index:3; outline:none; border:2px solid #000000; box-shadow:none;}
.accordion-button:not(.collapsed){color:#000000; background-color:var(--green); box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);}
.serviceBoxInner1{display:flex; padding:0; position:relative; align-items:flex-start; flex-direction:column;}
.serviceBox{display:flex; padding:var(--dl-space-space-oneandhalfunits); position:relative; align-self:stretch; align-items:flex-start; border-radius:20px; flex-direction:column; justify-content:space-between; background-color:var(--grey);}
.serviceBoxInner{flex:0 0 auto; width:100%; display:flex; align-items:flex-start; flex-direction:column;}
.serviceIcon{width:54px; padding:var(--dl-space-space-halfunit); background:#b9ff66; object-fit:cover; border-radius:var(--dl-radius-radius-radius8); margin-bottom:var(--dl-space-space-halfunit);}
.serviceTitle{width:auto; padding:0; font-size:23px; font-family:"Space Grotesk"; border-radius:var(--dl-radius-radius-radius8); margin-top:6px; margin-bottom:18px;}
.secTitle2{padding:0; font-size:2.5rem; font-family:"Space Grotesk"; border-radius:var(--dl-radius-radius-radius8); margin-bottom:10px;}
.accordion {
color: rgba(255, 255, 255, 0.6);
width: 100%;
cursor: pointer;
display: flex;
align-items: flex-start;
padding-top: var(--dl-space-space-oneandhalfunits);
border-color: #949AA5;
flex-direction: row;
padding-bottom: var(--dl-space-space-oneandhalfunits);
justify-content: space-between;
border-top-width: 1px;
border-bottom-width: 1px;
}
.accordion:hover {
color: white;
border-color: white;
}
/* Testimonials */
.testimonials{}
.testimonials .margined{margin-bottom:-2.5rem;}
.testimonials .testimonialsInner{}
.myTestimonialSwiper{padding-top:4rem;}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 5px;
width: 30px;
height: 30px;
margin-top: 0;
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: #000000;
border-radius: 50px;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: auto;
right: 50px;
padding-right: 2px;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset,10px);
left: auto;
padding-left: 2px;
}
.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons; font-size:16px; text-transform:none!important; letter-spacing:0; font-variant:initial; line-height:1;}
.testimonials .testBox{padding:2rem; background:#000000; border-radius:14px; color:#ffffff;}
.testimonials .testBox h5{color:#000000; padding:5px 8px; margin-bottom:6px; font-size:16px; background:var(--green); display:inline-block; margin-top:1rem;}
.testimonials .testBox h6{font-weight:400; font-size:14px;}
.testimonialsInner{width:100%; height:auto; display:flex; align-items:flex-start; flex-direction:column;}
/* Modal */
.modal-header {
border: none;
}
/* Footer */
.aboutFooter {
max-width: 410px;
}
.footerLogo img{
max-width: 250px;
}
.fContact{align-items:flex-end;}
.contactInner{display:flex; padding:var(--dl-space-space-threeunits); position:relative; align-items:flex-start; border-radius:20px; background-color:var(--grey);}
.home-form{gap:var(--dl-space-space-unit); width:100%; height:auto; display:flex; flex-direction:column;}
.home-name{width:100%;}
.home-email{width:100%;}
.home-button3{}
.home-button{color:rgb(255,255,255); align-self:flex-start; margin-top:0; transition:0.3s; padding-block:12px; border-color:var(--dl-color-gray-white); border-width:1px; padding-inline:30px; border-radius:var(--dl-radius-radius-radius8); background-color:rgb(24,24,24); transition:all 0.3s;}
.home-button2{margin-top:30px; color:var(--green); align-self:flex-start; transition:0.3s; padding-block:11px; border-color:var(--green); border-width:1px; padding-inline:30px; border-radius:var(--dl-radius-radius-radius8); background-color:transparent; transition:all 0.3s;}
.home-button2:hover{color:#000000; border-color:var(--dl-color-gray-black); border-width:1px; background-color:var(--green);}
.home-button3{color:#000000; border:1px solid #000000; margin-top:0; padding-inline:30px; padding-block:11px;}
.home-button:hover{color:#000000; border-color:var(--dl-color-gray-black); border-width:1px; background-color:#b9ff66;}
.home-image14{top:50%; right:-16%; width:400px; height:auto; position:absolute; transform:translateY(-50%); object-fit:cover;}
.home-footer{gap:var(--dl-space-space-twounits); width:100%; display:flex; padding:3rem; align-items:center; flex-direction:column; background-color:var(--dl-color-primary-black); border-top-left-radius:20px; border-top-right-radius:20px;}
.home-container40{flex:0 0 auto; width:100%; display:flex; align-items:flex-start; flex-direction:row;}
.home-image15{width:auto; height:24px; object-fit:cover;}
.home-container42{gap:var(--dl-space-space-halfunit); height:auto; display:flex; margin-top:var(--dl-space-space-oneandhalfunits); align-items:flex-start; flex-direction:row;}
.home-icon{fill:#D9D9D9; width:24px; height:24px;}
.home-icon2{fill:#D9D9D9; width:24px; height:24px;}
.home-icon4{fill:#D9D9D9; width:24px; height:24px;}
.home-link{color:var(--dl-color-primary-grey);}
.home-link1{color:var(--dl-color-primary-grey);}
.home-container44{flex:0 0 auto; width:100%; height:auto; display:flex; align-items:flex-start; padding-top:var(--dl-space-space-unit); border-color:var(--dl-color-primary-grey); border-width:0; flex-direction:row; justify-content:space-between; border-top-width:1px;}
.home-text50{color:var(--dl-color-primary-grey); font-style:normal; font-weight:300;}
.home-text51{color:var(--dl-color-primary-grey); font-style:normal; font-weight:300;}
.home-container46{display:contents;}
.home-button4{color:#000000; transition:0.3s; padding-block:11px; border-color:#000000; border-width:1px; padding-inline:30px; border-radius:var(--dl-radius-radius-radius8); background-color:transparent; transition:all 0.3s;}
.home-button4:hover{background:var(--green);}
@media(max-width:1600px){
.home-hero{justify-content: flex-end;}
}
@media(max-width:1199px){
.about{flex-direction:column;}
.secTitle{font-size:1.5rem;}
.home-image15{width:auto; height:20px; object-fit:cover;}
.home-text{width:auto; font-size:2.5em;}
.heroTagline{font-size:1.2rem; text-align:left; line-height:1.4;}
.home-container05{width:auto;}
.home-container10{justify-content:center;}
.subTitle{font-size:16px; text-align:left; line-height:1.3;}
.owl-carousel {
justify-content: center;
}
}
@media(max-width:991px){
.home-image14{right:-36%; width:300px; opacity:0.5;}
.processAccordion .accordion-button{font-size:17px; padding-block:1rem;}
.cta .bgDark{padding-block:2rem;}
.cta img{width:110px; margin-block:0;}
.home-hero{height:auto; margin-top:5rem; gap:1rem;}
.home-text{width:auto; font-size:2em;}
.heroTagline{font-size:1rem;}
.subTitle{max-width:auto;}
.secTitle2{font-size:1.5rem;}
.home-image12{width:300px;}
.home-image15{height:20px;}
.contactInner{padding:2rem;}
.accordion {
border-top-width: 0px;
}
}
@media(max-width:767px){
.navBar .logo{width:220px;}
.py-6{padding-block:4rem;}
.cta img{display:none;}
.home-image15{height:18px;}
.home-footer{padding:3rem 2rem;}
.contactInner{padding:2rem 1rem;}
.mySwiper{padding-block:1rem; border-radius:0;}
.mySwiper img{width:50px; border-radius:12px;}
.home-hero{height:auto; margin-top:4rem; gap:1rem;}
.accordion {
align-items: flex-start;
padding-top: var(--dl-space-space-unit);
padding-bottom: var(--dl-space-space-unit);
}
}
@media(max-width:479px){
.home-hero{ margin-top:3rem; }
.navBar.container-fluid{padding-block:1.5rem;}
.navBar .logo{width:230px;}
.home-text{font-size:30px;}
.home-hero{height:auto; padding-top:var(--dl-space-space-threeunits); padding-bottom:0;}
.secTitle{width:auto;}
.processAccordion .accordion-button{font-size:16px; line-height:24px;}
.fContact {
align-items: initial;
margin-top: 1rem;
}
.accordion {
padding-top: var(--dl-space-space-oneandhalfunits);
padding-bottom: var(--dl-space-space-oneandhalfunits);
}
.home-container44 {
font-size:14px;
flex-wrap: wrap;
}
.home-button4, home-button3, .home-button2{
padding-block:9px;
}
.home-button{
padding-block:10px;
}
.home-footer{border-radius:0;}
.contactInner, .rounded20 {
border-radius:0;
}
}