@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* ============ Tokens ============ */
:root{
  --hue-color:242;
  --skin-color:#3B82F6; --skin-color-hover:#2563EB; --skin-color-soft:#93C5FD;
  --mirage-color:#000000; /* solid black */

  --title-color:hsl(var(--hue-color),8%,95%);
  --text-color:hsl(var(--hue-color),8%,85%);
  --body-color:hsl(var(--hue-color),19%,5%);
  --box-color:hsl(var(--hue-color),14%,10%);
  --scroll-box-color:hsl(var(--hue-color),12%,38%);
  --scroll-thumb-color:hsl(var(--hue-color),12%,26%);

  --body-font:'Poppins',sans-serif;
  --biggest-font-size:3rem; --h1-font-size:2.25rem; --h2-font-size:1.5rem; --h3-font-size:1.25rem;
  --normal-font-size:1rem; --small-font-size:.875rem; --smaller-font-size:.813rem;

  --font-medium:500; --font-bold:600;

  --mb025:.25rem; --mb05:.5rem; --mb075:.75rem; --mb1:1rem; --mb15:1.5rem; --mb2:2rem; --mb25:2.5rem; --mb3:3rem;

  --nav-h:64px; --z-fixed:1000; --z-modal:100;

  --page-max:1120px;
}

@media (max-width:1024px){
  :root{
    --biggest-font-size:2rem; --h1-font-size:1.5rem; --h2-font-size:1.25rem; --h3-font-size:1.125rem;
    --normal-font-size:.938rem; --small-font-size:.813rem; --smaller-font-size:.75rem;
  }
}

/* ============ Base ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body,button,input{font-family:var(--body-font);font-size:var(--normal-font-size)}
body{background:var(--body-color);color:var(--text-color)}
h1,h2,h3{color:var(--title-color);font-weight:var(--font-bold)}
ul{list-style:none}
a{text-decoration:none;color:var(--skin-color)}
a:hover{color:var(--skin-color-hover)}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer}
button,input{border:none;outline:none}
:focus-visible{outline:2px solid var(--skin-color-soft);outline-offset:3px}

.container{
  width:min(96vw,var(--page-max));
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,32px);
}

.grid{display:grid}
:target{scroll-margin-top:var(--nav-h)}

/* ============ Buttons ============ */
.button{
  display:inline-flex;align-items:center;column-gap:.5rem;
  background:var(--skin-color);color:var(--title-color);
  padding:.75rem 1.4rem;border-radius:.25rem;font-weight:var(--font-medium);
  position:relative;z-index:1;transition:.4s
}
.button::after{
  content:'';position:absolute;inset:0;background:var(--skin-color-hover);
  z-index:-1;transform:scale(0);transform-origin:center;border-radius:.25rem;transition:.3s
}
.button:hover::after{transform:scale(1)}

/* ============ Sections ============ */
.section{
  padding:clamp(3rem,6vw,6.5rem) 0 clamp(1rem,3vw,2rem);
  background-color:#000000;
}
.section-title{text-align:center;font-size:var(--h1-font-size);margin-bottom:var(--mb3)}
.section-title::before{
  content:attr(data-heading);display:block;font-size:var(--normal-font-size);
  font-weight:var(--font-medium);color:var(--skin-color)
}

/* ============ Scrollbar ============ */
::-webkit-scrollbar{width:.6rem;background:var(--scroll-box-color);border-radius:.5rem}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb-color);border-radius:.5rem}

/* ============ Navbar ============ */
.navbar{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-fixed);
  background:rgba(16,17,22,.75);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar.scrolled{background:rgba(16,17,22,.9);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:1rem;padding-inline:clamp(.5rem,2vw,.75rem)}
.nav-brand{
  display:inline-flex;justify-content:center;align-items:center;
  width:40px;height:40px;border-radius:50%;background:var(--skin-color);
  color:var(--title-color);font-weight:var(--font-bold)
}
.nav-logo-text{font-size:1.125rem}
.nav-menu{display:flex;align-items:center;gap:1rem;margin-left:auto}
.nav-list{display:flex;gap:.25rem}
.nav-link{color:var(--title-color);display:inline-block;padding:.25rem .9rem;line-height:1;position:relative;transition:color .2s}
.nav-link::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:-6px;height:2px;background:transparent;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link:hover{color:var(--skin-color)}
.nav-link:hover::after,.nav-link.active-link::after{background:var(--skin-color);transform:scaleX(1)}
.nav-link.active-link{color:var(--skin-color)}
.btn-share{background:none;color:var(--title-color);font-size:1.25rem;padding:.4rem .6rem;border-radius:.4rem}
.btn-share:hover{color:var(--skin-color)}
.nav-toggle{display:none;width:40px;height:40px;border-radius:.5rem;background:var(--box-color);color:var(--title-color);font-size:1.2rem}

