/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "RobotoCondensed";
    src: url(/assets/fonts/RobotoCondensed-VariableFont_wght.woff2) format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
}
@font-face {
    font-family: "Roboto";
    src: url(/assets/fonts/Roboto-VariableFont_wdth\,wght.woff2) format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
}
@font-face {
    font-family: "Inconsolata";
    src: url(/assets/fonts/Inconsolata-VariableFont_wdth\,wght.woff2) format('woff2-variations');
    font-style: normal;
    font-weight: 200 900;
}
/* Variables */
:root {
    /* Layout/Spacing */
    /* group elements */
    --spacing1: 0.25rem;
    --spacing2: 0.5rem;     /* sm gap */
    --spacing3: 0.75rem;
    
    --spacing4: 1rem;       /* md gap */
    
    /* separate elements */
    --spacing5: 1.25rem;
    --spacing6: 1.5rem;     /* lg gap */
    --spacing7: 2rem;

    --spacing8: 4rem;
    --spacing9: 8rem;
    --spacing10: 12rem;
    /* fluid padding — clamp(min, intercept + slope*vw, max), 320px→1440px */
    --gutter:       clamp(1rem, 0.14rem + 4.29vw, 4rem);  /* section horizontal padding */
    --section-space: clamp(3rem, 2.14rem + 4.29vw, 6rem); /* section vertical padding */
    --section-padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;

    /* Font */
    --font-primary: "RobotoCondensed", sans-serif;
    --font-secondary: "Inconsolata", sans-serif;
    /* font sizes — clamp(min, intercept + slope*vw, max), 320px→1440px */
    --h1: clamp(1.953rem, 1.42rem + 2.66vw, 3.815rem);
    --h2: clamp(1.563rem, 1.14rem + 2.13vw, 3.052rem);
    --h3: clamp(1.25rem,  0.91rem + 1.70vw, 2.441rem);
    --h4: clamp(1rem,     0.73rem + 1.36vw, 1.953rem);
    --h5: clamp(1rem,     0.84rem + 0.80vw, 1.563rem);
    --h6: clamp(1rem,     0.93rem + 0.36vw, 1.25rem);
    --p:  clamp(1rem,                1.5vw, 1.25rem);
    --small: clamp(1rem,             1.5vw, 1rem);
    /* line heights */
    --line-height1: 1.1;
    --line-height2: 1.2;
    --line-height3: 1.3;
    --line-height4: 1.5;
    --line-height5: 1.6;

    /* Colors */
    /* dark mode */ 
    --dm-bg-dark: hsl(0, 0%, 0%);
    --dm-bg: hsl(0, 0%, 5%);
    --dm-bg-light: hsl(0, 0%, 10%);
    --dm-text: hsl(0, 0%, 95%); 
    --dm-text-muted: hsl(0, 0%, 70%);
    /* light mode */
    --bg-dark: hsl(0, 0%, 100%);
    --bg: hsl(0, 0%, 95%);
    --bg-light: hsl(0, 0%, 90%);
    --text: hsl(0, 0%, 5%);
    --text-muted: hsl(0, 0%, 30%);
    --color-primary: hsl(220, 100%, 33%);
    --color-secondary:  hsl(220, 100%, 63%);
    --color-accent:  hsl(220, 100%, 83%);
    --color-accentDark:  hsl(220, 100%, 73%);

    /* Shadows */
    --shadow-s:
    inset 0 1px 2px #ffffff30, /* top highlight */
    0 1px 2px #00000030, /* dark shadow */
    0 2px 4px #00000015; /*soft shadow */
    --shadow-m:
    inset 0 1px 2px #ffffff50, /* top highlight */
    0 2px 4px #00000030, /* dark shadow */
    0 4px 8px #00000015; /*soft shadow */
    --shadow-l:
    inset 0 1px 2px #ffffff70, /* top highlight */
    0 4px 6px #00000030, /* dark shadow */
    0 6px 10px #00000015; /*soft shadow */
}

