└── test
    ├── script.js
    ├── About.html
    ├── service.html
    ├── index.html
    ├── contact.html
    ├── page.html
    └── style.css


/test/script.js:
--------------------------------------------------------------------------------
 1 |   //navbar for moblie and lap navgition bar
 2 |   function toggleMobileMenu(menu) {
 3 |     menu.classList.toggle('open');
 4 | }
 5 |   //animation effects wile scrolling the page content will appear
 6 |   window.addEventListener('scroll', function () {
 7 |     var animationSection = document.querySelector('.animation-section');
 8 |     var sectionPosition = animationSection.getBoundingClientRect().top;
 9 |     var screenPosition = window.innerHeight;
10 | 
11 |     if (sectionPosition < screenPosition) {
12 |       animationSection.classList.add('show');
13 |     }
14 |   });
15 | 
16 |   //details that shown in the about context will appear
17 |   /*
18 |   window.addEventListener('scroll', function () {
19 |     var animationSection = document.querySelector('.about-details');
20 |     var sectionPosition = animationSection.getBoundingClientRect().top;
21 |     var screenPosition = window.innerHeight;
22 | 
23 |     if (sectionPosition < screenPosition) {
24 |       animationSection.classList.add('show');
25 |     }
26 |   });*/
27 | 
28 |   window.addEventListener('scroll', function () {
29 |     var animationSection = document.querySelector('.service-card');
30 |     var sectionPosition = animationSection.getBoundingClientRect().top;
31 |     var screenPosition = window.innerHeight;
32 | 
33 |     if (sectionPosition < screenPosition) {
34 |       animationSection.classList.add('show');
35 |     }
36 |   });
37 | 
38 |   window.addEventListener('scroll', function () {
39 |     var animationSection = document.querySelector('.c-img');
40 |     var sectionPosition = animationSection.getBoundingClientRect().top;
41 |     var screenPosition = window.innerHeight;
42 |     if (sectionPosition < screenPosition) {
43 |       animationSection.classList.add('show');
44 |     }
45 |   });
46 | 
47 |   window.addEventListener('scroll', function () {
48 |     var animationSection = document.querySelector('.question');
49 |     var sectionPosition = animationSection.getBoundingClientRect().top;
50 |     var screenPosition = window.innerHeight;
51 |     if (sectionPosition < screenPosition) {
52 |       animationSection.classList.add('show');
53 |     }
54 |   });
55 | 
56 |   window.addEventListener('scroll', function () {
57 |     var animationSection = document.querySelector('.our-team');
58 |     var sectionPosition = animationSection.getBoundingClientRect().top;
59 |     var screenPosition = window.innerHeight;
60 |     if (sectionPosition < screenPosition) {
61 |       animationSection.classList.add('show');
62 |     }
63 |   });
64 | 
65 |   window.addEventListener('scroll', function () {
66 |     var animationSection = document.querySelector('.footer2');
67 |     var sectionPosition = animationSection.getBoundingClientRect().top;
68 |     var screenPosition = window.innerHeight;
69 |     if (sectionPosition < screenPosition) {
70 |       animationSection.classList.add('show');
71 |     }
72 |   });
73 | 
74 |   //question show js
75 | 
76 |   function toggleAnswer(id) {
77 |     var answer = document.getElementById(id);
78 |     var questions = document.getElementsByClassName('ques');
79 |     var answers = document.getElementsByClassName('answer');
80 | 
81 |     // Close all answers and reset background color
82 |     for (var i = 0; i < answers.length; i++) {
83 |       answers[i].style.display = 'none';
84 |       questions[i].style.backgroundColor = 'green'; // Reset background color
85 |     }
86 | 
87 |     // Open the clicked answer and change background color of the clicked question
88 |     answer.style.display = (answer.style.display === 'block') ? 'none' : 'block';
89 |     var questionIndex = Array.from(answers).indexOf(answer);
90 |     questions[questionIndex].style.backgroundColor = 'red'; // Change background color of clicked question
91 |   }


--------------------------------------------------------------------------------
/test/About.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>About_page</title>
  8 |        <script src="https://kit.fontawesome.com/7bb075a920.js" crossorigin="anonymous"></script>
  9 | </head>
 10 | 
 11 | <body>
 12 |     <style>
 13 |         * {
 14 |             padding: 0;
 15 |             margin: 0;
 16 |             box-sizing: border-box;
 17 |             scroll-behavior: smooth;
 18 |         }
 19 | 
 20 |         /*navigation bar*/
 21 | 
 22 |         header a {
 23 |             text-decoration: none;
 24 |         }
 25 | 
 26 |         header {
 27 |             padding: 0 70px;
 28 |             background-color: #1d1f1d;
 29 |             height: 60px;
 30 |             display: flex;
 31 |             justify-content: space-between;
 32 |         }
 33 | 
 34 |         #brand {
 35 |             font-weight: bold;
 36 |             font-size: 25px;
 37 |             display: flex;
 38 |             border: 0px solid white;
 39 |             align-items: center;
 40 |         }
 41 | 
 42 |         #brand a {
 43 |             color: #f9f9f9;
 44 |         }
 45 | 
 46 |         ul {
 47 |             list-style: none;
 48 |             height: 100%;
 49 |             display: flex;
 50 |             align-items: center;
 51 |             justify-content: space-around;
 52 |         }
 53 | 
 54 |         ul a {
 55 |             color: grey;
 56 |         }
 57 | 
 58 |         ul li {
 59 |             padding: 5px;
 60 |             margin-left: 50px;
 61 | 
 62 |         }
 63 | 
 64 |         ul li:hover {
 65 |             transform: scale(1.1);
 66 |             transition: 0.3s;
 67 |             background-color: red;
 68 |             border-radius: 10px;
 69 | 
 70 |         }
 71 | 
 72 |         /*
 73 |   #login,
 74 |   #signup {
 75 |     border-radius: 5px;
 76 |     padding: 5px 8px;
 77 |   }
 78 |   
 79 |   #login {
 80 |     border: 1px solid #498afb;
 81 |   }
 82 |   
 83 |   #signup {
 84 |     border: 1px solid #ff3860;
 85 |   }
 86 |   
 87 |   #signup a {
 88 |     color: #ff3860;
 89 |   }
 90 |   
 91 |   #login a {
 92 |     color: #498afb;
 93 |   }
 94 |   */
 95 |         #hamburger-icon {
 96 |             margin: auto 0;
 97 |             display: none;
 98 |             cursor: pointer;
 99 |         }
100 | 
101 |         #hamburger-icon div {
102 |             width: 35px;
103 |             height: 3px;
104 |             background-color: white;
105 |             margin: 6px 0;
106 |             transition: 0.4s;
107 |         }
108 | 
109 |         .open .bar1 {
110 |             -webkit-transform: rotate(-45deg) translate(-6px, 6px);
111 |             transform: rotate(-45deg) translate(-6px, 6px);
112 |         }
113 | 
114 |         .open .bar2 {
115 |             opacity: 0;
116 |         }
117 | 
118 |         .open .bar3 {
119 |             -webkit-transform: rotate(45deg) translate(-6px, -8px);
120 |             transform: rotate(45deg) translate(-6px, -8px);
121 |         }
122 | 
123 |         .open .mobile-menu {
124 |             display: flex;
125 |             flex-direction: column;
126 |             align-items: center;
127 |             padding-top: 20px;
128 |             justify-content: flex-start;
129 |             height: max-content;
130 |         }
131 | 
132 |         .mobile-menu {
133 |             display: none;
134 |             position: absolute;
135 |             top: 50px;
136 |             left: 0;
137 |             height: calc(100vh - 50px);
138 |             width: 100%;
139 |             backdrop-filter: blur(10px);
140 |             z-index: 1;
141 |         }
142 | 
143 |         .mobile-menu li {
144 |             margin-bottom: 10px;
145 |         }
146 | 
147 |         @media only screen and (max-width: 600px) {
148 |             .body {
149 |                 overflow: hidden;
150 |             }
151 | 
152 |             header nav {
153 |                 display: none;
154 |             }
155 | 
156 |             #hamburger-icon {
157 |                 display: block;
158 |             }
159 | 
160 |           }  /*about section*/
161 | 
162 |             @media only screen and (max-width: 600px) {
163 |                 .about .animation-container .animation-section img {
164 |                     height: 300px;
165 |                     width: 320px;
166 |                     margin-left: 37px;
167 |                     text-align: center;
168 |                     border: none;
169 |                     margin-bottom: -100px;
170 | 
171 |                 }
172 | 
173 |                 .about {
174 |                     display: flex;
175 |                     flex-direction: column;
176 |                     z-index: 1;
177 |                     margin-bottom: 230px;
178 |                 }
179 | 
180 |                 .about-details {
181 |                     width: 400px;
182 |                 }
183 | 
184 |                 .about .about-details .abtus-btn {
185 |                     margin-top: -400px;
186 |                 }
187 | 
188 |                 .about-details h1 {
189 |                     width: 315px;
190 |                     font-size: 20px;
191 |                 }
192 | 
193 |                 .about .about-details p {
194 |                     width: 350px;
195 |                     font-size: 15px;
196 |                 }
197 | 
198 | 
199 |                 .p1 {
200 |                     position: relative;
201 |                     left: -4px;
202 |                     width: 350px;
203 | 
204 |                 }
205 | 
206 |                 .p1 p {
207 |                     width: 250px;
208 |                     border: 0px solid red;
209 |                 }
210 | 
211 |                 .p2 {
212 |                     position: relative;
213 |                     left: -115px;
214 |                     padding-left: 50px;
215 |                     display: block;
216 |                     width: 350px;
217 |                 }
218 | 
219 |                 .p {
220 |                     width: 100px;
221 |                     position: relative;
222 |                 }
223 | 
224 |                 .about .about-details .points .p1 .p {
225 |                     display: flex;
226 |                     width: 50%;
227 |                     position: relative;
228 | 
229 |                 }
230 | 
231 |                 .about .about-details .points .p2 {
232 |                     display: none;
233 |                 }
234 | 
235 |                 .about .icons {
236 |                     width: 300px;
237 |                     border: 0px solid red;
238 |                     margin-top: 20px;
239 |                 }
240 | 
241 |                 .about .icons .r-btn {
242 |                     padding: 8px;
243 |                     font-size: 15px;
244 |                 }
245 | 
246 |                 .about .icons i {
247 |                     height: 30px;
248 |                     width: 30px;
249 |                     line-height: 30px;
250 |                     margin-left: 12px;
251 |                 }
252 | 
253 | 
254 | 
255 |             }
256 | 
257 | 
258 | 
259 |             .about {
260 |                 margin-top: 10px;
261 |                 height: 700px;
262 |                 display: flex;
263 |                 background-color: #fbfbfb;
264 |             }
265 | 
266 |             .about .about-details {
267 |                 height: 500px;
268 |                 width: 50%;
269 |                 margin-top: 70px;
270 |                 margin-left: 5%;
271 |             }
272 | 
273 |             .about-details .abtus-btn {
274 |                 padding: 9px;
275 |                 border-radius: 35px;
276 |                 height: auto;
277 |                 width: max-content;
278 |                 border: 1px solid grey;
279 |                 background-color: white;
280 |                 color: rgba(43, 43, 252, 0.66);
281 |                 cursor: pointer;
282 |             }
283 | 
284 |             .about-details h1 {
285 |                 margin-top: 20px;
286 |             }
287 | 
288 |             .about-details p {
289 |                 margin-top: 20px;
290 |                 line-height: 24px;
291 |                 font-size: 20px;
292 |             }
293 | 
294 |             .about .about-details .abtus-btn p {
295 |                 color: white;
296 |             }
297 | 
298 |             /*points*/
299 | 
300 |             .points {
301 |                 margin-top: 20px;
302 |             }
303 | 
304 |             .about-details .points .p1 .p {
305 |                 display: flex;
306 |                 margin-left: 5px;
307 |             }
308 | 
309 |             .about-details .points .p1 i {
310 |                 margin-right: 10px;
311 |                 margin-top: 22px;
312 |             }
313 | 
314 |             .about-details .points {
315 |                 display: flex;
316 |             }
317 | 
318 |             .about-details .points .p2 .p {
319 |                 display: flex;
320 |                 margin-left: 80px;
321 | 
322 |             }
323 | 
324 |             .about-details .points .p2 i {
325 |                 margin-right: 10px;
326 |                 margin-top: 22px;
327 |             }
328 | 
329 |             /*icons*/
330 |             .icons {
331 |                 margin-top: 50px;
332 |             }
333 | 
334 |             .icons .r-btn {
335 |                 height: auto;
336 |                 width: auto;
337 |                 border-radius: 30px;
338 |                 background-color: rgba(43, 43, 252, 0.66);
339 |                 padding: 10px;
340 |                 color: white;
341 |                 font-size: 18px;
342 |                 border: none;
343 |                 cursor: pointer;
344 |             }
345 | 
346 |             .icons i {
347 |                 height: 40px;
348 |                 width: 40px;
349 |                 background-color: rgb(236, 236, 236);
350 |                 text-align: center;
351 |                 line-height: 40px;
352 |                 border-radius: 50%;
353 |                 margin-left: 14px;
354 |                 border: 1.1px solid rgba(43, 43, 252, 0.66);
355 |                 cursor: pointer;
356 |             }
357 | 
358 |             .icons i:hover {
359 |                 color: rgb(255, 255, 255);
360 |                 background-color: rgb(13, 13, 13);
361 |                 transition: .5s;
362 |             }
363 | 
364 |             .about-details {
365 |                 padding-top: 50px;
366 |             }
367 |     </style>
368 | 
369 |     
370 |     <!--navigation bar-->
371 |     <header>
372 |         <div id="brand"><a href="/">AI.TECH</a></div>
373 |         <nav>
374 |             <ul>
375 |                 <li><a href="./index.html">Home</a></li>
376 |                 <li><a href="./About.html">About Us</a></li>
377 |                 <li><a href="./service.html">Services</a></li>
378 |                 <li><a href="./page.html">Pages</a></li>
379 |                 <li><a href="./contact.html">Contact Us</a></li>
380 |                 <!--  <li id="login"><a href="/logi
381 |                       <li><a href="/about">About</a></li>n" >Login</a></li>
382 |           <li id="signup"><a href="/signup">Signup</a></li>-->
383 |             </ul>
384 |         </nav>
385 |         <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
386 |             <div class="bar1"></div>
387 |             <div class="bar2"></div>
388 |             <div class="bar3"></div>
389 |             <ul class="mobile-menu">
390 |                 <li><a href="./index.html">Home</a></li>
391 |                 <li><a href="./About.html">About Us</a></li>
392 |                 <li><a href="./service.html">Services</a></li>
393 |                 <li><a href="./page.html">Pages</a></li>
394 |                 <li><a href="./contact.html">Contact Us</a></li>
395 |                 <!--   <li id="login"><a href="/login" >Login</a></li>
396 |           <li id="signup"><a href="/signup">Signup</a></li>-->
397 |             </ul>
398 |         </div>
399 |     </header>
400 | 
401 |     <!--about section-->
402 |     <div class="about" id="ABOUT">
403 |         <div class="animation-container">
404 |             <div class="animation-section">
405 |                 <img src="https://img.freepik.com/free-photo/robot-building-snowman_1048-4268.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais"
406 |                     alt="Animation">
407 |             </div>
408 |         </div>
409 |         <div class="about-details">
410 |             <button class="abtus-btn">About US</button>
411 |             <h1>We Make Your Business Smarter with Artificial Intelligence</h1>
412 |             <p>
413 |                 AI in business enhances efficiency through automation, streamlining operations, and data analysis,
414 |                 leading to informed decision-making. It optimizes processes, minimizes errors, and scales
415 |                 operations, reducing costs and increasing productivity. </p>
416 |             <p>AI in business automates tasks, analyzes data, and personalizes experiences, enhancing efficiency and
417 |                 decision-making to drive growth and competitiveness</p>
418 |             <div class="points">
419 |                 <div class="p1">
420 |                     <div class="p">
421 |                         <i class="fa-solid fa-check"></i>
422 |                         <p>Award Winning</p>
423 |                     </div>
424 |                     <div class="p">
425 |                         <i class="fa-solid fa-check"></i>
426 |                         <p>Professional Staff</p>
427 |                     </div>
428 |                 </div>
429 |                 <div class="p2">
430 |                     <div class="p">
431 |                         <i class="fa-solid fa-check"></i>
432 |                         <p>Award Winning</p>
433 |                     </div>
434 |                     <div class="p">
435 |                         <i class="fa-solid fa-check"></i>
436 |                         <p>Professional Staff</p>
437 |                     </div>
438 |                 </div>
439 |             </div>
440 |             <div class="icons">
441 |                 <button class="r-btn">Read More</button>
442 |                 <i class="fa-brands fa-facebook-f"></i>
443 |                 <i class="fa-brands fa-twitter"></i>
444 |                 <i class="fa-brands fa-square-instagram"></i>
445 |                 <i class="fa-brands fa-linkedin"></i>
446 |             </div>
447 |         </div>
448 |     </div>
449 | 
450 |     <script>
451 |           //navbar for moblie and lap navgition bar
452 |   function toggleMobileMenu(menu) {
453 |     menu.classList.toggle('open');
454 | }
455 |     </script>
456 | 
457 | </body>
458 | 
459 | </html>
460 | 