/* offset for fixed navbar */
.main{padding-top:var(--nav-h)}

@media (max-width:900px){
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav-menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;background:rgba(16,17,22,.98);
    border-bottom:1px solid var(--box-color);
    display:grid;align-content:start;gap:1rem;padding:1rem;
    transform:translateY(-120%);transition:transform .25s
  }
  .nav-menu.open{transform:translateY(0)}
  .nav-list{flex-direction:column;gap:.5rem}
  .nav-link{padding:.75rem 1rem;font-size:1.05rem}
  body.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.nav-link::after,.nav-menu{transition:none}}

/* ============ Home ============ */
.home{
  position:relative;
  background-color:var(--mirage-color);
  background-image:url('./img/homelogo.png');
  background-repeat:no-repeat;
  background-position:right center;                 /* keep on the right */
  background-size:clamp(260px,34vw,520px);         /* smaller size */
  min-height:clamp(560px,100vh - var(--nav-h),900px);
  display:flex;align-items:center;
}
.home .container{max-width:var(--page-max)}
.home-container{
  display:grid;
  grid-template-columns:minmax(340px,1fr) minmax(260px,420px);
  align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
}
.home-title{font-size:clamp(2rem,4.2vw,var(--biggest-font-size))}
.home-subtitle{font-size:clamp(1rem,1.8vw,var(--h3-font-size));font-weight:var(--font-medium);margin-bottom:var(--mb075))}
.home-description{max-width:56ch;margin-bottom:var(--mb2)}
.home-img{width:clamp(240px,28vw,420px);justify-self:end}

/* Social strip */
.home-social{position:absolute;top:1.8rem;left:clamp(0px,2vw,24px);display:flex;align-items:center;column-gap:3.5rem}
.home-social-follow{font-weight:var(--font-medium);position:relative}
.home-social-follow::after{content:'';position:absolute;width:1rem;height:2px;background:var(--text-color);right:-45%;top:50%}
.home-social-links{display:inline-flex;column-gap:1rem}
.home-social-link{font-size:1.08rem;color:var(--text-color);transition:.4s}
.home-social-link:hover{transform:translateY(.25rem)}

/* Contact blips within hero */
.my-info{display:flex;column-gap:1.8rem;position:absolute;left:0;bottom:1.8rem}
.info-item{display:flex;align-items:center}
.info-title,.info-subtitle{font-size:var(--small-font-size)}
.info-title{font-weight:var(--font-medium)}
.info-icon{font-size:1.8rem;color:var(--skin-color);margin-right:var(--mb075)}

@media (max-width:1200px){
  .home{
    background-position:105% center;               /* nudge further right */
    background-size:clamp(240px,36vw,480px);
  }
}
@media (max-width:576px){
  .home{
    background-position:115% center;               /* keep clear of text on phones */
    background-size:clamp(220px,70vw,420px);
    height:initial;align-items:initial;padding:7rem 0 2rem;
  }
  .home-container{grid-template-columns:1fr;row-gap:2rem}
  .home-img{width:250px;justify-self:center}
  .my-info{display:none}
  .home-social{left:initial;right:-1rem;flex-direction:column;row-gap:3.5rem}
  .home-social-follow{font-size:var(--smaller-font-size);transform:rotate(90deg)}
  .home-social-links{flex-direction:column;row-gap:.25rem}
  .home-social-link{font-size:var(--normal-font-size)}
}

/* ============ About ============ */
.about-container{
  display:grid;
  grid-template-columns:minmax(260px,360px) 1fr;
  gap:clamp(1.25rem,3vw,2rem);
  align-items:start;
}
.about-img{
  width:100%;
  max-width:380px;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:.75rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  justify-self:center;
}
.about-heading{font-size:var(--h3-font-size);margin-bottom:var(--mb075)}
.about-description{text-align:left;margin-top:.5rem;margin-bottom:var(--mb2);max-width:72ch}
.about-info{display:grid;grid-template-columns:repeat(3,140px);column-gap:.5rem;margin-bottom:var(--mb3)}
.about-box{text-align:center;border-radius:.25rem;padding:1rem 1.25rem;background:var(--box-color)}
.about-icon{font-size:1.5rem;color:var(--skin-color);margin-bottom:var(--mb075)}
.about-title,.about-subtitle{font-size:var(--small-font-size)}
@media (max-width:1024px){
  .about-container{grid-template-columns:1fr;justify-items:center;text-align:center}
  .about-description{max-width:65ch;text-align:center;margin-inline:auto}
}