/* Global Styles*/
body {
    background-color: var(--bg-light);
    color: var(--text-muted);
    font-family: var(--font-secondary);
    font-size: var(--p);
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    max-width: 39.375rem;
}
.h1 {
    color: var(--text);
    font-family: var(--font-primary);
    font-size: var(--h1);
    font-weight: 900;
    line-height: var(--line-height1);
    text-align: inherit;
    text-transform: uppercase;
    
    position: relative;
    
    margin-bottom: var(--spacing3);
}
.h3 {
    color: var(--text);
    font-family: var(--font-primary);
    font-size: var(--h3);
    font-weight: 700;
    line-height: var(--line-height3);
    margin-bottom: var(--spacing3);
}
.p {
    font-size: var(--p);
    line-height: var(--line-height4);
    margin-bottom: var(--spacing7);
    text-align: inherit;

    margin: 0;
    width: 100%;
    max-width: 40.625rem;
    margin-bottom: var(--spacing4);
}
.small {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--small);
    font-weight: 700;
    line-height: var(--line-height4);
    text-transform: uppercase;
    text-align: inherit;

    margin-bottom: var(--spacing1);
}
.btn {
    background-color: var(--color-primary);
    border-radius: var(--spacing8);
    box-shadow: var(--shadow-l);
    box-sizing: border-box;
    color: var(--bg-light);
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--p);
    font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    
    position: relative;

    margin: 0;
    min-width: 11.25rem;
    padding: 0 var(--spacing8);
}
.btn:hover {
    filter: brightness(90%);
}
.card-group {
    list-style: none;
}
.icon {
    height: 2.5rem;
    width: 2.5rem;
}

/* Navigation Section*/
#navigation {
    background-color: var(--bg-light);
    box-shadow: var(--shadow-m);
    padding: clamp(0.75rem, 2vw, 1.5rem);
    position: sticky;
    top: 0;
    z-index: 999;
}
#navigation .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing3);
}
#navigation .logo {
    text-decoration: none;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--h3);
    font-weight: 800;
    margin-right: auto;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-menu {
    display: flex;
    list-style: none;
    border-radius: 0 0 var(--spacing4) var(--spacing4);
}
.nav-li {
}
.nav-li:hover {
}
.nav-li a {
    color: var(--text-muted);
    display: flex;
    font-family: var(--font-primary);
    font-size: var(--p);
    line-height: var(--line-height5);
    text-decoration: none;
    
    padding: var(--spacing4);
}
.nav-li a:hover {
    color: var(--text);
}
.nav-li .active-link {
    color: var(--text);
}
.toggle-dark-mode {
    border: none;
    cursor: pointer;
    height: 48px;
    width: 48px;
    border-radius: 0.5rem;
    background-color: transparent;
}
.toggle-menu {
    background-color: var(--bg-light);
    border: none;
    cursor: pointer;
    height: 48px;
    width: 48px;
    border-radius: 0.5rem;
}
.bar {
    display: block;
    background: var(--text);
    border-radius: 2px;
    width: 24px;
    height: 3px;
    margin: 6px auto;
}

/* Hero Section */
#hero {
    background-color: var(--color-primary);
    overflow: hidden;
    
    position: relative;

    padding: clamp(5.625rem, 11.75vw, 9.375rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
}
#hero .container {
    /* display */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    /* position */
    position: relative;

    /* box-model */
    width: 100%;
    max-width: 80rem;
    margin: auto;
    gap: clamp(4rem, 10vw, 7rem);
}
#hero .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    position: relative;

    max-width: 39.375rem;
}
#hero .small {
    color: var(--dm-text);
}
#hero .h1 {
    color: var(--dm-text);
}
#hero .p {
    text-align: center;
    color: var(--dm-text-muted);
    
    width: 100%;
    max-width: 33.1875rem;
    margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
}
#hero .btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing3);
}
#hero .btn {
    background-color: var(--color-accent);
    color: var(--color-primary);
}
#hero .btn:hover {
    filter: brightness(110%);
}
#hero .btn-secondary {
    background-color: var(--color-primary);
    color: var(--dm-text);
}
#hero .btn-secondary:hover {
    filter: brightness(110%);
}
#hero .picture {
    width: 100%;
    max-width: clamp(200px, 50vw, 320px);
    margin: 0 auto;

    z-index: 1;
}
#hero .picture img {
    width: 100%;
    height: auto;
}
.custom-shape-divider-bottom-1783396958 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1783396958 svg {
    position: relative;
    display: block;
    width: calc(128% + 1.3px);
    height: 96px;
}

.custom-shape-divider-bottom-1783396958 .shape-fill {
    fill: #E6E6E6;
}

