+
+
+
+
+
+
+
+
Hello, my name is Panagiotis Kotsorgios
+
I'm a
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. Integer vehicula sit amet justo eget tempor. Aenean eu turpis eu felis scelerisque
+ fermentum. Aenean tempor dolor in velit feugiat, a luctus est dignissim.
+
Download CV
+
+
+
+
+
+
+
+
+
+
+
+
+
+
I' m Panagiotis Kotsorgios, a Web Developer
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. Integer vehicula sit amet justo eget tempor. Aenean eu turpis eu felis scelerisque
+ fermentum. Aenean tempor dolor in velit feugiat, a luctus est dignissim.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. Integer vehicula sit amet justo eget tempor. Aenean eu turpis eu felis scelerisque
+ fermentum. Aenean tempor dolor in velit feugiat, a luctus est dignissim.
+
+
+
+
+
+
+
Birthday : 17 sep 1999
+
+
+
+
Website : www.example.com
+
+
+
Email : pkots654@hmail.com
+
+
+
Degree : Msc cybersecurity
+
+
+
Phone : +30 2222222222
+
+
+
+
Freelance : Available
+
+
+
+
+
+
+
+
+
+
+
Education
+
+
+
+
+
+
+
+ 2023 - 2015
+
+
Master in Computer Science
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+ 2023 - 2015
+
+
Master in Cybersecurity
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+ 2023 - 2015
+
+
Master in Software engineering
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
Experience
+
+
+
+
+
+
+
+ 2023 - 2015
+
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+ 2023 - 2015
+
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+ 2023 - 2015
+
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Web Design
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. .
+
+
+
+
+
+
+
+
pen testing
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. .
+
+
+
+
+
+
+
+
software development
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. .
+
+
+
+
+
+
+
+
youtube
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. .
+
+
+
+
+
+
+
+
server managment
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. .
+
+
+
+
+
+
+
+
freelancing
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies erat vel erat aliquet, in congue ligula interdum.
+ Nulla facilisi. Vivamus in arcu in ligula vehicula cursus vel nec sem. Nam vestibulum dui in odio gravida, quis dapibus magna
+ hendrerit. Suspendisse potenti. Nulla facilisi. .
+
+
+
+
+
+
+
+
+
+
+
My last Projects :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Theme Colors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/portfolio1.jpg b/portfolio1.jpg
new file mode 100644
index 0000000..ac3b3c1
Binary files /dev/null and b/portfolio1.jpg differ
diff --git a/portfolio2.jpg b/portfolio2.jpg
new file mode 100644
index 0000000..2747622
Binary files /dev/null and b/portfolio2.jpg differ
diff --git a/portfolio3.jpg b/portfolio3.jpg
new file mode 100644
index 0000000..c305d7c
Binary files /dev/null and b/portfolio3.jpg differ
diff --git a/portfolio4.jpg b/portfolio4.jpg
new file mode 100644
index 0000000..2108315
Binary files /dev/null and b/portfolio4.jpg differ
diff --git a/portfolio5.jpg b/portfolio5.jpg
new file mode 100644
index 0000000..86a9ace
Binary files /dev/null and b/portfolio5.jpg differ
diff --git a/portfolio6.jpg b/portfolio6.jpg
new file mode 100644
index 0000000..2e3faf9
Binary files /dev/null and b/portfolio6.jpg differ
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f0d088f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,92 @@
+
+ var typed = new Typed(".typing", {
+ strings: ["Web Designer", "Web Developer", "Graphic Designer", "YouTuber"],
+ typeSpeed: 100,
+ backSpeed: 60,
+ loop: true
+ });
+
+
+
+const nav = document.querySelector(".nav"),
+navList = nav.querySelectorAll("li"),
+totalNavList = navList.length,
+allSection = document.querySelector(".section"),
+totalSection = allSection.length;
+for(let i=0; i
{
+ asideSectionTogglerBtn();
+})
+
+function asideSectionTogglerBtn(){
+ aside.classList.toggle("open");
+ navTogglerBtn.classList.toggle("open");
+ for(let i=0; i {
+ document.querySelector(".style-switcher").classList.toggle("open");
+});
+
+// Hide Style Switcher on Scroll
+window.addEventListener("scroll", () => {
+ if (document.querySelector(".style-switcher").classList.contains("open")) {
+ document.querySelector(".style-switcher").classList.remove("open");
+ }
+});
+
+// Set Active Style
+const alternateStyles = document.querySelectorAll(".alternate-style");
+
+function setActiveStyle(color) {
+ alternateStyles.forEach((style) => {
+ if (color === style.getAttribute("title")) {
+ style.removeAttribute("disabled");
+ } else {
+ style.setAttribute("disabled", "true");
+ }
+ });
+}
+
+// Toggle Day/Night Mode
+const dayNight = document.querySelector(".day-night");
+
+dayNight.addEventListener("click", () => {
+ const icon = dayNight.querySelector("i");
+ document.body.classList.toggle("dark");
+
+ // Toggle icon based on the dark mode status
+ if (document.body.classList.contains("dark")) {
+ icon.classList.remove("fa-moon");
+ icon.classList.add("fa-sun");
+ localStorage.setItem('theme', 'dark'); // Save the theme preference
+ } else {
+ icon.classList.remove("fa-sun");
+ icon.classList.add("fa-moon");
+ localStorage.setItem('theme', 'light'); // Save the theme preference
+ }
+});
+
+// Set Initial Day/Night Icon Based on LocalStorage
+window.addEventListener("load", () => {
+ const icon = dayNight.querySelector("i");
+ const theme = localStorage.getItem('theme');
+ if (theme === 'dark') {
+ document.body.classList.add("dark");
+ icon.classList.add("fa-sun");
+ } else {
+ document.body.classList.remove("dark");
+ icon.classList.add("fa-moon");
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..27a3142
--- /dev/null
+++ b/style.css
@@ -0,0 +1,1028 @@
+:root
+{
+ --bg-black-900:#f2f2fc;
+ --bg-black-100:#fdf9ff;
+ --bg-black-50:#e8dfec;
+ --text-black-900:#302e4d;
+ --text-black-700:#504e70;
+}
+
+body.dark{
+ --bg-black-900:#151515;
+ --bg-black-100:#222222;
+ --bg-black-50:#393939;
+ --text-black-900:#ffffff;
+ --text-black-700:#e9e9e9;
+}
+
+body{
+ margin: 0;
+ padding: 0;
+ line-height: 1.5;
+ font-size: 16px;
+ font-family:'Courier New', Courier, monospace;
+}
+
+*{
+ margin: 0;
+ padding: 0;
+ outline: none;
+ text-decoration: none;
+ box-sizing: border-box;
+}
+
+
+::before, ::after{
+ box-sizing: border-box;
+}
+
+ul{
+ list-style: none;
+
+}
+
+
+.section{
+ background: var(--bg-black-900);
+ min-height: 100vh;
+ display: block;
+ padding: 0 30px;
+ opacity: 1;
+ left: 270px;
+ top: 0;
+ right: 0;
+ z-index: 0;
+ overflow-y: auto;
+ overflow-x: auto;
+ transition: 0.3s ease;
+}
+
+.section.back-section{
+ z-index: 1;
+
+}
+.section .active{
+ z-index: 2;
+ opacity: 1;
+ animation: slideSection 1s ease;
+}
+
+@keyframes slideSection {
+ 0%{
+ transform: translateX(100%);
+ }
+ 100%{
+ transform: translateX(0%);
+ }
+
+}
+.hidden{
+ display: none !important;
+
+
+}
+
+
+.padd-15{
+ padding-left: 15px;
+padding-right: 15px;
+
+}
+.container{
+ max-width: 1100px;
+ width: 100%;
+ margin: auto;
+
+}
+
+.section .container{
+ padding-top: 60px;
+ padding-bottom: 70px;
+}
+
+.section-title{
+ flex: 0 0 100%;
+ max-width: 100%;
+ margin-bottom: 60px;
+}
+
+.section-title h2:before{
+ content: '';
+ height: 4px;
+ width: 50px;
+ background-color: var(--skin-color);
+ position: absolute;
+ top: 100%;
+ left: 0;
+}
+.section-title h2:after{
+ content: '';
+ height: 4px;
+ width: 25px;
+ background-color: var(--skin-color);
+ position: absolute;
+ top: 100%;
+ left: 0;
+ margin-top: 8px;
+}
+
+.section-title h2{
+ font-size: 40px;
+ color: var(--text-black-700);
+ font-weight: 700;
+ position: relative;
+}
+.row{
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: -15px;
+ margin-right: -15px;
+ position: relative;
+}
+
+.btn{
+ font-size: 16px;
+ font-weight: 500;
+ padding: 12px 35px;
+ color: white;
+ border-radius: 40px;
+ display: inline-block;
+ white-space: nowrap;
+ border: none;
+ background: var(--skin-color);
+ transition: all 0.3s ease;
+}
+.btn:hover{
+ transform: scale(1.3);
+}
+
+.shadow-dark{
+ box-shadow: 0 0 20px rgba(48, 46, 77, 015);
+}
+.aside{
+ width: 270px;
+ background: var(--bg-black-100);
+ position: fixed;
+ left: 0;
+ top: 0;
+ padding: 30px;
+ height: 100%;
+ border-right: 1px solid var(--bg-black-50);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
+ transition: all 0.3s ease;
+}
+
+.aside .logo{
+ position: absolute;
+ top: 50px;
+ font-size: 30px;
+ text-transform: capitalize;
+}
+
+
+.aside .logo a{
+ color: var(--text-black-900);
+ font-weight: 700;
+ background: transparent;
+ padding: 15px 20px;
+ font-size: 30px;
+ letter-spacing: 5px;
+ position: relative;
+
+}
+
+.aside .logo a span{
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+ font-size: 40px;
+}
+
+
+
+
+.aside .logo a:before{
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border-bottom: 5px solid var(--skin-color);
+ border-left: 5px solid var(--skin-color);
+ bottom: 0;
+ left: 0;
+}
+
+.aside .logo a:after{
+ content: '';
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border-top: 5px solid var(--skin-color);
+ border-right: 5px solid var(--skin-color);
+ top: 0;
+ right: 0;
+}
+
+
+.aside .nav-toggler{
+ height: 40px;
+ width: 45px;
+ border: 1px solid var(--bg-black-50);
+ cursor: pointer;
+ position: fixed;
+ left: 300px;
+top: 20px;
+border-radius: 5px;
+background: var(--bg-black-100);
+display: none;
+align-items: center;
+justify-content: center;
+transition: 0.3s ease;
+}
+
+.aside .nav-toggler span{
+ height: 2px;
+ width: 18px;
+ background: var(--skin-color);
+ display: inline-block;
+ position: relative;
+}
+
+.aside .nav-toggler.open span{
+ background-color: transparent;
+}
+
+.aside .nav-toggler.open span::before{
+ transform: rotate(45deg);
+ top: 0;
+}
+
+.aside .nav-toggler.open span::after{
+ transform: rotate(-45deg);
+ top: 0;
+}
+.aside .nav-toggler span::before{
+ content: '';
+ height: 2px;
+ width: 18px;
+ background: var(--skin-color);
+ position: absolute;
+ top: -6px;
+ left: 0;
+}
+
+.aside .nav-toggler span::after{
+ content: '';
+ height: 2px;
+ width: 18px;
+ background: var(--skin-color);
+ position: absolute;
+ top: 6px;
+ left: 0;
+}
+.aside .nav{
+ margin-top: 50px;
+
+
+}
+
+
+.aside .nav li{
+ margin-bottom: 20px;
+
+ display: block;
+}
+
+
+.aside .nav li a{
+ font-size: 16px;
+ font-weight: 600;
+ display: block;
+ border-bottom: 1px solid var(--bg-black-50);
+ color: var(--text-black-900);
+ padding: 5px 15px;
+}
+
+
+.aside .nav li a.active{
+ color: var(--skin-color);
+
+}
+
+.aside .nav li a i{
+ margin-right: 15px;
+}
+
+
+.home{
+ min-height: 100vh;
+ display: flex;
+ color: var(--text-black-900);
+}
+
+.home .home-info{
+ flex: 0 0 60%;
+ max-width: 60%;
+}
+
+h3.hello{
+ font-size: 28px;
+ margin: 15px 0;
+
+}
+
+h3.hello span{
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ font-size: 30px;
+ font-weight: 700;
+ color: var(--skin-color);
+}
+
+h3.my-profession{
+ font-size: 30px;
+ margin: 15px 0;
+}
+
+.typing{
+ color: var(--skin-color);
+}
+.home-info p{
+ margin-bottom: 70px;
+ font-size: 20px;
+ color: var(--text-black-700);
+}
+.home .home-img{
+ flex: 0 0 40%;
+ max-width: 40%;
+ text-align: center;
+ position: relative;
+
+}.home-img::after{
+ content: '';
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ border-bottom: 10px solid var(--skin-color);
+ border-right: 10px solid var(--skin-color);
+ right: -20px;
+ bottom: 78px;
+}
+.home-img::before{
+ content: '';
+ position: absolute;
+ height: 80px;
+ width: 80px;
+ border-top: 10px solid var(--skin-color);
+ border-left: 10px solid var(--skin-color);
+ left: -20px;
+ top: -40px;
+}
+.home .home-img img{
+ margin: auto;
+ border-radius: 5px;
+ height: 400px;
+
+}
+
+
+.about .about-content{
+ flex: 0 0 100%;
+ max-width: 100%;
+
+}
+
+.about .about-content .about-text{
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+
+.about .about-content .about-text h3{
+ font-size: 24px;
+ margin-bottom: 15px;
+ font-weight: 700;
+ color: var(--text-black-900);
+
+}
+
+.about .about-content .about-text h3 span{
+ color: var(--skin-color);
+}
+
+.about .about-content .about-text p{
+ font-size: 16px;
+ line-height: 25px;
+ color: black;
+}
+
+
+.about .about-content .personal-info{
+ flex: 0 0 60%;
+ max-width: 60%;
+ margin-top: 40px;
+}
+
+
+.about .about-content .personal-info .info-item{
+ flex: 0 0 50%;
+ max-width: 50%;
+}
+
+.about .about-content ,.personal-info .info-item p{
+ font-weight: 600;
+ padding: 10px 0;
+ font-size: 16px;
+ color: var(--text-black-900);
+ border-bottom: 1px solid gray;
+}
+
+.about .about-content ,.personal-info .info-item p span{
+ font-weight: 400;
+ color: var(--text-black-700);
+ margin-left: 4px;
+ display: inline-block;
+}
+
+.about .about-content .personal-info .buttons
+{
+ margin-top: 30px;
+}
+
+.about .about-content .personal-info .buttons .btn
+{
+
+margin-top: 10px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.about .about-content .skills {
+ flex: 0 0 40%;
+ max-width: 40%;
+ margin-top: 40px;
+}
+
+.about .about-content .skills .skill-item {
+ flex: 0 0 100%;
+ max-width: 100%;
+ position: relative; /* Ensure positioning for child elements */
+ margin-bottom: 30px;
+}
+
+.about .about-content .skills .skill-item h5 {
+ line-height: 40px;
+ font-weight: 600;
+ font-size: 16px;
+ color: var(--text-black-900);
+ text-transform: capitalize;
+}
+
+.about .about-content .skills .skill-item .progress {
+ background-color: #f0f0f0; /* Light background for progress bar */
+ height: 7px;
+ border-radius: 4px;
+ width: 100%;
+ position: relative; /* For proper positioning of the progress-in */
+}
+
+.about .about-content .skills .skill-item .progress .progress-in {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ border-radius: 4px;
+ background-color: var(--skin-color);
+
+}
+
+.about .about-content .skills .skill-item .skill-percent {
+ position: absolute;
+ right: 0;
+ top: 50%; /* Center the percentage vertically */
+ transform: translateY(-50%); /* Center the percentage text */
+ color: var(--skin-color);
+ font-weight: 400;
+ line-height: 40px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.about .about-content .education,
+.about .about-content .experience {
+ flex: 0 0 50%;
+ max-width: 50%;
+ margin-top: 30px;
+}
+
+.about .about-content h3.title {
+ font-size: 24px;
+ margin-bottom: 30px;
+ color: var(--text-black-900);
+}
+
+.about .about-content .timline-box {
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+
+.about .about-content .timline {
+ background-color: var(--bg-black-100);
+ padding: 30px 15px;
+ border: 1px solid var(--bg-black-50);
+ width: 100%; /* Changed from 100px to 100% */
+ position: relative;
+}
+
+.about .about-content .timline .timline-item {
+ position: relative;
+ padding-left: 37px;
+ padding-bottom: 50px;
+}
+
+.about .about-content .timline .timline-item:last-child {
+ padding-bottom: 0;
+}
+
+.about .about-content .timline .timline-item::before {
+ content: '';
+ width: 1px;
+ position: absolute;
+ height: 100%;
+ left: 7px;
+ top: 0;
+ background-color: var(--skin-color);
+}
+
+.about .about-content .timline .timline-item .circle-dot {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 15px;
+ width: 15px;
+ border-radius: 50%;
+ background-color: var(--skin-color);
+}
+
+.about .about-content .timline .timline-date {
+ font-weight: 400;
+ font-size: 14px;
+ margin-bottom: 12px;
+ color: var(--text-black-700);
+}
+
+.about .about-content .timline .timline-date .fa {
+ margin-right: 5px;
+}
+
+.about .about-content .timline .timline-title {
+ font-weight: 700;
+ font-size: 18px;
+ margin-bottom: 15px;
+ text-transform: capitalize;
+ color: var(--text-black-900);
+}
+
+.about .about-content .timline .timline-text {
+ line-height: 25px;
+ font-size: 16px;
+ text-align: justify;
+ color: var(--text-black-700);
+}
+
+
+
+
+
+
+
+
+
+
+.service .container{
+ padding-bottom: 40px;
+}
+
+.service .service-item{
+ margin-bottom: 30px;
+ flex: 0 0 33.33%;
+ max-width: 33.33%;
+}
+
+.service .service-item .service-item-inner{
+ background-color: var(--bg-black-100);
+ border: 1px solid var(--bg-black-50);
+ border-radius: 10px;
+ padding: 30px 15px;
+ text-align: center;
+ transition: all 0.2 ease;
+}
+
+.service .service-item .service-item-inner:hover{
+ box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
+
+}
+
+.service .service-item .service-item-inner .icon{
+ height: 60px;
+ width: 60px;
+ border-radius: 50%;
+ display: block;
+ margin: 0 auto 30px;
+ text-align: center;
+ transition: all 0.3s ease;
+}
+
+.service .service-item .service-item-inner .icon .fa{
+ font-size: 40px;
+ line-height: 60px;
+ color: var(--skin-color);
+ transition: all 0.3s ease;
+}
+
+.service .service-item .service-item-inner:hover .icon{
+ background: var(--skin-color);
+}
+
+.service .service-item .service-item-inner:hover .icon .fa{
+ font-size: 25px;
+ color: white;
+}
+
+.service .service-item .service-item-inner h4{
+ font-size: 18px;
+ margin-bottom: 15px;
+ color: var(--text-black-900);
+ font-weight: 700;
+ text-transform: capitalize;
+}
+
+.service .service-item .service-item-inner p{
+ font-size: 16px;
+
+ color: var(--text-black-700);
+ line-height: 25px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.portfolio .container{
+ margin-bottom: 40px;
+}
+.portfolio .portfolio-heading{
+flex: 0 0 100%;
+max-width: 100%;
+margin-bottom: 40px;
+}
+
+
+.portfolio .portfolio-heading h2{
+ color: var(--text-black-900);
+ font-weight: 500;
+}
+
+.portfolio .portfolio-item{
+ flex: 0 0 33.33%;
+ max-width: 33.33%;
+ margin-bottom: 30px;
+
+}
+.portfolio .portfolio-item-inner{
+ border: 6px solid var(--bg-black-100);
+ border-radius: 10px;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.portfolio .portfolio-item-inner .portfolio-img img{
+ width: 100%;
+ display: block;
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.contact-title{
+ color: var(--skin-color);
+ text-align: center;
+ font-size: 25px;
+ margin-bottom: 20px;
+}
+.contact-sub-title{
+ color: var(--text-black-900);
+ text-align: center;
+ font-size: 15px;
+ margin-bottom: 60px;
+
+}
+.contact .contact-info-item{
+ flex: 0 0 25%;
+ max-width: 25%;
+ text-align: center;
+ margin-bottom: 60px;
+}
+
+.contact .contact-info-item .icon{
+ display: inline-block;
+}
+
+.contact .contact-info-item .icon .fa{
+ font-size: 25px;
+ color: var(--skin-color);
+
+}
+
+
+.contact .contact-info-item .icon h4{
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--text-black-900);
+ text-transform: capitalize;
+ margin: 15px 0 5px;
+}
+
+
+
+.contact .contact-info-item p{
+ font-size: 16px;
+ line-height: 25px;
+ color: var(--text-black-700);
+ font-weight: 400;
+}
+
+.contact .contact-form{
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+
+.contact .contact-form .col-6{
+ flex: 0 0 50%;
+ max-width: 50%;
+
+}
+
+.contact .contact-form .col-12{
+ flex: 0 0 100%;
+ max-width: 100%;
+
+}
+
+.contact .contact-form .form-item{
+ margin-bottom: 30px;
+
+}
+
+
+.contact .contact-form .form-item .form-control{
+ width: 100%;
+ height: 50px;
+ border-radius: 25px;
+ background: var(--bg-black-100);
+ border: 1px solid var(--bg-black-50);
+ padding: 10px 25px;
+ font-size: 16px;
+ color: var(--text-black-700);
+ transition: all 0.3s ease;
+}
+
+.contact .contact-form .form-item .form-control:focus{
+ box-shadow: 0 0 20px rgba(48, 46, 77, 015);
+}
+
+.contact .contact-form .form-item textarea.form-control{
+ height: 140px;
+
+}
+
+.contact .contact-form .btn{
+ height: 50px;
+ padding: 0 50px;
+}
+
+
+@media(max-width:1199px)
+{
+
+ .section .container{
+ padding-top: 70px;
+ }
+ .aside{
+ left: -270px;
+ }
+ .aside.open{
+ left: 0;
+ }
+ .asside .nav-toggler{
+ display: flex;
+ left: 30px;
+ }
+ .aside .nav-toggler .open{
+ left: 300px;
+ }
+ .section{
+ left: 0;
+ }
+
+ .section.open{
+ left: 270px;
+ }
+
+
+ .about .about-content .personal-info .info-item p span{
+ display: block;
+ margin-left: 0;
+
+ }
+}
+
+
+@media(max-width:991px)
+{
+
+ .contact .contact-info-item,
+ .portfolio .portfolio-item,
+ .service .service-item{
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+
+ .home .home-info{
+ flex: 0 0 100%;
+ max-width: 100%;
+ }
+ .home .home-img{
+ display: none;
+ }
+
+
+}
+
+
+@media(max-width:767px)
+{
+ .contact .contact-form,
+ .contact.contact-info-item,
+ .portfolio .portfolio-item,
+ .service .service-item,
+ .about .about-content .experience,
+ .about .about-content .education,
+.about .about-content .skills,
+.about .about-content .personal-info
+{
+
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* General Styles for Dark Mode */
+body.dark {
+ --bg-black-900: #151515;
+ --bg-black-100: #222222;
+ --bg-black-50: #393939;
+ --text-black-900: #ffffff;
+ --text-black-700: #e9e9e9;
+}
+
+/* Apply Dark Mode Styles */
+body.dark .section {
+ background: var(--bg-black-900);
+}
+
+body.dark .aside {
+ background: var(--bg-black-100);
+ border-right: 1px solid var(--bg-black-50);
+}
+
+body.dark .aside .nav li a {
+ color: var(--text-black-900);
+ border-bottom: 1px solid var(--bg-black-50);
+}
+
+body.dark .home {
+ color: var(--text-black-900);
+}
+
+body.dark .home .home-info p {
+ color: var(--text-black-700);
+}
+
+body.dark .about .about-content .about-text p {
+ color: var(--text-black-700);
+}
+
+body.dark .service .service-item .service-item-inner {
+ background-color: var(--bg-black-100);
+ border: 1px solid var(--bg-black-50);
+}
+
+body.dark .portfolio .portfolio-item-inner {
+ border: 6px solid var(--bg-black-100);
+}
+
+body.dark .contact .contact-form .form-control {
+ background: var(--bg-black-100);
+ border: 1px solid var(--bg-black-50);
+ color: var(--text-black-700);
+}
+
+body.dark .contact .contact-info-item p {
+ color: var(--text-black-700);
+}
+
+body.dark .btn {
+ background: var(--skin-color); /* Ensure this is visible in dark mode */
+}
+
+/* Ensure Shadows are Visible */
+body.dark .shadow-dark {
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); /* Adjust for dark mode visibility */
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+