@font-face {
    font-family: "Inter";
src: url("/assests/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
font-display: swap;
}

@font-face {
    font-family: "Inter-bold";
src: url("/assests/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
font-display: swap;
}


@font-face {
    font-family: "Lexend Deca";
src: url("/assests/fonts/Lexend_Deca/LexendDeca-VariableFont_wght.ttf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
font-display: swap;
}

:root {
   --dark-blue-bg: hsl(233, 47%, 7%);
   --card-background:hsl(244, 38%, 16%);
   --accent: hsl(277, 64%, 61%);
    --color-light: hsl(0, 0%, 100%);
    --main-paragraph:hsla(0, 0%, 100%, 0.75);
    --stat-headings: hsla(0, 0%, 100%, 0.6);
--animation-smooth: 0.7s cubic-bezier(0.5, 0.5, 0, 1);
--border-radius: 0.6em;
    --container-padding: 12vw;
}



*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


li,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Hanken', sans-serif;
    color: var(--color-light);
    line-height: 1.1;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
background-color: var(--dark-blue-bg);
}

html,
body {
    width: 100%;
    -webkit-font-smoothing: antialiased;
    position: relative;

}


canvas,
img,
video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

svg {
    max-width: none;
    height: auto;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
ul,
ol,
span,
strong,
em {
    padding: 0;
    margin: 0;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
}

h2 {
     font-family: 'Inter-bold', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1.4rem, 3.5vw, 2.4rem);
    line-height: 1.4;
    color: var(--color-light);
}



h4 {
    font-family: 'Inter-bold', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.1;
    color: var(--color-light);
}

p {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-family: 400;
    color: var(--main-paragraph);
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    line-height: 1.6;
    
}


.content span {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
     font-size: clamp(0.6rem, 2vw, 0.8rem);
    text-transform: uppercase;
    color: var(--stat-headings);
}

/*-------------------------format--------------------------*/
.row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.flex-col {
    display: block;
    width: 100%;
    order: 2;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

img.overlay {
    object-fit: cover;
}

.container {
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
}

.section {
    position: relative;
    padding-top: 8vw;
    padding-bottom: 8vw;
}

@media screen and (max-width: 720px){
    .container {
    padding-left: 7vw ;
    padding-right: 7vw;
}
.section {
    position: relative;
    padding-top: 11vw ;
    padding-bottom: 11vw;
}
}



.btn-row {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.btn {
    position: relative;
    border: 0;
    outline: 0;
}


.btn .btn-click {
    cursor: pointer;
    border: 0;
    outline: 0;
    height: 55px;
    width:  55px;
    background-color: var(--dark-grey);
    border-radius: 50%;
    overflow: hidden; /* Ensure the pseudo-element doesn't exceed the button bounds */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: var(--animation-smooth);
}

.btn.secondary .btn-click {
    cursor: pointer;
    border: 0;
    outline: 0;
   width: 100%;
   height: 100%;
   padding: 0.7rem;
    background-color: var(--primary-color);
    border-radius: calc(var(--border-radius) * 3);
    overflow: hidden; /* Ensure the pseudo-element doesn't exceed the button bounds */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
      transition: var(--animation-smooth);
}



.btn .btn-text {
   position: relative;
    height: 100%;
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.btn.secondary .btn-text span {
   color: var(--color-light);
   text-transform: uppercase;
   font-family: 'overpass', sans-serif;
   font-size: 1rem;
}

.btn .btn-text span {
     padding-top: 3px;
     color: var(--light-grey);
    font-family: 'overpass', sans-serif;
    font-size: 1rem;
}

.btn .btn-click:hover {
     transition: var(--animation-smooth);
     background-color: var(--light-grey);
}
.btn .btn-click:hover .btn-text span {
   color: var(--color-light);
}


.secondary .btn-click:hover{
    transition: var(--animation-smooth);
   background-color: var(--color-light);
    
}


.secondary .btn-click:hover .btn-text span {
    color: var(--primary-color); /* Color change on hover for text */
}


.btn .btn-click.active, .btn .btn-click:active {
    background-color: var(--primary-color); /* Or any color you prefer */
    color: white;
}

/* This is to ensure the span inside the button also changes color */
.btn .btn-click.active .btn-text span, .btn .btn-click:active .btn-text span {
    color: white;
}