--------------------------------------------------------------------------------
/test/service.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="icon" href="c:\Users\WELCOME\Downloads\location-dot-solid.svg">
  8 |     <script src="https://kit.fontawesome.com/7bb075a920.js" crossorigin="anonymous"></script>
  9 |     <title>Services</title>
 10 | </head>
 11 | 
 12 | <body>
 13 |     <style>
 14 |        
 15 |         * {
 16 |             padding: 0px;
 17 |             margin: 0px;
 18 |             box-sizing: border-box;
 19 |         }
 20 |          /*navigation*/
 21 | 
 22 |         header a {
 23 |             text-decoration: none;
 24 |         }
 25 | 
 26 |         header {
 27 |             padding: 0 70px;
 28 |             background-color: #1d1f1d;
 29 |             height: 60px;
 30 |             display: flex;
 31 |             justify-content: space-between;
 32 |         }
 33 | 
 34 |         #brand {
 35 |             font-weight: bold;
 36 |             font-size: 25px;
 37 |             display: flex;
 38 |             border: 0px solid white;
 39 |             align-items: center;
 40 |         }
 41 | 
 42 |         #brand a {
 43 |             color: #f9f9f9;
 44 |         }
 45 | 
 46 |         ul {
 47 |             list-style: none;
 48 |             height: 100%;
 49 |             display: flex;
 50 |             align-items: center;
 51 |             justify-content: space-around;
 52 |         }
 53 | 
 54 |         ul a {
 55 |             color: grey;
 56 |         }
 57 | 
 58 |         ul li {
 59 |             padding: 5px;
 60 |             margin-left: 50px;
 61 |         }
 62 | 
 63 |         ul li:hover {
 64 |             transform: scale(1.1);
 65 |             transition: 0.3s;
 66 |             background-color: red;
 67 |             border-radius: 10px;
 68 |         }
 69 | 
 70 |         #hamburger-icon {
 71 |             margin: auto 0;
 72 |             display: none;
 73 |             cursor: pointer;
 74 |         }
 75 | 
 76 |         #hamburger-icon div {
 77 |             width: 35px;
 78 |             height: 3px;
 79 |             background-color: white;
 80 |             margin: 6px 0;
 81 |             transition: 0.4s;
 82 |         }
 83 | 
 84 |         .open .bar1 {
 85 |             -webkit-transform: rotate(-45deg) translate(-6px, 6px);
 86 |             transform: rotate(-45deg) translate(-6px, 6px);
 87 |         }
 88 | 
 89 |         .open .bar2 {
 90 |             opacity: 0;
 91 |         }
 92 | 
 93 |         .open .bar3 {
 94 |             -webkit-transform: rotate(45deg) translate(-6px, -8px);
 95 |             transform: rotate(45deg) translate(-6px, -8px);
 96 |         }
 97 | 
 98 |         .open .mobile-menu {
 99 |             display: flex;
100 |             flex-direction: column;
101 |             align-items: center;
102 |             padding-top: 20px;
103 |             justify-content: flex-start;
104 |             height: max-content;
105 |         }
106 | 
107 |         .mobile-menu {
108 |             display: none;
109 |             position: absolute;
110 |             top: 50px;
111 |             left: 0;
112 |             height: calc(100vh - 50px);
113 |             width: 100%;
114 |             backdrop-filter: blur(10px);
115 |             z-index: 1;
116 |         }
117 | 
118 |         .mobile-menu li {
119 |             margin-bottom: 10px;
120 |         }
121 | 
122 |         @media only screen and (max-width: 600px) {
123 |             .body {
124 |                 overflow: hidden;
125 |             }
126 | 
127 |             header nav {
128 |                 display: none;
129 |             }
130 | 
131 |             #hamburger-icon {
132 |                 display: block;
133 |             }
134 | 
135 |             .service {
136 |                 /* background-color: rgb(223, 241, 254);*/
137 |                 width: 100%;
138 |                 padding-top: 100px;
139 |                 position: relative;
140 |                 margin-bottom: 0px;
141 |             }
142 | 
143 |             #SERVICES {
144 |                 background-color: #7F8487;
145 |                 height: 1920px;
146 |             }
147 | 
148 |             .service .service-detail {
149 |                 margin-top: -80px;
150 |                 margin-left: 20px
151 |             }
152 | 
153 |             .service .service-detail h1 {
154 |                 font-size: 20px;
155 |                 width: 350px;
156 |                 border: 0px solid red;
157 |                 text-align: center;
158 |             }
159 | 
160 |             .service .service-detail p {
161 |                 width: 350px;
162 |                 font-size: 15px;
163 |             }
164 | 
165 |             .service .service-detail .read-btn {
166 |                 padding: 7px;
167 |                 width: max-content;
168 |             }
169 | 
170 |             .service .service-card {
171 |                 position: relative;
172 |                 top: -25px;
173 |                 left: -20px;
174 |                 border: none;
175 |             }
176 | 
177 |             .service .service-card .row1 {
178 |                 display: flex;
179 |                 flex-direction: column;
180 |                 margin-left: 17%;
181 |             }
182 | 
183 |             .service .service-card .row2 {
184 |                 display: flex;
185 |                 flex-direction: column;
186 |                 margin-left: 17%;
187 |             }
188 | 
189 |         }
190 | 
191 |         /*non responsive*/
192 |         
193 |         .service {
194 |             background-color: #7F8487;
195 |             width: 100%;
196 |             height: 950px;
197 |             padding-top: 100px;
198 |             position: relative;
199 |         }
200 | 
201 |         .service-detail {
202 |             width: 38%;
203 |             height: 400px;
204 |             margin-left: 50px;
205 |             margin-top: 130px;
206 |         }
207 | 
208 |         .service-detail button {
209 |             height: auto;
210 |             width: auto;
211 |             border-radius: 25px;
212 |             padding: 10px;
213 |             margin-bottom: 20px;
214 |             color: blue;
215 |             border: 1px solid black;
216 |             cursor: pointer;
217 |         }
218 | 
219 |         .service-detail h1 {
220 |             font-size: 40px;
221 |             margin-bottom: 20px;
222 |         }
223 | 
224 |         .service .service-detail p {
225 |             line-height: 23px;
226 |             margin-bottom: 20px;
227 |         }
228 | 
229 |         .service-detail .read-btn {
230 |             background-color: rgba(43, 43, 252, 0.66);
231 |             border: none;
232 |             padding: 15px;
233 |             color: white;
234 |             width: 130px;
235 |             font-size: 18px;
236 |             -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
237 |         }
238 | 
239 |         /*service right side*/
240 | 
241 |         .service-card {
242 |             position: relative;
243 |             top: -500px;
244 |             left: 48%;
245 |             border: 0px solid red;
246 |             width: max-content;
247 |         }
248 | 
249 |         /*   .service-card {
250 |             opacity: 0;
251 |             padding-top: 0px;
252 |             transform: translateY(300px);
253 |             transition: opacity 3s, transform 0.9s;
254 |         }
255 | 
256 |         .service-card.show {
257 |             opacity: 1;
258 |             transform: translateY(0);
259 |             transform: 5s;
260 |         }*/
261 | 
262 |         .service-card .row1 {
263 |             display: flex;
264 |             gap: 20px;
265 |         }
266 | 
267 |         .service-card .row1 .card {
268 |             width: 310px;
269 |             height: 360px;
270 |             background-color: rgb(130, 196, 240);
271 |             border-radius: 15px;
272 |         }
273 | 
274 |         .service-card .row2 {
275 |             display: flex;
276 |             gap: 20px;
277 |             margin-top: 25px;
278 |         }
279 | 
280 |         .service-card .row2 .card1 {
281 |             width: 310px;
282 |             height: 360px;
283 |             background-color: rgb(130, 196, 240);
284 |             border-radius: 15px;
285 |         }
286 | 
287 |         /*card inner details */
288 | 
289 |         .row1 .card i {
290 |             color: blue;
291 |             font-size: 35px;
292 |             height: 70px;
293 |             width: 70px;
294 |             background-color: black;
295 |             text-align: center;
296 |             line-height: 70px;
297 |             border-radius: 50%;
298 |             margin-left: 120px;
299 |             margin-top: 50px;
300 |         }
301 | 
302 |         .row1 .card h2 {
303 |             text-align: center;
304 |             margin-top: 20px;
305 |         }
306 | 
307 |         .row1 .card p {
308 |             padding: 25px;
309 |         }
310 | 
311 |         .card .readmore-btn h6 {
312 |             font-size: 15px;
313 |             font-weight: normal;
314 |             padding: 10px;
315 |         }
316 | 
317 |         .card .readmore-btn h6 {
318 |             background-color: rgb(11, 11, 11);
319 |             border-radius: 20px;
320 |             color: rgb(251, 251, 251);
321 |         }
322 | 
323 |         .card .readmore-btn {
324 |             border: none;
325 |             background-color: rgb(255, 255, 255);
326 |             margin-left: 100px;
327 |             border-radius: 20px;
328 |         }
329 | 
330 |         /*card hover details*/
331 | 
332 |         .card:hover .readmore-btn h6 {
333 |             position: relative;
334 |             background-color: white;
335 |             color: black;
336 |         }
337 | 
338 |         .row1 .card:hover {
339 |             background-color: aliceblue;
340 |             transition: 1s;
341 | 
342 |         }
343 | 
344 |         .row1 .card:hover i {
345 |             background-color: wheat;
346 |         }
347 | 
348 |         .row1 .card:hover h2 {
349 |             color: rgb(0, 0, 0);
350 |             transition: 1s linear;
351 |         }
352 | 
353 |         .row1 .card:hover p {
354 |             color: rgb(0, 0, 0);
355 |             transition: 1s linear;
356 |         }
357 | 
358 |         .card:hover .readmore-btn {
359 |             animation: mymove 2s forwards;
360 |             border-radius: 20px;
361 |         }
362 | 
363 | 
364 |         .row2 .card1 i {
365 |             color: blue;
366 |             font-size: 35px;
367 |             height: 70px;
368 |             width: 70px;
369 |             background-color: black;
370 |             text-align: center;
371 |             line-height: 70px;
372 |             border-radius: 50%;
373 |             margin-left: 120px;
374 |             margin-top: 50px;
375 |         }
376 | 
377 |         .row2 .card1 h2 {
378 |             text-align: center;
379 |             margin-top: 20px;
380 |         }
381 | 
382 |         .row2 .card1 p {
383 |             padding: 25px;
384 |         }
385 | 
386 |         .card1 .readmore-btn h6 {
387 |             background-color: black;
388 |             border-radius: 20px;
389 |             color: white;
390 |         }
391 | 
392 |         .card1 .readmore-btn h6 {
393 |             font-size: 15px;
394 |             font-weight: normal;
395 |             padding: 10px;
396 |         }
397 | 
398 |         .card1 .readmore-btn {
399 |             border: none;
400 |             border-radius: 20px;
401 |             background-color: rgb(255, 255, 255);
402 |             margin-left: 100px;
403 |         }
404 | 
405 |         /*card hover details*/
406 | 
407 |         .card1:hover .readmore-btn h6 {
408 |             position: relative;
409 |             background-color: white;
410 |             color: black;
411 |         }
412 | 
413 |         .row2 .card1:hover {
414 |             background-color: aliceblue;
415 |             transition: 1s;
416 |         }
417 | 
418 |         .row2 .card1:hover i {
419 |             background-color: wheat;
420 |         }
421 | 
422 |         .row2 .card1:hover p {
423 |             color: rgb(0, 0, 0);
424 |             transition: 1s linear;
425 |         }
426 | 
427 |         .card1:hover .readmore-btn {
428 |             animation: mymove 2s forwards;
429 |             border-radius: 20px;
430 |         }
431 |     </style>
432 | 
433 |     <!--navbar-->
434 |     <header>
435 |         <div id="brand"><a href="/">AI.TECH</a></div>
436 |         <nav>
437 |             <ul>
438 |                 <li><a href="./index.html">Home</a></li>
439 |                 <li><a href="./About.html">About Us</a></li>
440 |                 <li><a href="./service.html">Services</a></li>
441 |                 <li><a href="./page.html">Pages</a></li>
442 |                 <li><a href="./contact.html">Contact Us</a></li>
443 |                 <!--  <li id="login"><a href="/logi
444 |                       <li><a href="/about">About</a></li>n" >Login</a></li>
445 |           <li id="signup"><a href="/signup">Signup</a></li>-->
446 |             </ul>
447 |         </nav>
448 |         <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
449 |             <div class="bar1"></div>
450 |             <div class="bar2"></div>
451 |             <div class="bar3"></div>
452 |             <ul class="mobile-menu">
453 |                 <li><a href="./index.html">Home</a></li>
454 |                 <li><a href="./About.html">About Us</a></li>
455 |                 <li><a href="./service.html">Services</a></li>
456 |                 <li><a href="./page.html">Pages</a></li>
457 |                 <li><a href="./contact.html">Contact Us</a></li>
458 |                 <!--   <li id="login"><a href="/login" >Login</a></li>
459 |           <li id="signup"><a href="/signup">Signup</a></li>-->
460 |             </ul>
461 |         </div>
462 |     </header>
463 |     <!--Services-->
464 |     <div class="service" id="SERVICES">
465 |         <div class="service-detail">
466 |             <button class="ser-btn">Our Services</button>
467 |             <h1>Our Excellent AI Solutions for Your Business</h1>
468 |             <p>Streamline operations and boost efficiency with our cutting-edge AI solutions tailored to your
469 |                 business needs.
470 |                 Harness the power of advanced algorithms and machine learning to drive innovation and stay ahead in
471 |                 today's competitive landscape</p>
472 |             <button class="read-btn">Read More</button>
473 |         </div>
474 | 
475 |         <div class="service-card">
476 |             <div class="row1">
477 |                 <div class="card">
478 |                     <i class="fa-solid fa-robot"></i>
479 |                     <h2>Robotic Automation</h2>
480 |                     <p>Robotic animation blends mechanical precision with digital artistry to bring machines to life
481 |                         through movement and expression.</p>
482 |                     <button class="readmore-btn">
483 |                         <h6>Read More</h6>
484 |                     </button>
485 | 
486 |                 </div>
487 |                 <div class="card">
488 |                     <i class="fa-solid fa-graduation-cap"></i>
489 |                     <h2>Education & Science</h2>
490 |                     <p>Research and science in AI drive the relentless pursuit of understanding, innovation, and
491 |                         ethical advancement in artificial intelligence technologies.</p>
492 |                     <button class="readmore-btn">
493 |                         <h6>Read More</h6>
494 |                     </button>
495 |                 </div>
496 |             </div>
497 | 
498 |             <div class="row2">
499 |                 <div class="card1">
500 |                     <i class="fa-solid fa-power-off"></i>
501 |                     <h2>Machine learning</h2>
502 |                     <p>
503 |                         Machine learning involves algorithms enabling computers to learn from data, identify
504 |                         patterns, and make predictions, driving innovation across various industries.</p>
505 |                     <button class="readmore-btn" id="readmore-btn">
506 |                         <h6>Read More</h6>
507 |                     </button>
508 | 
509 |                 </div>
510 |                 <div class="card1">
511 |                     <i class="fa-solid fa-brain"></i>
512 |                     <h2>Predictive Analysis</h2>
513 |                     <p> Predictive analysis utilizes data to forecast future outcomes, informing decision-making and
514 |                         strategy across industries effectively.</p>
515 |                     <button class="readmore-btn">
516 |                         <h6>Read More</h6>
517 |                     </button>
518 |                 </div>
519 |             </div>
520 |         </div>
521 |     </div>
522 | 
523 |     <script>
524 |           //navbar for moblie and lap navgition bar
525 |   function toggleMobileMenu(menu) {
526 |     menu.classList.toggle('open');
527 | }
528 |     </script>
529 | </body>
530 | 
531 | 
532 | </html>


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>AI_Webpage</title>
  8 |     <link rel="icon" href="c:\Users\WELCOME\Downloads\location-dot-solid.svg">
  9 |     <link rel="stylesheet" href="./style.css">
 10 |     <script src="https://kit.fontawesome.com/7bb075a920.js" crossorigin="anonymous"></script>
 11 | </head>
 12 | 
 13 | <body>
 14 |     <script src="./script.js"></script>
 15 |     <!-- Appearance reference for the webpage animation while scrolling -->
 16 |     <!--   <div class="content">
 17 |         <h1>Welcome to Our Website</h1>
 18 |         <p>Scroll down to see the animation</p>
 19 |     </div>
 20 | 
 21 |     <div class="animation-container">
 22 |         <div class="animation-section">
 23 |             <img src="https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=600"
 24 |                 alt="Animation">
 25 |             <p>This is the animated content</p>
 26 |         </div>
 27 |     </div>
 28 | 
 29 |     <div class="content">
 30 |         <h2>About</h2>
 31 |         <p>Contact us for more information</p>
 32 |     </div>
 33 | -->
 34 |     <div class="AI">
 35 |         <!--navigation -->
 36 |         <header>
 37 |             <div id="brand"><a href="/">AI.TECH</a></div>
 38 |             <nav>
 39 |                 <ul>
 40 |                     <li><a href="/home">Home</a></li>
 41 |                     <li><a href="./About.html">About Us</a></li>
 42 |                     <li><a href="./service.html">Services</a></li>
 43 |                     <li><a href="./page.html">Pages</a></li>
 44 |                     <li><a href="./contact.html">Contact Us</a></li>
 45 |                     <!--  <li id="login"><a href="/logi
 46 |                           <li><a href="/about">About</a></li>n" >Login</a></li>
 47 |               <li id="signup"><a href="/signup">Signup</a></li>-->
 48 |                 </ul>
 49 |             </nav>
 50 |             <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
 51 |                 <div class="bar1"></div>
 52 |                 <div class="bar2"></div>
 53 |                 <div class="bar3"></div>
 54 |                 <ul class="mobile-menu">
 55 |                     <li><a href="/home">Home</a></li>
 56 |                     <li><a href="./About.html">About Us</a></li>
 57 |                     <li><a href="./service.html">Services</a></li>
 58 |                     <li><a href="./page.html">Pages</a></li>
 59 |                     <li><a href="./contact.html">Contact Us</a></li>
 60 |                     <!--   <li id="login"><a href="/login" >Login</a></li>
 61 |               <li id="signup"><a href="/signup">Signup</a></li>-->
 62 |                 </ul>
 63 |             </div>
 64 |         </header>
 65 | 
 66 |         <div class="container">
 67 |             <img src="https://img.freepik.com/premium-photo/robot-are-studio-room-with-copyspace_37416-85.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais"
 68 |                 alt="Responsive Image" class="responsive-image">
 69 |         </div>
 70 |         <div class="laphome">
 71 |             <img src="https://img.freepik.com/premium-photo/robot-are-studio-room-with-copyspace_37416-85.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais"
 72 |                 alt="Responsive Image">
 73 |         </div>
 74 | 
 75 |         <div class="home" id="Home">
 76 |             <div class="slicker" id="slicker">
 77 |                 <button class="ai-btn">
 78 |                     <p>AI.Tech</p>
 79 |                 </button>
 80 |                 <h1>Artificial Intelligence for Your Business</h1>
 81 |                 <p class="para">
 82 |                     Integrating AI into businesses enhances efficiency and productivity by automating tasks, analyzing
 83 |                     vast amounts of data for insights, and personalizing customer experiences </p>
 84 |                 <button class="read-btn">
 85 |                     <p>Read More</p>
 86 |                 </button>
 87 |                 <button class="contact-btn">
 88 |                     <p>Contact Us</p>
 89 |                 </button>
 90 |             </div>
 91 |         </div>
 92 | 
 93 |         <!--ABOUT US-->
 94 |         <div class="about" id="ABOUT">
 95 |             <div class="animation-container">
 96 |                 <div class="animation-section">
 97 |                     <img src="https://img.freepik.com/free-photo/robot-building-snowman_1048-4268.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais"
 98 |                         alt="Animation">
 99 |                 </div>
