@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.App{display:flex;flex-direction:column;align-items:center;justify-content:center}.about-me{display:flex;justify-content:center;align-items:center;padding:30px 20px;background:var(--background-color)}.about-me-container{display:flex;max-width:900px;width:100%;background:var(--light-blue-color);box-shadow:0 4px 8px #0000001a;border-radius:8px;overflow:hidden}.image-section{flex:1;background:url(/about-me-profile-img.JPG) no-repeat center center/cover;min-height:300px}.text-section{flex:1;padding:30px;text-align:left}.text-section h2{color:var(--font-color);font-size:28px;margin-bottom:10px;font-weight:700;margin-top:0}.text-section .highlight{color:var(--header-footer-color);font-weight:700;font-size:22px}.text-section p{font-size:16px;color:var(--font-color);line-height:24px}.social-icons{margin-top:15px}.social-icons a{margin-right:20px;color:var(--header-footer-color);font-size:22px;transition:.3s}.social-icons a:hover{color:var(--font-color)}.work-experience{margin:10px 0;display:flex;flex-direction:column;gap:2px}.work-experience-item{font-weight:700;font-size:12px;color:var(--font-color)}.work-experience-list{display:flex;flex-direction:column;gap:18px;margin:18px 0}.work-experience-card{display:flex;align-items:center;background:var(--background-color, #f7f9fa);border-radius:8px;box-shadow:0 2px 8px #00000012;padding:16px 20px;transition:box-shadow .2s}.work-experience-card:hover{box-shadow:0 4px 16px #00000021}.work-experience-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 1px 4px #00000014;margin-right:18px}.work-experience-logo img{width:32px;height:32px;object-fit:contain}.work-experience-details{display:flex;flex-direction:column;gap:2px;color:var(--font-color)}.work-experience-role{font-weight:600;color:var(--header-footer-color, #0077b6);font-size:16px;color:var(--font-color)}.work-experience-company{font-size:15px;color:var(--font-color, #222)}.work-experience-date{font-size:13px;color:#888}@media (max-width: 768px){.work-experience-card{flex-direction:column;align-items:flex-start;padding:14px 12px}.work-experience-logo{margin-right:0;margin-bottom:10px}}@media (max-width: 768px){.about-me-container{flex-direction:column}.image-section{min-height:200px}.text-section{padding:20px}}@media (max-width: 480px){.text-section h2{font-size:20px}.text-section p{font-size:14px}}#contact{padding:60px 20px;text-align:center}.contact-container{max-width:500px;margin:auto;background:var(--header-footer-color);padding:30px;border-radius:10px;box-shadow:0 4px 10px #0003}h1{font-size:28px;margin-bottom:10px;color:var(--font-color)}p{font-size:16px;margin-bottom:20px;color:var(--font-color)}p a{color:var(--light-blue-color);text-decoration:none}p a:hover{text-decoration:underline}.contact-form-container{width:95%}form{width:100%}.button-div{width:100%;display:flex;justify-content:center}input,textarea{width:100%;padding:12px;margin:10px 0;border:2px solid var(--border-color);background-color:transparent;color:var(--font-color);font-size:16px;border-radius:5px;outline:none;transition:border-color .3s ease-in-out}input::placeholder,textarea::placeholder{color:var(--border-color)}input:focus,textarea:focus{border-color:var(--light-blue-color)}button{width:150px;display:block;margin-top:10px;padding:12px;text-align:center;background-color:var(--light-blue-color);color:var(--font-color);border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background .3s ease-in-out}button:hover{background-color:var(--border-color)}button:disabled{background-color:#6c757d;cursor:not-allowed}.state-message{margin-top:10px;font-size:14px;font-weight:700}@media (max-width: 768px){#contact{padding:40px 15px}.contact-container{max-width:90%;padding:20px}h1{font-size:24px}p{font-size:14px}input,textarea{padding:10px;font-size:14px}button{font-size:14px;padding:10px}}@media (max-width: 480px){h1{font-size:20px}p,input,textarea{font-size:14px}button{font-size:14px;padding:10px}}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--background-color);color:#fff;padding:40px 20px;text-align:center;gap:100px}@media (min-width: 768px){.container{flex-direction:row;justify-content:space-between;text-align:left;padding:60px 80px}}@media (max-width: 768px){.container{display:flex;flex-direction:column-reverse;gap:50px}}.content{max-width:600px}.title{font-size:3rem;font-weight:700;margin-bottom:10px}.subtitle{font-size:1.8rem;font-weight:600;margin-bottom:20px;color:var(--light-blue-color)}.description{font-size:1.1rem;line-height:1.8;margin-bottom:30px;opacity:.9}.button-group{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.button-group a{text-decoration:none}@media (min-width: 768px){.button-group{justify-content:flex-start}}.contact-btn,.cv-btn{padding:14px 24px;font-size:1rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease-in-out;text-decoration:none;border-bottom:none}.contact-btn{background:linear-gradient(135deg,var(--light-blue-color),var(--light-blue-color));color:var(--font-color)}.contact-btn:hover{background:linear-gradient(135deg,var(--light-blue-color),var(--light-blue-color))}.cv-btn{background:#333;color:var(--font-color)}.cv-btn:hover{background:#555}.social-links{margin-top:25px;display:flex;gap:20px;justify-content:center}.linkedin,.github{transition:transform .3s ease}.linkedin:hover,.github:hover{transform:scale(1.2)}.linkedin{color:var(--light-blue-color);font-size:2.6rem;display:flex;align-items:center}.github{display:flex;align-items:center;color:var(--border-color);font-size:2.6rem}.image-container{margin-top:40px;display:flex;justify-content:center}@media (min-width: 768px){.image-container{margin-top:0}}.profile-pic{width:250px;height:250px;border-radius:50%;object-fit:cover;border:4px solid #555;box-shadow:0 0 20px #fff3}@media (max-width: 520px){.title{font-size:32px}}.projects-container{max-width:1200px;margin:40px auto;background-color:var(--header-footer-color);padding:20px;border-radius:10px;box-shadow:0 4px 8px #0003}.projects-nav{display:flex;justify-content:center;gap:20px;padding:15px;background-color:var(--light-blue-color);border-radius:8px;margin-bottom:20px}.projects-nav button{padding:12px 24px;background-color:var(--border-color);color:var(--font-color);border:none;font-size:16px;font-weight:700;border-radius:5px;cursor:pointer;transition:background-color .3s ease-in-out}.projects-nav button.active{background-color:var(--font-color);color:var(--header-footer-color)}.projects-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.project-card{background:var(--light-blue-color);padding:20px;border-radius:10px;text-align:center;box-shadow:0 4px 6px #0003;transition:transform .3s ease-in-out}.project-card h3{font-size:22px}.project-card:hover{transform:translateY(-5px)}.project-image{width:100%;height:200px;object-fit:cover;border-radius:8px}.project-stack{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.stack-item{background:var(--border-color);color:var(--header-footer-color);padding:6px 12px;border-radius:5px;font-size:14px;font-weight:700}.project-button{display:inline-block;margin-top:15px;padding:10px 20px;background-color:var(--font-color);color:var(--header-footer-color);font-size:16px;font-weight:700;text-decoration:none;border-radius:5px;transition:background-color .3s ease-in-out,transform .2s ease-in-out}.project-button:hover{background-color:var(--border-color);color:var(--header-footer-color);transform:scale(1.05)}@media (max-width: 768px){.projects-nav{flex-direction:column;align-items:center}.projects-nav button{width:100%}.projects-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media (max-width: 440px){.projects-container{width:95%;padding:15px}.projects-nav{flex-direction:column;gap:10px}.projects-nav button{width:100%;padding:10px}.project-card{padding:15px}.project-image{height:160px}.project-button{font-size:14px;padding:8px 16px}}@media (max-width: 420px){.projects-list{grid-template-columns:1fr}.project-image{height:150px}.stack-item{font-size:12px;padding:4px 8px}}@media (max-width: 400px){.projects-container{padding:10px}.project-card{padding:12px}.project-image{height:140px}.project-button{font-size:13px;padding:7px 14px}}@media (max-width: 380px){.projects-nav button{font-size:14px;padding:8px}.project-image{height:130px}.project-button{font-size:12px;padding:6px 12px}}main{display:grid;place-items:center}.skills-container{background:#2c3e50;color:var(--font-color);padding:20px 40px;border-radius:12px;box-shadow:0 4px 10px #0000004d;max-width:80%;text-align:center;margin:50px}.skills-heading{font-size:32px;margin-bottom:20px;text-transform:uppercase;border-bottom:2px solid var(--header-footer-color);padding-bottom:10px;color:var(--font-color)}.skills-group{margin:25px 0}.skills-group h3{font-size:20px;margin-bottom:10px;text-align:left;border-left:4px solid var(--header-footer-color);padding-left:10px;color:var(--font-color)}.skills-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:left}.skill-item{background:var(--header-footer-color);padding:10px 15px;border-radius:8px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;transition:background .3s;cursor:pointer}.skill-item:hover{background:var(--light-blue-color)}.skill-icon{font-size:20px;display:grid;place-items:center}@media (max-width: 768px){.skills-container{max-width:90%;padding:20px}.skills-list{justify-content:center}}.Footer{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:20px 0;background-color:var(--header-footer-color);color:var(--font-color);box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}p{margin:0;padding:0;font-size:15px}.Navbar{display:flex;justify-content:center;align-items:center;background-color:var(--background-color);padding:20px;border:none}.Navbar a.active{color:var(--light-blue-color);padding-bottom:10px;border-bottom:2px solid var(--light-blue-color)}.hamburger-menu,.logo-div{display:none}.logo-div a{text-decoration:none}.logo-div h2{margin:0;padding:0;font-size:22px;color:var(--font-color);cursor:pointer}.logo-div h2:hover{color:var(--light-blue-color)}.navbar-list{display:flex;justify-content:space-between;align-items:center;gap:50px;padding-left:0;list-style:none}.navbar-list li{color:var(--font-color);font-size:18px}.navbar-list li a{text-decoration:none;color:var(--font-color);transition:.2s ease-in}.navbar-list li a:hover{color:var(--light-blue-color)}@media only screen and (max-width: 440px){.Navbar{display:flex;justify-content:space-between;padding:10px 20px;height:50px;align-items:center}.logo-div{display:block}.logo-div h2{font-size:16px}.navbar-list{display:none}.hamburger-menu{width:100%;display:block;text-align:right;color:var(--font-color)}button.menu-button{position:absolute;top:8px;width:50px;right:10px;font-size:16px;background-color:var(--header-footer-color);color:var(--font-color);border:none;cursor:pointer;border-radius:5px;padding:5px}.navigation ul{display:block;list-style:none;background-color:var(--light-blue-color);height:max-content;width:100px;margin-top:25px;position:absolute;right:0;top:30px;padding:5px 15px 5px 5px}.navigation ul li{color:var(--font-color);font-size:14px;padding-bottom:10px}.navigation li a{text-decoration:none;color:var(--font-color)}}@media only screen and (max-width: 420px){.Navbar{display:flex;justify-content:space-between;padding:10px 20px;height:50px;align-items:center}.logo-div{display:block}.logo-div h2{font-size:16px}.navbar-list{display:none}.hamburger-menu{width:100%;display:block;text-align:right;color:var(--font-color)}button.menu-button{position:absolute;top:8px;width:50px;right:10px;font-size:18px;background-color:var(--header-footer-color);color:var(--font-color);border:none;cursor:pointer;border-radius:5px}.navigation ul{display:block;list-style:none;background-color:var(--light-blue-color);height:max-content;width:100px;margin-top:22px;position:absolute;right:0;padding:5px 15px 5px 5px}.navigation ul li{color:var(--font-color);font-size:14px;padding-bottom:10px}.navigation li a{text-decoration:none;color:var(--font-color)}}@media only screen and (max-width: 380px){.Navbar{display:flex;justify-content:space-between;padding:10px 20px;height:50px;align-items:center}.logo-div{display:block}.logo-div h2{font-size:16px}.navbar-list{display:none}.hamburger-menu{width:100%;display:block;text-align:right;color:var(--font-color)}.navigation ul{display:block;list-style:none;background-color:var(--light-blue-color);height:max-content;width:100px;margin-top:20px;position:absolute;right:0;padding:5px 15px 5px 5px}.navigation ul li{color:var(--font-color);font-size:14px;padding-bottom:10px}.navigation li a{text-decoration:none;color:var(--font-color)}}@media (min-width: 440px){.menu-button{display:none}}.menu-button{position:absolute;top:10px;right:10px;font-size:18px;background-color:var(--header-footer-color);color:var(--font-color);border:none;cursor:pointer;border-radius:5px}.sidebar{position:fixed;top:0;right:0;width:250px;height:100%;background:var(--header-footer-color);color:var(--font-color);display:flex;flex-direction:column;align-items:center;padding:20px;box-shadow:-2px 0 5px #0003;z-index:99999}.sidebar nav{display:flex;flex-direction:column;gap:15px;margin-top:30px}.sidebar nav a{color:var(--font-color);text-decoration:none;font-size:18px;transition:.3s}.sidebar nav a:hover{color:var(--light-blue-color)}.close-button{align-self:flex-end;background:none;border:none;font-size:24px;color:var(--font-color);cursor:pointer}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080}.Header{width:100%;height:max-content;box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}:root{--header-footer-color: #0d1b2a;--background-color: #1b263b;--font-color: #e0e1dd;--border-color: #778da9;--light-blue-color: #415a77}body{font-family:Roboto,sans-serif;margin:0;padding:0;box-sizing:border-box}#main{width:100%;min-height:100vh;background-color:var(--background-color)}