/* ============ Qualification ============ */
.qualification-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.5rem,3vw,3rem);
  justify-content:center;
}
.qualification-title{font-size:var(--h3-font-size);font-weight:var(--font-medium);margin-bottom:var(--mb2)}
.timeline-item{position:relative;margin-bottom:var(--mb25);padding-left:3rem}
.timeline-item:last-child{margin-bottom:0}
.timeline-item::before{content:'';width:1px;position:absolute;left:.48rem;top:0;height:100%;background:var(--skin-color)}
.circle-dot{position:absolute;left:0;top:0;height:1rem;width:1rem;border:2px solid var(--skin-color);border-radius:50%;background:var(--skin-color);transition:.4s}
.timeline-item:hover .circle-dot{background:var(--body-color)}
.timeline-title{font-size:clamp(.95rem,1.1vw,1rem);font-weight:var(--font-medium);margin-bottom:var(--mb025)}
.timeline-text{font-size:clamp(.8rem,.95vw,.9rem);margin-bottom:var(--mb1)}
.timeline-date{display:flex;align-items:center;column-gap:.4rem;font-size:clamp(.9rem,1vw,1rem);color:var(--skin-color)}

/* ============ Skills ============ */
.skills-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.5rem,3vw,3rem);
}
.skills-header{display:flex;align-items:center;cursor:pointer}
.skills-header:not(:last-child){margin-bottom:var(--mb25)}
.skills-icon,.skills-arrow{font-size:2rem;color:var(--skin-color)}
.skills-icon{margin-right:var(--mb075)} .skills-arrow{margin-left:auto}
.skills-active .skills-arrow{transform:rotate(-90deg);transition:.4s}
.skills-title{font-size:var(--h3-font-size);font-weight:var(--font-medium)}
.skills-subtitle{font-size:var(--small-font-size)}
.skills-list{row-gap:1.8rem}
.skills-titles{display:flex;justify-content:space-between;margin-bottom:var(--mb05)}
.skills-name{font-size:var(--normal-font-size);font-weight:var(--font-medium)}
.skills-bar,.skills-percentage{height:5px;border-radius:.25rem}
.skills-bar{background:var(--box-color)}
.skills-percentage{display:block;background:var(--skin-color)}
.skills [data-content]{display:none} .skills-active[data-content]{display:block}

/* ============ Work ============ */
.work-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(1rem,2.2vw,1.8rem);
  justify-content:center;
  padding-top:clamp(.5rem,1.5vw,1rem);
}
.work-filters{display:flex;justify-content:center;align-items:center;column-gap:.75rem;margin-bottom:2rem}
.work-item{cursor:pointer;color:var(--title-color);padding:.25rem .75rem;font-weight:var(--font-medium);border-radius:.5rem}
.work-card{background:var(--box-color);padding:clamp(1rem,2.2vw,1.5rem);border-radius:.5rem}
.portfolio-item-details{display:none}
.work-img{border-radius:.5rem;margin-bottom:var(--mb1)}
.work-title{font-size:var(--normal-font-size);font-weight:var(--font-medium);margin-bottom:var(--mb05)}
.work-button{color:var(--skin-color);font-size:var(--small-font-size);display:flex;align-items:center;column-gap:.25rem;cursor:pointer}
.work-button-icon{font-size:1rem;transition:.4s}
.work-button:hover .work-button-icon{transform:translateX(.25rem)}
.active-work{background:var(--skin-color);color:var(--title-color)}