100 |             </div>
101 |             <div class="about-details">
102 |                 <button class="abtus-btn">About US</button>
103 |                 <h1>We Make Your Business Smarter with Artificial Intelligence</h1>
104 |                 <p>
105 |                     AI in business enhances efficiency through automation, streamlining operations, and data analysis,
106 |                     leading to informed decision-making. It optimizes processes, minimizes errors, and scales
107 |                     operations, reducing costs and increasing productivity. </p>
108 |                 <p>AI in business automates tasks, analyzes data, and personalizes experiences, enhancing efficiency and
109 |                     decision-making to drive growth and competitiveness</p>
110 |                 <div class="points">
111 |                     <div class="p1">
112 |                         <div class="p">
113 |                             <i class="fa-solid fa-check"></i>
114 |                             <p>Award Winning</p>
115 |                         </div>
116 |                         <div class="p">
117 |                             <i class="fa-solid fa-check"></i>
118 |                             <p>Professional Staff</p>
119 |                         </div>
120 |                     </div>
121 |                     <div class="p2">
122 |                         <div class="p">
123 |                             <i class="fa-solid fa-check"></i>
124 |                             <p>Award Winning</p>
125 |                         </div>
126 |                         <div class="p">
127 |                             <i class="fa-solid fa-check"></i>
128 |                             <p>Professional Staff</p>
129 |                         </div>
130 |                     </div>
131 |                 </div>
132 |                 <div class="icons">
133 |                     <button class="r-btn">Read More</button>
134 |                     <i class="fa-brands fa-facebook-f"></i>
135 |                     <i class="fa-brands fa-twitter"></i>
136 |                     <i class="fa-brands fa-square-instagram"></i>
137 |                     <i class="fa-brands fa-linkedin"></i>
138 |                 </div>
139 |             </div>
140 |         </div>
141 |         <!--Services-->
142 |         <div class="service" id="SERVICES">
143 |             <div class="service-detail">
144 |                 <button class="ser-btn">Our Services</button>
145 |                 <h1>Our Excellent AI Solutions for Your Business</h1>
146 |                 <p>Streamline operations and boost efficiency with our cutting-edge AI solutions tailored to your
147 |                     business needs.
148 |                     Harness the power of advanced algorithms and machine learning to drive innovation and stay ahead in
149 |                     today's competitive landscape</p>
150 |                 <button class="read-btn">Read More</button>
151 |             </div>
152 | 
153 |             <div class="service-card">
154 |                 <div class="row1">
155 |                     <div class="card">
156 |                         <i class="fa-solid fa-robot"></i>
157 |                         <h2>Robotic Automation</h2>
158 |                         <p>Robotic animation blends mechanical precision with digital artistry to bring machines to life
159 |                             through movement and expression.</p>
160 |                         <button class="readmore-btn">
161 |                             <h6>Read More</h6>
162 |                         </button>
163 | 
164 |                     </div>
165 |                     <div class="card">
166 |                         <i class="fa-solid fa-graduation-cap"></i>
167 |                         <h2>Education & Science</h2>
168 |                         <p>Research and science in AI drive the relentless pursuit of understanding, innovation, and
169 |                             ethical advancement in artificial intelligence technologies.</p>
170 |                         <button class="readmore-btn">
171 |                             <h6>Read More</h6>
172 |                         </button>
173 |                     </div>
174 |                 </div>
175 | 
176 |                 <div class="row2">
177 |                     <div class="card1">
178 |                         <i class="fa-solid fa-power-off"></i>
179 |                         <h2>Machine learning</h2>
180 |                         <p>
181 |                             Machine learning involves algorithms enabling computers to learn from data, identify
182 |                             patterns, and make predictions, driving innovation across various industries.</p>
183 |                         <button class="readmore-btn" id="readmore-btn">
184 |                             <h6>Read More</h6>
185 |                         </button>
186 | 
187 |                     </div>
188 |                     <div class="card1">
189 |                         <i class="fa-solid fa-brain"></i>
190 |                         <h2>Predictive Analysis</h2>
191 |                         <p> Predictive analysis utilizes data to forecast future outcomes, informing decision-making and
192 |                             strategy across industries effectively.</p>
193 |                         <button class="readmore-btn">
194 |                             <h6>Read More</h6>
195 |                         </button>
196 |                     </div>
197 |                 </div>
198 |             </div>
199 |         </div>
200 |         <!--choose us-->
201 |         <div class="choose-us" id="choose-us">
202 |             <div class="c-detail">
203 |                 <button class="choose-btn">Why Choose Us</button>
204 |                 <h1 class="head1">We're Best in AI Industry with 10 Years of Experience</h1>
205 |                 <p>We are industry leaders in AI with a decade of unparalleled expertise and innovation. Leading the AI
206 |                     industry with a decade of groundbreaking innovations and technological advancements</p>
207 |                 <div class="tic">
208 |                     <i class="fa-solid fa-check"></i>
209 |                     <p>Pioneering advancements</p>
210 |                 </div>
211 |                 <div class="tic">
212 |                     <i class="fa-solid fa-check"></i>
213 |                     <p>Proven track record</p>
214 |                 </div>
215 |                 <div class="tic">
216 |                     <i class="fa-solid fa-check"></i>
217 |                     <p>Expertise-driven solutions</p>
218 |                 </div>
219 |             </div>
220 |             <div class="c-img" id="c-img">
221 |                 <img src="https://img.freepik.com/premium-photo/white-futuristic-cartoon-toy-robot-white-background-3d-rendering_476612-15065.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais"
222 |                     alt="img1">
223 |             </div>
224 | 
225 |         </div>
226 | 
227 |         <div class="case-study" id="case-study">
228 |             <button class="case-study-btn">Case Study</button>
229 |             <h1>Explore Our Recent AI<br> Case Studies</h1>
230 |             <div class="cs-card">
231 |                 <div class="card-one">
232 |                     <button class="head-btn">Robotic Automation</button>
233 |                     <h2>Automating tasks through robotics for efficiency and precision</h2>
234 |                     <button class="round"><i class="fa-solid fa-arrow-right"></i></button>
235 |                 </div>
236 |                 <div class="card-two">
237 |                     <button class="head-btn">Machine Learning</button>
238 |                     <h2>Harnessing data to enable intelligent decision-making and predictions</h2>
239 |                     <button class="round"><i class="fa-solid fa-arrow-right"></i></button>
240 | 
241 |                 </div>
242 |                 <div class="card-three">
243 |                     <button class="head-btn">Predictive Analysis</button>
244 |                     <h2>Analyzing data to anticipate future outcomes and trends</h2>
245 |                     <button class="round"><i class="fa-solid fa-arrow-right"></i></button>
246 |                 </div>
247 |             </div>
248 |         </div>
249 | 
250 |         <div class="question" id="question">
251 |             <button>Popular FAQs</button>
252 |             <h1>Frequently Asked <br>Questions</h1>
253 |             <div class="question-box">
254 |                 <div class="left-questions">
255 |                     <div class="ques" onclick="toggleAnswer('answer1')">How to build a website?</div>
256 |                     <div id="answer1" class="answer">
257 |                         Using the HTML, CSS and javascript we will mostly cover our website
258 |                     </div>
259 |                     <div class="ques" onclick="toggleAnswer('answer2')">How long it will take to get a new website?
260 |                     </div>
261 |                     <div id="answer2" class="answer">
262 |                         Depending upon the need of the customers we will detect the time period to finish the design
263 |                     </div>
264 |                     <div class="ques" onclick="toggleAnswer('answer3')">Do you creat only HTML website?</div>
265 |                     <div id="answer3" class="answer">
266 |                         It is not like that with the help of HTML,CSS & JS we will creat your website for better
267 |                         attraction and features
268 |                     </div>
269 |                     <div class="ques" onclick="toggleAnswer('answer4')">Will my website will be mobile-friendly?
270 |                     </div>
271 |                     <div id="answer4" class="answer">
272 |                         Of course, we will make your website that will be suitable for mobile, laptops, pc's & also for
273 |                         tablets
274 |                     </div>
275 |                 </div>
276 |                 <div class="right-questions">
277 |                     <div class="ques" onclick="toggleAnswer('answer5')">How to build a website?</div>
278 |                     <div id="answer5" class="answer">
279 |                         Using the HTML, CSS and javascript we will mostly cover our website
280 |                     </div>
281 |                     <div class="ques" onclick="toggleAnswer('answer6')">How long it will take to get a new website?
282 |                     </div>
283 |                     <div id="answer6" class="answer">
284 |                         Depending upon the need of the customers we will detect the time period to finish the design
285 |                     </div>
286 |                     <div class="ques" onclick="toggleAnswer('answer7')">Do you creat only HTML website?</div>
287 |                     <div id="answer7" class="answer">
288 |                         It is not like that with the help of HTML,CSS & JS we will creat your website for better
289 |                         attraction and features
290 |                     </div>
291 |                     <div class="ques" onclick="toggleAnswer('answer8')">Will my website will be mobile-friendly?
292 |                     </div>
293 |                     <div id="answer8" class="answer">
294 |                         Of course, we will make your website that will be suitable for mobile, laptops, pc's & also for
295 |                         tablets
296 |                     </div>
297 |                 </div>
298 |             </div>
299 |         </div>
300 | 
301 |         <div class="our-team" id="our-team">
302 |             <div class="team-detail">
303 |                 <button class="team-btn">Our Team</button>
304 |                 <h1>Meet Our Experienced Team Members</h1>
305 |                 <p> AI Specialist adept at ML, NLP, and CV. Drives innovation, problem-solving, and strategic AI
306 |                     implementation. Strong collaborator and analytical thinker.</p>
307 |                 <button class="read-btn">Read More</button>
308 |             </div>
309 |             <div class="team-right-side">
310 |                 <div class="card">
311 |                     <img src="https://media.gettyimages.com/id/1198044349/photo/smiling-mature-male-ceo-with-arms-crossed.jpg?s=612x612&w=0&k=20&c=hJ1WVNJxdMImxYpKoRyUvTltP7U4974GgsVOloI8xZ4="
312 |                         alt="img1">
313 |                     <h2>Boris Johnson</h2>
314 |                     <p>Founder & CEO</p>
315 |                     <div class="icon">
316 |                         <i class="fa-brands fa-facebook-f"></i>
317 |                         <i class="fa-brands fa-twitter"></i>
318 |                         <i class="fa-brands fa-square-instagram"></i>
319 |                         <i class="fa-brands fa-linkedin"></i>
320 |                     </div>
321 |                 </div>
322 |                 <div class="card">
323 |                     <img src="https://media.istockphoto.com/id/1210318875/photo/portrait-of-mature-businessman-at-modern-office.jpg?s=612x612&w=0&k=20&c=iT6I5-1WIzRwQ4ioaUQ9ErOm7siE9nD0pbVC6kq0M_g="
324 |                         alt="img2">
325 |                     <h2>Kate Winslet</h2>
326 |                     <p>Co Founder</p>
327 |                     <div class="icon">
328 |                         <i class="fa-brands fa-facebook-f"></i>
329 |                         <i class="fa-brands fa-twitter"></i>
330 |                         <i class="fa-brands fa-square-instagram"></i>
331 |                         <i class="fa-brands fa-linkedin"></i>
332 |                     </div>
333 |                 </div>
334 | 
335 |                 <div class="card">
336 |                     <img src="https://media.istockphoto.com/id/1182092901/photo/confident-and-successful-young-adult-indian-businesswoman-in-white-suit-crossed-arms-on-chest.jpg?s=612x612&w=0&k=20&c=46UGMPGipOuPXxG515E_AA5vk1cJvc6IvnChZ94zL0k="
337 |                         alt="img3">
338 |                     <h2>Cody Gardner</h2>
339 |                     <p>Executive Manager</p>
340 |                     <div class="icon">
341 |                         <i class="fa-brands fa-facebook-f"></i>
342 |                         <i class="fa-brands fa-twitter"></i>
343 |                         <i class="fa-brands fa-square-instagram"></i>
344 |                         <i class="fa-brands fa-linkedin"></i>
345 |                     </div>
346 |                 </div>
347 |                 <div class="card">
348 |                     <img src="https://media.istockphoto.com/id/1934527441/photo/portrait-of-mid-aged-businessman-standing-at-the-office.jpg?s=612x612&w=0&k=20&c=u3D7JaRHsEQjC_f1F27j39YgzRcxTwszGklMd3Vwb34="
349 |                         alt="img4">
350 |                     <h2>Adam Crew</h2>
351 |                     <p>Project Manager</p>
352 |                     <div class="icon">
353 |                         <i class="fa-brands fa-facebook-f"></i>
354 |                         <i class="fa-brands fa-twitter"></i>
355 |                         <i class="fa-brands fa-square-instagram"></i>
356 |                         <i class="fa-brands fa-linkedin"></i>
357 |                     </div>
358 |                 </div>
359 |             </div>
360 |         </div>
361 | 
362 | 
363 |         
364 |         <div class="footer1" id="footer1">
365 |             <div class="f-detail">
366 |                 <button>Newsletter</button>
367 |                 <h1>Let's subscribe the newsletter</h1>
368 |                 <input type="email" placeholder="Enter Your Mail">
369 |                 <i class="fa-brands fa-telegram"></i>
370 |                 <h3>We will contact you shortly..</h3>
371 |             </div>
372 |         </div>
373 |         <div class="footer2">
374 |             <div class="container1" id="container1">
375 |                 <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d29ybGR8ZW58MHx8MHx8fDA%3D"
376 |                  id="image"  class="image" alt="imag1">
377 | 
378 |             </div>
379 |           
380 |             <div class="divs" id="divs">
381 |                 
382 |                 <div class="div1">
383 |                     <h1>AI.Tech</h1>
384 |                     <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum et tempor sit. Aliqu diam amet diam et
385 |                         eos
386 |                         labore. Clita erat ipsum et lorem et sit, sed stet no labore lorem sit. Sanctus clita duo justo
387 |                         et
388 |                         tempor</p>
389 |                 </div>
390 |                 <div class="div2">
391 |                     <h2>Get in Touch</h2>
392 |                     <i class="fa-solid fa-location-dot"></i>123 Street, New York, USA <br>
393 |                     <i class="fa-solid fa-phone"></i>+012 345 67890 <br>
394 |                     <i class="fa-solid fa-envelope"></i>info@example.com <br>
395 |                     <div class="icon">
396 |                         <i class="fa-brands fa-twitter"></i>
397 |                         <i class="fa-brands fa-facebook-f"></i>
398 |                         <i class="fa-brands fa-youtube"></i>
399 |                         <i class="fa-brands fa-instagram"></i>
400 |                         <i class="fa-brands fa-linkedin-in"></i>
401 |                     </div>
402 |                 </div>
403 |                 <div class="div3">
404 |                     <h2>Popular Link</h2>
405 |                     <i class="fa-solid fa-greater-than"></i> About Us <br>
406 |                     <i class="fa-solid fa-greater-than"></i> Contact Us <br>
407 |                     <i class="fa-solid fa-greater-than"></i> Privacy Policy <br>
408 |                     <i class="fa-solid fa-greater-than"></i> Terms & Condition <br>
409 |                     <i class="fa-solid fa-greater-than"></i> Career<br>
410 |                 </div>
411 |                 <div class="div4">
412 |                     <h2>Our Services</h2>
413 |                     <i class="fa-solid fa-greater-than"></i> Robotic Automation <br>
414 |                     <i class="fa-solid fa-greater-than"></i> Machiene Learning<br>
415 |                     <i class="fa-solid fa-greater-than"></i> Predective Analysis <br>
416 |                     <i class="fa-solid fa-greater-than"></i> Data Science <br>
417 |                     <i class="fa-solid fa-greater-than"></i> Robot Technology <br>
418 |                 </div>
419 |             </div>
420 | 
421 |         </div>
422 |         <div class="bottom-footer" id="bottom-footer"> 
423 |             <p>© <span>Your Site Name</span>, All Right Reserved. Designed By <span>Sanjai</span> Distributed By
424 |                 ThemeWagon</p>
425 |             <div class="anker">
426 |                 <a href="#Home">Home</a>
427 |                 <a href="#">Cookies</a>
428 |                 <a href="#">Help</a>
429 |                 <a href="#">FAQs</a>
430 |             </div>
431 |         </div>
432 | 
433 | 
434 |     </div>
435 | 
436 | </body>
437 | 
438 | </html>


--------------------------------------------------------------------------------
/test/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Contact</title>
  8 |     <script src="https://kit.fontawesome.com/7bb075a920.js" crossorigin="anonymous"></script>
  9 | 
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |     <style>
 15 |         /*navigation*/
 16 |         header a {
 17 |             text-decoration: none;
 18 |         }
 19 | 
 20 |         header {
 21 |             padding: 0 70px;
 22 |             background-color: #1d1f1d;
 23 |             height: 60px;
 24 |             display: flex;
 25 |             justify-content: space-between;
 26 |         }
 27 | 
 28 |         #brand {
 29 |             font-weight: bold;
 30 |             font-size: 25px;
 31 |             display: flex;
 32 |             border: 0px solid white;
 33 |             align-items: center;
 34 |         }
 35 | 
 36 |         #brand a {
 37 |             color: #f9f9f9;
 38 |         }
 39 | 
 40 |         ul {
 41 |             list-style: none;
 42 |             height: 100%;
 43 |             display: flex;
 44 |             align-items: center;
 45 |             justify-content: space-around;
 46 |         }
 47 | 
 48 |         ul a {
 49 |             color: grey;
 50 |         }
 51 | 
 52 |         ul li {
 53 |             padding: 5px;
 54 |             margin-left: 50px;
 55 | 
 56 |         }
 57 | 
 58 |         ul li:hover {
 59 |             transform: scale(1.1);
 60 |             transition: 0.3s;
 61 |             background-color: red;
 62 |             border-radius: 10px;
 63 | 
 64 |         }
 65 | 
 66 |         /*
 67 |   #login,
 68 |   #signup {
 69 |     border-radius: 5px;
 70 |     padding: 5px 8px;
 71 |   }
 72 |   
 73 |   #login {
 74 |     border: 1px solid #498afb;
 75 |   }
 76 |   
 77 |   #signup {
 78 |     border: 1px solid #ff3860;
 79 |   }
 80 |   
 81 |   #signup a {
 82 |     color: #ff3860;
 83 |   }
 84 |   
 85 |   #login a {
 86 |     color: #498afb;
 87 |   }
 88 |   */
 89 |         #hamburger-icon {
 90 |             margin: auto 0;
 91 |             display: none;
 92 |             cursor: pointer;
 93 |         }
 94 | 
 95 |         #hamburger-icon div {
 96 |             width: 35px;
 97 |             height: 3px;
 98 |             background-color: white;
 99 |             margin: 6px 0;
