/* ===================================================
~~~~~~~~~~~~~~~~~~~~~~~~ Root ~~~~~~~~~~~~~~~~~~~~~~~~
=================================================== */

:root {


--fs-d1: clamp(2.566rem, -0.1492rem + 10.8608vw, 5.96rem);
--fs-d2: clamp(2.281rem, 0.2914rem + 7.9584vw, 4.768rem);
--fs-d3: clamp(2.027rem, 0.5966rem + 5.7216vw, 3.815rem);
--fs-1: clamp(1.802rem, 0.802rem + 4vw, 3.052rem);
--fs-2: clamp(1.602rem, 0.9308rem + 2.6848vw, 2.441rem);
--fs-3: clamp(1.424rem, 1.0008rem + 1.6928vw, 1.953rem);
--fs-4: clamp(1.266rem, 1.0284rem + 0.9504vw, 1.563rem);
--fs-5: clamp(1.125rem, 1.025rem + 0.4vw, 1.25rem);
--fs-6: clamp(1rem, 1rem + 0vw, 1rem);
--fs-regular: clamp(1rem, 1rem + 0vw, 1rem);
--fs-xsmall: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
--fs-xxsmall: clamp(0.5rem, 0.375rem + 0.5vw, 0.75rem);

--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;

--clr-pri-400: #ff7535;
--clr-sec-400: #59ce8f;
--clr-tri-400: #ff1e00;

--clr-dark-300: hsl(0, 0%, 25%);
--clr-dark-400: hsl(0, 0%, 10%);

--clr-light-300: hsl(0, 0%, 85%);
--clr-light-400: hsl(0, 0%, 100%);

--clr-heading: hsl(0, 0%, 1%);
--clr-paragraph: hsl(0, 0%, 4%);

--gap-small: clamp(1rem, 2vw, 24px);
--gap-large: clamp(2rem, 1rem + 2.6667vw, 3rem);

--b-shadow-small: 0 0.125rem 0.25rem (var(--clr-dark-400), 0.075) !important;
--b-shadow-medium: 0 0.5rem 1rem (var(--clr-dark-400), 0.15) !important;
--b-shadow-large: 0 1rem 3rem (var(--clr-dark-400), 0.175) !important;
}

/* ===================================================
~~~~~~~~~~~~~~~~~~~~~~ Selection ~~~~~~~~~~~~~~~~~~~~~
=================================================== */

::-moz-selection {
color: var(--clr-light-400);
background: var(--clr-pri-400);
}

::selection {
color: var(--clr-light-400);
background: var(--clr-pri-400);
}

/* ===================================================
~~~~~~~~~~~~~~~~~~~ Responsive width ~~~~~~~~~~~~~~~~~
=================================================== */
.container {
--max-width__screen: 100%;
--max-width__laptops: 1400px;
--max-width__blogs: 1100px;
--padding: 1rem;

width: min(var(--max-width__screen), 100% - (var(--padding) * 2));
margin-inline: auto;
}

/* @media only screen and (max-width: 1200px) {
.container {
max-width: 1100px;
}
}

@media only screen and (max-width: 992px) {
.container {
max-width: 960px;
}
}

@media only screen and (max-width: 768px) {
.container {
max-width: 750px;
}
}
@media only screen and (max-width: 576px) {
.container {
max-width: 540px;
}
} */

/* ===================================================
~~~~~~~~~~~~~~~~~~ Set Core Defaults ~~~~~~~~~~~~~~~~~
=================================================== */

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
html:focus-within {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
text-rendering: optimizeSpeed;
line-height: 1.5;
background: var(--clr-light-400);
}
ul[role="list"],
ol[role="list"] {
list-style: none;
}
img,
picture,
svg {
max-width: 100%;
display: block;
}

@media (prefers-reduced-motion: media) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
-webkit-transition-duration: 0.01ms !important;
-o-transition-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

