/* Fonts */
@font-face {
font-family: 'interblack';
src: url('/assets/fonts/Inter-Black.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interbold';
src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interextrabold';
src: url('/assets/fonts/Inter-ExtraBold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interextralight';
src: url('/assets/fonts/Inter-ExtraLight.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interitalic';
src: url('/assets/fonts/Inter-Italic.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interlight';
src: url('/assets/fonts/Inter-Light.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'intermedium';
src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interregular';
src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'intersemibold';
src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'interthin';
src: url('/assets/fonts/Inter-Thin.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}


@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}
}

:root{
/* Colors */
--color-primary: #003135;
--color-secondary: #024950;
--color-accent: #6ebac4;
--color-gray: #ebebeb; 
--color-gray-700: #b4b4b4;
--color-text: #302f2f;
--color-background: #ebebeb;
--color-white: #eeeded;
--color-black: #202020;
--color-gray: #707070;

--color-list1: #5d617e;
--color-list2: #305c83;
--color-list3: #4c6d80;
--color-list4: #317663;
--color-list5: #838792;
--color-list6: #7ab2d3;
--color-list7: #5b566a;
--color-list8: #2d597c;
--color-list9: #58947b;
--color-list10: #c3d080;

--color-footer: #222b34;

/* Fonts */
--ff-regular: 'interregular';
--ff-medium: 'intermedium';
--ff-bold: 'interbold';
--ff-black: 'interblack';
--ff-extrabold: 'interextrabold';
--ff-extralight: 'interextralight';
--ff-italic: 'interitalic';
--ff-light: 'interlight';
--ff-semibold: 'intersemibold';
--ff-thin: 'interthin';

--radius: 0.35rem;
--transition: all 0.3s ease;
--gradient: linear-gradient(90deg, #ee6352, purple, #ee6352);
--bg-gradient: linear-gradient(140deg, #ddaaa2, #dfd7de, #5a85a0);
--hero-bg: url('/assets/images/hero-home-bg.png') center/cover no-repeat;
--bg-linear: linear-gradient(170deg, #ddaaa2, #dfd7de, #5a85a0);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #005965;
--color-secondary: #027b8c;
--color-accent: #c9593f ;
--color-accent2: #17c3d8;
--color-accent3: #cff4f8;
--color-gray: #444444;
--color-gray-700: #555555;
--color-text: #d9d9d9;
--color-background: #1b1b1b; 
--color-white: #1b1b1b;
--color-black: #d9d9d9;
--hero-bg: url('/assets/images/hero-home-dark-bg.png') center/cover no-repeat;
--bg-linear: linear-gradient(to right, #434343 0%, black 100%);
}
}

/*
Styles reset
*/

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

* {
margin: 0;
}

body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--color-background);
color: var(--color-text);
font-family: var(--ff-regular);
}

.container{
 max-width: 1580px;
 margin: 0 auto;
 padding: 1% 3%;
}

img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6{
overflow-wrap: break-word;
max-width: 75ch;
text-wrap: pretty;
}

ul, ol {
list-style: none;
}

#root, #__next {
isolation: isolate;
}

form {
display: flex;
flex-direction: column;
gap: 1rem;
}

fieldset{
display: flex;
flex-direction: column;
border: 1px solid var(--color-gray-700);
border-radius: var(--radius);
padding: 1rem;
gap: 1rem;
}

legend{
font-size: 1.5rem;
font-family: var(--ff-semibold);
padding: 0 .5rem;
}

input, textarea {
padding: 0.5rem;
border: 1px solid var(--color-gray);
border-radius:  var(--radius);
font-size: 1rem;
background: var(--color-gray);
width: 100%;
}

.btn{
padding: 0.5rem 1rem;
border-radius: var(--radius);
font-size: 1em;
background: var(--color-accent);
color: var(--color-white);
width: fit-content;
cursor: pointer;
transition: var(--transition);
}

.btn-full{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius:0 0 .3em .3em;
    font-size: 1em;
    background: var(--color-accent);
    color: var(--color-white);
    width: 100%;
    cursor: pointer;
    transition: var(--transition);
    position: absolute;
    bottom: 0;
    left: 0;
}

.btn:hover{
outline: 1px solid var(--color-accent);
background: var(--color-black);
color: var(--color-accent);
}

.btn-secondary{
    padding: 1rem 2rem;
}

img{
border-radius:  var(--radius);
}

a{
text-decoration: none;
color: var(--color-accent);
transition: var(--transition);
}

a:hover{
background: var(--color-accent);
text-decoration: none;
color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-bold);
text-wrap: balance;
}

/* Base font size for body text */
body {
    font-size: clamp(1rem, calc(1.125rem + (1.375 - 1rem) * ((100vw - 40rem) / (64 - 40))), 1.375rem);
    line-height: 1.5;
}

/* Heading 1 */
h1 {
    font-size: clamp(1.8rem, calc(1.98rem + (2.52 - 1.8) * ((100vw - 40rem) / (64 - 40))), 2.52rem);
    line-height: 1.2;
}

/* Heading 2 */
h2 {
    font-size: clamp(1.5rem, calc(1.65rem + (2.1 - 1.5) * ((100vw - 40rem) / (64 - 40))), 2.1rem);
    line-height: 1.3;
}

/* Heading 3 */
h3 {
    font-size: clamp(1.35rem, calc(1.44rem + (1.8 - 1.35) * ((100vw - 40rem) / (64 - 40))), 1.8rem);
    line-height: 1.4;
}

/* Heading 4 */
h4 {
    font-size: clamp(1.2rem, calc(1.32rem + (1.56 - 1.2) * ((100vw - 40rem) / (64 - 40))), 1.56rem);
    line-height: 1.5;
}

/* Heading 5 */
h5 {
    font-size: clamp(1.05rem, calc(1.155rem + (1.32 - 1.05) * ((100vw - 40rem) / (64 - 40))), 1.32rem);
    line-height: 1.6;
}

/* Heading 6 */
h6 {
    font-size: clamp(0.9rem, calc(0.99rem + (1.08 - 0.9) * ((100vw - 40rem) / (64 - 40))), 1.08rem);
    line-height: 1.6;
}

/* Paragraph */
p {
    font-size: clamp(1rem, calc(1.125rem + (1.375 - 1rem) * ((100vw - 40rem) / (64 - 40))), 1.375rem);
    line-height: 1.6;
}

/* Small text */
small {
    font-size: clamp(0.8rem, calc(0.9rem + (1.1 - 0.8) * ((100vw - 40rem) / (64 - 40))), 1.1rem);
    line-height: 1.4;
}

/* Blockquote */
blockquote {
    font-size: clamp(1.2rem, calc(1.35rem + (1.6 - 1.2) * ((100vw - 40rem) / (64 - 40))), 1.6rem);
    line-height: 1.5;
    font-style: italic;
}

header, footer, main, article, section{
    container-type: inline-size;
}

.two{
    margin-top: 2rem;
}

.five{
    margin-top: 5rem;
}

.pb-1{
    padding-bottom: 1rem;
}

.pb-2{
    padding-bottom: 4rem;
}

.pt-1{
    padding-top: 1rem;
}

.pt-2{
    padding-top: 2rem;
}

.bold{
    text-decoration: underline;
    text-transform: uppercase;
}

.light{
    font-family: var(--ff-light);
}