100 |             transition: 0.4s;
101 |         }
102 | 
103 |         .open .bar1 {
104 |             -webkit-transform: rotate(-45deg) translate(-6px, 6px);
105 |             transform: rotate(-45deg) translate(-6px, 6px);
106 |         }
107 | 
108 |         .open .bar2 {
109 |             opacity: 0;
110 |         }
111 | 
112 |         .open .bar3 {
113 |             -webkit-transform: rotate(45deg) translate(-6px, -8px);
114 |             transform: rotate(45deg) translate(-6px, -8px);
115 |         }
116 | 
117 |         .open .mobile-menu {
118 |             display: flex;
119 |             flex-direction: column;
120 |             align-items: center;
121 |             padding-top: 20px;
122 |             justify-content: flex-start;
123 |             height: max-content;
124 |         }
125 | 
126 |         .mobile-menu {
127 |             display: none;
128 |             position: absolute;
129 |             top: 50px;
130 |             left: 0;
131 |             height: calc(100vh - 50px);
132 |             width: 100%;
133 |             backdrop-filter: blur(10px);
134 |             z-index: 1;
135 |         }
136 | 
137 |         .mobile-menu li {
138 |             margin-bottom: 10px;
139 |         }
140 | 
141 |         @media only screen and (max-width: 600px) {
142 |             .body {
143 |                 overflow: hidden;
144 |             }
145 | 
146 |             header nav {
147 |                 display: none;
148 |             }
149 | 
150 |             #hamburger-icon {
151 |                 display: block;
152 |             }
153 |         }
154 | 
155 | 
156 |         @media only screen and (max-width: 600px) {
157 | 
158 |             #our-team {
159 |                 background-color: #7F8487;
160 |                 height: 1900px;
161 |             }
162 | 
163 |             .our-team .team-detail {
164 |                 padding-top: 30px;
165 |                 width: 350px;
166 |                 margin-left: 15px;
167 |                 border: 0px solid red;
168 |             }
169 | 
170 |             .our-team .team-detail h1 {
171 |                 font-size: 20px;
172 |                 width: 350px;
173 |             }
174 | 
175 |             .our-team .team-detail .read-btn {
176 |                 padding: 7px;
177 |             }
178 | 
179 |             #our-team .team-right-side {
180 |                 display: flex;
181 |                 flex-direction: column;
182 |                 position: absolute;
183 |                 left: 0px;
184 |                 top: 330px;
185 |             }
186 | 
187 |             #our-team .team-right-side .card {
188 |                 width: 300px;
189 |                 height: 350px;
190 |                 margin-left: 40px;
191 |             }
192 | 
193 |             #our-team .team-right-side .card .icon {
194 |                 position: relative;
195 |                 left: -70px;
196 |                 top: -250px;
197 |                 display: flex;
198 |                 width: max-content;
199 |                 flex-direction: column;
200 |             }
201 | 
202 |             #our-team .team-right-side .card .icon i {
203 |                 margin-bottom: 10px;
204 |             }
205 | 
206 |             /*footer2*/
207 |             #container1 {
208 |                 width: 100%;
209 |                 /* Ensure container takes full width */
210 |                 /* Adjust as per your layout */
211 |                 height: 1180px;
212 |                 /* Let height adjust based on aspect ratio */
213 |                 overflow: hidden;
214 |                 /* Ensure image doesn't overflow container */
215 |                 position: relative;
216 |                 /* Needed for absolute positioning of image */
217 |             }
218 | 
219 |             #image {
220 |                 width: 100%;
221 |                 /* Take full width of container */
222 |                 height: 100%;
223 |                 /* Take full height of container */
224 |                 object-fit: fill;
225 |             }
226 | 
227 |             .footer2 #divs {
228 |                 position: relative;
229 |                 margin-top: -1100px;
230 |                 border: 0px solid red;
231 |             }
232 | 
233 |             #divs {
234 |                 display: flex;
235 |                 flex-direction: column;
236 |             }
237 | 
238 |             #divs .div1 {
239 |                 margin-top: -60px;
240 |                 margin-left: 40px;
241 |             }
242 | 
243 |             #divs .div2 {
244 |                 margin-top: -70px;
245 |                 margin-left: 40px;
246 |             }
247 | 
248 |             #divs .div2 .icon {
249 |                 margin-top: 10px;
250 |             }
251 | 
252 |             #divs .div3 {
253 |                 margin-top: -20px;
254 |                 margin-left: 40px;
255 |             }
256 | 
257 |             #divs .div4 {
258 |                 margin-top: 30px;
259 |                 margin-left: 40px;
260 |             }
261 | 
262 |             .bottom-footer {
263 |                 display: flex;
264 |                 flex-direction: column;
265 |             }
266 | 
267 |             #bottom-footer p {
268 |                 margin-left: 0px;
269 |                 margin-top: -30px;
270 |                 text-align: center;
271 |                 border: px solid violet;
272 |             }
273 | 
274 |             #bottom-footer .anker {
275 |                 display: flex;
276 |                 margin-left: 50px;
277 |                 margin-top: 50px;
278 |             }
279 | 
280 |         }
281 | 
282 |         * {
283 |             padding: 0px;
284 |             margin: 0px;
285 |             box-sizing: border-box;
286 |         }
287 | 
288 |         /*our team*/
289 | 
290 |         /*scrolling appear */
291 |         .our-team {
292 |             opacity: 0;
293 |             padding-top: 0px;
294 |             transform: translateY(300px);
295 |             transition: opacity 3s, transform 0.9s;
296 |         }
297 | 
298 |         .our-team.show {
299 |             opacity: 1;
300 |             transform: translateY(0);
301 |             transform: 5s;
302 |         }
303 | 
304 |         /*inside details left side of our team*/
305 | 
306 |         .our-team {
307 |             width: 100%;
308 |             height: 900px;
309 |             display: flex;
310 |             flex-wrap: wrap;
311 |             background-color: #7F8487;
312 |         }
313 | 
314 |         .our-team button {
315 |             cursor: pointer;
316 |         }
317 | 
318 |         .team-detail {
319 |             width: 38%;
320 |             padding-top: 200px;
321 |             margin-left: 40px;
322 |         }
323 | 
324 |         .team-detail .team-btn {
325 |             width: max-content;
326 |             height: max-content;
327 |             padding: 7px;
328 |             border-radius: 20px;
329 |             margin-bottom: 20px;
330 |         }
331 | 
332 |         .team-detail h1 {
333 |             margin-bottom: 20px;
334 |             font-size: 40px;
335 |         }
336 | 
337 |         .team-detail p {
338 |             font-size: 18px;
339 |             margin-bottom: 20px;
340 |         }
341 | 
342 |         .team-detail .read-btn {
343 |             width: max-content;
344 |             height: max-content;
345 |             padding: 15px;
346 |             border-radius: 20px;
347 |             margin-bottom: 20px;
348 |             font-size: 20px;
349 |             background-color: blue;
350 |             border: 0px;
351 |             color: white;
352 |             -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
353 |         }
354 | 
355 |         .team-right-side {
356 |             height: 700px;
357 |             width: 50%;
358 |             position: absolute;
359 |             left: 600px;
360 |             top: 70px;
361 |         }
362 | 
363 |         .our-team .team-right-side .card {
364 |             width: 350px;
365 |             height: 400px;
366 |             border: 1px solid #fdf8f8;
367 |             border-radius: 20px;
368 |             padding: 0px;
369 |             box-sizing: border-box;
370 |             background-color: aliceblue;
371 |             -webkit-animation-duration: .5s;
372 |             animation-duration: 1s;
373 |         }
374 | 
375 |         .our-team .team-right-side .card:hover {
376 |             border: 2px solid blue;
377 |             transition: .5s;
378 |         }
379 | 
380 |         .team-right-side {
381 |             display: grid;
382 |             grid-template-columns: repeat(2, 1fr);
383 |             /* Two columns */
384 |             gap: 20px;
385 |         }
386 | 
387 |         .team-right-side .card img {
388 |             height: 200px;
389 |             width: 200px;
390 |             margin-left: 75px;
391 |             background-position: center;
392 |             margin-top: 20px;
393 |             border-radius: 50%;
394 |         }
395 | 
396 |         .team-right-side .card h2 {
397 |             margin-top: 20px;
398 |             margin-bottom: 10px;
399 |             text-align: center;
400 |             font-size: 25px;
401 |         }
402 | 
403 |         .team-right-side .card p {
404 |             text-align: center;
405 |         }
406 | 
407 |         .team-right-side .card .icon {
408 |             margin-left: 80px;
409 |             margin-top: 25px;
410 |         }
411 | 
412 |         .team-right-side .card .icon i {
413 |             height: 40px;
414 |             width: 40px;
415 |             background-color: rgb(25, 0, 255);
416 |             text-align: center;
417 |             border-radius: 50%;
418 |             line-height: 40px;
419 |             color: white;
420 |             margin-left: 4px;
421 |         }
422 | 
423 |         .team-right-side .card .icon i:hover {
424 |             background-color: white;
425 |             color: rgb(0, 0, 0);
426 |             transition: 1s;
427 |             border: .5px solid black;
428 |         }
429 | 
430 |         .team-right-side .card:hover {
431 |             cursor: pointer;
432 |             animation-name: bounce;
433 |             -moz-animation-name: bounce;
434 |         }
435 | 
436 |         /*footer*/
437 | 
438 |         .footer2 .divs {
439 |             position: relative;
440 |             display: flex;
441 |             margin-top: -550px;
442 |             border: 0px solid red;
443 |             z-index: 2;
444 |         }
445 | 
446 | 
447 |         .footer2 .div1 {
448 |             border: 0px solid white;
449 |             width: 300px;
450 |             height: 300px;
451 |             color: white;
452 |             margin-top: 100px;
453 |             margin-left: 40px;
454 |         }
455 | 
456 |         .footer2 h1 {
457 |             font-size: 40px;
458 |             margin-bottom: 20px;
459 | 
460 |         }
461 | 
462 |         .footer2 p {
463 |             font-size: 18px;
464 |             color: rgb(182, 180, 180);
465 |         }
466 | 
467 |         .footer2 .div2 {
468 |             border: 0px solid white;
469 |             width: 290px;
470 |             height: 250px;
471 |             color: rgb(182, 180, 180);
472 |             margin-top: 105px;
473 |             margin-left: 50px;
474 | 
475 |         }
476 | 
477 |         .footer2 .div2 h2 {
478 |             margin-bottom: 28px;
479 |             color: white;
480 |         }
481 | 
482 |         .footer2 .div2 i {
483 |             margin-bottom: 20px;
484 |             margin-right: 12px;
485 |             color: rgb(182, 180, 180);
486 |         }
487 | 
488 |         .footer2 .div2 .icon {
489 |             margin-top: 40px;
490 |         }
491 | 
492 |         .footer2 .div2 .icon i {
493 |             margin-left: 2px;
494 |             height: 40px;
495 |             width: 40px;
496 |             background-color: aqua;
497 |             text-align: center;
498 |             line-height: 40px;
499 |             border-radius: 50%;
500 |             background: transparent;
501 |             border: 1px solid grey;
502 |             color: rgb(182, 180, 180);
503 |         }
504 | 
505 |         .footer2 .div2 .icon i:hover {
506 |             color: white;
507 |             transition: 1s;
508 |         }
509 | 
510 |         .footer2 .div3 {
511 |             margin-top: 105px;
512 |             margin-left: 100px;
513 |             color: rgb(182, 180, 180);
514 |         }
515 | 
516 |         .footer2 .div3 i:hover {
517 |             color: white;
518 |             transition: .2s;
519 |         }
520 | 
521 |         .footer2 .div3 h2 {
522 |             color: white;
523 |             margin-bottom: 10px;
524 |         }
525 | 
526 |         .footer2 .div3 i {
527 |             margin-top: 20px;
528 |             margin-right: 10px;
529 |             color: rgb(182, 180, 180);
530 |         }
531 | 
532 |         .footer2 .div4 {
533 |             color: white;
534 |             height: 250px;
535 |             width: 250px;
536 |             border: 0px solid red;
537 |             margin-top: 105px;
538 |             margin-left: 0px;
539 |         }
540 | 
541 | 
542 |         .footer2 .div4 {
543 |             margin-top: 105px;
544 |             margin-left: 100px;
545 |             color: rgb(182, 180, 180);
546 |         }
547 | 
548 |         .footer2 .div4 h2 {
549 |             color: white;
550 |             margin-bottom: 10px;
551 |         }
552 | 
553 |         .footer2 .div4 i {
554 |             margin-top: 20px;
555 |             margin-right: 10px;
556 |             color: rgb(182, 180, 180);
557 |         }
558 | 
559 |         .bottom-footer {
560 |             display: flex;
561 |             color: grey;
562 |             width: 100%;
563 |             height: 50px;
564 |             background: transparent;
565 |             position: absolute;
566 |             margin-top: 100px;
567 |         }
568 | 
569 |         .bottom-footer p {
570 |             margin-left: 35px;
571 |         }
572 | 
573 |         .bottom-footer a {
574 |             color: grey;
575 |             margin-left: 20px;
576 |             text-decoration: none;
577 |         }
578 | 
579 |         .bottom-footer .anker {
580 |             margin-left: 450px;
581 |         }
582 | 
583 |         .bottom-footer a:hover {
584 |             color: white;
585 |             transition: .5s;
586 |         }
587 | 
588 |         .bottom-footer span {
589 |             text-decoration: underline;
590 |         }
591 | 
592 |         .footer2 {
593 |             opacity: 0;
594 |             padding-top: 0px;
595 |             transform: translateY(300px);
596 |             transition: opacity 3s;
597 |         }
598 | 
599 |         .footer2.show {
600 |             opacity: 1;
601 |             transform: translateY(0);
602 |             transform: 5s;
603 |         }
604 | 
605 |         .container1 {
606 |             width: 100%;
607 |             /* Ensure container takes full width */
608 |             /* Adjust as per your layout */
609 |             height: 600px;
610 |             /* Let height adjust based on aspect ratio */
611 |             overflow: hidden;
612 |             /* Ensure image doesn't overflow container */
613 |             position: relative;
614 |             /* Needed for absolute positioning of image */
615 |         }
616 | 
617 |         .image {
618 |             width: 180%;
619 |             /* Take full width of container */
620 |             height: 100%;
621 |             /* Take full height of container */
622 |             object-fit: fill;
623 |         }
624 |     </style>
625 | 
626 |     <header>
627 |         <div id="brand"><a href="/">AI.TECH</a></div>
628 |         <nav>
629 |             <ul>
630 |                 <li><a href="./index.html">Home</a></li>
631 |                 <li><a href="./About.html">About Us</a></li>
632 |                 <li><a href="./service.html">Services</a></li>
633 |                 <li><a href="./page.html">Pages</a></li>
634 |                 <li><a href="./contact.html">Contact Us</a></li>
635 |                 <!--  <li id="login"><a href="/logi
636 |                   <li><a href="/about">About</a></li>n" >Login</a></li>
637 |       <li id="signup"><a href="/signup">Signup</a></li>-->
638 |             </ul>
639 |         </nav>
640 |         <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
641 |             <div class="bar1"></div>
642 |             <div class="bar2"></div>
643 |             <div class="bar3"></div>
644 |             <ul class="mobile-menu">
645 |                 <li><a href="./index.html">Home</a></li>
646 |                 <li><a href="./About.html">About Us</a></li>
647 |                 <li><a href="./service.html">Services</a></li>
648 |                 <li><a href="./page.html">Pages</a></li>
649 |                 <li><a href="./contact.html">Contact Us</a></li>
650 |                 <!--   <li id="login"><a href="/login" >Login</a></li>
651 |       <li id="signup"><a href="/signup">Signup</a></li>-->
652 |             </ul>
653 |         </div>
654 |     </header>
655 |     <!--our team section-->
656 |     <div class="our-team" id="our-team">
657 |         <div class="team-detail">
658 |             <button class="team-btn">Our Team</button>
659 |             <h1>Meet Our Experienced Team Members</h1>
660 |             <p> AI Specialist adept at ML, NLP, and CV. Drives innovation, problem-solving, and strategic AI
661 |                 implementation. Strong collaborator and analytical thinker.</p>
662 |             <button class="read-btn">Read More</button>
663 |         </div>
664 |         <div class="team-right-side">
665 |             <div class="card">
666 |                 <img src="https://media.gettyimages.com/id/1198044349/photo/smiling-mature-male-ceo-with-arms-crossed.jpg?s=612x612&w=0&k=20&c=hJ1WVNJxdMImxYpKoRyUvTltP7U4974GgsVOloI8xZ4="
667 |                     alt="img1">
668 |                 <h2>Boris Johnson</h2>
669 |                 <p>Founder & CEO</p>
670 |                 <div class="icon">
671 |                     <i class="fa-brands fa-facebook-f"></i>
672 |                     <i class="fa-brands fa-twitter"></i>
673 |                     <i class="fa-brands fa-square-instagram"></i>
674 |                     <i class="fa-brands fa-linkedin"></i>
675 |                 </div>
676 |             </div>
677 |             <div class="card">
678 |                 <img src="https://media.istockphoto.com/id/1210318875/photo/portrait-of-mature-businessman-at-modern-office.jpg?s=612x612&w=0&k=20&c=iT6I5-1WIzRwQ4ioaUQ9ErOm7siE9nD0pbVC6kq0M_g="
679 |                     alt="img2">
680 |                 <h2>Kate Winslet</h2>
681 |                 <p>Co Founder</p>
682 |                 <div class="icon">
683 |                     <i class="fa-brands fa-facebook-f"></i>
684 |                     <i class="fa-brands fa-twitter"></i>
685 |                     <i class="fa-brands fa-square-instagram"></i>
686 |                     <i class="fa-brands fa-linkedin"></i>
687 |                 </div>
688 |             </div>
689 | 
690 |             <div class="card">
691 |                 <img src="https://media.istockphoto.com/id/1182092901/photo/confident-and-successful-young-adult-indian-businesswoman-in-white-suit-crossed-arms-on-chest.jpg?s=612x612&w=0&k=20&c=46UGMPGipOuPXxG515E_AA5vk1cJvc6IvnChZ94zL0k="
692 |                     alt="img3">
693 |                 <h2>Cody Gardner</h2>
694 |                 <p>Executive Manager</p>
695 |                 <div class="icon">
696 |                     <i class="fa-brands fa-facebook-f"></i>
697 |                     <i class="fa-brands fa-twitter"></i>
698 |                     <i class="fa-brands fa-square-instagram"></i>
699 |                     <i class="fa-brands fa-linkedin"></i>
700 |                 </div>
701 |             </div>
702 |             <div class="card">
703 |                 <img src="https://media.istockphoto.com/id/1934527441/photo/portrait-of-mid-aged-businessman-standing-at-the-office.jpg?s=612x612&w=0&k=20&c=u3D7JaRHsEQjC_f1F27j39YgzRcxTwszGklMd3Vwb34="
704 |                     alt="img4">
705 |                 <h2>Adam Crew</h2>
706 |                 <p>Project Manager</p>
707 |                 <div class="icon">
708 |                     <i class="fa-brands fa-facebook-f"></i>
709 |                     <i class="fa-brands fa-twitter"></i>
710 |                     <i class="fa-brands fa-square-instagram"></i>
711 |                     <i class="fa-brands fa-linkedin"></i>
712 |                 </div>
713 |             </div>
714 |         </div>
715 |     </div>
716 | 
717 |     <!--contact-->
718 |     <div class="footer2">
719 |         <div class="container1" id="container1">
720 |             <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d29ybGR8ZW58MHx8MHx8fDA%3D"
721 |                 id="image" class="image" alt="imag1">
722 |         </div>
723 | 
724 |         <div class="divs" id="divs">
725 |             <div class="div1">
726 |                 <h1>AI.Tech</h1>
727 |                 <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum et tempor sit. Aliqu diam amet diam et
728 |                     eos
729 |                     labore. Clita erat ipsum et lorem et sit, sed stet no labore lorem sit. Sanctus clita duo justo
730 |                     et
731 |                     tempor</p>
732 |             </div>
733 |             <div class="div2">
734 |                 <h2>Get in Touch</h2>
735 |                 <i class="fa-solid fa-location-dot"></i>123 Street, New York, USA <br>
736 |                 <i class="fa-solid fa-phone"></i>+012 345 67890 <br>
737 |                 <i class="fa-solid fa-envelope"></i>info@example.com <br>
738 |                 <div class="icon">
739 |                     <i class="fa-brands fa-twitter"></i>
740 |                     <i class="fa-brands fa-facebook-f"></i>
741 |                     <i class="fa-brands fa-youtube"></i>
742 |                     <i class="fa-brands fa-instagram"></i>
743 |                     <i class="fa-brands fa-linkedin-in"></i>
744 |                 </div>
745 |             </div>
746 |             <div class="div3">
747 |                 <h2>Popular Link</h2>
748 |                 <i class="fa-solid fa-greater-than"></i> About Us <br>
749 |                 <i class="fa-solid fa-greater-than"></i> Contact Us <br>
750 |                 <i class="fa-solid fa-greater-than"></i> Privacy Policy <br>
751 |                 <i class="fa-solid fa-greater-than"></i> Terms & Condition <br>
752 |                 <i class="fa-solid fa-greater-than"></i> Career<br>
753 |             </div>
754 |             <div class="div4">
755 |                 <h2>Our Services</h2>
756 |                 <i class="fa-solid fa-greater-than"></i> Robotic Automation <br>
757 |                 <i class="fa-solid fa-greater-than"></i> Machiene Learning<br>
758 |                 <i class="fa-solid fa-greater-than"></i> Predective Analysis <br>
759 |                 <i class="fa-solid fa-greater-than"></i> Data Science <br>
760 |                 <i class="fa-solid fa-greater-than"></i> Robot Technology <br>
761 |             </div>
762 |         </div>
763 | 
764 |     </div>
765 |     <div class="bottom-footer" id="bottom-footer">
766 |         <p>© <span>Your Site Name</span>, All Right Reserved. Designed By <span>Sanjai</span> Distributed By
767 |             ThemeWagon</p>
768 |         <div class="anker">
769 |             <a href="#Home">Home</a>
770 |             <a href="#">Cookies</a>
771 |             <a href="#">Help</a>
772 |             <a href="#">FAQs</a>
773 |         </div>
774 |     </div>
775 | 
776 |     <script>
777 |         window.addEventListener('scroll', function () {
778 |             var animationSection = document.querySelector('.our-team');
779 |             var sectionPosition = animationSection.getBoundingClientRect().top;
780 |             var screenPosition = window.innerHeight;
781 |             if (sectionPosition < screenPosition) {
782 |                 animationSection.classList.add('show');
783 |             }
784 |         });
785 | 
786 |         window.addEventListener('scroll', function () {
787 |             var animationSection = document.querySelector('.footer2');
788 |             var sectionPosition = animationSection.getBoundingClientRect().top;
789 |             var screenPosition = window.innerHeight;
790 |             if (sectionPosition < screenPosition) {
791 |                 animationSection.classList.add('show');
792 |             }
793 |         });
794 | 
795 |           //navbar for moblie and lap navgition bar
796 |   function toggleMobileMenu(menu) {
797 |     menu.classList.toggle('open');
798 | }
799 |     </script>
800 | </body>
801 | 
802 | </html>