/* Services */
#services {
    position: relative;

    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    padding-top: 0;
}
#services .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
    margin: auto;
    max-width: 34.375rem;
    width: 100%;
    gap: clamp(3rem, 6vw, 4rem);
}
#services .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    max-width: 50rem;
    width: 100%;
}
#services .h1 {
    max-width: 20ch;
}
#services .p {
    max-width: 100%;
}
#services .card-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto auto 1fr auto; /* icon, title, paragraph, cta — shared across every card row */

    margin: 0;
    padding: 0;
    width: 100%;
    row-gap: var(--spacing7);
    list-style: none;
}
#services .card {
    display: grid;
    grid-template-rows: subgrid;
    background-color: var(--bg);
    border-radius: var(--spacing4);
    box-shadow: var(--shadow-m);
    text-align: left;
    grid-column: span 12;
    grid-row: span 4;
}
#services .card-link {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    row-gap: clamp(0.25rem, 1vw, 0.75rem);
    justify-items: start;
    text-decoration: none;
    border-radius: var(--spacing4);
    box-sizing: border-box;

    padding: clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
    width: 100%;
}
.icon-wrapper {
    background-color: var(--color-primary);
    border-radius: var(--spacing4);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5.5rem;
    width: 5.5rem;
    margin-bottom: var(--spacing4);
    box-shadow: var(--shadow-s);
}
#services .icon {
    filter: invert(95%);
}
.card-title {
    font-family: var(--font-primary);
    margin-bottom: var(--spacing1);
    text-transform: uppercase;
    font-size: var(--h5);
    color: var(--text);
}
.card-p {
    color: var(--text-muted);
    line-height: var(--line-height4);
    margin-bottom: var(--spacing7);
    text-align: left;
}
.card-cta {
    display: inline-block;
    line-height: var(--line-height4);
    font-family: var(--font-primary);
    font-size: var(--small);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--spacing2) var(--spacing7);
    background-color: var(--bg-dark);
    color: var(--text);
    border-radius: var(--spacing7);
    box-shadow: var(--shadow-s);
}
.card-cta:hover {
    filter: brightness(90%);
}

/* Additional Content, SBS */
#sbs {
    overflow: hidden;

    position: relative;

    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    padding-top: 0;
}
#sbs .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    gap: clamp(3rem, 6vw, 4rem);
    margin: auto;
    max-width: 36.5rem;
    width: 100%;
}
#sbs .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    
    max-width: 39.375rem;
    width: 100%;
}
#sbs .h1 {
    max-width: 23ch;
}
#sbs .p {
    margin-bottom: var(--spacing6);
}
#sbs .card-group {
    display: grid;
    grid-auto-rows: auto 1fr; /* title, paragraph — shared across every card row */
    align-items: center;

    margin: 0 0 var(--spacing7);
    max-width: clamp(34.375rem, 50vw, 39.375rem);
    width: 100%;
    padding: 0;
    gap: clamp(1rem, 4vw, 2.5rem);
}
#sbs .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    justify-items: start;
    box-sizing: border-box;
    row-gap: var(--spacing3);
}
#sbs .card-title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing3);
    width: 100%;
}
#sbs .card-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--h3);
    font-weight: 700;
    margin: 0;
}
#sbs .card-p {
    margin: 0;
    line-height: var(--line-height4);
}

/* Portfolio */
#portfolio {
    background-color: var(--bg);
    padding: var(--section-padding);
}
#portfolio .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 34.375rem;
    width: 100%;
    gap: clamp(3rem, 6vw, 4rem);
}
#portfolio .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 80rem;
    width: 100%;
    text-align: left;
}
#portfolio .p {
    margin: 0;
}
#portfolio .card-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    
    margin: 0;
    padding: 0;
    gap: clamp(1rem, 2vw, 1.5rem);
    row-gap: 2rem;
}
#portfolio .card {
    grid-column: span 12;
}
#portfolio .card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    
    position: relative;
    
    height: 100%;
}
#portfolio .picture {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    
    position: relative;

    height: (12.5rem, 25vw, 16.875rem);
    margin: 0;
    width: 100%;
}
#portfolio .portfolio-preview {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    padding: 0 var(--h3);
}
#portfolio .card-title {
    font-size: var(--h4);
    font-weight: 700;
    line-height: var(--line-height2);
    margin-bottom: var(--spacing3);
}
#portfolio .card-p {
    display: block;
    margin-bottom: var(--spacing6);
    font-size: var(--p);
    line-height: var(--line-height4);
    text-align: center;
}