/* ===================================================
~~~~~~~~~~~~~~~~~~~~~~ Utility's ~~~~~~~~~~~~~~~~~~~~~
=================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3 {
font-family: var(--ff-heading);
font-weight: var(--fw-medium);
color: var(--clr-heading);
}

.display-1 {
font-size: var(--fs-d1);
line-height: calc(var(--fs-d1) * 1.2);
}

.display-2 {
font-size: var(--fs-d2);
line-height: calc(var(--fs-d2) * 1.2);
}

.display-3 {
font-size: var(--fs-d3);
line-height: calc(var(--fs-d3) * 1.2);
}

h1 {
font-size: var(--fs-1);
line-height: calc(var(--fs-1) * 1.2);
}

h2 {
font-size: var(--fs-2);
line-height: calc(var(--fs-2) * 1.2);
}

h3 {
font-size: var(--fs-3);
line-height: calc(var(--fs-3) * 1.2);
}

h4 {
font-size: var(--fs-4);
line-height: calc(var(--fs-4) * 1.2);
}

h5 {
font-size: var(--fs-5);
line-height: calc(var(--fs-5) * 1.2);
}

h6 {
font-size: var(--fs-6);
line-height: calc(var(--fs-6) * 1.2);
}

p,
span,
label {
font-family: var(--ff-body);
font-size: var(--fs-regular);
font-weight: var(--fw-regular);
color: var(--clr-paragraph);
}
input {
font-family: var(--ff-body);
font-size: var(--fs-regular);
font-weight: var(--fw-regular);
color: var(--clr-paragraph);
}
a {
text-decoration: none;
font-family: var(--ff-body);
font-size: var(--fs-regular);
font-weight: var(--fw-medium);
color: var(--clr-paragraph);
}

.py-2 {
padding-block: 2rem;
}
.py-3 {
padding-block: 3rem;
}
.py-4 {
padding-block: 4rem;
}
.py-5 {
padding-block: 5rem;
}
.py-10 {
padding-block: 10rem;
}
.pb-2 {
padding-bottom: 2rem;
}
.pb-3 {
padding-bottom: 3rem;
}
.pb-4 {
padding-bottom: 4rem;
}
.pb-5 {
padding-bottom: 5rem;
}
.pb-10 {
padding-bottom: 10rem;
}
.pt-2 {
padding-top: 2rem;
}
.pt-3 {
padding-top: 3rem;
}
.pt-4 {
padding-top: 4rem;
}
.pt-5 {
padding-top: 5rem;
}
.pt-10 {
padding-top: 10rem;
}

.flow * + * {
margin-top: clamp(1.5rem, 1.28rem + 0.64vw, 2rem);
}
.pe-none {
pointer-events: none !important;
}
.user-select-none {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}

/* ===================================================
~~~~~~~~~~~~~~~~~~~~ Custom Style ~~~~~~~~~~~~~~~~~~~~
=================================================== */

/* ~~~~ Cursor ~~~~ */
/* ~~~~ Scrollbar ~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~ Archive ~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~ Button & Link ~~~~ */
.link {
position: relative;
}
.link::before {
content: "";
position: absolute;
border-bottom: 1px solid var(--clr-dark-400);
width: 100%;
bottom: 0px;
left: 0;
scale: 1;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
-webkit-transition: scale 0.3s ease;
-o-transition: scale 0.3s ease;
transition: scale 0.3s ease;
}
.link:hover::before {
content: "";
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
scale: 0 1;
}

button,
.button {
color: var(--clr-dark-300);
font-weight: var(--fw-semibold);
display: grid;
place-content: center;
padding: 1rem 2rem;
border: 1px solid var(--clr-dark-300);
border-radius: 100vw;
white-space: nowrap;
}
button:hover,
button:focus-visible,
.button:hover,
.button:focus-visible {
height: 100%;
background-color: var(--clr-dark-400);
border-radius: 100vw;
color: var(--clr-dark-300);
}