--------------------------------------------------------------------------------
/test/page.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <script src="https://kit.fontawesome.com/7bb075a920.js" crossorigin="anonymous"></script>
  8 |     <title>Pages</title>
  9 | </head>
 10 | 
 11 | <body>
 12 |     <style>
 13 |         * {
 14 |             padding: 0;
 15 |             margin: 0;
 16 |             box-sizing: border-box;
 17 |             scroll-behavior: smooth;
 18 |         }
 19 | 
 20 |         /*navigation*/
 21 |         header a {
 22 |             text-decoration: none;
 23 |         }
 24 | 
 25 |         header {
 26 |             padding: 0 70px;
 27 |             background-color: #1d1f1d;
 28 |             height: 60px;
 29 |             display: flex;
 30 |             justify-content: space-between;
 31 |         }
 32 | 
 33 |         #brand {
 34 |             font-weight: bold;
 35 |             font-size: 25px;
 36 |             display: flex;
 37 |             border: 0px solid white;
 38 |             align-items: center;
 39 |         }
 40 | 
 41 |         #brand a {
 42 |             color: #f9f9f9;
 43 |         }
 44 | 
 45 |         ul {
 46 |             list-style: none;
 47 |             height: 100%;
 48 |             display: flex;
 49 |             align-items: center;
 50 |             justify-content: space-around;
 51 |         }
 52 | 
 53 |         ul a {
 54 |             color: grey;
 55 |         }
 56 | 
 57 |         ul li {
 58 |             padding: 5px;
 59 |             margin-left: 50px;
 60 | 
 61 |         }
 62 | 
 63 |         ul li:hover {
 64 |             transform: scale(1.1);
 65 |             transition: 0.3s;
 66 |             background-color: red;
 67 |             border-radius: 10px;
 68 | 
 69 |         }
 70 | 
 71 |         /*
 72 |       #login,
 73 |       #signup {
 74 |         border-radius: 5px;
 75 |         padding: 5px 8px;
 76 |       }
 77 |       
 78 |       #login {
 79 |         border: 1px solid #498afb;
 80 |       }
 81 |       
 82 |       #signup {
 83 |         border: 1px solid #ff3860;
 84 |       }
 85 |       
 86 |       #signup a {
 87 |         color: #ff3860;
 88 |       }
 89 |       
 90 |       #login a {
 91 |         color: #498afb;
 92 |       }
 93 |       */
 94 |         #hamburger-icon {
 95 |             margin: auto 0;
 96 |             display: none;
 97 |             cursor: pointer;
 98 |         }
 99 | 
100 |         #hamburger-icon div {
101 |             width: 35px;
102 |             height: 3px;
103 |             background-color: white;
104 |             margin: 6px 0;
105 |             transition: 0.4s;
106 |         }
107 | 
108 |         .open .bar1 {
109 |             -webkit-transform: rotate(-45deg) translate(-6px, 6px);
110 |             transform: rotate(-45deg) translate(-6px, 6px);
111 |         }
112 | 
113 |         .open .bar2 {
114 |             opacity: 0;
115 |         }
116 | 
117 |         .open .bar3 {
118 |             -webkit-transform: rotate(45deg) translate(-6px, -8px);
119 |             transform: rotate(45deg) translate(-6px, -8px);
120 |         }
121 | 
122 |         .open .mobile-menu {
123 |             display: flex;
124 |             flex-direction: column;
125 |             align-items: center;
126 |             padding-top: 20px;
127 |             justify-content: flex-start;
128 |             height: max-content;
129 |         }
130 | 
131 |         .mobile-menu {
132 |             display: none;
133 |             position: absolute;
134 |             top: 50px;
135 |             left: 0;
136 |             height: calc(100vh - 50px);
137 |             width: 100%;
138 |             backdrop-filter: blur(10px);
139 |             z-index: 1;
140 |         }
141 | 
142 |         .mobile-menu li {
143 |             margin-bottom: 10px;
144 |         }
145 | 
146 |         @media only screen and (max-width: 600px) {
147 |             .body {
148 |                 overflow: hidden;
149 |             }
150 | 
151 |             header nav {
152 |                 display: none;
153 |             }
154 | 
155 |             #hamburger-icon {
156 |                 display: block;
157 |             }
158 | 
159 | 
160 |             #choose-us {
161 |                 background-color: #fbfbfb;
162 |                 height: 880px;
163 |             }
164 | 
165 |             .choose-us {
166 |                 display: flex;
167 |                 flex-direction: column;
168 |                 margin-bottom: 0px;
169 |             }
170 | 
171 |             .choose-us .c-detail {
172 |                 margin-top: -50px;
173 |                 margin-left: -10px;
174 |             }
175 | 
176 |             .choose-us .c-detail p {
177 |                 width: 242px;
178 |             }
179 | 
180 |             .choose-us .c-detail .head1 {
181 |                 font-size: 20px;
182 |                 width: 330px;
183 |                 text-align: center;
184 | 
185 |             }
186 | 
187 |             .choose-us #c-img {
188 |                 border: 0px solid brown;
189 |             }
190 | 
191 |             .choose-us #c-img img {
192 |                 height: 370px;
193 |                 margin-top: 30px;
194 |                 margin-left: 40px;
195 |                 text-align: center;
196 |                 border: 0px solid red;
197 |                 width: 300px;
198 |                 border-radius: 50%;
199 |             }
200 | 
201 |             .choose-us .c-detail .tic {
202 |                 border: 0px solid violet;
203 |                 width: 300px;
204 |             }
205 | 
206 |             /*case study*/
207 | 
208 |             #case-study h1 {
209 |                 position: relative;
210 |                 font-size: 20px;
211 |                 top: 150px;
212 | 
213 |             }
214 | 
215 |             #case-study .case-study-btn {
216 |                 margin-left: -30px;
217 |             }
218 | 
219 |             .case-study {
220 |                 margin-bottom: 0px;
221 | 
222 |             }
223 | 
224 |             #case-study {
225 |                 background-color: #7F8487;
226 |                 height: 1680px;
227 |             }
228 | 
229 |             .cs-card {
230 |                 display: flex;
231 |                 flex-direction: column;
232 | 
233 |             }
234 | 
235 |             #case-study .cs-card .card-one {
236 |                 width: 300px;
237 |             }
238 | 
239 |             #case-study .cs-card .card-two {
240 |                 width: 300px;
241 |             }
242 | 
243 |             #case-study .cs-card .card-three {
244 |                 width: 300px;
245 |             }
246 | 
247 |             /*questions*/
248 | 
249 |             .question button {
250 |                 margin-left: -50px;
251 |             }
252 | 
253 |             #question h1 {
254 |                 font-size: 20px;
255 |             }
256 | 
257 |             .question {
258 |                 margin-bottom: 10px;
259 |             }
260 | 
261 |             /*our team*/
262 | 
263 | 
264 | 
265 |             #our-team {
266 |                 background-color: #7F8487;
267 |                 height: 1900px;
268 |             }
269 | 
270 |             .our-team .team-detail {
271 |                 padding-top: 30px;
272 |                 width: 350px;
273 |                 margin-left: 15px;
274 |                 border: 0px solid red;
275 |             }
276 | 
277 |             .our-team .team-detail h1 {
278 |                 font-size: 20px;
279 |                 width: 350px;
280 |             }
281 | 
282 |             .our-team .team-detail .read-btn {
283 |                 padding: 7px;
284 |             }
285 | 
286 |             #our-team .team-right-side {
287 |                 display: flex;
288 |                 flex-direction: column;
289 |                 position: absolute;
290 |                 left: 0px;
291 |                 top: 330px;
292 |             }
293 | 
294 |             #our-team .team-right-side .card {
295 |                 width: 300px;
296 |                 height: 350px;
297 |                 margin-left: 40px;
298 |             }
299 | 
300 |             #our-team .team-right-side .card .icon {
301 |                 position: relative;
302 |                 left: -70px;
303 |                 top: -250px;
304 |                 display: flex;
305 |                 width: max-content;
306 |                 flex-direction: column;
307 |             }
308 | 
309 |             #our-team .team-right-side .card .icon i {
310 |                 margin-bottom: 10px;
311 |             }
312 | 
313 |             /*footer1*/
314 | 
315 |             #footer1 h1 {
316 |                 font-size: larger;
317 |             }
318 | 
319 |             #footer1 input {
320 |                 width: 300px;
321 |             }
322 | 
323 |             #case-study .cs-card .card-one .round i {
324 |                 position: relative;
325 |                 top: -20px;
326 |             }
327 | 
328 |             #case-study .cs-card .card-two .round i {
329 |                 position: relative;
330 |                 top: -20px;
331 |             }
332 | 
333 | 
334 |         }
335 | 
336 | 
337 |         /*choose us*/
338 | 
339 |         .choose-us {
340 |             width: 100%;
341 |             height: 700px;
342 |             background-color: #fbfbfb;
343 |         }
344 | 
345 |         /*choose left side*/
346 | 
347 |         .choose-us .c-detail {
348 |             margin-left: 40px;
349 |             padding-top: 80px;
350 |             width: 50%;
351 |             height: 500px;
352 |         }
353 | 
354 |         .choose-us .c-detail h1 {
355 |             font-size: 40px;
356 |             margin-bottom: 20px;
357 |         }
358 | 
359 |         .c-detail .choose-btn {
360 |             padding: 8px;
361 |             border-radius: 20px;
362 |             margin-bottom: 25px;
363 |         }
364 | 
365 |         .c-detail p {
366 |             line-height: 25px;
367 |             margin-bottom: 20px;
368 |         }
369 | 
370 |         .c-detail .tic i {
371 |             height: 25px;
372 |             width: 25px;
373 |             background-color: black;
374 |             color: white;
375 |             border-radius: 50%;
376 |             text-align: center;
377 |             line-height: 25px;
378 |             margin-right: 20px;
379 |         }
380 | 
381 |         .c-detail .tic {
382 |             display: flex;
383 |         }
384 | 
385 |         /*rigth img*/
386 | 
387 |         .choose-us .c-img img {
388 |             height: 500px;
389 |             margin-top: 100px;
390 |             margin-left: 80px;
391 |             width: 400px;
392 |             border-radius: 30%;
393 |         }
394 | 
395 |         .choose-us {
396 |             display: flex;
397 |         }
398 | 
399 |         /* image showing option while scrolling*/
400 | 
401 |         .choose-us .c-img {
402 |             opacity: 0;
403 |             padding-top: 0px;
404 |             transform: translateY(300px);
405 |             transition: opacity 3s, transform 0.9s;
406 |         }
407 | 
408 |         .choose-us .c-img.show {
409 |             opacity: 1;
410 |             transform: translateY(0);
411 |             transform: 5s;
412 |         }
413 | 
414 |         /*case study*/
415 | 
416 |         .case-study {
417 |             height: 800px;
418 |             width: 100%;
419 |             background-color: #7F8487;
420 |         }
421 | 
422 |         .case-study .case-study-btn {
423 |             padding: 8px;
424 |             border-radius: 20px;
425 |             position: absolute;
426 |             left: 46%;
427 |             margin-top: 100px;
428 |         }
429 | 
430 |         .case-study h1 {
431 |             position: relative;
432 |             top: 18%;
433 |             font-size: 40px;
434 |             text-align: center;
435 |         }
436 | 
437 |         /*cas study cards*/
438 |         .case-study .cs-card {
439 |             display: flex;
440 |             gap: 20px;
441 |             width: 90%;
442 |             padding-top: 200px;
443 |             border: 0px solid red;
444 |             margin: auto;
445 |         }
446 | 
447 |         .case-study .cs-card .card-one {
448 |             height: 450px;
449 |             width: 400px;
450 |             border-radius: 20px;
451 |             background-color: blueviolet;
452 |             margin: auto;
453 |         }
454 | 
455 |         .case-study .cs-card .card-two {
456 |             height: 450px;
457 |             width: 400px;
458 |             border-radius: 20px;
459 |             background-color: blueviolet;
460 |             margin: auto;
461 |         }
462 | 
463 |         .case-study .cs-card .card-three {
464 |             height: 450px;
465 |             width: 400px;
466 |             border-radius: 20px;
467 |             background-color: blueviolet;
468 |             margin: auto;
469 |         }
470 | 
471 |         /* each card inner details */
472 | 
473 |         .case-study .card-one {
474 |             background-image: url('https://images.unsplash.com/photo-1547394765-185e1e68f34e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbXB1dGVyJTIwa2V5Ym9hcmR8ZW58MHx8MHx8fDA%3D');
475 |             background-repeat: no-repeat;
476 |             background-size: cover;
477 |             background-position: center;
478 |             position: relative;
479 |             padding-left: 20px;
480 |         }
481 | 
482 |         .case-study .card-two {
483 |             background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGFydGlmaWNpYWwlMjBpbnRlbGxpZ2VuY2V8ZW58MHx8MHx8fDA%3D');
484 |             background-repeat: no-repeat;
485 |             background-size: cover;
486 |             background-position: center;
487 |             padding-left: 20px;
488 |         }
489 | 
490 |         .case-study .card-three {
491 |             background-image: url('https://media.istockphoto.com/id/1818926612/photo/digital-brain-artificial-intelligence-virtual-cpu-concept.webp?b=1&s=170667a&w=0&k=20&c=WDA3v1LkC_two15LFinS5M0H4GxDl8T37B8kEKE8jNk=');
492 |             background-repeat: no-repeat;
493 |             background-size: cover;
494 |             background-position: center;
495 |             padding-left: 20px;
496 |         }
497 | 
498 |         .case-study .cs-card .head-btn {
499 |             margin-top: 250px;
500 |             margin-bottom: 20px;
501 |             border-radius: 20px;
502 |             padding: 8px;
503 |             background: transparent;
504 |             border: 1px solid white;
505 |             color: rgb(255, 255, 255);
506 |         }
507 | 
508 |         .case-study .cs-card h2 {
509 |             color: white;
510 |             margin-bottom: 0px;
511 |         }
512 | 
513 |         .case-study .cs-card .round {
514 |             font-size: 20px;
515 |             height: 35px;
516 |             width: 35px;
517 |             border-radius: 50%;
518 |             line-height: 35px;
519 |             position: relative;
520 |             top: 20px;
521 |             border: none;
522 |             background-color: transparent;
523 |             color: white;
524 |         }
525 | 
526 |         .case-study .cs-card .round i:hover {
527 |             cursor: pointer;
528 |         }
529 | 
530 |         /*questions*/
531 | 
532 |         .question {
533 |             height: 630px;
534 |             width: 100%;
535 |             background-color: #fbfbfb;
536 |             border: 0px solid red;
537 |         }
538 | 
539 |         .question button {
540 |             position: relative;
541 |             left: 47%;
542 |             top: 10%;
543 |             padding: 10px;
544 |             border-radius: 20px;
545 |         }
546 | 
547 |         .question h1 {
548 |             position: relative;
549 |             top: 12%;
550 |             text-align: center;
551 |             font-size: 40px;
552 |         }
553 | 
554 |         /*left questions*/
555 | 
556 |         .question .question-box .left-questions {
557 |             width: 45%;
558 |             border: 0px solid black;
559 |             position: relative;
560 |             top: 110px;
561 |             margin: auto;
562 |         }
563 | 
564 |         .question-box .left-questions .ques {
565 |             background-color: #e0d2d2;
566 |             padding: 20px;
567 |             margin-bottom: 15px;
568 |             border-radius: 10px;
569 |             cursor: pointer;
570 |             font-size: 18px;
571 |             transition: all 2s;
572 |         }
573 | 
574 |         .answer {
575 |             display: none;
576 |             padding: 10px;
577 |         }
578 | 
579 |         .question .question-box .right-questions {
580 |             width: 45%;
581 |             border: 0px solid black;
582 |             position: relative;
583 |             top: 110px;
584 |             margin: auto;
585 |         }
586 | 
587 |         .question-box .right-questions .ques {
588 |             background-color: #e0d2d2;
589 |             padding: 20px;
590 |             margin-bottom: 15px;
591 |             border-radius: 10px;
592 |             cursor: pointer;
593 |             font-size: 18px;
594 |         }
595 | 
596 |         .question-box {
597 |             display: flex;
598 |         }
599 | 
600 |         .question {
601 |             opacity: 0;
602 |             padding-top: 0px;
603 |             transform: translateY(300px);
604 |             transition: opacity 3s, transform 0.9s;
605 |         }
606 | 
607 |         .question.show {
608 |             opacity: 1;
609 |             transform: translateY(0);
610 |             transform: 5s;
611 |         }
612 | 
613 | 
614 | 
615 |         @keyframes bounce {
616 | 
617 |             0%,
618 |             100%,
619 |             20%,
620 |             50%,
621 |             80% {
622 |                 -webkit-transform: translateY(0);
623 |                 -ms-transform: translateY(0);
624 |                 transform: translateY(0)
625 |             }
626 | 
627 |             40% {
628 |                 -webkit-transform: translateY(-40px);
629 |                 -ms-transform: translateY(-40px);
630 |                 transform: translateY(-40px)
631 |             }
632 | 
633 |             60% {
634 |                 -webkit-transform: translateY(-15px);
635 |                 -ms-transform: translateY(-15px);
636 |                 transform: translateY(-15px)
637 |             }
638 |         }
639 | 
640 |         .footer1 {
641 |             background-image: url('https://img.freepik.com/premium-photo/robot-hand-hold-white-box_1174648-143.jpg?w=1060');
642 |             background-repeat: no-repeat;
643 |             background-size: cover;
644 |             background-position: center;
645 |             height: 420px;
646 |             width: 100%;
647 | 
648 |         }
649 | 
650 |         .footer1 .f-detail {
651 |             border: 0px solid red;
652 |             width: max-content;
653 |             padding-top: 100px;
654 |             margin-left: 20px;
655 | 
656 |         }
657 | 
658 |         .footer1 .f-detail button {
659 |             padding: 12px;
660 |             border-radius: 20px;
661 |             width: max-content;
662 |             height: auto;
663 |             margin-bottom: 15px;
664 |         }
665 | 
666 |         .f-detail h1 {
667 |             font-size: 45px;
668 |             margin-bottom: 15px;
669 |         }
670 | 
671 |         .f-detail input {
672 |             padding: 10px;
673 |             width: 500px;
674 |             border-radius: 30px;
675 |             border: none;
676 |             margin-bottom: 15px;
677 |             height: 50px;
678 |             font-size: 18px;
679 |         }
680 | 
681 |         .f-detail i {
682 |             font-size: 25px;
683 |             margin-left: -40px;
684 |             line-height: 50px;
685 |             height: 60px;
686 |             position: relative;
687 |         }
688 | 
689 |         .f-detail h3 {
690 |             font-weight: 100;
691 |             margin-left: 10px;
692 |         }
693 |     </style>
694 | 
695 |     <header>
696 |         <div id="brand"><a href="/">AI.TECH</a></div>
697 |         <nav>
698 |             <ul>
699 |                 <li><a href="./index.html">Home</a></li>
700 |                 <li><a href="./About.html">About Us</a></li>
701 |                 <li><a href="./service.html">Services</a></li>
702 |                 <li><a href="./page.html">Pages</a></li>
703 |                 <li><a href="./contact.html">Contact Us</a></li>
704 |                 <!--  <li id="login"><a href="/logi
705 |                       <li><a href="/about">About</a></li>n" >Login</a></li>
706 |           <li id="signup"><a href="/signup">Signup</a></li>-->
707 |             </ul>
708 |         </nav>
709 |         <div id="hamburger-icon" onclick="toggleMobileMenu(this)">
710 |             <div class="bar1"></div>
711 |             <div class="bar2"></div>
712 |             <div class="bar3"></div>
713 |             <ul class="mobile-menu">
714 |                 <li><a href="./index.html">Home</a></li>
715 |                 <li><a href="./About.html">About Us</a></li>
716 |                 <li><a href="./service.html">Services</a></li>
717 |                 <li><a href="./page.html">Pages</a></li>
718 |                 <li><a href="./contact.html">Contact Us</a></li>
719 |                 <!--   <li id="login"><a href="/login" >Login</a></li>
720 |           <li id="signup"><a href="/signup">Signup</a></li>-->
721 |             </ul>
722 |         </div>
723 |     </header>
724 | 
725 | 
726 |     <!--choose us-->
727 |     <div class="choose-us" id="choose-us">
728 |         <div class="c-detail">
729 |             <button class="choose-btn">Why Choose Us</button>
730 |             <h1 class="head1">We're Best in AI Industry with 10 Years of Experience</h1>
731 |             <p>We are industry leaders in AI with a decade of unparalleled expertise and innovation. Leading the AI
732 |                 industry with a decade of groundbreaking innovations and technological advancements</p>
733 |             <div class="tic">
734 |                 <i class="fa-solid fa-check"></i>
735 |                 <p>Pioneering advancements</p>
736 |             </div>
737 |             <div class="tic">
738 |                 <i class="fa-solid fa-check"></i>
739 |                 <p>Proven track record</p>
740 |             </div>
741 |             <div class="tic">
742 |                 <i class="fa-solid fa-check"></i>
743 |                 <p>Expertise-driven solutions</p>
744 |             </div>
745 |         </div>
746 |         <div class="c-img" id="c-img">
747 |             <img src="https://img.freepik.com/premium-photo/white-futuristic-cartoon-toy-robot-white-background-3d-rendering_476612-15065.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais"
748 |                 alt="img1">
749 |         </div>
750 | 
751 |     </div>
752 |     <!--case study-->
753 |     <div class="case-study" id="case-study">
754 |         <button class="case-study-btn">Case Study</button>
755 |         <h1>Explore Our Recent AI<br> Case Studies</h1>
756 |         <div class="cs-card">
757 |             <div class="card-one">
758 |                 <button class="head-btn">Robotic Automation</button>
759 |                 <h2>Automating tasks through robotics for efficiency and precision</h2>
760 |                 <button class="round"><i class="fa-solid fa-arrow-right"></i></button>
761 |             </div>
762 |             <div class="card-two">
763 |                 <button class="head-btn">Machine Learning</button>
764 |                 <h2>Harnessing data to enable intelligent decision-making and predictions</h2>
765 |                 <button class="round"><i class="fa-solid fa-arrow-right"></i></button>
766 | 
767 |             </div>
768 |             <div class="card-three">
769 |                 <button class="head-btn">Predictive Analysis</button>
770 |                 <h2>Analyzing data to anticipate future outcomes and trends</h2>
771 |                 <button class="round"><i class="fa-solid fa-arrow-right"></i></button>
772 |             </div>
773 |         </div>
774 |     </div>
775 |     <!--question part section-->
776 |     <div class="question" id="question">
777 |         <button>Popular FAQs</button>
778 |         <h1>Frequently Asked <br>Questions</h1>
779 |         <div class="question-box">
780 |             <div class="left-questions">
781 |                 <div class="ques" onclick="toggleAnswer('answer1')">How to build a website?</div>
782 |                 <div id="answer1" class="answer">
783 |                     Using the HTML, CSS and javascript we will mostly cover our website
784 |                 </div>
785 |                 <div class="ques" onclick="toggleAnswer('answer2')">How long it will take to get a new website?
786 |                 </div>
787 |                 <div id="answer2" class="answer">
788 |                     Depending upon the need of the customers we will detect the time period to finish the design
789 |                 </div>
790 |                 <div class="ques" onclick="toggleAnswer('answer3')">Do you creat only HTML website?</div>
791 |                 <div id="answer3" class="answer">
792 |                     It is not like that with the help of HTML,CSS & JS we will creat your website for better
793 |                     attraction and features
794 |                 </div>
795 |                 <div class="ques" onclick="toggleAnswer('answer4')">Will my website will be mobile-friendly?
796 |                 </div>
797 |                 <div id="answer4" class="answer">
798 |                     Of course, we will make your website that will be suitable for mobile, laptops, pc's & also for
799 |                     tablets
800 |                 </div>
801 |             </div>
802 |             <div class="right-questions">
803 |                 <div class="ques" onclick="toggleAnswer('answer5')">How to build a website?</div>
804 |                 <div id="answer5" class="answer">
805 |                     Using the HTML, CSS and javascript we will mostly cover our website
806 |                 </div>
807 |                 <div class="ques" onclick="toggleAnswer('answer6')">How long it will take to get a new website?
808 |                 </div>
809 |                 <div id="answer6" class="answer">
810 |                     Depending upon the need of the customers we will detect the time period to finish the design
811 |                 </div>
812 |                 <div class="ques" onclick="toggleAnswer('answer7')">Do you creat only HTML website?</div>
813 |                 <div id="answer7" class="answer">
814 |                     It is not like that with the help of HTML,CSS & JS we will creat your website for better
815 |                     attraction and features
816 |                 </div>
817 |                 <div class="ques" onclick="toggleAnswer('answer8')">Will my website will be mobile-friendly?
818 |                 </div>
819 |                 <div id="answer8" class="answer">
820 |                     Of course, we will make your website that will be suitable for mobile, laptops, pc's & also for
821 |                     tablets
822 |                 </div>
823 |             </div>
824 |         </div>
825 |     </div>
826 | 
827 |     <!--footer1-->
828 |     <div class="footer1" id="footer1">
829 |         <div class="f-detail">
830 |             <button>Newsletter</button>
831 |             <h1>Let's subscribe the newsletter</h1>
832 |             <input type="email" placeholder="Enter Your Mail">
833 |             <i class="fa-brands fa-telegram"></i>
834 |             <h3>We will contact you shortly..</h3>
835 |         </div>
836 |     </div>
837 | 
838 | 
839 |     <script>
840 |         window.addEventListener('scroll', function () {
841 |             var animationSection = document.querySelector('.c-img');
842 |             var sectionPosition = animationSection.getBoundingClientRect().top;
843 |             var screenPosition = window.innerHeight;
844 |             if (sectionPosition < screenPosition) {
845 |                 animationSection.classList.add('show');
846 |             }
847 |         });
848 | 
849 |         window.addEventListener('scroll', function () {
850 |             var animationSection = document.querySelector('.question');
851 |             var sectionPosition = animationSection.getBoundingClientRect().top;
852 |             var screenPosition = window.innerHeight;
853 |             if (sectionPosition < screenPosition) {
854 |                 animationSection.classList.add('show');
855 |             }
856 |         });
857 | 
858 |         //question show js
859 | 
860 |         function toggleAnswer(id) {
861 |             var answer = document.getElementById(id);
862 |             var questions = document.getElementsByClassName('ques');
863 |             var answers = document.getElementsByClassName('answer');
864 | 
865 |             // Close all answers and reset background color
866 |             for (var i = 0; i < answers.length; i++) {
867 |                 answers[i].style.display = 'none';
868 |                 questions[i].style.backgroundColor = 'green'; // Reset background color
869 |             }
870 | 
871 |             // Open the clicked answer and change background color of the clicked question
872 |             answer.style.display = (answer.style.display === 'block') ? 'none' : 'block';
873 |             var questionIndex = Array.from(answers).indexOf(answer);
874 |             questions[questionIndex].style.backgroundColor = 'red'; // Change background color of clicked question
875 |         }
876 | 
877 |           //navbar for moblie and lap navgition bar
878 |   function toggleMobileMenu(menu) {
879 |     menu.classList.toggle('open');
880 | }
881 |     </script>
882 | </body>
883 | 
884 | </html>
885 | 