/* Stats */
#stats {
    background-color: var(--color-primary);
    overflow: hidden;

    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
#stats .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin: auto;
    max-width: 36.5rem;
    width: 100%;
    gap: clamp(3rem, 6vw, 4rem);
}
.stats-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    position: relative;
    
    max-width: 39.375rem;
    width: 100%;
    gap: clamp(2rem, 4vw, 3rem);
    z-index: 10;
}
.stats-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    
    width: 100%;
    margin: 0;
    max-width: 39.375rem;
    width: 100%;
    padding: 0;
    row-gap: var(--spacing6);
    column-gap: clamp(1.5rem, 4vw, 4.5vw);
}
.stat {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    align-self: stretch;

    margin: 0;
    padding: 0;
}
.metric {
    display: block;
    color: var(--dm-text);
    font-family: var(--font-primary);
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: var(--line-height2);
    text-align: left;

    margin-bottom: var(--spacing1);
}
.stat-desc {
    color: var(--dm-text-muted);
    font-size: var(--p);
    line-height: var(--line-height4);
    text-align: left;
}
#stats .picture {
    border-radius: var(--spacing4);
    display: block;
    overflow: hidden;

    position: relative;
    
    width: 100%;
    height: 100%;
}
#stats .picture img {
    object-fit: cover;
    border-radius: var(--spacing4);

    width: 100%;
    height: 100%;
}
#stats .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
    max-width: 35.625rem;
    width: 100%;
}
#stats .small {
    color: var(--dm-text-muted);
}
#stats .h1 {
    color: var(--dm-text);
    margin-bottom: var(--spacing7);
}
#stats .color {
    color: var(--color-accent);
}
#stats .p {
    color: var(--dm-text-muted);
    text-align: left;

    margin-bottom: var(--spacing7);
}
#stats .card-group {
    color: var(--dm-text-muted);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    
    margin-bottom: var(--spacing7);
    max-width: 27.3125rem;
    padding: 0;
    row-gap: clamp(1.5rem, 4vw, 2rem);
    gap: var(--spacing4);
}
#stats .card {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--p);
    line-height: var(--line-height4);
    font-weight: 700;
    color: var(--dm-text);
    text-align: left;
    
    margin: 0;
    gap: var(--spacing7);
}
#stats .icon {
    filter: invert(90%);
}
#stats .btn {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* Pricing */
#pricing {
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
#pricing .container {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;

    margin: auto;
    max-width: 80em;
    width: 100%;
    gap: clamp(3rem, 6vw, 4rem);
}
#pricing .content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    text-align: center;
}
#pricing .h1 {
    margin-bottom: var(--spacing7);
}
#pricing .card-group {
    transform-style: preserve-3d;
    perspective: 700px;
    display: flex;
    flex-flow: wrap row;
    justify-content: center;

    margin: 0;
    width: 100%;
    padding: 0;
    gap: clamp(1rem, 2vw, 1.25rem);
}
#pricing .card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--spacing4);
    background-color: var(--bg);
    box-shadow: var(--shadow-m);
    box-sizing: border-box;
    
    margin: 0;
    max-width: 31.25rem;
    width: 100%;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}
#pricing .popular {
    background-color: var(--color-primary);
    color: var(--dm-text-muted);
    box-shadow: var(--shadow-l);
}
.plan-title {
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--h3);
    line-height: var(--line-height2);
    color: var(--text);
    
    margin-bottom: var(--spacing4);
}
.plan-details {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--spacing3);
    margin: 0;
    padding: 0;
}
.plan-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    line-height: var(--line-height4);
    font-size: var(--p);
    color: var(--text);

    margin: 0;
    padding: 0;
    width: 100%;
}
.plan-item:nth-last-child(-n+2) {
    color: var(--text-muted);
}
.plan-item .icon {
    display: block;
    height: auto;
    width: 1.5rem;
}
#pricing .popular .plan-item {
    color: var(--dm-text);
}
#pricing .popular .icon {
    filter: invert(90%);
}
#pricing .popular .plan-title, .popular .price {
    color: var(--dm-text);
}
#pricing .popular .duration {
    color: var(--dm-text-muted);
}
#pricing .popular .card-cta {
    background-color: var(--color-accent);
    color: var(--color-primary);
    box-shadow: var(--shadow-m);
}
.price {
    font-family: var(--font-primary);
    display: flex;
    align-items: baseline;
    font-size: var(--h1);
    font-weight: 900;
    line-height: var(--line-height2);
    color: var(--text);
    
    margin-bottom: var(--spacing4);
    padding-top: clamp(3rem, 6vw, 4rem);
    gap: var(--spacing2);
}
.duration {
    font-size: var(--p);
    line-height: var(--line-height4);
    font-family: var(--font-secondary);
    font-weight: 400;
    color: var(--text-muted);
}
#pricing .card .btn {
    width: fit-content;
}
#pricing .popular .btn {
    background-color: var(--color-accent);
    color: var(--color-primary);

    width: fit-content;
}

