/* ========================================================================== */
/* ROOT VARIABLES (COLORS, FONTS) */
/* ========================================================================== */
:root {
    /* Colors */
    --clr-primary: #fb4516;
    --clr-accent: gray;
    --clr-secondary: #111111;
    --clr-highlight: #ffffffff;

    /* Fonts */
    --mainFont: "Audiowide", sans-serif;
    --secondaryFont: "Londrina Outline", sans-serif;
    --specailFont: "Caveat", cursive;
    --paraFont: "Inter", sans-serif;
}

/* ========================================================================== */
/* CSS RESET & BASE SETUP */
/* ========================================================================== */

/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base HTML & BODY settings */
html,
body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    background-color: #ffffff;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #555555 #1a1a1a;
}

/* ========================================================================== */
/* SCROLLBAR (WEBKIT) */
/* ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #ff0000;
    border-radius: 10px;
}

/* ========================================================================== */
/* GLOBAL ELEMENT STYLES */
/* ========================================================================== */

/* Links & lists */
a,
li {
    list-style: none;
    text-decoration: none;
    color: white;
}

/* Buttons */
button {
    padding: 10px 30px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    color: white;
    font-family: var(--mainFont);
    background-color: var(--clr-primary);
}

/* ========================================================================== */
/* TYPOGRAPHY */
/* ========================================================================== */
p {
    font-family: var(--paraFont);
}

h1 {
    font-family: var(--mainFont);
}

h2,
h3 {
    font-family: var(--paraFont);
}

h4 {
    font-family: var(--specailFont);
}

.outline-text {
    font-family: var(--secondaryFont);
}

/* Highlight color utility */
.orange-color {
    color: var(--clr-primary);
}

/* ========================================================================== */
/* LAYOUT & STRUCTURE */
/* ========================================================================== */
section {
    width: min(100%, 1200px);
    margin: 0 auto;
    /* padding: 0 5%; */
}

/* Logo styles */
.logo h2 {
    font-family: var(--specailFont);
}

.logo-sec {
    color: var(--clr-primary);
}

/* Base font size (DON’T CHANGE) */
html {
  font-size: 100%; /* = 16px default, but responsive-friendly */
}

/* ===============================
   📱 MOBILE FIRST (fluid sizes)
   =============================== */

h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
}

h3 {
  font-size: clamp(1.3rem, 3vw, 1.1rem);
}

h4 {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
}

p {
  font-size: clamp(0.95rem, 2.5vw, 1rem);
  line-height: 1.6;
}

.main-text{
    color: var(--clr-primary);
    font-weight: 550;
    font-size: 1.1rem;
}