- needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+ //float: right;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd;}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {display: block;}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {background-color: #04AA6D;}
\ No newline at end of file
diff --git a/src/components/services/Modal.jsx b/src/components/services/Modal.jsx
new file mode 100644
index 000000000..142fd55cb
--- /dev/null
+++ b/src/components/services/Modal.jsx
@@ -0,0 +1,66 @@
+import React from "react";
+import "./Modal.scss";
+import { useState } from "react";
+
+
+function Modal({ isOpen, onClose, category, data }) {
+ const [selectedMonth, setSelectedMonth] = useState(null);
+ const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+ const [selectedImage, setSelectedImage] = useState('');
+
+
+ const handleClick = (month) => {
+ setSelectedMonth(month);
+ };
+
+ const toggleImageModal = (imageUrl) => {
+ if (isImageModalOpen) {
+ setIsImageModalOpen(false);
+ } else {
+ setSelectedImage(imageUrl);
+ setIsImageModalOpen(true);
+ }
+ };
+ const closeImageModal = () => {
+ setIsImageModalOpen(false);
+ };
+
+ return (
+ isOpen && (
+
+
+
+
{category}
+ {selectedMonth ? (
+
+
setSelectedMonth(null)}>{selectedMonth}
+
{data[selectedMonth].description}
+
toggleImageModal(data[selectedMonth].imageUrl)} />
+
Back
+
+
+ ) : (
+ Object.keys(data).map((month) => (
+
handleClick(month)}>
+ {month}
+
+ ))
+ )}
+
+
+ {/* Image Modal */}
+ {isImageModalOpen && (
+
setIsImageModalOpen(false)}>
+
e.stopPropagation()}>
+
+
+
+ )}
+
+ )
+ );
+ }
+
+ export default Modal;
diff --git a/src/components/services/Modal.scss b/src/components/services/Modal.scss
new file mode 100644
index 000000000..105bfb1d9
--- /dev/null
+++ b/src/components/services/Modal.scss
@@ -0,0 +1,162 @@
+@import "../../app.scss";
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(47, 47, 47, 0.9);
+ color: black;
+ z-index: 10;
+
+ // @include mobile{
+ // width: 80%;
+ // font-size: 18px;
+
+ // }
+ .image-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.6);
+ }
+
+ .image-modal-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 80%;
+ height: 80%;
+ }
+
+ .image-modal-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ .modal-content {
+ position: relative;
+ width: 700px;
+ min-height: 500px;
+ padding: 50px;
+ background-color: rgb(15, 14, 14);
+ // background-color: #eaeaea6e;
+ border-radius: 10px;
+ color: #c3c3b3;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ font-size: 20px;
+ font-weight: 100px;
+ text-align: center;
+ overflow-y: scroll;
+
+ @include mobile{
+ width: 90%;
+ text-align: start;
+ line-height: 20px;
+ padding: 30px;
+ // gap: 0px;
+ // font-size: 20px;
+ // padding: 30px;
+
+ }
+
+ h1 {
+ @include mobile{
+ font-size: 20px;
+ margin-top: 25px;
+ background-color: #fa9a2c;
+ padding: 15px;
+
+ }
+ }
+ p {
+ font-size: 15px;
+ //font-weight: 800;
+ border-radius: 15px;
+ border: 2px solid rgba(90, 89, 89, 0.9);
+ padding: 30px;
+ // background-color: yellowgreen;
+
+ @include mobile{
+ font-size: 15px;
+ width: 100%;
+ padding: 15px;
+ text-align: start;
+ // line-height: 0;
+
+
+ }
+
+
+ .item-content{
+ position: relative;
+ margin-top: 20px;
+ font-weight: 300;
+ font-size: 15px;
+ flex-direction: column;
+
+ }
+
+ h6 {
+ font-size: 14px;
+ margin-top: 30px;
+ padding: 5px;
+ text-align: center;
+ color: white;
+ background-color: #828282;
+ }
+
+ img{
+ margin: 20px;
+ width: 60%;
+ height: 60%;
+ object-fit: cover;
+ @include mobile{
+ // height: 50%;
+ margin: 0px;
+ object-fit: contain;
+ width: 100%;
+
+ }
+ // border-radius: 30px;
+ }
+
+
+ }
+
+
+ .close-button {
+ position: absolute;
+ top: 0px;
+ right: 20px;
+ color: rgb(157, 157, 157);
+ background-color: transparent;
+ border: none;
+ font-size: 2.7rem;
+ cursor: pointer;
+ transition: color 0.2s;
+
+ &:hover {
+ color: #fa9a2c;
+ }
+
+ @include mobile{
+ right: -10px;
+ top: -20px;
+
+ }
+ }
+
+ }
+}
diff --git a/src/components/services/Services.jsx b/src/components/services/Services.jsx
new file mode 100644
index 000000000..bcf236378
--- /dev/null
+++ b/src/components/services/Services.jsx
@@ -0,0 +1,247 @@
+import "./Services.scss"
+import { motion, useInView } from "framer-motion";
+import { useRef, useState} from "react";
+import Modal from "./Modal";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBook } from '@fortawesome/free-solid-svg-icons';
+import { faLaptop } from '@fortawesome/free-solid-svg-icons';
+import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
+import { faMedal } from '@fortawesome/free-solid-svg-icons';
+
+const honorsData = {
+ '2023 Monash University Postgraduate Industry Experience Winner': {
+ description: 'Winner of Student Vote Project of Monash University Postgraduate Industry Experience.',
+ imageUrl: "/expo_win.png",
+ },
+ '2022 Commendation of academic performance': {
+ description: 'Receiving High Distinctions in all Semester 1, 2022 units. Issued by Dr Lan Du, Director, Postgraduate Studies Faculty of Information Technology.',
+ imageUrl: "/honor_s1.png",
+ }
+ };
+
+ const certData = {
+ 'Cognizant Artificial Intelligence Job Simulation': {
+ description: 'Completed a job simulation focused on AI for Cognizant’s Data Science team. Conducted exploratory data analysis using Python and Google Colab for one of Cognizant’s technology-led clients, Gala Groceries. Communicated findings and analysis in the form of a PowerPoint slide to present the results back to the business.',
+ imageUrl: "/cert_ai.png",
+ },
+ 'AWS Solution Architecture Job Simulation': {
+ description: 'Designed and simple and scalable hosting architecture based on Elastic Beanstalk for a client experiencing significant growth and slow response times. Described my proposed architecture in plain language ensuring my client understood how it works and how costs will be calculated for it.',
+ imageUrl: "/cert_aws.png",
+ },
+ 'Awsome Day Online Conference': {
+ description: 'Attended a one-day online conference on AWS.',
+ imageUrl: "/cert_awsome.png",
+ },
+ 'Data Analytics and Visualization Virtual Experience Program': {
+ description: 'Completed a simulation focused on advising a hypothetical social media client as a Data Analyst at Accenture. Cleaned, modelled and analyzed 7 datasets to uncover insights into content trends to inform strategic decisions. Prepared a PowerPoint deck and video presentation to communicate key insights for the client and internal stakeholders',
+ imageUrl: "/cert_acc.png",
+ },
+ 'Introduction to Programming Using Python': {
+ description: '',
+ imageUrl: "/cert_python.png",
+ },
+ };
+
+ const expData = {
+ 'Data Science Intern @ Lenexa Medical': {
+ description: 'Developing a automatic data pipeline for the business to present data visualisation with tableau (from AWS to tableau server). Cleaning and wrangling data with Python and SQL querys and optimising queries and memory use to reduce cost.',
+ imageUrl: "/Lenexa-logo.png",
+ },
+ 'Administrative Assistant @ Airoha Technology Corp.': {
+ description: 'File management, data entry and data management for over 20 years of files for a 1000-5000 size corportate.',
+ imageUrl: "/exp_airoha.webp",
+ },
+ 'Office Assistant @ NIA Taiwan': {
+ description: 'Law enformemt & general office duties',
+ imageUrl: "/exp_nia.png",
+ },
+ };
+
+const educationData = {
+ 'Master of Data Science @ Monash University': {
+ description: 'GPA3.5 2022-2023',
+ imageUrl: "/edu_monash.png",
+ },
+ 'Bachelor of English Language and Literature @ FJU': {
+ description: 'Taipei, Taiwan. 2013-2017',
+ imageUrl: "/edu_fju.png",
+ },};
+
+
+const variants = {
+ initial: {
+ x: -500,
+ y: 100,
+ opacity: 0,
+ },
+ animate: {
+ x: 0,
+ y: 0,
+ opacity: 1,
+ transition: {
+ duration: 1,
+ staggerChildren: 0.1,
+ },
+ },
+}
+const containerVariants = {
+ hidden: {
+ opacity: 0
+ },
+ visible: {
+ opacity: 1,
+ transition: { delay: 2.5,
+ staggerChildren: 1,
+ duration: 4 }
+ }
+ };
+
+ const itemVariants = {
+ hidden: {
+ opacity: 0
+ },
+ visible: {
+ opacity: 1
+ }
+ };
+
+const Services = () => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedCategory, setSelectedCategory] = useState(null);
+ const ref = useRef();
+ const isInView = useInView(ref,{margin: "-100px"});
+
+ const handleButtonClick = (category) => {
+ setSelectedCategory(category);
+ setIsModalOpen(true);
+ };
+
+ const getCategoryData = () => {
+ switch (selectedCategory) {
+ case "Education":
+ return educationData;
+ case "Honors":
+ return honorsData;
+ case "Certificates":
+ return certData;
+ case "Experience":
+ return expData;
+ default:
+ return {};
+ }
+ };
+
+ const letterVariants = {
+ hidden: { opacity: 0, y: 50 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ },
+ };
+
+ const AnimatedText = ({ text }) => (
+
+ {text.split("").map((char, index) => (
+
+ {char}
+
+ ))}
+
+ );
+ const AnimatedTextd = ({ text }) => (
+
+ {text.split("").map((char, index) => (
+
+ {char}
+
+ ))}
+
+ );
+
+
+ return (
+
+
+
+
+
+
+ Education
+
+ - Master of Data Science @ Monash University
+ - Bachelor of English Language and Literature @ FJU
+
+ handleButtonClick("Education")} initial={{ background: "transparent"}} whileHover={{background: "#fa9a2c", color: "black", scale: 1.2}}>Detail
+
+
+
+ Experience
+
+ - Data Scientist Intern @ Lenexa Medical
+ - Administrative Assistant @ Airoha Technology Corp.
+ - Office Assistant @ NIA Taiwan
+
+ handleButtonClick("Experience")} initial={{ background: "transparent"}} whileHover={{background: "#fa9a2c", color: "black", scale: 1.2}}>Detail
+
+
+
+ Certificates
+
+ - Cognizant Artificial Intelligence Job Simulation
+ - AWS Solution Architecture Job Simulation
+ - Accenture Data Analytics Virtual Experience Program
+ {/* - Microsoft Introduction to Programming Using Python
*/}
+
+ handleButtonClick("Certificates")} initial={{ background: "transparent"}} whileHover={{background: "#fa9a2c", color: "black", scale: 1.2}}>Detail
+
+
+
+ Honours
+
+ - Monash University Postgraduate Industry Experience Winner
+ - 2022 Commendation of Academic Performance
+
+ handleButtonClick("Honors")} initial={{ background: "transparent"}} whileHover={{background: "#fa9a2c", color: "black", scale: 1.2}}>Detail
+ setIsModalOpen(false)}
+ category={selectedCategory}
+ data={getCategoryData()}
+ />
+
+
+
+
+
+ )
+
+
+
+}
+
+export default Services;
\ No newline at end of file
diff --git a/src/components/services/Services.scss b/src/components/services/Services.scss
new file mode 100644
index 000000000..09a78225b
--- /dev/null
+++ b/src/components/services/Services.scss
@@ -0,0 +1,196 @@
+@import "../../app.scss";
+.services{
+ // background: linear-gradient(180deg, rgb(1, 197, 168), rgb(14, 10, 136));
+ //height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: calc(100vh - 50px);
+ width: 95%;
+ // overflow-y: scroll;
+}
+
+.textContainer{
+ flex:1;
+ align-self: flex-end;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+
+
+ @include mobile{
+ flex-direction: row;
+ align-self: center;
+ text-align: center;
+ }
+
+ hr{
+ width: 500px;
+ border: none;
+ border-top: 0.5px solid #dbd4b8;
+ @include mobile{
+ width: 200px;
+ }
+ }
+}
+.titleContainer{
+ flex: 2;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 50px;
+ gap:10px;
+
+
+ @include mobile{
+ width: 100%;
+ margin-left: 0px;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
+
+ .title{
+ display: flex;
+ align-items: center;
+ gap: 50px;
+
+ @include mobile{
+ flex-direction: column;
+ text-align: center;
+ gap: 20px;
+ }
+
+ img{
+ width: 18rem;
+ height: 6rem;
+ border-radius: 50px;
+ object-fit: cover;
+ @include mobile{
+ width: 12rem;
+ height: 4rem;
+ }
+ }
+
+ h1{
+ font-size: 4rem;
+ font-weight: 600;
+ @include mobile{
+ font-size: 1.5rem;
+ }
+ }
+
+ a{
+
+ button{
+
+ width: 18rem;
+ height: 6rem;
+ background-color: #fa9a2c;
+ color: black;
+ border: none;
+ border-radius: 50px;
+ font-size: 1.3rem;
+ cursor: pointer;
+ // font-size: 20px;
+ @include mobile{
+ width: 12rem;
+ height: 4rem;
+ font-size: 0.8rem;
+ }
+
+ }}
+ }
+}
+
+.listContainer{
+ flex: 2;
+ display: flex;
+ justify-content: space-between;
+ margin: 20px;
+ gap: 20px;
+ margin-bottom: 10px;
+
+ @include mobile{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ flex-direction: column;
+ align-items: center;
+ //width: 50%;
+ margin: 10px;
+ flex-wrap: wrap;
+ gap: 5px;
+ }
+
+ .box{
+ max-width: 25%;
+ border-radius: 30px;
+ padding: 30px 40px;
+ border: 2px solid rgba(214, 214, 214, 0.783);
+ display: flex;
+ flex-direction:column;
+ justify-content: space-between;
+ align-items: center;
+ overflow-y: auto;
+ max-height: 450px;
+
+ @include mobile{
+ max-width: 90%;
+ overflow-y: hidden;
+ margin: 5px 10px;
+ height: 9rem;
+ width: 10rem;
+ padding: 20px;
+ }
+
+ ul{
+ font-size: 0.9rem;
+ line-height: 1.3rem;
+ color:rgb(219, 217, 217);
+ @include mobile{
+ display: none;
+ }
+ }
+
+ h2 {
+ font-size: 2.2rem;
+ color: #ee9c40;
+ @include mobile{
+ display: none;
+ }
+ }
+
+ h3 {
+ font-size: 3vh;
+ color: #ee9c40;
+ margin-bottom: 20px;
+ //color: #dbd4b8;
+ @include mobile{
+ font-size: 1.1rem;
+ margin-top: 10px;
+ margin-bottom: 0px;
+ color: #dbd4b8;
+ }
+ }
+
+ button{
+ font-size: 0.8rem;
+ margin-top: 30px;
+ padding: 0.8rem 1rem;
+ background-color: transparent;
+ color: #dbd4b8;
+ border: 2px solid #fa9a2c;
+ border-radius: 3rem;
+ cursor: pointer;
+
+ @include mobile{
+ font-size: 0.7rem;
+ margin: 15px;
+ padding: 10px;
+ border-radius: 1.5rem;
+ // flex-wrap: wrap;
+ }
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/skill/Bubble.jsx b/src/components/skill/Bubble.jsx
new file mode 100644
index 000000000..3021d6598
--- /dev/null
+++ b/src/components/skill/Bubble.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Bubble = ({ size, duration, bg }) => {
+ const horizontalVariance = 800 + Math.random() * 100 - 100;
+ const Variants = {
+ initial: {
+ y: '100vh',
+ x: 0,
+ },
+ animate: {
+ y: '-100vh',
+ x: horizontalVariance,
+ transition: {
+ duration: duration,
+ repeat: Infinity,
+ repeatType: 'loop',
+ },
+ },
+ };
+
+ return (
+
+ 
+ ![]({"/bubble.png"})
+
+ );
+};
+
+export default Bubble;
diff --git a/src/components/skill/Bubble.scss b/src/components/skill/Bubble.scss
new file mode 100644
index 000000000..e07a5119d
--- /dev/null
+++ b/src/components/skill/Bubble.scss
@@ -0,0 +1,9 @@
+.bubble {
+ position: relative;
+ // font-size: calc(10px + 2vmin);
+ // white-space: nowrap;
+ // overflow: hidden;
+ // text-overflow: ellipsis;
+
+ }
+
\ No newline at end of file
diff --git a/src/components/skill/Skill.jsx b/src/components/skill/Skill.jsx
new file mode 100644
index 000000000..710ac4f81
--- /dev/null
+++ b/src/components/skill/Skill.jsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import './Skill.scss';
+import Bubble from './Bubble';
+import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+
+
+//const getRandomDuration = () => 20 + Math.random() * 5;
+const services = [
+ { id: 1, name: 'Data Analysis', icon: 'search' },
+ { id: 2, name: 'Data Visualisation', icon: 'chart-line' },
+ { id: 3, name: 'Machine Learning', icon: 'robot' },
+ { id: 4, name: 'Data Warehouse', icon: 'database' },
+ { id: 5, name: 'Web development', icon: 'code' },
+ { id: 6, name: 'UI/UX design', icon: 'paint-brush' },
+
+];
+
+const ServiceItem = ({ icon, name }) => (
+
+);
+
+const skills = [
+ { src: '/react.png', alt: 'React' },
+ { src: '/node.png', alt: 'Node.js' },
+ { src: '/html.png', alt: 'HTML' },
+ { src: '/css.png', alt: 'CSS' },
+ { src: '/javascript.png', alt: 'JavaScript' },
+ { src: '/python.png', alt: 'Python' },
+ { src: '/sql.png', alt: 'SQL' },
+ { src: '/tableau.png', alt: 'Tableau' },
+ { src: '/docker.png', alt: 'Docker' },
+ { src: '/qgis.png', alt: 'QGIS' },
+ { src: '/spark.png', alt: 'Spark' },
+ { src: '/mongo.png', alt: 'MongoDB' },
+];
+
+
+
+
+
+const Skill = () => {
+ // const bubbles = [
+ // { size: '250px', duration: getRandomDuration(), bg:'/javascript.png' },
+ // { size: '300px', duration: getRandomDuration(), bg:'/react.png' },
+ // { size: '375px', duration: getRandomDuration(), bg:'/node.png' },
+ // { size: '400px', duration: getRandomDuration(), bg:'/html.png' },
+ // { size: '300px', duration: getRandomDuration(), bg:'/r.png' },
+ // { size: '275px', duration: getRandomDuration(), bg:'/tableau.png' },
+ // { size: '350px', duration: getRandomDuration(), bg:'/tensorflow.png' },
+ // { size: '500px', duration: getRandomDuration(), bg:'/docker.png' },
+ // { size: '350px', duration: getRandomDuration(), bg:'/python.png' },
+ // // Add more bubbles as needed
+ // ];
+
+ const container = {
+ hidden: { opacity: 1, scale: 0 },
+ visible: {
+ opacity: 1,
+ scale: 1,
+ transition: {
+ delayChildren: 0.3,
+ staggerChildren: 0.2
+ }
+ }
+ };
+
+ const item = {
+ hidden: { y: 20, opacity: 0 },
+ visible: {
+ y: 0,
+ opacity: 1
+ }
+ };
+
+ const arrow = {
+ hidden: {
+ y: -100, // Initial position above the view
+ opacity: 0,
+ transition: {
+ duration: 0.5,
+ },
+ },
+ visible: {
+ y: 10, // End position below the view
+ opacity: 1,
+ transition: {
+ duration: 4,
+ repeat: Infinity,
+ repeatType: "loop", // Makes the animation go back and forth
+ repeatDelay: 1, // Delay before repeating the animation
+ },
+ },
+ };
+ const SkillComponent = ({ skill }) => {
+ return (
+
+ 
+ {/* {skill.description}
Uncomment this if you want to add descriptions */}
+
+ );
+ };
+
+
+ return (
+
+
+ What I do?
+
+
+
+ {services.map(service => (
+
+ ))}
+
+
+ {skills.map((skill, index) => (
+
+ ))}
+
+
+
↓
+ {/* {bubbles.map((bubble, index) => (
+
+ ))} */}
+
+
+
+
+ );
+};
+
+export default Skill;
diff --git a/src/components/skill/Skill.scss b/src/components/skill/Skill.scss
new file mode 100644
index 000000000..29cae32d2
--- /dev/null
+++ b/src/components/skill/Skill.scss
@@ -0,0 +1,163 @@
+@import "../../app.scss";
+.skill{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: relative;
+ padding: 10px;
+ gap: 0px;
+
+ .skill-title{
+ height: 120px;
+ font-size: 4rem;
+ padding: 50px;
+ margin-top: 30px;
+ font-weight: 800;
+ color: #dbd4b8;
+ text-align: center;
+
+ a{
+
+ button{
+ width: 12rem;
+ height: 4rem;
+ margin-left: 100px;
+ background-color: #fa9a2c;
+ color: black;
+ border: none;
+ border-radius: 50px;
+ font-size: 1rem;
+ cursor: pointer;
+ @include mobile{
+ width: 10rem;
+ height: 4rem;
+ font-size: 0.8rem;
+ margin-top: 40px;
+ //justify-content: center;
+ margin-left: reset;
+ }
+
+ }}
+
+ @include mobile{
+ font-size: 3rem;
+ padding: 20px;
+ margin-top: 2rem;
+ line-height: 1rem;
+ }
+ }
+ .skill-container{
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ flex-direction: row;
+ margin-left: 50px;
+ border-radius: 30px;
+ padding: 30px;
+ height: 200px;
+ width: 90%;
+ gap: 20px;
+
+
+ @include mobile{
+ display: none;
+ min-height: 350px;
+ gap: 0px;
+ justify-content: flex-start;
+ overflow-y: scroll;
+ }
+
+
+ .sk{
+ // background-color: green;
+ //border-radius: 30px;
+ // padding: 30px;
+ // width: 50px;
+ height: 50px;
+ // text-align: center;
+
+ @include mobile{
+ height: 40px;
+ //margin-left: 10px;
+ padding: 5px;
+ // overflow: scroll;
+ }
+
+ img{
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ //border-radius: 30px;
+ }
+
+ }
+ }
+}
+
+
+
+.scroll-arrow {
+ position: absolute;
+ bottom: 30px;
+ left: 30%;
+ font-size: 1rem;
+ color: #dbd4b8;
+ // display: flex;
+ // justify-content: bottom;
+ // align-items: bottom left;
+ cursor: pointer;
+
+ @include mobile{
+ display: none;
+ width: 70px;
+ height: 70px;
+ // margin-left: 10px;
+ padding: 10px;
+ font-size: 1.2rem;
+ // overflow: scroll;
+ }
+ }
+
+ .services-container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ padding: 16px;
+ max-width: 800px;
+ max-height: 500px;
+ margin: auto;
+ color: white;
+ @include mobile{
+ //max-width: 300px;
+ grid-template-columns: repeat(2, 1fr);
+ // overflow: scroll;
+ }
+
+ .service-item {
+ background: #333;
+ border-radius: 8px;
+ padding: 50px 30px;
+ display: flex;
+ font-size: 1.2rem;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ @include mobile{
+ max-width: 300px;
+ border-radius: 8px;
+ padding: 1.8rem 1rem;
+ display: flex;
+ font-size: 1rem;
+ }
+
+ .fa-icon {
+ font-size: 2rem;
+ margin-bottom: 8px;
+ }
+
+ .service-title {
+ margin-top: 8px;
+ }
+ }
+ }
\ No newline at end of file
+ 
+ {/* 
+ 
*/}
+ 
+