/* Blog */
#blog {
    background-color: var(--bg);
    overflow: hidden;

    position: relative;

    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
#blog .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    max-width: 43.75rem;
    width: 100%;
    margin: auto;
    gap: clamp(3rem, 6vw, 4rem);
}
#blog .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    width: 100%;
}
#blog .h2 {
    font-family: var(--font-primary);
    text-transform: uppercase;
    color: var(--text);
    font-size: var(--h2);
    line-height: var(--line-height2);
    font-weight: 900;
    text-align: inherit;

    max-width: 43.75rem;
    margin: 0;
}
#blog .card-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    
    margin: 0;
    padding: 0;
    width: 100%;
    gap: var(--spacing5);
}
#blog .card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    grid-column: span 12;

    padding: 0;
}
#blog .link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none;
    
    gap: var(--spacing3);
}
.thumbnail-wrapper {
    border-radius: var(--spacing6);
    display: block;
    position: relative;

    margin: 0;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.thumbnail {
    border-radius: var(--spacing6);
    object-fit: cover;
    object-position: 30% 70%;
    
    width: 100%;
    height: 100%;
}
.blog-metadata {
    display: flex;
    align-items: center;
    flex-grow: 1;
    
    gap: var(--spacing3);
}
.avi {
        display: flex;
        width: fit-content;
        height: fit-content;
}
.avi img {
    border-radius: 50%;
}
.blog-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--h3);
    line-height: var(--line-height2);
    color: var(--text);
}
.blog-details span {
    color: var(--text-muted);
}

/* Testimonials */
#testimonials {
    position: relative;

    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
#testimonials .container {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;

    margin: auto;
    max-width: 90rem;
    width: 100%;
    gap: clamp(3rem, 6vw, 4rem);
}
#testimonials .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    width: 100%;
}
#testimonials h2 {
    max-width: 20.9ch;
}
#testimonials .card-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;

    margin: 0;
    padding: 0;
    gap: clamp(1rem, 2.5vw, 1.15rem);
}
#testimonials .card {
    background-color: var(--bg);
    border-radius: var(--spacing4);
    box-shadow: var(--shadow-s);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    position: relative;
    
    max-width: 39.375rem;
    width: 100%;
    padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
    margin: 0;
}
picture .quote {
    display: block;
}
#testimonials .icon {
    display: block;

    margin-bottom: var(--spacing7);
    height: auto;
    width: 2.5rem;
}
#testimonials .p {
    font-size: var(--p);
    line-height: var(--line-height4);

    margin: 0;
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.client-name {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--h4);
    font-weight: 700;
    text-transform: uppercase;
    line-height: var(--line-height2);
    color: var(--text);

    margin: 0;
    margin-top: auto;
}
.client-location {
    display: block;
    font-size: var(--p);
    line-height: var(--line-height4);

    margin: 0;
}

/* CTA */
#cta {
    position: relative;
    
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    padding-top: 0;
}
#cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 67.5rem;
    background-color: var(--color-primary);
    border-radius: var(--spacing4);

    position: relative;

    margin: auto;
    width: 100%;
    padding: clamp(3rem, 9vw, 6.25rem) clamp(2rem, 7vw, 6.25rem);
    gap: clamp(3rem, 6vw, 4rem);
}
#cta .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    width: 100%;
    gap: var(--spacing6);
}
#cta .title {
    color: var(--dm-text);
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-primary);
    font-size: var(--h2);
    line-height: var(--line-height2);
    font-weight: 900;
    text-align: inherit;

    position: relative;

    margin: 0;
    max-width: 20ch;
}
#cta .btn {
    background-color: var(--color-accent);
    color: var(--color-primary);
}