/* ============ Portfolio Popup ============ */
.portfolio-popup{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:flex;justify-content:center;align-items:center;padding:0 1rem;
  opacity:0;visibility:hidden;z-index:var(--z-modal);transition:.4s
}
.portfolio-popup.open{opacity:1;visibility:visible}
.portfolio-popup-inner{
  background:var(--box-color);
  width:min(92vw,900px);
  border-radius:.5rem;padding:2.5rem;position:relative
}
.portfolio-popup-content{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;column-gap:3rem}
.portfolio-popup-close{position:absolute;top:1.5rem;right:1.5rem;font-size:1.5rem;color:var(--skin-color);cursor:pointer}
.portfolio-popup-img{border-radius:.5rem}
.portfolio-popup-subtitle{font-size:var(--smaller-font-size);margin-bottom:var(--mb025)}
.details-title{font-size:var(--h3-font-size);font-weight:var(--font-medium);margin-bottom:var(--mb1)}
.details-description{font-size:var(--small-font-size);margin-bottom:var(--mb2)}
.details-info li{margin-bottom:var(--mb075);text-transform:capitalize;font-size:var(--small-font-size)}
.details-info li:last-child{margin-bottom:0}
.details-info li span{font-weight:normal}
.details-info li a{text-transform:lowercase;color:var(--skin-color)}

/* ============ Services ============ */
.services-container{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  justify-content:center;gap:clamp(1rem,2.5vw,2rem)
}
.services-content{position:relative;background:var(--box-color);padding:clamp(1rem,2.2vw,1.5rem);border-radius:.25rem}
.services-icon{display:block;font-size:1.8rem;color:var(--skin-color);margin-bottom:var(--mb1)}
.services-title{font-size:var(--h3-font-size);margin-bottom:var(--mb1);font-weight:var(--font-medium)}
.services-button{color:var(--skin-color);font-size:var(--small-font-size);display:flex;align-items:center;column-gap:.25rem;cursor:pointer}
.services-button-icon{font-size:1rem;transition:.4s}
.services-button:hover .services-button-icon{transform:translateX(.25rem)}
.services-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;
  padding:0 1rem;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:.4s
}
.active-modal{opacity:1;visibility:visible}
.services-modal-content{
  width:min(92vw,500px);position:relative;background:var(--box-color);
  padding:4.5rem 2.5rem 2.5rem;border-radius:.5rem
}
.services-modal-close{position:absolute;top:1.5rem;right:1.5rem;font-size:1.5rem;color:var(--skin-color);cursor:pointer}
.services-modal-title,.services-modal-description{text-align:center}
.services-modal-title{font-size:var(--h3-font-size);font-weight:var(--font-medium);margin-bottom:var(--mb1)}
.services-modal-description{font-size:var(--small-font-size);padding:0 3.5rem;margin-bottom:var(--mb2)}
.services-modal-services{row-gap:var(--mb075)}
.services-modal-service{display:flex;align-items:center;column-gap:.5rem}
.services-modal-icon{color:var(--skin-color);font-size:1.1rem}
.services-modal-info{font-size:var(--small-font-size)}

/* ============ Testimonials ============ */
@media (min-width:992px){.testimonials-container{width:750px;margin-inline:auto}}
.testimonial-card{background:var(--box-color);padding:clamp(1rem,2.2vw,1.5rem);border-radius:.5rem;margin-bottom:3rem}
.testimonial-quote{display:inline-flex;font-size:1.5rem;color:var(--skin-color);margin-bottom:var(--mb1)}
.testimonial-description{margin-bottom:var(--mb1);font-size:var(--small-font-size);text-align:justify}
.testimonial-date{font-size:var(--normal-font-size);margin-bottom:var(--mb2)}
.testimonial-profile{display:flex;align-items:center;column-gap:1rem}
.testimonial-profile-img{width:60px;height:60px;border-radius:3rem}
.testimonial-profile-name{font-size:var(--h3-font-size);font-weight:var(--font-medium);color:var(--title-color)}
.testimonial-profile-detail{font-size:var(--small-font-size);display:block}
.testimonial-profile-data{display:flex;flex-direction:column;row-gap:.4rem}

/* ============ Swiper bullets ============ */
.swiper-pagination-bullet{background:var(--box-color)}
.swiper-pagination-bullet-active{background:var(--skin-color)}

