/* ==========================================
   GOOGLE FONTS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@600;700;800&display=swap');

/* ==========================================
   CSS VARIABLES
========================================== */

:root{

    /* AWS Inspired Colors */

    --primary:#FF9900;
    --primary-dark:#E68A00;

    --secondary:#232F3E;

    --background:#0F172A;

    --surface:#1E293B;

    --surface-light:#334155;

    --text:#F8FAFC;

    --text-secondary:#CBD5E1;

    --border:#334155;

    --success:#22C55E;

    --danger:#EF4444;

    --warning:#F59E0B;

    /* Typography */

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

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

    /* Radius */

    --radius-sm:8px;

    --radius-md:12px;

    --radius-lg:18px;

    --radius-xl:24px;

    /* Shadow */

    --shadow-sm:0 2px 8px rgba(0,0,0,.15);

    --shadow-md:0 10px 25px rgba(0,0,0,.25);

    --shadow-lg:0 20px 50px rgba(0,0,0,.40);

    /* Container */

    --container-width:1200px;

    /* Transition */

    --transition:.3s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

}

/* ==========================================
   IMAGES
========================================== */

img{

    max-width:100%;

    display:block;

}

/* ==========================================
   LINKS
========================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================================
   LISTS
========================================== */

ul{

    list-style:none;

}

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

.container{

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

    margin:auto;

}

/* ==========================================
   SECTION
========================================== */

section{

    padding:100px 0;

}

/* ==========================================
   HEADINGS
========================================== */

h1,h2,h3,h4,h5{

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

    line-height:1.2;

}

h1{

    font-size:4rem;

}

h2{

    font-size:2.8rem;

    margin-bottom:20px;

}

h3{

    font-size:1.4rem;

}

/* ==========================================
   PARAGRAPH
========================================== */

p{

    color:var(--text-secondary);

}

/* ==========================================
   SECTION HEADER
========================================== */

.section-header{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:rgba(255,153,0,.12);

    color:var(--primary);

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:18px;

}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:10px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-secondary{

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

    color:var(--primary);

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}

/* ==========================================
   CARDS
========================================== */

.about-card,
.skill-card,
.project-card,
.contact-card,
.certification-card,
.resume-card{

    background:var(--surface);

    border:1px solid var(--border);

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

    padding:30px;

    transition:var(--transition);

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

}

.about-card:hover,
.skill-card:hover,
.project-card:hover,
.contact-card:hover,
.certification-card:hover,
.resume-card:hover{

    transform:translateY(-8px);

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

}

/* ==========================================
   GRID
========================================== */

.about-grid,
.skills-grid,
.projects-grid,
.contact-grid,
.certifications-grid{

    display:grid;

    gap:30px;

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/* ==========================================
   SELECTION
========================================== */

::selection{

    background:var(--primary);

    color:white;

}

/* ==========================================
   CERTIFICATION BADGE
========================================== */

.cert-badge {

    width: 180px;
    height: auto;
    display: block;
    margin: 20px auto;
    transition: transform 0.3s ease;

}

.cert-badge:hover {

    transform: scale(1.05);

}