/*==========================================
ROOT VARIABLES
==========================================*/

:root{

/* Colors */

--primary:#2563eb;
--primary-light:#3b82f6;
--secondary:#0f172a;

--dark:#0b1120;
--dark2:#111827;

--light:#ffffff;
--gray:#94a3b8;

--bg:#0f172a;
--card:#1e293b;

--success:#22c55e;
--danger:#ef4444;
--warning:#f59e0b;

/* Shadows */

--shadow-sm:0 5px 15px rgba(0,0,0,.12);
--shadow-md:0 10px 25px rgba(0,0,0,.18);
--shadow-lg:0 20px 45px rgba(0,0,0,.28);

/* Radius */

--radius-sm:8px;
--radius:14px;
--radius-lg:22px;
--radius-xl:30px;

/* Transition */

--transition:.35s ease;

/* Fonts */

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

/* Container */

--container:1250px;

}

/*==========================================
LIGHT MODE
==========================================*/

body.light{

--bg:#f7fafc;
--dark:#ffffff;
--dark2:#eef2f7;

--card:#ffffff;

--light:#111827;

--gray:#475569;

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:var(--font);

background:var(--bg);

color:var(--light);

overflow-x:hidden;

transition:.4s;

}

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

button{

font-family:inherit;

border:none;

outline:none;

cursor:pointer;

}

input,
textarea{

font-family:inherit;

outline:none;

}

.container{

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

margin:auto;

}

section{

padding:120px 0;

}

.section-title{

font-size:42px;

font-weight:700;

margin-bottom:60px;

text-align:center;

position:relative;

}

.section-title::after{

content:"";

width:90px;

height:4px;

background:var(--primary);

position:absolute;

left:50%;

transform:translateX(-50%);

bottom:-18px;

border-radius:50px;

}

/* Buttons */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 35px;

border-radius:50px;

font-weight:600;

transition:var(--transition);

}

.primary{

background:var(--primary);

color:#fff;

}

.primary:hover{

transform:translateY(-5px);

background:var(--primary-light);

box-shadow:0 15px 30px rgba(37,99,235,.4);

}

.secondary{

border:2px solid var(--primary);

}

.secondary:hover{

background:var(--primary);

color:#fff;

}

/* Cards */

.skill-card,
.project-card,
.service-card,
.certificate-card,
.counter-box{

background:var(--card);

border-radius:var(--radius-lg);

box-shadow:var(--shadow-sm);

transition:var(--transition);

}