/* ============ Contact ============ */
.contact-container{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.5rem,3vw,3rem);justify-content:center;align-items:center
}
.contact-info{display:grid;row-gap:1rem}
.contact-card{background:var(--box-color);padding:clamp(1rem,2.2vw,1.5rem);border-radius:.5rem;text-align:center}
.contact-card-icon{font-size:1.8rem;color:var(--title-color);margin-bottom:var(--mb025)}
.contact-card-title,.contact-card-data{font-size:var(--small-font-size)}
.contact-card-title{font-weight:var(--font-medium)}
.contact-card-data{display:block;margin-bottom:var(--mb075)}
.contact-button{color:var(--skin-color);font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;column-gap:.25rem;cursor:pointer;padding:.4rem .6rem;border-radius:.4rem}
.contact-button:hover{color:var(--skin-color)}
.contact-button-icon{font-size:1rem;transition:.4s}
.contact-button:hover .contact-button-icon{transform:translateX(.25rem)}
.input-container{position:relative;margin-top:1rem;margin-bottom:1.9rem}
.input{
  width:100%;border:2px solid var(--text-color);background:transparent;
  padding:.6rem 1.2rem;color:var(--title-color);font-weight:var(--font-medium);
  font-size:var(--normal-font-size);letter-spacing:.5px;border-radius:.5rem;outline:none;transition:.4s
}
textarea.input{padding:.8rem 1.2rem;min-height:140px;border-radius:.5rem;resize:none;font-family:var(--body-font)}
.input-container label{
  position:absolute;top:50%;left:1rem;transform:translateY(-50%);
  padding:0 .4rem;color:var(--text-color);font-size:1rem;font-weight:var(--font-medium);
  pointer-events:none;z-index:15;transition:.5s
}
.input-container.textarea label{top:1rem;transform:translateY(0)}
.input-container span{
  position:absolute;top:0;left:25px;transform:translateY(-50%);
  font-size:var(--small-font-size);padding:0 .4rem;pointer-events:none;z-index:var(--z-fixed);color:transparent
}
.input-container span::before,.input-container span::after{
  content:'';position:absolute;width:10%;opacity:0;height:5px;background:var(--body-color);top:50%;transform:translateY(-50%);transition:.4s
}
.input-container span::before{left:50%} .input-container span::after{right:50%}
.input-container.focus label{top:0;transform:translateY(-50%);left:25px;font-size:var(--smaller-font-size)}
.input-container.focus span::before,.input-container.focus span::after{width:50%;opacity:1}

/* ============ Footer ============ */
.footer{padding-top:2rem}
.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem}
.footer-bg{background:#000000; padding:3rem 0 3.5rem}
.footer-title{font-size:var(--h1-font-size);margin-bottom:var(--mb025)}
.footer-subtitle{font-size:var(--small-font-size)}
.footer-links{display:flex;justify-self:center;column-gap:2rem}
.footer-links:hover{color:var(--skin-color)}
.footer-socials{justify-self:flex-end}
.footer-social{font-size:1.25rem;margin-right:var(--mb15)}
.footer-social:hover{color:var(--skin-color)}
.footer-copy{font-size:var(--smaller-font-size);text-align:center;margin-top:4.5rem}
.footer-copy a{font-family:var(--body-font)}
.footer-copy a:hover{color:var(--skin-color)}
.footer-title,.footer-subtitle,.footer-links,.footer-social,.footer-copy a{color:var(--title-color)}

/* ============ Extra responsive ============ */
@media (max-width:1408px){.container{margin-inline:auto}}
@media (max-width:1216px){.work-container{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
@media (max-width:1024px){
  .portfolio-item-details{margin-bottom:var(--mb15)}
  .details-info li{margin-bottom:var(--mb05)}
  .details-title{margin-bottom:var(--mb075)}
}
@media (max-width:768px){
  .services-container{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .services-content{padding:3.5rem .5rem 1.25rem 1.5rem}
  .services-icon{font-size:1.5rem}
  .footer-bg{padding:2rem 0 3rem}
  .footer-copy{margin-top:var(--mb3)}
  .portfolio-popup-inner{width:min(92vw,420px);padding:2.8rem 1.5rem 2.5rem}
  .portfolio-popup-content{grid-template-columns:1fr;row-gap:1.6rem}
  .details-title{font-size:var(--normal-font-size)}
  .portfolio-popup-close{top:.5rem}
}
@media (max-width:350px){
  .container{padding-inline:var(--mb1)}
  .home-title{font-size:var(--h1-font-size)}
  .home-subtitle{font-size:var(--normal-font-size)}
  .services-container{grid-template-columns:max-content}
  .services-content{padding-right:3.5rem}
}

/* Guard */
.home-social{ left:clamp(0px,2vw,24px) }

/* === Force 110% page zoom on desktop === */
:root { --ui-zoom: 1.10; }

@media (min-width:1024px){
  body{ zoom: var(--ui-zoom); }
}
@supports not (zoom:1){
  @media (min-width:1024px){
    html{
      transform: scale(var(--ui-zoom));
      transform-origin: top center;
      width: calc(100% / var(--ui-zoom));
      overflow-x: hidden;
    }
  }
}