--------------------------------------------------------------------------------
/test/style.css:
--------------------------------------------------------------------------------
   1 | * {
   2 |     padding: 0;
   3 |     margin: 0;
   4 |     box-sizing: border-box;
   5 |     scroll-behavior: smooth;
   6 | }
   7 | 
   8 | /*navigation*/
   9 | header a {
  10 |     text-decoration: none;
  11 | }
  12 | 
  13 | header {
  14 |     padding: 0 70px;
  15 |     background-color: #1d1f1d;
  16 |     height: 60px;
  17 |     display: flex;
  18 |     justify-content: space-between;
  19 | }
  20 | 
  21 | #brand {
  22 |     font-weight: bold;
  23 |     font-size: 25px;
  24 |     display: flex;
  25 |     border: 0px solid white;
  26 |     align-items: center;
  27 | }
  28 | 
  29 | #brand a {
  30 |     color: #f9f9f9;
  31 | }
  32 | 
  33 | ul {
  34 |     list-style: none;
  35 |     height: 100%;
  36 |     display: flex;
  37 |     align-items: center;
  38 |     justify-content: space-around;
  39 | }
  40 | 
  41 | ul a {
  42 |     color: grey;
  43 | }
  44 | 
  45 | ul li {
  46 |     padding: 5px;
  47 |     margin-left: 50px;
  48 | 
  49 | }
  50 | 
  51 | ul li:hover {
  52 |     transform: scale(1.1);
  53 |     transition: 0.3s;
  54 |     background-color: red;
  55 |     border-radius: 10px;
  56 | 
  57 | }
  58 | 
  59 | /*
  60 |   #login,
  61 |   #signup {
  62 |     border-radius: 5px;
  63 |     padding: 5px 8px;
  64 |   }
  65 |   
  66 |   #login {
  67 |     border: 1px solid #498afb;
  68 |   }
  69 |   
  70 |   #signup {
  71 |     border: 1px solid #ff3860;
  72 |   }
  73 |   
  74 |   #signup a {
  75 |     color: #ff3860;
  76 |   }
  77 |   
  78 |   #login a {
  79 |     color: #498afb;
  80 |   }
  81 |   */
  82 | #hamburger-icon {
  83 |     margin: auto 0;
  84 |     display: none;
  85 |     cursor: pointer;
  86 | }
  87 | 
  88 | #hamburger-icon div {
  89 |     width: 35px;
  90 |     height: 3px;
  91 |     background-color: white;
  92 |     margin: 6px 0;
  93 |     transition: 0.4s;
  94 | }
  95 | 
  96 | .open .bar1 {
  97 |     -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  98 |     transform: rotate(-45deg) translate(-6px, 6px);
  99 | }
 100 | 
 101 | .open .bar2 {
 102 |     opacity: 0;
 103 | }
 104 | 
 105 | .open .bar3 {
 106 |     -webkit-transform: rotate(45deg) translate(-6px, -8px);
 107 |     transform: rotate(45deg) translate(-6px, -8px);
 108 | }
 109 | 
 110 | .open .mobile-menu {
 111 |     display: flex;
 112 |     flex-direction: column;
 113 |     align-items: center;
 114 |     padding-top: 20px;
 115 |     justify-content: flex-start;
 116 |     height: max-content;
 117 | }
 118 | 
 119 | .mobile-menu {
 120 |     display: none;
 121 |     position: absolute;
 122 |     top: 50px;
 123 |     left: 0;
 124 |     height: calc(100vh - 50px);
 125 |     width: 100%;
 126 |     backdrop-filter: blur(10px);
 127 |     z-index: 1;
 128 | }
 129 | 
 130 | .mobile-menu li {
 131 |     margin-bottom: 10px;
 132 | }
 133 | 
 134 | @media only screen and (max-width: 600px) {
 135 |     .body {
 136 |         overflow: hidden;
 137 |     }
 138 | 
 139 |     .AI{
 140 |         width: 100%;
 141 |     }
 142 |     header nav {
 143 |         display: none;
 144 |     }
 145 | 
 146 |     #hamburger-icon {
 147 |         display: block;
 148 |     }
 149 | 
 150 |     .home .slicker .ai-btn {
 151 |         margin-left: 10px;
 152 |     }
 153 | 
 154 |     #Home .slicker h1 {
 155 |         font-size: 20px;
 156 |         width: max-content;
 157 |         color: rgb(242, 242, 245);
 158 |         margin-left: -680px;
 159 |     }
 160 | 
 161 |     #Home .slicker .para {
 162 |         color: rgb(252, 252, 253);
 163 |         width: 300px;
 164 |         font-size: 15px;
 165 |         line-height: 15px;
 166 |         margin-left: 10px;
 167 |         margin-top: -30px;
 168 |     }
 169 | 
 170 |     #Home .slicker .read-btn {
 171 |         border-radius: 30px;
 172 |         padding: 10px;
 173 |         width: max-content;
 174 |         height: 20px;
 175 |         background-color: white;
 176 |         margin-right: 20px;
 177 |         border: none;
 178 |         margin-left: 10px;
 179 | 
 180 |     }
 181 | 
 182 |     #Home .slicker .read-btn p {
 183 |         color: black;
 184 |         margin-top: -14px;
 185 |         font-size: 10px;
 186 |     }
 187 | 
 188 |     #Home .slicker .contact-btn {
 189 |         border-radius: 30px;
 190 |         padding: 10px;
 191 |         width: max-content;
 192 |         height: 20px;
 193 |         line-height: 4px;
 194 |         background: transparent;
 195 |         border: 1px solid white;
 196 |         margin-left: 10px;
 197 |         margin-top: 20px;
 198 |     }
 199 | 
 200 |     #Home .slicker .contact-btn p {
 201 |         font-size: 10px;
 202 |         margin-top: -14px;
 203 |     }
 204 | 
 205 | 
 206 |     .container {
 207 |         width: 100%;
 208 |         /* Ensure container takes full width */
 209 |         /* Adjust as per your layout */
 210 |         height: 450px;
 211 |         /* Let height adjust based on aspect ratio */
 212 |         overflow: hidden;
 213 |         /* Ensure image doesn't overflow container */
 214 |         position: relative;
 215 |         /* Needed for absolute positioning of image */
 216 |     }
 217 | 
 218 |     .responsive-image {
 219 |         width: 100%;
 220 |         /* Take full width of container */
 221 |         height: 100%;
 222 |         /* Take full height of container */
 223 |         object-fit: fill;
 224 |     }
 225 | 
 226 |     .laphome img {
 227 |         display: none;
 228 |     }
 229 | 
 230 |     .about .animation-container .animation-section img {
 231 |         height: 300px;
 232 |         width: 320px;
 233 |         margin-left: 37px;
 234 |         text-align: center;
 235 |         border: none;
 236 |         margin-bottom: -100px;
 237 | 
 238 |     }
 239 | 
 240 |     .about {
 241 |         display: flex;
 242 |         flex-direction: column;
 243 |         z-index: 1;
 244 |         margin-bottom: 230px;
 245 |     }
 246 | 
 247 |     .about-details {
 248 |         width: 400px;
 249 |     }
 250 | 
 251 |     .about .about-details .abtus-btn {
 252 |         margin-top: -400px;
 253 |     }
 254 | 
 255 |     .about-details h1 {
 256 |         width: 315px;
 257 |         font-size: 20px;
 258 |     }
 259 | 
 260 |     .about .about-details p {
 261 |         width: 350px;
 262 |         font-size: 15px;
 263 |     }
 264 | 
 265 | 
 266 |     .p1 {
 267 |         position: relative;
 268 |         left: -4px;
 269 |         width: 350px;
 270 | 
 271 |     }
 272 | 
 273 |     .p1 p {
 274 |         width: 250px;
 275 |         border: 0px solid red;
 276 |     }
 277 | 
 278 |     .p2 {
 279 |         position: relative;
 280 |         left: -115px;
 281 |         padding-left: 50px;
 282 |         display: block;
 283 |         width: 350px;
 284 |     }
 285 | 
 286 |     .p {
 287 |         width: 100px;
 288 |         position: relative;
 289 |     }
 290 | 
 291 |     .about .about-details .points .p1 .p {
 292 |         display: flex;
 293 |         width: 50%;
 294 |         position: relative;
 295 | 
 296 |     }
 297 | 
 298 |     .about .about-details .points .p2 {
 299 |         display: none;
 300 |     }
 301 | 
 302 |     .about .icons {
 303 |         width: 300px;
 304 |         border: 0px solid red;
 305 |         margin-top: 20px;
 306 |     }
 307 | 
 308 |     .about .icons .r-btn {
 309 |         padding: 8px;
 310 |         font-size: 15px;
 311 |     }
 312 | 
 313 |     .about .icons i {
 314 |         height: 30px;
 315 |         width: 30px;
 316 |         line-height: 30px;
 317 |         margin-left: 12px;
 318 |     }
 319 | 
 320 |     /*services*/
 321 | 
 322 |     .service {
 323 |         /* background-color: rgb(223, 241, 254);*/
 324 |         width: 100%;
 325 |         padding-top: 100px;
 326 |         position: relative;
 327 |         margin-bottom: 0px;
 328 |     }
 329 | 
 330 |     #SERVICES {
 331 |         background-color: #7F8487;
 332 |         height: 1920px;
 333 |     }
 334 | 
 335 |     .service .service-detail {
 336 |         margin-top: -80px;
 337 |         margin-left: 20px
 338 |     }
 339 | 
 340 |     .service .service-detail h1 {
 341 |         font-size: 20px;
 342 |         width: 350px;
 343 |         border: 0px solid red;
 344 |         text-align: center;
 345 |     }
 346 | 
 347 |     .service .service-detail p {
 348 |         width: 350px;
 349 |         font-size: 15px;
 350 |     }
 351 | 
 352 |     .service .service-detail .read-btn {
 353 |         padding: 7px;
 354 |         width: max-content;
 355 |     }
 356 | 
 357 |     .service .service-card {
 358 |         position: relative;
 359 |         top: -25px;
 360 |         left: -20px;
 361 | 
 362 |         border: none;
 363 |     }
 364 | 
 365 | 
 366 | 
 367 |     .service .service-card .row1 {
 368 |         display: flex;
 369 |         flex-direction: column;
 370 |         margin-left: 17%;
 371 | 
 372 |     }
 373 | 
 374 |     .service .service-card .row2 {
 375 |         display: flex;
 376 |         flex-direction: column;
 377 |         margin-left: 17%;
 378 |     }
 379 | 
 380 |     /*choose-us*/
 381 | 
 382 |     #choose-us {
 383 |         background-color: #fbfbfb;
 384 |         height: 880px;
 385 |     }
 386 | 
 387 |     .choose-us {
 388 |         display: flex;
 389 |         flex-direction: column;
 390 |         margin-bottom: 0px;
 391 |     }
 392 | 
 393 |     .choose-us .c-detail {
 394 |         margin-top: -50px;
 395 |         margin-left: -10px;
 396 |     }
 397 | 
 398 |     .choose-us .c-detail p {
 399 |         width: 242px;
 400 |     }
 401 | 
 402 |     .choose-us .c-detail .head1 {
 403 |         font-size: 20px;
 404 |         width: 330px;
 405 |         text-align: center;
 406 | 
 407 |     }
 408 | 
 409 |     .choose-us #c-img {
 410 |         border: 0px solid brown;
 411 |     }
 412 | 
 413 |     .choose-us #c-img img {
 414 |         height: 370px;
 415 |         margin-top: 30px;
 416 |         margin-left: 40px;
 417 |         text-align: center;
 418 |         border: 0px solid red;
 419 |         width: 300px;
 420 |         border-radius: 50%;
 421 |     }
 422 | 
 423 |     .choose-us .c-detail .tic {
 424 |         border: 0px solid violet;
 425 |         width: 300px;
 426 |     }
 427 | 
 428 |     /*case study*/
 429 | 
 430 |     #case-study h1 {
 431 |         position: relative;
 432 |         font-size: 20px;
 433 |         top: 150px;
 434 | 
 435 |     }
 436 | 
 437 |     #case-study .case-study-btn {
 438 |         margin-left: -30px;
 439 |     }
 440 | 
 441 |     .case-study {
 442 |         margin-bottom: 0px;
 443 | 
 444 |     }
 445 | 
 446 |     #case-study {
 447 |         background-color: #7F8487;
 448 |         height: 1680px;
 449 |     }
 450 | 
 451 |     .cs-card {
 452 |         display: flex;
 453 |         flex-direction: column;
 454 | 
 455 |     }
 456 | 
 457 |     #case-study .cs-card .card-one {
 458 |         width: 300px;
 459 |     }
 460 | 
 461 |     #case-study .cs-card .card-two {
 462 |         width: 300px;
 463 |     }
 464 | 
 465 |     #case-study .cs-card .card-three {
 466 |         width: 300px;
 467 |     }
 468 | 
 469 |     /*questions*/
 470 | 
 471 |     .question button {
 472 |         margin-left: -50px;
 473 |     }
 474 | 
 475 |     #question h1 {
 476 |         font-size: 20px;
 477 |     }
 478 | 
 479 |     .question {
 480 |         margin-bottom: 10px;
 481 |     }
 482 | 
 483 |     /*our team*/
 484 |     #our-team {
 485 |         background-color: #7F8487;
 486 |         height: 1900px;
 487 |     }
 488 | 
 489 |     .our-team .team-detail {
 490 |         padding-top: 30px;
 491 |         width: 350px;
 492 |         margin-left: 15px;
 493 |         border: 0px solid red;
 494 |     }
 495 | 
 496 |     .our-team .team-detail h1 {
 497 |         font-size: 20px;
 498 |         width: 350px;
 499 |     }
 500 | 
 501 |     .our-team .team-detail .read-btn {
 502 |         padding: 7px;
 503 |     }
 504 | 
 505 |     #our-team .team-right-side {
 506 |         display: flex;
 507 |         flex-direction: column;
 508 |         position: absolute;
 509 |         left: 0px;
 510 |         top: 330px;
 511 |     }
 512 | 
 513 |     #our-team .team-right-side .card {
 514 |         width: 300px;
 515 |         height: 350px;
 516 |         margin-left: 40px;
 517 |     }
 518 | 
 519 |     #our-team .team-right-side .card .icon {
 520 |         position: relative;
 521 |         left: -70px;
 522 |         top: -250px;
 523 |         display: flex;
 524 |         width: max-content;
 525 |         flex-direction: column;
 526 |     }
 527 | 
 528 |     #our-team .team-right-side .card .icon i {
 529 |         margin-bottom: 10px;
 530 |     }
 531 | 
 532 |     /*footer1*/
 533 | 
 534 |     #footer1 h1 {
 535 |         font-size:larger;
 536 |     }
 537 | 
 538 |     #footer1 input {
 539 |         width: 300px;
 540 |     }
 541 | 
 542 |     #case-study .cs-card .card-one .round i {
 543 |         position: relative;
 544 |         top: -20px;
 545 |     }
 546 | 
 547 |     #case-study .cs-card .card-two .round i {
 548 |         position: relative;
 549 |         top: -20px;
 550 |     }
 551 | 
 552 |     /*footer2*/
 553 |     #container1 {
 554 |         width: 100%;
 555 |         /* Ensure container takes full width */
 556 |         /* Adjust as per your layout */
 557 |         height: 1180px;
 558 |         /* Let height adjust based on aspect ratio */
 559 |         overflow: hidden;
 560 |         /* Ensure image doesn't overflow container */
 561 |         position: relative;
 562 |         /* Needed for absolute positioning of image */
 563 |     }
 564 | 
 565 |     #image {
 566 |         width: 100%;
 567 |         /* Take full width of container */
 568 |         height: 100%;
 569 |         /* Take full height of container */
 570 |         object-fit: fill;
 571 |     }
 572 | 
 573 |     .footer2 #divs {
 574 |         position: relative;
 575 |         margin-top: -1100px;
 576 |         border: 0px solid red;
 577 |     }
 578 | 
 579 |     #divs {
 580 |         display: flex;
 581 |         flex-direction: column;
 582 |     }
 583 | 
 584 |     #divs .div1 {
 585 |         margin-top: -60px;
 586 |         margin-left: 40px;
 587 |     }
 588 | 
 589 |     #divs .div2 {
 590 |         margin-top: -70px;
 591 |         margin-left: 40px;
 592 |     }
 593 | 
 594 |     #divs .div2 .icon {
 595 |         margin-top: 10px;
 596 |     }
 597 | 
 598 |     #divs .div3 {
 599 |         margin-top: -20px;
 600 |         margin-left: 40px;
 601 |     }
 602 | 
 603 |     #divs .div4 {
 604 |         margin-top: 30px;
 605 |         margin-left: 40px;
 606 |     }
 607 | 
 608 |     .bottom-footer {
 609 |         display: flex;
 610 |         flex-direction: column;
 611 |     }
 612 | 
 613 |     #bottom-footer p {
 614 |         margin-left: 0px;
 615 |         margin-top: -30px;
 616 |         text-align: center;
 617 |         border: px solid violet;
 618 |     }
 619 | 
 620 |     #bottom-footer .anker {
 621 |         display: flex;
 622 |         margin-left: 50px;
 623 |         margin-top: 50px;
 624 | 
 625 | 
 626 |     }
 627 | }
 628 | 
 629 | /*home*/
 630 | .laphome img {
 631 |     height: 100vh;
 632 |     width: 100%;
 633 |     margin-top: -323px;
 634 |     z-index: 1;
 635 | }
 636 | 
 637 | /*
 638 | .AI .home {
 639 |     background-image: url('https://img.freepik.com/premium-photo/robot-are-studio-room-with-copyspace_37416-85.jpg?size=626&ext=jpg&ga=GA1.1.351478974.1703420878&semt=ais');
 640 |     background-repeat: no-repeat;
 641 |     background-position: center;
 642 |     background-size: contain;
 643 |     height: 120vh;
 644 |     margin-top: -70px;  
 645 | }*/
 646 | 
 647 | /*home-slicker details*/
 648 | 
 649 | .home .slicker {
 650 |     width: 45%;
 651 |     height: 350px;
 652 |     margin-left: 10px;
 653 |     position: absolute;
 654 |     border: 0px solid white;
 655 |     top: 200px;
 656 |     padding: 20px;
 657 | 
 658 | }
 659 | 
 660 | .home .slicker .ai-btn {
 661 |     padding: 15px;
 662 |     border-radius: 30px;
 663 |     height: 5px;
 664 |     width: max-content;
 665 |     border: 1px solid white;
 666 |     background: transparent;
 667 |     margin-bottom: 20px;
 668 | }
 669 | 
 670 | .home .slicker .ai-btn p {
 671 |     line-height: 2px;
 672 |     color: rgb(247, 244, 244);
 673 | }
 674 | 
 675 | .home .slicker h1 {
 676 |     font-size: 50px;
 677 |     color: rgb(244, 237, 237);
 678 |     margin-bottom: 20px;
 679 | }
 680 | 
 681 | .home .slicker p {
 682 |     color: rgb(250, 247, 247);
 683 |     margin-bottom: 20px;
 684 |     font-size: 18px;
 685 |     line-height: 30px;
 686 | }
 687 | 
 688 | .home .slicker .para {
 689 |     color: white;
 690 | }
 691 | 
 692 | .home .slicker .read-btn {
 693 |     border-radius: 30px;
 694 |     font-size: 20px;
 695 |     padding: 25px;
 696 |     width: max-content;
 697 |     height: 20px;
 698 |     background-color: white;
 699 |     margin-right: 20px;
 700 |     border: none;
 701 | }
 702 | 
 703 | .home .slicker .read-btn p {
 704 |     color: black;
 705 |     margin-top: -14px;
 706 | }
 707 | 
 708 | .home .slicker .contact-btn {
 709 |     border-radius: 30px;
 710 |     font-size: 20px;
 711 |     padding: 25px;
 712 |     width: max-content;
 713 |     height: 20px;
 714 |     line-height: 4px;
 715 |     background: transparent;
 716 |     border: 1px solid white;
 717 | }
 718 | 
 719 | .home .slicker .contact-btn:hover {
 720 |     background-color: white;
 721 | }
 722 | 
 723 | .home .slicker .contact-btn:hover p {
 724 |     color: rgb(246, 241, 241);
 725 | }
 726 | 
 727 | .home .slicker .contact-btn p {
 728 |     margin-top: -14px;
 729 | }
 730 | 
 731 | /*slicker effect / animation*/
 732 | 
 733 | .slicker {
 734 |     animation: slide 5s;
 735 | }
 736 | 
 737 | @keyframes slide {
 738 |     0% {
 739 |         opacity: 0;
 740 |         transform: translateX(-150%);
 741 |     }
 742 | 
 743 |     50% {
 744 |         opacity: 1;
 745 |         transform: translateY(0);
 746 |     }
 747 | }
 748 | 
 749 | /*aboutus webpage scroll animation*/
 750 | /*left side image*/
 751 | 
 752 | .animation-section {
 753 |     opacity: 0;
 754 |     padding-top: 50px;
 755 |     transform: translateY(300px);
 756 |     transition: opacity 3s, transform 0.9s;
 757 | }
 758 | 
 759 | .animation-section.show {
 760 |     opacity: 1;
 761 |     transform: translateY(0);
 762 | }
 763 | 
 764 | .animation-section img {
 765 |     border: 1px solid grey;
 766 |     height: max-content;
 767 |     margin-left: 100px;
 768 | }
 769 | 
 770 | /*about right side*/
 771 | 
 772 | .about {
 773 |     margin-top: 10px;
 774 |     height: 700px;
 775 |     display: flex;
 776 |     background-color: #fbfbfb;
 777 | }
 778 | 
 779 | .about .about-details {
 780 |     height: 500px;
 781 |     width: 50%;
 782 |     margin-top: 70px;
 783 |     margin-left: 5%;
 784 | }
 785 | 
 786 | .about-details .abtus-btn {
 787 |     padding: 9px;
 788 |     border-radius: 35px;
 789 |     height: auto;
 790 |     width: max-content;
 791 |     border: 1px solid grey;
 792 |     background-color: white;
 793 |     color: rgba(43, 43, 252, 0.66);
 794 |     cursor: pointer;
 795 | }
 796 | 
 797 | .about-details h1 {
 798 |     margin-top: 20px;
 799 | }
 800 | 
 801 | .about-details p {
 802 |     margin-top: 20px;
 803 |     line-height: 24px;
 804 |     font-size: 20px;
 805 | }
 806 | 
 807 | .about .about-details .abtus-btn p {
 808 |     color: white;
 809 | }
 810 | 
 811 | /*points*/
 812 | 
 813 | .points {
 814 |     margin-top: 20px;
 815 | }
 816 | 
 817 | .about-details .points .p1 .p {
 818 |     display: flex;
 819 |     margin-left: 5px;
 820 | }
 821 | 
 822 | .about-details .points .p1 i {
 823 |     margin-right: 10px;
 824 |     margin-top: 22px;
 825 | }
 826 | 
 827 | .about-details .points {
 828 |     display: flex;
 829 | }
 830 | 
 831 | .about-details .points .p2 .p {
 832 |     display: flex;
 833 |     margin-left: 80px;
 834 | 
 835 | }
 836 | 
 837 | .about-details .points .p2 i {
 838 |     margin-right: 10px;
 839 |     margin-top: 22px;
 840 | }
 841 | 
 842 | /*icons*/
 843 | .icons {
 844 |     margin-top: 50px;
 845 | }
 846 | 
 847 | .icons .r-btn {
 848 |     height: auto;
 849 |     width: auto;
 850 |     border-radius: 30px;
 851 |     background-color: rgba(43, 43, 252, 0.66);
 852 |     padding: 10px;
 853 |     color: white;
 854 |     font-size: 18px;
 855 |     border: none;
 856 |     cursor: pointer;
 857 | }
 858 | 
 859 | .icons i {
 860 |     height: 40px;
 861 |     width: 40px;
 862 |     background-color: rgb(236, 236, 236);
 863 |     text-align: center;
 864 |     line-height: 40px;
 865 |     border-radius: 50%;
 866 |     margin-left: 14px;
 867 |     border: 1.1px solid rgba(43, 43, 252, 0.66);
 868 |     cursor: pointer;
 869 | }
 870 | 
 871 | .icons i:hover {
 872 |     color: rgb(255, 255, 255);
 873 |     background-color: rgb(13, 13, 13);
 874 |     transition: .5s;
 875 | }
 876 | 
 877 | .about-details {
 878 |     padding-top: 50px;
 879 | }
 880 | 
 881 | 
 882 | /*services*/
 883 | 
 884 | .service {
 885 | 
 886 |     background-color: #7F8487;
 887 |     width: 100%;
 888 |     height: 950px;
 889 |     padding-top: 100px;
 890 |     position: relative;
 891 | }
 892 | 
 893 | .service-detail {
 894 |     width: 38%;
 895 |     height: 400px;
 896 |     margin-left: 50px;
 897 |     margin-top: 130px;
 898 | }
 899 | 
 900 | .service-detail button {
 901 |     height: auto;
 902 |     width: auto;
 903 |     border-radius: 25px;
 904 |     padding: 10px;
 905 |     margin-bottom: 20px;
 906 |     color: blue;
 907 |     border: 1px solid black;
 908 |     cursor: pointer;
 909 | }
 910 | 
 911 | .service-detail h1 {
 912 |     font-size: 40px;
 913 |     margin-bottom: 20px;
 914 | }
 915 | 
 916 | .service .service-detail p {
 917 |     line-height: 23px;
 918 |     margin-bottom: 20px;
 919 | }
 920 | 
 921 | .service-detail .read-btn {
 922 |     background-color: rgba(43, 43, 252, 0.66);
 923 |     border: none;
 924 |     padding: 15px;
 925 |     color: white;
 926 |     width: 130px;
 927 |     font-size: 18px;
 928 |     -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
 929 | }
 930 | 
 931 | /*service right side*/
 932 | 
 933 | .service-card {
 934 |     position: relative;
 935 |     top: -500px;
 936 |     left: 48%;
 937 |     height: 1600px;
 938 |     border: 0px solid red;
 939 |     width: max-content;
 940 | }
 941 | 
 942 | .service-card {
 943 |     opacity: 0;
 944 |     padding-top: 0px;
 945 |     transform: translateY(300px);
 946 |     transition: opacity 3s, transform 0.9s;
 947 | }
 948 | 
 949 | .service-card.show {
 950 |     opacity: 1;
 951 |     transform: translateY(0);
 952 |     transform: 5s;
 953 | }
 954 | 
 955 | .service-card .row1 {
 956 |     display: flex;
 957 |     gap: 20px;
 958 | }
 959 | 
 960 | .service-card .row1 .card {
 961 |     width: 310px;
 962 |     height: 360px;
 963 |     background-color: rgb(130, 196, 240);
 964 |     border-radius: 15px;
 965 | }
 966 | 
 967 | .service-card .row2 {
 968 |     display: flex;
 969 |     gap: 20px;
 970 |     margin-top: 25px;
 971 | }
 972 | 
 973 | .service-card .row2 .card1 {
 974 |     width: 310px;
 975 |     height: 360px;
 976 |     background-color: rgb(130, 196, 240);
 977 |     border-radius: 15px;
 978 | }
 979 | 
 980 | /*card inner details */
 981 | 
 982 | .row1 .card i {
 983 |     color: blue;
 984 |     font-size: 35px;
 985 |     height: 70px;
 986 |     width: 70px;
 987 |     background-color: black;
 988 |     text-align: center;
 989 |     line-height: 70px;
 990 |     border-radius: 50%;
 991 |     margin-left: 120px;
 992 |     margin-top: 50px;
 993 | }
 994 | 
 995 | .row1 .card h2 {
 996 |     text-align: center;
 997 |     margin-top: 20px;
 998 | }
 999 | 