/* ~~~~ Line ~~~~ */
.line {
width: 100%;
border-bottom: 2px solid var(--clr-dark-400);
}
.line-white {
width: 100%;
border-bottom: 4px solid var(--clr-light-400);
border-radius: 100vw;
}


/* ===================================================
~~~~~~~~~~~~~~~~~~~~~~~~ Main ~~~~~~~~~~~~~~~~~~~~~~~~
=================================================== */
/* Container 1 */
.main-cont {
display: grid;
gap: 1rem;
}
.main-cont .cont-1-details {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-cont .cont {
border-radius: 2rem;
}
.main-cont .m-cont-1 {
overflow: hidden;
}
.main-cont .m-cont-1 .image-cont {
background-color: var(--clr-light-400);
padding: 0.2rem;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.main-cont .cont-category {

padding: 0.2rem 0.8rem;
width: fit-content;
}
.main-cont p {
color: var(--clr-dark-400);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
}
.m-cont-1 img {
height: 100px;
aspect-ratio: 1;
object-position: center;
object-fit: cover;
border-radius: 100vw;
}
.m-cont-1 h1 {
width: 100%;
color: var(--clr-dark-400);
}
.m-cont-1 .line {
border-bottom: 2px solid var(--clr-dark-400);
}

/* Container 2 */
.main-cont .m-cont-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "sm-cont-21 sm-cont-22 sm-cont-23";
gap: 1rem;
}

@media only screen and (max-width: 1600px) {
.main-cont .m-cont-2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"sm-cont-21 sm-cont-22"
"sm-cont-23 sm-cont-23";
gap: 1rem 1rem;
}
}
@media only screen and (max-width: 992px) {
.main-cont .m-cont-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"sm-cont-21"
"sm-cont-22"
"sm-cont-23";
gap: 1rem;
}
}
.sm-cont-21 {
grid-area: sm-cont-21;
padding: 3rem;
background: var(--clr-pri-400);
}
.sm-cont-22 {
grid-area: sm-cont-22;
padding: 3rem;
background: var(--clr-sec-400);
}
.sm-cont-23 {
grid-area: sm-cont-23;
padding: 3rem;
background: var(--clr-light-300);
}
.m-cont-2 h1 {
color: var(--clr-dark-400);
}
.m-cont-2 p,
.m-cont-2 a {
color: var(--clr-dark-400);
}
.m-cont-2 .cont-category {
border-color: var(--clr-dark-400);
}
.m-cont-2 a::before {
border-color: var(--clr-dark-400);
}
.sm-cont-21,
.sm-cont-22,
.sm-cont-23 {
display: flex;
flex-direction: column;
justify-content: space-between;
}

/* SMC 1 */
.sm-cont-21 h1 {
font-size: calc(var(--fs-d1) * 1.2);
padding: 4rem 0 1rem 0;
}
.sm-cont-21 .line {
position: relative;
}
.sm-cont-21 .line::after {
content: "";
position: absolute;
height: 12px;
width: 12px;
border-radius: 100vw;
background-color: var(--clr-dark-400);
top: -6px;
right: 0;
}
.sm-cont-21__footer {
padding-top: 1.8rem;
display: grid;
grid-template-columns: 50px 1fr;
justify-content: center;
align-items: center;
gap: 1rem;
}
.sm-cont-21__footer i {
color: var(--clr-light-400);
font-size: var(--fs-3);
display: grid;
place-content: center;
border-right: 1px solid var(--clr-dark-400);
color: var(--clr-dark-400);
}

