@font-face {
    font-family: "overpass";
src: url("/assets/fonts/Overpass/Overpass-VariableFont_wght.ttf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: auto;
font-display: swap;
}

@font-face {
    font-family: "overpass-bold";
src: url("/assets/fonts/Overpass/Overpass-VariableFont_wght.ttf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: auto;
font-display: swap;
}

:root {
    --dark-color: black;
    --color-light: hsl(0, 0%, 100%);
    --primary-color: hsl(25, 97%, 53%);
    --light-grey: hsl(217, 12%, 63%);
    --Medium-Grey:hsl(216, 12%, 54%);
     --dark-grey:#262e38 ;
     --bg: #202630;
    --Dark-Blue:  hsl(213, 19%, 18%);
    --Very-Dark-Blue: hsl(216, 12%, 8%);
--animation-smooth: 0.7s cubic-bezier(0.5, 0.5, 0, 1);
--border-radius: 1.8em;
    --container-padding: 25vw;
}



*,
*: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-dark);
    line-height: 1.1;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
background-color: var(--main-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: 500;
    letter-spacing: normal;
}

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

h3 {
    font-family: 'overpass-bold', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.1;
    color: var(--color-light);
}

h4 {
    font-family: 'Outfit-medium', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.1;
    color: var(--color-light);
}

p {
    font-family: 'overpass', sans-serif;
    font-style: normal;
    font-family: 400;
    color: var(--light-grey);
    font-size: clamp(0.8rem, 2vw, 1rem);
    line-height: 1;
    
}

/*-------------------------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 {
    position: relative;
    max-width: 400px;
    justify-content: center;
    align-items: center;
}
.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: 4vw ;
    padding-bottom: 4vw;
}
}



.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;
}