/* ===========================================================
   VP PORTFOLIO DESIGN SYSTEM
   Apple Inspired Light Theme
   Author : Vaibhav Porwal
=========================================================== */

:root{

/* ===========================================================
   COLORS
=========================================================== */

/* ===========================================================
   COLORS
=========================================================== */

/* Primary Brand */

--primary:#A63A50;
--primary-hover:#8C2F45;

/* Secondary */

--secondary:#B05B3B;

/* Accent */

--accent:#D8925B;

/* Backgrounds */

--background:#FCFBFA;

--surface:#FFFFFF;

--section:#F6F0F1;

/* Typography */

--heading:#241E21;

--text:#5A4C50;

--muted:#8A787C;

/* Borders */

--border:#E6D4D8;


/* ===========================================================
   SHADOWS
=========================================================== */

--shadow-sm:
0 3px 10px rgba(90,76,80,.05);

--shadow:
0 10px 30px rgba(90,76,80,.08);

--shadow-lg:
0 22px 60px rgba(90,76,80,.12);

/* ===========================================================
   BORDER RADIUS
=========================================================== */

--radius-sm:10px;

--radius:18px;

--radius-lg:28px;

--radius-xl:40px;


/* ===========================================================
   TYPOGRAPHY
=========================================================== */

--font-heading:'Poppins',sans-serif;

--font-body:'Inter',sans-serif;


/* ===========================================================
   FONT SIZE
=========================================================== */

--fs-xs:.75rem;

--fs-sm:.875rem;

--fs-base:1rem;

--fs-md:1.125rem;

--fs-lg:1.25rem;

--fs-xl:1.5rem;

--fs-2xl:2rem;

--fs-3xl:3rem;

--fs-4xl:4rem;

--fs-5xl:5rem;


/* ===========================================================
   FONT WEIGHTS
=========================================================== */

--light:300;

--regular:400;

--medium:500;

--semi:600;

--bold:700;

--extra:800;


/* ===========================================================
   SPACING
=========================================================== */

--space-xs:.5rem;

--space-sm:1rem;

--space-md:1.5rem;

--space-lg:2rem;

--space-xl:3rem;

--space-2xl:5rem;

--space-3xl:7rem;


/* ===========================================================
   CONTAINER
=========================================================== */

--container:1200px;


/* ===========================================================
   NAVBAR
=========================================================== */

--navbar-height:82px;


/* ===========================================================
   TRANSITIONS
=========================================================== */

--transition:

all .35s ease;

}


/* ===========================================================
   RESET
=========================================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}

body{

background:var(--background);

font-family:var(--font-body);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

button{

border:none;

background:none;

font-family:inherit;

cursor:pointer;

}

ul{

list-style:none;

}

.container{

width:min(92%,var(--container));

margin-inline:auto;

}

section{

padding:100px 0;

}

.section-header{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-tag{

display:inline-block;

padding:10px 22px;

border-radius:999px;

background:#F7E8EB;

color:var(--primary);

font-weight:600;

font-size:.9rem;

letter-spacing:.3px;

margin-bottom:20px;

border:1px solid rgba(166,58,80,.12);

box-shadow: 0 8px 20px rgba(166,58,80,.08);

}

.section-title{

font-family:var(--font-heading);

font-size:clamp(2rem,5vw,3.5rem);

font-weight:700;

color:var(--heading);

line-height:1.2;

margin-bottom:20px;

}

.section-title span{

color:var(--primary);

}

.section-description{

font-size:1.1rem;

color:var(--muted);

line-height:1.8;

}