@charset "UTF-8";
/* Clean, responsive stylesheet for portfolio — simplified and professional
   - centered max-width layout (960px)
   - responsive typography
   - flexbox-based project grid (no JS required)
   - accessible focus states and visible skip link
*/

/* Minimal reset */
* {box-sizing: border-box;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,dl,dt,dd,ol,ul,li,form,fieldset,legend,input,textarea,table,th,td{margin:0;padding:0;border:0}
html{font-size:16px}
body{font-family:Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#0b0b0b; background:#fff; line-height:1.4}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;left:auto;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;border-radius:4px}

/* Header */
.header-2{/* padding:28px 0; *//* border-top:3px solid #020b2b; *//* border-bottom:3px solid #020b2b; *//* background:#fbfcfc; */}
.l-constrained-3{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto}
.text{display:block}
nav[aria-label="Main navigation"] a{display:inline-block;margin-left:18px;color:#040003;font-weight:600;text-decoration:none}
nav[aria-label="Main navigation"] a:focus, nav[aria-label="Main navigation"] a:hover{outline:2px solid #ff6fa5;outline-offset:3px}

/* Hero */
.hero-section{display: flex;flex-direction: column;align-items: center;padding-top: 16rem;padding-bottom: 1rem;gap: 1rem;/* padding: 73px 0; */}
.text-7{font-size:2.6rem;font-weight:700;color:#040003}
.text-8{margin-top:8px;font-size:1.25rem;font-weight:600}
.text-9{margin-top:12px;font-size:1rem;color:#222;line-height:1.4;max-width:700px;margin-left:auto;margin-right:auto}

/* Projects */
.button{display:inline-block;background:#ff6fa5;color:#030303;padding:18px 28px;border-radius:22px;font-weight:700;font-size:1.125rem;text-decoration:none}
.button:focus,.button:hover{outline:3px solid rgba(255,111,165,0.25)}
.text-11{margin-top:24px;font-size:1.6rem;font-weight:700}
.row-2{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:28px auto 0;max-width:920px}
.col-3,.col-4{flex:1 1 320px;max-width:460px}
.col-3 img,.col-4 img{display:block;width:100%;height:auto;border-radius:6px}
.text-12,.text-13,.text-14,.text-15,.text-16,.text-17{margin-top:10px;font-weight:600;text-align:center}

/* About / skills / contact */
.about-me,.skills,.contact-me{/* padding:28px 0; */}
.intro-pic{float:right;margin-left:14px;width:40%;max-width:320px;border-radius:6px}
.text-18{font-size:2rem;font-weight:700;text-align:center;margin-bottom:14px}
.text-19{/* max-width:560px; */margin:0 auto;font-weight:300;line-height:1.6}
.skills-img,.app-images{display:block;margin:24px auto;max-width:100%}

.contact-me{background:rgba(236,184,204,0.06);padding:28px;border-radius:6px;}
.text-22{font-size:1.8rem;margin-bottom:8px}
.text-23{color:#ff6fa5;margin-bottom:12px}


/* Footer */
.footer-2{border-top:3px solid #030303;padding:18px 0;margin-top:28px}
.text-24{float:left}
.indeed-clickable{float:right}
.text-26,.text-25{float:right;margin-right:12px}

/* Responsive tweaks */
@media (max-width:720px){
  .intro-pic{float:none;display:block;margin:12px auto;width:60%}
  .l-constrained-3{padding:0 8px}
  .text-7{font-size:2rem}
  .button{padding:12px 18px}
}

/* small accessibility helpers */
a:focus{outline:3px solid rgba(255,111,165,0.25);outline-offset:3px}
/* @charset "UTF-8"; */
/**
* Eric Meyer's Reset CSS v2.0
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea {
  margin: 0;
  padding: 0;
  /* border: 0; */
  /* font: inherit; */
  /* font-size: 100%; */
  /* vertical-align: baseline; */
}


ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
body {
  color: #000000;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem; /* base ~18px for readability */
  line-height: 1.35;
  margin: 0;
  background: #ffffff;
}

/* Increase typographic scale on larger screens to preserve original design */
@media (min-width: 960px) {
  body { font-size: 1.5rem; }
}
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* meyerweb css reset end */

textarea:focus, input:focus {
  outline: 0;
}

input {
  border-width: 0;
}

em {
  font-style: italic;
}
.wrapper {
  position: relative;
  width: 100%;
  min-height: 100px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}

.group:before,
.group:after {
.col-2 {
  padding: 30px 0 32px;
  position: relative;
  width: 100%;
  background: rgba(236, 184, 204, 0.3);
}
  content: " ";
  display: table;
}

.group:after {
  clear: both;
.l-constrained-4 {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 960px;
}
}

.group {
  zoom: 1; /* ie 6/7 */
}

/* Projects grid: use flexbox instead of JS height-matching */
.row-2 {
  margin: 40px auto 0;
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 920px;
}
.col-3,
.col-4 {
  flex: 1 1 320px;
  box-sizing: border-box;
  width: auto;
  position: relative;
}
sup {
  font-size: 58.3%;
  vertical-align: text-top;
}
.project1-clickable {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
sub {
  font-size: 58.3%;
  vertical-align: text-bottom;
}
.no-space-between-inline-blocks {
  letter-spacing: normal; /*reset IE < 8*/
.col-4 {
  position: relative;
}
  letter-spacing: -0.31em; /*webkit*/
  word-spacing: -0.43em; /*IE < 8 && gecko*/
}
/*restore spacing on inner elements*/
.no-space-between-inline-blocks > * {
  letter-spacing: normal;
.row {
  margin: 33px 0 0;
  position: relative;
}
  word-spacing: normal;
}
.displace {
  left: -5000px;
  position: absolute;
}
html {
.l-constrained {
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  max-width: 960px;
}
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:after,
*:before {
/* --- Updated Contact Form Styles --- */

html {
  font-size: 16px;
}
body {
  min-width: 960px;
  color: #000000;
  font-family: Poppins, sans-serif;
  font-size: 1.5rem; /* 24px / 16px = 1.5rem */
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
  text-decoration: none;
.send-box-holder {
  display: inline-block;
  margin: 32px 0 0;
  padding: 18px 36px;
  border-radius: 20px;
  background: #ff6ea4;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}
}

/* Accessible skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
.l-constrained-2 {
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  max-width: 960px;
}
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
}
.header {
  overflow: hidden;
  position: relative;
  z-index: 64;
}
.header-2 {
  display: flex;
  justify-content: space-around;
  /* align-items: center; */
  padding: 50px 0 36px;
  /* position: relative; */
  /* border-left: 0.26px solid #020b2b; */ /*stroke*/
  /* border-top: 3px solid #020b2b; */ /*stroke*/
  /* border-right: 1.26001px solid #020b2b; */ /*stroke*/
  border-bottom: 3px solid #020b2b; /*stroke*/
  /* background: #fbfcfc; */
  -moz-background-clip: padding;
  /* -webkit-background-clip: padding-box; */
  /* background-clip: padding-box; */ /*Will not allow bg color to leak outside borders*/
}
.l-constrained-3 {
  margin: 0 -0.3125%; /* -3px / 960px = -0.3125% */
  padding: 0 78px 0 95px;
  position: relative;
  width: 960px;
}
.text {
  float: left;
}
.text-6 {
  float: right;
  margin: 2px 0 0;
  color: #040003;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 1.3125rem; /* 21px / 16px = 1.3125rem */
  text-align: center;
}
.text-5 {
  float: right;
  margin: 3px 20px 0 0;
  color: #040003;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 1.3125rem; /* 21px / 16px = 1.3125rem */
  text-align: center;
}
.text-4 {
  float: right;
  margin: 2px 16px 0 0;
  color: #040003;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 1.3125rem; /* 21px / 16px = 1.3125rem */
  text-align: center;
}
.text-3 {
  float: right;
  margin: 1px 15px 0 0;
  color: #040003;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 1.3125rem; /* 21px / 16px = 1.3125rem */
  text-align: center;
}
.text-2 {
  float: right;
  margin: 2px 17px 0 0;
  color: #040003;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 1.3125rem; /* 21px / 16px = 1.3125rem */
  text-align: center;
}
.main-content-wrapper {
  margin: -1px 0 0;
  position: relative;
  z-index: 3;
}
.wrapper {
  height: 1558px;
  position: relative;
  width: 100%; /* 960px / 960px = 100% */
}
.bg-circle {
  height: 338px;
  left: 50%;
  position: absolute;
  top: 268px;
  width: 335px;
  -webkit-border-radius: 168.89px/169.18px;
  -moz-border-radius: 168.89px/169.18px;
  border-radius: 168.89px/169.18px;
  background: rgba(244, 139, 228, 0.3);
  margin-left: 145px;
}
.col-2 {
  left: 0;
  padding: 30px 0 32px;
  position: absolute;
  top: 0;
  width: 100%; /* 960px / 960px = 100% */
  background: rgba(236, 184, 204, 0.3);
}
.l-constrained-4 {
  margin: 0 auto;
  position: relative;
  width: 960px;
}
.wrapper-2 {
  height: 338px;
  margin: 0 0 0 5px;
  position: relative;
  width: 917px;
}
.bg-circle-2 {
  height: 338px;
  left: 50%;
  position: absolute;
  top: 0;
  width: 338px;
  -webkit-border-radius: 168.89px/169.18px;
  -moz-border-radius: 168.89px/169.18px;
  border-radius: 168.89px/169.18px;
  background: rgba(236, 184, 204, 0.4);
  margin-left: -458.5px;
}
.text-7 {
  color: #040003;
  font-size: 3.055506rem; /* 48.89px / 16px = 3.055625rem */
  font-weight: 600;
  text-align: center;
}
.text-8 {
  margin: 7px 0 0;
  color: #0c0b0c;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 1.875rem; /* 30px / 16px = 1.875rem */
  text-align: center;
}
.text-9 {
  margin: 12px auto 0;
  color: #020202;
  font-size: 1.261264rem; /* 20.18px / 16px = 1.26125rem */
  line-height: 1.2;
  text-align: center;
}
.projects {
  left: 12px;
  margin: 0 auto;
  /* position: relative; */
  width: fit-content;
}
.button {
  left: 26px;
  margin: 0 auto;
  min-height: 92px;
  padding: 0 7px;
  position: relative;
  width: 374px;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  border-radius: 22px;
  background: #ff6fa5;
  color: #030303;
  font-size: 2.875732rem; /* 46.01px / 16px = 2.875625rem */
  font-weight: 600;
  line-height: 92px;
  text-align: right;
}
.text-11 {
  margin: 87px 0 0;
  font-size: 2.125rem; /* 34px / 16px = 2.125rem */
  font-weight: 600;
  text-align: center;
}
.row-2 {
  margin: 61px auto 0;
  position: relative;
  width: 668px;
}
.col-3 {
  float: left;
  position: relative;
  width: 326px;
}
.project1-clickable {
  display: block;
  position: relative;
}
.text-12 {
  margin: 14px 63px 0 54px;
  color: #040404;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.project3-clickable {
  display: block;
  margin: 10px auto 0;
}
.text-13 {
  margin: 19px 60px 0 69px;
  color: #040404;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.project5-clickable {
  display: block;
  left: 5.5px;
  margin: 37px auto 0;
  position: relative;
}
.text-14 {
  margin: 21px 65px 0 87px;
  color: #040404;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.col-4 {
  float: right;
  position: relative;
  width: 327px;
}
.project2-clickable {
  display: block;
  position: relative;
}
.text-15 {
  margin: 16px auto 0;
  position: relative;
  right: 10px;
  width: 165px;
  color: #040404;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.project4-clickable {
  display: block;
  margin: 9px 0 0;
  position: relative;
}
.text-16 {
  margin: 23px 50px 0 64px;
  color: #040404;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.project6-clickable {
  display: block;
  left: 5px;
  margin: 36px auto 0;
  position: relative;
}
.text-17 {
  margin: 17px 45px 0 59px;
  color: #040404;
  font-size: 1.375rem; /* 22px / 16px = 1.375rem */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.col {
  margin: 68px 0 0;
  padding: 31px 0 33px;
  position: relative;
  background: rgba(236, 184, 204, 0.2);
}
.l-constrained {
  margin: 0 auto;
  padding: 0 56px;
  position: relative;
  width: 960px;
}
.about-me {
  left: 9.5px;
  margin: 0 auto;
  position: relative;
  width: 805px;
}
.wrapper-3 {
  /* left: 8.5px; */
  /* margin: 0 auto; */
  /* position: relative; */
  /* width: 788px; */
}
.text-18 {
  margin: 0 auto 23px;
  font-size: 3rem; /* 48px / 16px = 3rem */
  font-weight: 600;
  text-align: center;
  /* text-shadow: 0 0 7px #080808; /*outer glow*/ 
}
.intro-pic {
  float: right;
  margin: 26px 0 0 10px;
}
.text-19 {
  width: 820px;
  font-weight: 300;
  line-height: 40px;
}
.row {
  margin: 33px 0 0;
  /* position: relative; */
  width: 310px;
}
.button-2 {
  float: left;
  min-height: 70px;
  padding: 13px 0 27px;
  width: 183px;
  background: url(images/view_cv.png) no-repeat;
  color: #0d0c0c;
  font-weight: 600;
  text-align: center;
}
.button-3 {
  float: left;
  margin: 1px 0 0 4px;
}
.button-4 {
  float: right;
}
.skills {
  left: 9px;
  margin: 124px auto 0;
  position: relative;
  width: 830px;
}
.skills-img {
  display: block;
  margin: 0 auto;
  position: relative;
  right: 13.5px;
}
.app-images {
  display: block;
  margin: 75px auto 0;
  position: relative;
  right: 10.5px;
}
.text-21 {
  margin: 101px 0 0;
  color: #0c0b0c;
  font-size: 2.6875rem; /* 43px / 16px = 2.6875rem */
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
}
.bg-box-holder {
  margin: 68px 0 0;
  padding: 32px 0 96px;
  position: relative;
  background: rgba(236, 184, 204, 0.2);
}
.contact-me {
  margin: 93px auto;
  /* padding: 0 86px; */
  position: relative;
  width: 960px;
}
.text-22 {
  margin: 0 0 0 10px;
  font-size: 3.903734rem; /* 62.46px / 16px = 3.90375rem */
  font-weight: bold;
}
.text-23 {
  margin: 17px 0 0 14px;
  color: #ff6fa5;
  font-size: 2.25rem; /* 36px / 16px = 2.25rem */
  font-weight: 300;
  line-height: 38px;
}
.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
  padding-bottom: 3rem;
  z-index: 57;
}
.footer-2 {
  padding: 34px 0 27px;
  position: relative;
  border: 3px solid #030303; /*stroke*/
}
.l-constrained-2 {
  margin: 0 -0.3125%; /* -3px / 960px = -0.3125% */
  padding: 0 31px 0 51px;
  position: relative;
  width: 960px;
}
.text-24 {
  float: left;
  margin: 12px 0 0;
}
.indeed-clickable {
  float: right;
}
.text-26 {
  float: right;
  margin: 5px 8px 0 0;
  color: #2413e9;
  font-weight: 300;
  text-align: center;
}
.text-25 {
  float: right;
  margin: 7px 40px 0 0;
  color: #0c0b0c;
  font-weight: 300;
  text-align: center;
}
.colorff6fa5 {
  color: #ff6fa5;
}

/* Contact form styles (matches provided mockup) */
/* Scope: targets the form block using .form-container and related elements */
.form-container {
    max-width: 420px;
    margin: 1.5rem auto 2.5rem;
    padding: 0 1rem;
    text-align: left;
}

/* Heading near the form */
h1 {
    font-size: 3.2rem;
    line-height: 1;
    margin: 1.25rem 0 0.6rem;
    font-weight: 900;
    color: #0b0b0b;
}

.form-container form p {
    margin: 0 0 1.35rem;
}

.form-container label {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: #0b0b0b;
    margin-bottom: 0.6rem;
}

/* inputs and textarea: rounded, filled pink with white placeholder/text */
.form-container input[type="text"],
.form-container textarea {
    width: 100%;
    border: none;
    outline: none;
    background: linear-gradient(180deg,#ff6aa0 0%, #ff68a8 100%);
    color: #fff;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    font-size: 1.05rem;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.05);
}

.form-container input[type="text"] {
    height: 48px;
}

.form-container textarea {
    min-height: 260px;
    resize: vertical;
    padding-top: 1.25rem;
}

/* placeholder color */
.form-container ::-webkit-input-placeholder { color: rgba(255,255,255,0.95); }
.form-container :-ms-input-placeholder { color: rgba(255,255,255,0.95); }
.form-container ::placeholder { color: rgba(255,255,255,0.95); }

/* Send button: small rounded pill with soft pink background */
.form-container input[type="button"] {
    background: linear-gradient(180deg,#ff90b8 0%, #ff7aa6 100%);
    color: #fff;
    border: none;
    padding: 0.9rem 2.0rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,0.06);
    margin-top: 0.6rem;
}

.form-container input[type="button"]:active {
    transform: translateY(1px);
}

/* response container (success message) */
.response-container h4 {
    background: transparent;
    color: #0b0b0b;
    font-weight: 600;
    margin: 1rem auto;
}

/* Make things look nicer on small screens */
@media screen and (max-width: 480px) {
    h1 { font-size: 2.6rem; }
    .form-container { padding: 0 0.8rem; }
    .form-container textarea { min-height: 220px; }
}
.contactform {
    background-color: rgb(253, 233, 248);
    padding: 1.25rem 2rem 3rem;
    margin: 0.6rem auto 3rem;
    border-radius: 12px;
    max-width: 720px;
    text-align: left;
}

.contactform h1 {
    font-size: 3.6rem;
    margin: 0.25rem 0 0.2rem;
    font-weight: 900;
}

.contactform > p {
    margin: 0.35rem 0 1.25rem;
    color: #ff7db0;
    font-size: 1.15rem;
}

.contactform .form-container { max-width: 680px; padding: 0; }
.contactform form p { margin-bottom: 1.6rem; }

.contactform label {
    display: block;
    font-size: 2.0rem;
    font-weight: 900;
    color: #0b0b0b;
    margin-bottom: 0.6rem;
}

.contactform input[type="text"],
.contactform textarea {
    width: 100%;
    border: none;
    outline: none;
    background: linear-gradient(180deg,#ff6aa0 0%, #ff68a8 100%);
    color: #fff;
    padding: 1.05rem 1.25rem;
    border-radius: 14px;
    font-size: 1.15rem;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.05);
}

.contactform input[type="text"] { height: 52px; }
.contactform textarea { min-height: 300px; padding-top: 1.25rem; }

.contactform ::-webkit-input-placeholder { color: rgba(255,255,255,0.95); font-size:1.15rem; }
.contactform :-ms-input-placeholder { color: rgba(255,255,255,0.95); }
.contactform ::placeholder { color: rgba(255,255,255,0.95); }

.contactform input[type="button"] {
    background: linear-gradient(180deg,#ff90b8 0%, #ff7aa6 100%);
    color: #fff;
    border: none;
    padding: 0.85rem 2.0rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(0,0,0,0.06);
    margin-top: 0.4rem;
    display: inline-block;
}

.contactform form p:last-child { margin-bottom: 0; }

@media screen and (max-width: 640px) {
    .contactform { padding: 1rem; }
    .contactform h1 { font-size: 3.0rem; }
    .contactform label { font-size: 1.7rem; }
    .contactform input[type="text"], .contactform textarea { font-size: 1.05rem; }
    .contactform textarea { min-height: 220px; }
}
}