/* SMC 2 */
.chart-cont .graph_top {
display: flex;
gap: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--clr-dark-400);
}
.chart-cont .graph_top div {
position: relative;
display: flex;
align-self: baseline;
justify-content: center;
width: 100%;
border-radius: 0.5rem;
background: var(--clr-dark-300);
transition: height 0.6s cubic-bezier(0.8, 0.5, 0.2, 1.4);
height: 10px;
}
.chart-cont .graph_top div:nth-child(1):hover {
background: var(--clr-dark-400);
height: 100px;
}
.chart-cont .graph_top div:nth-child(2):hover {
background: var(--clr-dark-400);
height: 80px;
}
.chart-cont .graph_top div:nth-child(3) {
background: var(--clr-dark-400);
height: 180px;
}
.chart-cont .graph_top div:nth-child(4):hover {
background: var(--clr-dark-400);
height: 160px;
}
.chart-cont .graph_top div:nth-child(5):hover {
background: var(--clr-dark-400);
height: 100px;
}
.chart-cont .graph_top div:nth-child(6):hover {
background: var(--clr-dark-400);
height: 40px;
}
.chart-cont .graph_top div:nth-child(7):hover {
background: var(--clr-dark-400);
height: 80px;
}
.chart-cont .graph_top div h4 {
position: absolute;
color: var(--clr-dark-400);
font-weight: var(--fw-semibold);
transform: translate(0, 0px);
transition: all 0.6s cubic-bezier(0.8, 0.5, 0.2, 1.4);
opacity: 0;
}
.chart-cont .graph_top div:hover h4 {
position: absolute;
color: var(--clr-dark-400);
font-weight: var(--fw-semibold);
transform: translate(0, -40px);
opacity: 1;
}
.chart-cont .graph_top div:nth-child(3) h4 {
opacity: 1;
transform: translate(0, -40px);
}
.chart-cont .graph_bottom {
display: flex;
align-items: center;
justify-content: space-around;
gap: 0.5rem;
}

/* SMC 3 */
.campaign {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
align-self: flex-end;
padding: 1rem 0 1rem;
}

.campaign-line {
border-bottom: 1px solid var(--clr-dark-400);
}
.sm-cont-23 div p {
font-size: var(--fs-4);
}
.sm-cont-23 p.campaign-info,
p.campaign-info.progress-value {
font-weight: var(--fw-bold);
font-size: var(--fs-3);
}
.progress {
position: relative;
height: 15px;
width: 100%;
border: 1px solid var(--clr-dark-400);
border-radius: 100vw;
overflow: hidden;
}
.progress .color {
position: absolute;
background-color: var(--clr-dark-300);
transform-origin: left;
top: 0;
left: 0;
width: 100%;
height: 13px;
border-radius: 15px;
animation: progress 8s ease-in;
}
@keyframes progress {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

/* ===================================================
~~~~~~~~~~~~~~~~~~~~~~~~ Footer ~~~~~~~~~~~~~~~~~~~~~~
=================================================== */
.footer p {
color: var(--clr-light-400);
font-size: var(--fs-small);
text-transform: uppercase;
font-weight: var(--fw-bold);
}
.footer .copy-tag i {
color: var(--clr-light-400);
font-size: var(--fs-small);
font-weight: var(--fw-bold);
transform: rotate(360deg);
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}

to {
transform: rotate(359deg);
}
}
.footer,
.footer .copy-tag,
.footer .social {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
white-space: nowrap;
}
.social .social-icon {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer .social i {
padding: 0.3rem;
border-radius: 100vw;
background: var(--clr-light-400);
font-size: var(--fs-xxsmall);
color: var(--clr-dark-400);
}
.footer .social i:hover {
background: var(--clr-tri-400);
}
@media only screen and (max-width: 992px) {
.footer > div:nth-child(1),
.footer > div:last-child {
display: none;
}
.footer .social .social-icon {
order: 2;
}
}
@media only screen and (max-width: 768px) {
.footer .copy-tag > p:nth-child(1) {
display: none;
}
.footer .copy-tag i {
order: 2;
}
}
@media only screen and (max-width: 576px) {
.footer .copy-tag > p:nth-child(3) {
display: none;
}
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
background: rgb(105, 147, 105);
color: #222;
}