/* Note-
clr - color
ff - font-family
fw - font-weight
fs - font-size
ln - line-height
ls - layout-spacing
tt - transformation-transition
p-gap - padding-gap */

/* main root variables start */
:root{
/* font color */
--clr-dark: #030303;
--clr-light: #F5F2EE;
--clr-light-muted: rgba(245, 242, 238, 0.6);
--clr-dark-semi-muted: rgba(3, 3, 3, 0.6);
--clr-dark-muted: rgba(3, 3, 3, 0.3);

/* font family */
--ff-primary: "Inter", sans-serif;
--ff-secondary: "Space Grotesk", sans-serif;

/* font weight */
--fw-primary: normal;
--fw-secondary: bold;

/* font size  */
--fs-h1: 120px;
--fs-h2: 72px;
--fs-h3: 36px;
--fs-h4-a: 14px;
--fs-p: 16px;

/* line height */
--ln-h1: 120px;
--ln-h2: 72px;
--ln-h3: 36px;
--ln-h4-a-p: 24px;

/* layout spacing */
--ls-letter: 2px;
--ls-section: 100px 0;
--ls-item-gap: 100px;
--ls-p-gap-primary: 16px;
--ls-p-gap-secondary: 24px;

/* transformation-transition */
--tt-transform: uppercase;
--tt-transition: 0.2s;
--img-transition: all 0.4s ease;
--img-zoom-hover: scale(1.05);
}
/* main root variables end */

/* responsive root starts */
@media (max-width: 576px) { /* Styles for extra small devices (phones) */
:root{
/* font size  */
--fs-h1: 48px;
--fs-h2: 36px;
--fs-h3: 24px;
--fs-p: 12px;

/* line height */
--ln-h1: 52px;
--ln-h2: 40px;

/* layout spacing */
--ls-letter: 1px;
--ls-section: 60px 0;
--ls-item-gap: 40px;
}
}


@media (min-width: 577px) and (max-width: 768px) { /* Styles for small devices (tablets) */
:root{
/* font size  */
--fs-h1: 64px;
--fs-h2: 48px;
--fs-h3: 28px;
--fs-p: 12px;

/* line height */
--ln-h1: 68px;
--ln-h2: 52px;

/* layout spacing */
--ls-section: 80px 0;
--ls-item-gap: 60px;
}
}


@media (min-width: 769px) and (max-width: 992px) { /* Styles for medium devices (laptops) */
:root{
/* font size  */
--fs-h1: 80px;
--fs-h2: 60px;
--fs-h3: 28px;
--fs-p: 14px;

/* line height */
--ln-h1: 84px;
--ln-h2: 64px;

/* layout spacing */
--ls-item-gap: 80px;
}
}


@media (min-width: 993px) and (max-width: 1200px) { /* Styles for large devices (large laptops) */
:root{
/* font size  */
--fs-h1: 100px;
--fs-h2: 64px;

/* line height */
--ln-h1: 100px;
--ln-h2: 64px;
}
}
/* responsive root ends */