/* Footer */
#footer {
    background-color: var(--color-primary);
    color: var(--dm-text);
    font-family: var(--font-primary);
    
    position: relative;

    padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    padding-bottom: clamp(1.875rem, 5vw, 3.125rem);
}
#footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    
    margin: auto;
    max-width: 34.375rem;
    width: 100%;
    column-gap: 3rem;
    row-gap: var(--spacing7);
}
.footer-content {
    position: relative;
    
    width: 100%;
} 
#footer .logo {
    display: block;
    text-decoration: none;
    color: var(--dm-text);
    font-size: var(--h1);
    font-weight: 700;

    position: relative;

    margin-bottom: var(--spacing6);
}
#footer .p {
    text-align: left;
    margin-bottom: var(--spacing7);
}
#footer .btn {
    background-color: var(--color-accent);
    color: var(--color-primary);
}
.footer-link-wrapper {
    box-sizing: border-box;
    
    margin: 0;
    padding: 0;
}
.footer-header {
    display: block;
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--h4);
    line-height: var(--line-height4);

    position: relative;

    margin-bottom: var(--spacing3);
}
.footer-ul {
    display: flex;
    flex-direction: column;
    list-style: none;

    margin: 0;
    padding: 0;
    gap: var(--spacing3);
}
.footer-ul-1 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    
    max-width: 21.875rem;
    width: 100%;
    column-gap: var(--spacing7);
}
.footer-li {
    font-size: var(--p);
    line-height: var(--line-height4);

    margin: 0;
    padding: 0;
}
#footer .footer-ul-1 .footer-li {
    width: 44%;
}
.footer-link {
    display: inline-flex;
    align-items: flex-start;
    text-decoration: none;
    font-size: var(--p);
    line-height: var(--line-height4);
    text-align: left;
    color: var(--dm-text);

    gap: var(--spacing2);
}
.footer-li .link {
    display: inline-flex;
    align-items: flex-start;
    line-height: var(--line-height4);
    color: var(--dm-text);
    text-decoration: none;
    text-align: left;

    gap: var(--spacing3);
}
.footer-li .link .icon {
    display: block;
    filter: invert(95%);
    
    height: auto;
    width: var(--spacing5);
}
.bottom-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--p);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;

    margin: clamp(3rem, 7vw, 4rem) auto 0;
    width: 100%;
    padding-top: var(--spacing6);
    gap: var(--spacing3);
}
#footer .credit {
    display: inline-block;
    font-size: var(--p);
    line-height: var(--line-height4);

    position: relative;

    margin: 0;
    width: 100%;
}
.credit-link {
    display: inline-block;
    font-size: var(--p);
    line-height: var(--line-height4);
    
    position: relative;

    margin: 0;
    width: auto;
}
.bottom-links {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    gap: var(--spacing2);
}
.bottom-link {
    display: flex;
    align-items: center;
    color: var(--dm-text);

    position: relative;

    margin: 0;
    width: auto;
    text-decoration: none;
    font-size: var(--p);
    line-height: var(--line-height4);
}
.custom-shape-divider-bottom-1783397644 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1783397644 svg {
    position: relative;
    display: block;
    width: calc(128% + 1.3px);
    height: 96px;
}

.custom-shape-divider-bottom-1783397644 .shape-fill {
    fill: #0038A8;
}