1000 | .row1 .card p {
1001 |     padding: 25px;
1002 | }
1003 | 
1004 | .card .readmore-btn h6 {
1005 |     font-size: 15px;
1006 |     font-weight: normal;
1007 |     padding: 10px;
1008 | }
1009 | 
1010 | .card .readmore-btn h6 {
1011 |     background-color: rgb(11, 11, 11);
1012 |     border-radius: 20px;
1013 |     color: rgb(251, 251, 251);
1014 | }
1015 | 
1016 | .card .readmore-btn {
1017 |     border: none;
1018 |     background-color: rgb(255, 255, 255);
1019 |     margin-left: 100px;
1020 |     border-radius: 20px;
1021 | }
1022 | 
1023 | /*card hover details*/
1024 | 
1025 | .card:hover .readmore-btn h6 {
1026 |     position: relative;
1027 |     background-color: white;
1028 |     color: black;
1029 | }
1030 | 
1031 | .row1 .card:hover {
1032 |     background-color: aliceblue;
1033 |     transition: 1s;
1034 | 
1035 | }
1036 | 
1037 | .row1 .card:hover i {
1038 |     background-color: wheat;
1039 | }
1040 | 
1041 | .row1 .card:hover h2 {
1042 |     color: rgb(0, 0, 0);
1043 |     transition: 1s linear;
1044 | }
1045 | 
1046 | .row1 .card:hover p {
1047 |     color: rgb(0, 0, 0);
1048 |     transition: 1s linear;
1049 | }
1050 | 
1051 | .card:hover .readmore-btn {
1052 |     animation: mymove 2s forwards;
1053 |     border-radius: 20px;
1054 | }
1055 | 
1056 | @keyframes mymove {
1057 |     0% {
1058 |         top: 0px;
1059 |         background: rgb(241, 238, 238);
1060 |         width: 100px;
1061 |     }
1062 | 
1063 |     100% {
1064 |         top: 0px;
1065 |         background: rgb(255, 255, 255);
1066 |         width: 120px;
1067 |     }
1068 | }
1069 | 
1070 | .row2 .card1 i {
1071 |     color: blue;
1072 |     font-size: 35px;
1073 |     height: 70px;
1074 |     width: 70px;
1075 |     background-color: black;
1076 |     text-align: center;
1077 |     line-height: 70px;
1078 |     border-radius: 50%;
1079 |     margin-left: 120px;
1080 |     margin-top: 50px;
1081 | }
1082 | 
1083 | .row2 .card1 h2 {
1084 |     text-align: center;
1085 |     margin-top: 20px;
1086 | }
1087 | 
1088 | .row2 .card1 p {
1089 |     padding: 25px;
1090 | }
1091 | 
1092 | .card1 .readmore-btn h6 {
1093 |     background-color: black;
1094 |     border-radius: 20px;
1095 |     color: white;
1096 | }
1097 | 
1098 | .card1 .readmore-btn h6 {
1099 |     font-size: 15px;
1100 |     font-weight: normal;
1101 |     padding: 10px;
1102 | }
1103 | 
1104 | .card1 .readmore-btn {
1105 |     border: none;
1106 |     border-radius: 20px;
1107 |     background-color: rgb(255, 255, 255);
1108 |     margin-left: 100px;
1109 | }
1110 | 
1111 | /*card hover details*/
1112 | 
1113 | .card1:hover .readmore-btn h6 {
1114 |     position: relative;
1115 |     background-color: white;
1116 |     color: black;
1117 | }
1118 | 
1119 | .row2 .card1:hover {
1120 |     background-color: aliceblue;
1121 |     transition: 1s;
1122 | }
1123 | 
1124 | .row2 .card1:hover i {
1125 |     background-color: wheat;
1126 | }
1127 | 
1128 | .row2 .card1:hover p {
1129 |     color: rgb(0, 0, 0);
1130 |     transition: 1s linear;
1131 | }
1132 | 
1133 | .card1:hover .readmore-btn {
1134 |     animation: mymove 2s forwards;
1135 |     border-radius: 20px;
1136 | }
1137 | 
1138 | @keyframes mymove {
1139 |     0% {
1140 |         top: 0px;
1141 |         background: rgb(241, 238, 238);
1142 |         width: 100px;
1143 |     }
1144 | 
1145 |     100% {
1146 |         top: 0px;
1147 |         background: rgb(255, 255, 255);
1148 |         width: 120px;
1149 |     }
1150 | }
1151 | 
1152 | /*choose us*/
1153 | 
1154 | .choose-us {
1155 |     width: 100%;
1156 |     height: 700px;
1157 |     background-color: #fbfbfb;
1158 | }
1159 | 
1160 | /*choose left side*/
1161 | 
1162 | .choose-us .c-detail {
1163 |     margin-left: 40px;
1164 |     padding-top: 80px;
1165 |     width: 50%;
1166 |     height: 500px;
1167 | }
1168 | 
1169 | .choose-us .c-detail h1 {
1170 |     font-size: 40px;
1171 |     margin-bottom: 20px;
1172 | }
1173 | 
1174 | .c-detail .choose-btn {
1175 |     padding: 8px;
1176 |     border-radius: 20px;
1177 |     margin-bottom: 25px;
1178 | }
1179 | 
1180 | .c-detail p {
1181 |     line-height: 25px;
1182 |     margin-bottom: 20px;
1183 | }
1184 | 
1185 | .c-detail .tic i {
1186 |     height: 25px;
1187 |     width: 25px;
1188 |     background-color: black;
1189 |     color: white;
1190 |     border-radius: 50%;
1191 |     text-align: center;
1192 |     line-height: 25px;
1193 |     margin-right: 20px;
1194 | }
1195 | 
1196 | .c-detail .tic {
1197 |     display: flex;
1198 | }
1199 | 
1200 | /*rigth img*/
1201 | 
1202 | .choose-us .c-img img {
1203 |     height: 500px;
1204 |     margin-top: 100px;
1205 |     margin-left: 80px;
1206 |     width: 400px;
1207 |     border-radius: 30%;
1208 | }
1209 | 
1210 | .choose-us {
1211 |     display: flex;
1212 | }
1213 | 
1214 | /* image showing option while scrolling*/
1215 | 
1216 | .choose-us .c-img {
1217 |     opacity: 0;
1218 |     padding-top: 0px;
1219 |     transform: translateY(300px);
1220 |     transition: opacity 3s, transform 0.9s;
1221 | }
1222 | 
1223 | .choose-us .c-img.show {
1224 |     opacity: 1;
1225 |     transform: translateY(0);
1226 |     transform: 5s;
1227 | }
1228 | 
1229 | /*case study*/
1230 | 
1231 | .case-study {
1232 |     height: 800px;
1233 |     width: 100%;
1234 |     background-color: #7F8487;
1235 | }
1236 | 
1237 | .case-study .case-study-btn {
1238 |     padding: 8px;
1239 |     border-radius: 20px;
1240 |     position: absolute;
1241 |     left: 46%;
1242 |     margin-top: 100px;
1243 | }
1244 | 
1245 | .case-study h1 {
1246 |     position: relative;
1247 |     top: 18%;
1248 |     font-size: 40px;
1249 |     text-align: center;
1250 | }
1251 | 
1252 | /*cas study cards*/
1253 | .case-study .cs-card {
1254 |     display: flex;
1255 |     gap: 20px;
1256 |     width: 90%;
1257 |     padding-top: 200px;
1258 |     border: 0px solid red;
1259 |     margin: auto;
1260 | }
1261 | 
1262 | .case-study .cs-card .card-one {
1263 |     height: 450px;
1264 |     width: 400px;
1265 |     border-radius: 20px;
1266 |     background-color: blueviolet;
1267 |     margin: auto;
1268 | }
1269 | 
1270 | .case-study .cs-card .card-two {
1271 |     height: 450px;
1272 |     width: 400px;
1273 |     border-radius: 20px;
1274 |     background-color: blueviolet;
1275 |     margin: auto;
1276 | }
1277 | 
1278 | .case-study .cs-card .card-three {
1279 |     height: 450px;
1280 |     width: 400px;
1281 |     border-radius: 20px;
1282 |     background-color: blueviolet;
1283 |     margin: auto;
1284 | }
1285 | 
1286 | /* each card inner details */
1287 | 
1288 | .case-study .card-one {
1289 |     background-image: url('https://images.unsplash.com/photo-1547394765-185e1e68f34e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbXB1dGVyJTIwa2V5Ym9hcmR8ZW58MHx8MHx8fDA%3D');
1290 |     background-repeat: no-repeat;
1291 |     background-size: cover;
1292 |     background-position: center;
1293 |     position: relative;
1294 |     padding-left: 20px;
1295 | }
1296 | 
1297 | .case-study .card-two {
1298 |     background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGFydGlmaWNpYWwlMjBpbnRlbGxpZ2VuY2V8ZW58MHx8MHx8fDA%3D');
1299 |     background-repeat: no-repeat;
1300 |     background-size: cover;
1301 |     background-position: center;
1302 |     padding-left: 20px;
1303 | }
1304 | 
1305 | .case-study .card-three {
1306 |     background-image: url('https://media.istockphoto.com/id/1818926612/photo/digital-brain-artificial-intelligence-virtual-cpu-concept.webp?b=1&s=170667a&w=0&k=20&c=WDA3v1LkC_two15LFinS5M0H4GxDl8T37B8kEKE8jNk=');
1307 |     background-repeat: no-repeat;
1308 |     background-size: cover;
1309 |     background-position: center;
1310 |     padding-left: 20px;
1311 | }
1312 | 
1313 | .case-study .cs-card .head-btn {
1314 |     margin-top: 250px;
1315 |     margin-bottom: 20px;
1316 |     border-radius: 20px;
1317 |     padding: 8px;
1318 |     background: transparent;
1319 |     border: 1px solid white;
1320 |     color: rgb(255, 255, 255);
1321 | }
1322 | 
1323 | .case-study .cs-card h2 {
1324 |     color: white;
1325 |     margin-bottom: 0px;
1326 | }
1327 | 
1328 | .case-study .cs-card .round {
1329 |     font-size: 20px;
1330 |     height: 35px;
1331 |     width: 35px;
1332 |     border-radius: 50%;
1333 |     line-height: 35px;
1334 |     position: relative;
1335 |     top: 20px;
1336 |     border: none;
1337 |     background-color: transparent;
1338 |     color: white;
1339 | }
1340 | 
1341 | .case-study .cs-card .round i:hover {
1342 |     cursor: pointer;
1343 | }
1344 | 
1345 | /*questions*/
1346 | 
1347 | .question {
1348 |     height: 630px;
1349 |     width: 100%;
1350 |     background-color: #fbfbfb;
1351 |     border: 0px solid red;
1352 | }
1353 | 
1354 | .question button {
1355 |     position: relative;
1356 |     left: 47%;
1357 |     top: 10%;
1358 |     padding: 10px;
1359 |     border-radius: 20px;
1360 | }
1361 | 
1362 | .question h1 {
1363 |     position: relative;
1364 |     top: 12%;
1365 |     text-align: center;
1366 |     font-size: 40px;
1367 | }
1368 | 
1369 | /*left questions*/
1370 | 
1371 | .question .question-box .left-questions {
1372 |     width: 45%;
1373 |     border: 0px solid black;
1374 |     position: relative;
1375 |     top: 110px;
1376 |     margin: auto;
1377 | }
1378 | 
1379 | .question-box .left-questions .ques {
1380 |     background-color: #e0d2d2;
1381 |     padding: 20px;
1382 |     margin-bottom: 15px;
1383 |     border-radius: 10px;
1384 |     cursor: pointer;
1385 |     font-size: 18px;
1386 |     transition: all 2s;
1387 | }
1388 | 
1389 | .answer {
1390 |     display: none;
1391 |     padding: 10px;
1392 | }
1393 | 
1394 | .question .question-box .right-questions {
1395 |     width: 45%;
1396 |     border: 0px solid black;
1397 |     position: relative;
1398 |     top: 110px;
1399 |     margin: auto;
1400 | }
1401 | 
1402 | .question-box .right-questions .ques {
1403 |     background-color: #e0d2d2;
1404 |     padding: 20px;
1405 |     margin-bottom: 15px;
1406 |     border-radius: 10px;
1407 |     cursor: pointer;
1408 |     font-size: 18px;
1409 | }
1410 | 
1411 | .question-box {
1412 |     display: flex;
1413 | }
1414 | 
1415 | .question {
1416 |     opacity: 0;
1417 |     padding-top: 0px;
1418 |     transform: translateY(300px);
1419 |     transition: opacity 3s, transform 0.9s;
1420 | }
1421 | 
1422 | .question.show {
1423 |     opacity: 1;
1424 |     transform: translateY(0);
1425 |     transform: 5s;
1426 | }
1427 | 
1428 | /*our team*/
1429 | 
1430 | /*scrolling appear */
1431 | .our-team {
1432 |     opacity: 0;
1433 |     padding-top: 0px;
1434 |     transform: translateY(300px);
1435 |     transition: opacity 3s, transform 0.9s;
1436 | }
1437 | 
1438 | .our-team.show {
1439 |     opacity: 1;
1440 |     transform: translateY(0);
1441 |     transform: 5s;
1442 | }
1443 | 
1444 | /*inside details left side of our team*/
1445 | 
1446 | .our-team {
1447 |     width: 100%;
1448 |     height: 900px;
1449 |     display: flex;
1450 |     flex-wrap: wrap;
1451 |     background-color: #7F8487;
1452 | }
1453 | 
1454 | .our-team button {
1455 |     cursor: pointer;
1456 | }
1457 | 
1458 | .team-detail {
1459 |     width: 38%;
1460 |     padding-top: 200px;
1461 |     margin-left: 40px;
1462 | }
1463 | 
1464 | .team-detail .team-btn {
1465 |     width: max-content;
1466 |     height: max-content;
1467 |     padding: 7px;
1468 |     border-radius: 20px;
1469 |     margin-bottom: 20px;
1470 | }
1471 | 
1472 | .team-detail h1 {
1473 |     margin-bottom: 20px;
1474 |     font-size: 40px;
1475 | }
1476 | 
1477 | .team-detail p {
1478 |     font-size: 18px;
1479 |     margin-bottom: 20px;
1480 | }
1481 | 
1482 | .team-detail .read-btn {
1483 |     width: max-content;
1484 |     height: max-content;
1485 |     padding: 15px;
1486 |     border-radius: 20px;
1487 |     margin-bottom: 20px;
1488 |     font-size: 20px;
1489 |     background-color: blue;
1490 |     border: 0px;
1491 |     color: white;
1492 |     -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.5));
1493 | }
1494 | 
1495 | .team-right-side {
1496 |     height: 700px;
1497 |     width: 50%;
1498 |     position: absolute;
1499 |     left: 600px;
1500 |     top: 70px;
1501 | }
1502 | 
1503 | .our-team .team-right-side .card {
1504 |     width: 350px;
1505 |     height: 400px;
1506 |     border: 1px solid #fdf8f8;
1507 |     border-radius: 20px;
1508 |     padding: 0px;
1509 |     box-sizing: border-box;
1510 |     background-color: aliceblue;
1511 |     -webkit-animation-duration: .5s;
1512 |     animation-duration: 1s;
1513 | }
1514 | 
1515 | .our-team .team-right-side .card:hover {
1516 |     border: 2px solid blue;
1517 |     transition: .5s;
1518 | }
1519 | 
1520 | .team-right-side {
1521 |     display: grid;
1522 |     grid-template-columns: repeat(2, 1fr);
1523 |     /* Two columns */
1524 |     gap: 20px;
1525 | }
1526 | 
1527 | .team-right-side .card img {
1528 |     height: 200px;
1529 |     width: 200px;
1530 |     margin-left: 75px;
1531 |     background-position: center;
1532 |     margin-top: 20px;
1533 |     border-radius: 50%;
1534 | }
1535 | 
1536 | .team-right-side .card h2 {
1537 |     margin-top: 20px;
1538 |     margin-bottom: 10px;
1539 |     text-align: center;
1540 |     font-size: 25px;
1541 | }
1542 | 
1543 | .team-right-side .card p {
1544 |     text-align: center;
1545 | }
1546 | 
1547 | .team-right-side .card .icon {
1548 |     margin-left: 80px;
1549 |     margin-top: 25px;
1550 | }
1551 | 
1552 | .team-right-side .card .icon i {
1553 |     height: 40px;
1554 |     width: 40px;
1555 |     background-color: rgb(25, 0, 255);
1556 |     text-align: center;
1557 |     border-radius: 50%;
1558 |     line-height: 40px;
1559 |     color: white;
1560 |     margin-left: 4px;
1561 | }
1562 | 
1563 | .team-right-side .card .icon i:hover {
1564 |     background-color: white;
1565 |     color: rgb(0, 0, 0);
1566 |     transition: 1s;
1567 |     border: .5px solid black;
1568 | }
1569 | 
1570 | .team-right-side .card:hover {
1571 |     cursor: pointer;
1572 |     animation-name: bounce;
1573 |     -moz-animation-name: bounce;
1574 | }
1575 | 
1576 | @keyframes bounce {
1577 | 
1578 |     0%,
1579 |     100%,
1580 |     20%,
1581 |     50%,
1582 |     80% {
1583 |         -webkit-transform: translateY(0);
1584 |         -ms-transform: translateY(0);
1585 |         transform: translateY(0)
1586 |     }
1587 | 
1588 |     40% {
1589 |         -webkit-transform: translateY(-40px);
1590 |         -ms-transform: translateY(-40px);
1591 |         transform: translateY(-40px)
1592 |     }
1593 | 
1594 |     60% {
1595 |         -webkit-transform: translateY(-15px);
1596 |         -ms-transform: translateY(-15px);
1597 |         transform: translateY(-15px)
1598 |     }
1599 | }
1600 | 
1601 | .footer1 {
1602 |     background-image: url('https://img.freepik.com/premium-photo/robot-hand-hold-white-box_1174648-143.jpg?w=1060');
1603 |     background-repeat: no-repeat;
1604 |     background-size: cover;
1605 |     background-position: center;
1606 |     height: 420px;
1607 |     width: 100%;
1608 | 
1609 | }
1610 | 
1611 | .footer1 .f-detail {
1612 |     border: 0px solid red;
1613 |     width: max-content;
1614 |     padding-top: 100px;
1615 |     margin-left: 20px;
1616 | 
1617 | }
1618 | 
1619 | .footer1 .f-detail button {
1620 |     padding: 12px;
1621 |     border-radius: 20px;
1622 |     width: max-content;
1623 |     height: auto;
1624 |     margin-bottom: 15px;
1625 | }
1626 | 
1627 | .f-detail h1 {
1628 |     font-size: 45px;
1629 |     margin-bottom: 15px;
1630 | }
1631 | 
1632 | .f-detail input {
1633 |     padding: 10px;
1634 |     width: 500px;
1635 |     border-radius: 30px;
1636 |     border: none;
1637 |     margin-bottom: 15px;
1638 |     height: 50px;
1639 |     font-size: 18px;
1640 | }
1641 | 
1642 | .f-detail i {
1643 |     font-size: 25px;
1644 |     margin-left: -40px;
1645 |     line-height: 50px;
1646 |     height: 60px;
1647 |     position: relative;
1648 | }
1649 | 
1650 | .f-detail h3 {
1651 |     font-weight: 100;
1652 |     margin-left: 10px;
1653 | }
1654 | 
1655 | /*
1656 | .footer2 .divs {
1657 |     background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8d29ybGR8ZW58MHx8MHx8fDA%3D');
1658 |     background-position: center;
1659 |     background-repeat: no-repeat;
1660 |     background-size: cover;
1661 |     height: 450px;
1662 |     width: 100%;
1663 |     position: absolute;
1664 |     display: flex;
1665 | }*/
1666 | 
1667 | .footer2 .divs {
1668 |     position: relative;
1669 |     display: flex;
1670 |     margin-top: -550px;
1671 |     border: 0px solid red;
1672 |     z-index: 2;
1673 | }
1674 | 
1675 | 
1676 | .footer2 .div1 {
1677 |     border: 0px solid white;
1678 |     width: 300px;
1679 |     height: 300px;
1680 |     color: white;
1681 |     margin-top: 100px;
1682 |     margin-left: 40px;
1683 | }
1684 | 
1685 | .footer2 h1 {
1686 |     font-size: 40px;
1687 |     margin-bottom: 20px;
1688 | 
1689 | }
1690 | 
1691 | .footer2 p {
1692 |     font-size: 18px;
1693 |     color: rgb(182, 180, 180);
1694 | }
1695 | 
1696 | .footer2 .div2 {
1697 |     border: 0px solid white;
1698 |     width: 290px;
1699 |     height: 250px;
1700 |     color: rgb(182, 180, 180);
1701 |     margin-top: 105px;
1702 |     margin-left: 50px;
1703 | 
1704 | }
1705 | 
1706 | .footer2 .div2 h2 {
1707 |     margin-bottom: 28px;
1708 |     color: white;
1709 | }
1710 | 
1711 | .footer2 .div2 i {
1712 |     margin-bottom: 20px;
1713 |     margin-right: 12px;
1714 |     color: rgb(182, 180, 180);
1715 | }
1716 | 
1717 | .footer2 .div2 .icon {
1718 |     margin-top: 40px;
1719 | }
1720 | 
1721 | .footer2 .div2 .icon i {
1722 |     margin-left: 2px;
1723 |     height: 40px;
1724 |     width: 40px;
1725 |     background-color: aqua;
1726 |     text-align: center;
1727 |     line-height: 40px;
1728 |     border-radius: 50%;
1729 |     background: transparent;
1730 |     border: 1px solid grey;
1731 |     color: rgb(182, 180, 180);
1732 | }
1733 | 
1734 | .footer2 .div2 .icon i:hover {
1735 |     color: white;
1736 |     transition: 1s;
1737 | }
1738 | 
1739 | .footer2 .div3 {
1740 |     margin-top: 105px;
1741 |     margin-left: 100px;
1742 |     color: rgb(182, 180, 180);
1743 | }
1744 | 
1745 | .footer2 .div3 i:hover {
1746 |     color: white;
1747 |     transition: .2s;
1748 | }
1749 | 
1750 | .footer2 .div3 h2 {
1751 |     color: white;
1752 |     margin-bottom: 10px;
1753 | }
1754 | 
1755 | .footer2 .div3 i {
1756 |     margin-top: 20px;
1757 |     margin-right: 10px;
1758 |     color: rgb(182, 180, 180);
1759 | }
1760 | 
1761 | .footer2 .div4 {
1762 |     color: white;
1763 |     height: 250px;
1764 |     width: 250px;
1765 |     border: 0px solid red;
1766 |     margin-top: 105px;
1767 |     margin-left: 0px;
1768 | }
1769 | 
1770 | 
1771 | .footer2 .div4 {
1772 |     margin-top: 105px;
1773 |     margin-left: 100px;
1774 |     color: rgb(182, 180, 180);
1775 | }
1776 | 
1777 | .footer2 .div4 h2 {
1778 |     color: white;
1779 |     margin-bottom: 10px;
1780 | }
1781 | 
1782 | .footer2 .div4 i {
1783 |     margin-top: 20px;
1784 |     margin-right: 10px;
1785 |     color: rgb(182, 180, 180);
1786 | }
1787 | 
1788 | .bottom-footer {
1789 |     display: flex;
1790 |     color: grey;
1791 |     width: 100%;
1792 |     height: 50px;
1793 |     background: transparent;
1794 |     position: absolute;
1795 |     margin-top: 100px;
1796 | }
1797 | 
1798 | .bottom-footer p {
1799 |     margin-left: 35px;
1800 | }
1801 | 
1802 | .bottom-footer a {
1803 |     color: grey;
1804 |     margin-left: 20px;
1805 |     text-decoration: none;
1806 | }
1807 | 
1808 | .bottom-footer .anker {
1809 |     margin-left: 450px;
1810 | }
1811 | 
1812 | .bottom-footer a:hover {
1813 |     color: white;
1814 |     transition: .5s;
1815 | }
1816 | 
1817 | .bottom-footer span {
1818 |     text-decoration: underline;
1819 | }
1820 | 
1821 | .footer2 {
1822 |     opacity: 0;
1823 |     padding-top: 0px;
1824 |     transform: translateY(300px);
1825 |     transition: opacity 3s;
1826 | }
1827 | 
1828 | .footer2.show {
1829 |     opacity: 1;
1830 |     transform: translateY(0);
1831 |     transform: 5s;
1832 | }
1833 | 
1834 | .container1 {
1835 |     width: 100%;
1836 |     /* Ensure container takes full width */
1837 |     /* Adjust as per your layout */
1838 |     height: 600px;
1839 |     /* Let height adjust based on aspect ratio */
1840 |     overflow: hidden;
1841 |     /* Ensure image doesn't overflow container */
1842 |     position: relative;
1843 |     /* Needed for absolute positioning of image */
1844 | }
1845 | 
1846 | .image {
1847 |     width: 180%;
1848 |     /* Take full width of container */
1849 |     height: 100%;
1850 |     /* Take full height of container */
1851 |     object-fit: fill;
1852 | }
1853 | 


--------------------------------------------------------------------------------