@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
}

:root {
    --color-brand: #FCAF3B;
    --bg-dark: hsl(210 11% 15%);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

img {
    width: 100%;
    height: auto;
}

.brand-color {
    color: var(--color-brand);
}

footer a {
    color: var(--color-brand)
}

section {
    max-width: 60rem;
    margin-inline: auto;
    margin-block: 3rem;
    padding-inline: 2rem;
}

@media (max-width: 576px) {
    section {
        padding-inline: 1rem;
    }
}

section h2 {
    font-size: 2rem;
    font-weight: 800;
    padding-bottom: .5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.hero {
    --url: url('/img/bg-1-md.jpg');

    text-align: center;
    padding-block: 6rem;
    padding-inline: 1.5rem;
    color: #fff;
    background-color: var(--bg-dark);
    background: linear-gradient(rgb(0 0 0 / 0.5)), var(--url) no-repeat center center;
    background-size: cover;

    h1 {
        font-weight: 700;
    }

    p {
        margin-inline: auto;
        padding-inline: 3rem;
        max-width: 60rem;
        font-size: calc(1.275rem + 0.3vw);
    }
}

.bg-1 { --url: url('/img/bg-1-md.jpg'); }
.bg-2 { --url: url('/img/bg-2-md.jpg'); }
.bg-3 { --url: url('/img/bg-3-md.jpg'); }
.bg-4 { --url: url('/img/leaf-bg.jpg'); }

.socials {
    display: flex;
    justify-content: center;
    gap: 1rem;

    a {
        width: 2rem;
    }
}

.btn-brand {
  --bs-btn-bg: #FCAF3B;
  --bs-btn-border-color: #FCAF3B;
  --bs-btn-color: #212529;
  --bs-btn-hover-bg: #E3951F;
  --bs-btn-hover-border-color: #D68D1D;
  --bs-btn-hover-color: #212529;
  --bs-btn-active-bg: #C98217;
  --bs-btn-active-border-color: #BC7A15;
  --bs-btn-active-color: #212529;
  --bs-btn-focus-shadow-rgb: 252, 175, 59;
}

.content-width {
    max-width: 80rem;
}

.btn.phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline-end: 1.25rem;
}

.btn.phone svg {
    padding-block-start: 0.125rem;
    width: 1rem;
    height: 1rem;
}

.square-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
}