/* Media Queries */
/* nav: mobile drawer menu, shared by every breakpoint below desktop */
@media (width < 1024px) {
    .nav-menu {
        background-color: var(--bg);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        align-items: center;
        display: none;
        flex-direction: column;
        gap: var(--spacing3);
        padding: var(--spacing4);
    }
    .nav-menu.active {
        display: flex;
        box-shadow: var(--shadow-m);
    }
    .nav-li {
        width: 100%;
    }
    .nav-li a {
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-li a:hover {
        background-color: var(--bg-light);
    }
    .toggle-menu.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .toggle-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    .toggle-menu.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* tablets (portrait) */
@media (width >= 640px) {
    .custom-shape-divider-bottom-1783397011 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    }

    .custom-shape-divider-bottom-1783397011 svg {
        position: relative;
        display: block;
        width: calc(128% + 1.3px);
        height: 96px;
    }

    .custom-shape-divider-bottom-1783397011 .shape-fill {
        fill: #E6E6E6;
    }

    .custom-shape-divider-bottom-1783397618 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    }

    .custom-shape-divider-bottom-1783397618 svg {
        position: relative;
        display: block;
        width: calc(128% + 1.3px);
        height: 96px;
    }

    .custom-shape-divider-bottom-1783397618 .shape-fill {
        fill: #0038A8;
    }
}
/* tablets (landscape) */
@media (width >= 768px) {
    #services {
        padding-top: 3.125rem;
    }
    #services .container {
        max-width: 80rem;
    }
    #services .card-group {
        column-gap: 1.875rem;
    }
    #services .card {
        grid-column: span 6;
    }
    #sbs .card-group {
        grid-template-columns: repeat(2, 1fr);
    }
    #portfolio .container {
        max-width: 80rem;
    }
    #portfolio .content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #portfolio .flex {
        max-width: 40rem;
        width: 40vw;
        text-align: left;
        flex: none;
    }
    #portfolio .p {
        padding: 0.75rem 0 0.75rem 1.5rem;
    }
    #portfolio .card-group {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        row-gap: 0;
    }
    #portfolio .card {
        display: grid;
        grid-column: span 1;
        grid-row: span 4;
        grid-template-rows: subgrid;
    }
    #portfolio .card-link {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        justify-items: center;
    }
    #blog .card-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #blog .card {
        flex: 0 1 calc(50% - var(--spacing5) / 2);
    }
    #stats .container {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: stretch;
        max-width: 80rem;
    }
    #pricing .card {
        width: 48.9%;
    }
    #testimonials .card-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
    #testimonials .card {
        width: auto;
        flex: 0 1 calc(50% - clamp(1rem, 2.5vw, 1.15rem) / 2);
    }
    #footer .container {
        max-width: 80rem;
        row-gap: clamp(3rem, 7vw, 4rem);
    }
}
/* laptops/desktops */
@media (width >= 1024px) {
    #navigation .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        max-width: 90rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0 var(--spacing6);
        gap: var(--spacing6);
    }
    #navigation .logo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        transition-style: preserve-3d;
        perspective: 700px;

        position: relative;

        margin: 0;
        height: 3rem;
        max-width: 10.125rem;
        padding: 0;
    }
    #navigation .nav {
        flex: 1;
        justify-content: center;
    }
    #navigation .nav-menu {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        margin: 0;
        height: 100%;
        padding: 0;
        gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }

    #navigation .toggle-menu {
        display: none;
    }
    #navigation .active-link {
        color: var(--color-primary);
        text-transform: uppercase;
        font-weight: 700;
    }
    #hero {
        text-align: left;
        padding-bottom: 17vw;
    }
    #hero .container {
        flex-direction: row;
        justify-content: space-between;
    }
    #hero .content {
        flex: none;
        align-items: flex-start;
        
        width: 40vw;
        margin: 0 auto;
    }
    #hero .h1 {
        text-align: left;
    }
    #hero .p {
        text-align: left;
    }
    #hero .picture {
        width: 35vw;
        max-width: 58.5rem;
    }
    #services .card {
        grid-column: span 4;
    }
    #pricing .card {
        width: calc(33.333% - clamp(1rem, 2vw, 1.25rem) * 2 / 3);
    }
    #blog .card {
        flex: 0 1 calc(33.333% - var(--spacing5) * 2 / 3);
    }
    #blog .container {
        max-width: 80rem;
    }
    #testimonials .card {
        flex: 0 1 calc(33.333% - clamp(1rem, 2.5vw, 1.15rem) * 2 / 3);
    }
    #footer .container {
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: flex-start;
    }
    #footer .footer-content {
        margin-right: auto;
        max-width: 25rem;
        width: 30%;
    }
    .custom-shape-divider-bottom-1783397554 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    }

    .custom-shape-divider-bottom-1783397554 svg {
        position: relative;
        display: block;
        width: calc(128% + 1.3px);
        height: 96px;
    }

    .custom-shape-divider-bottom-1783397554 .shape-fill {
        fill: #0038A8;
    }
}
/* large monitors */
@media (width >= 1280px) {}