/* name smile */
@font-face {
    font-display: swap;
    font-family: 'Name Smile';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/name-smile.woff2');
}
/* barlow-condensed-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/barlow-condensed-v12-latin-italic.woff2') format('woff2');
}
/* lato-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/lato-v24-latin-regular.woff2') format('woff2');
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
    margin: 0;
}

/*
    3. Allow percentage-based heights in the application
  */
html,
body {
    height: 100%;
}

/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
    font: inherit;
}

/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

:root {
    --main-color: #121324;
    --main-color2: #d27300;
}

/* Utility Classes */
.disp-block {
    display: block;
}
/*  */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    margin-top: 2rem;
    padding: 0.5rem 2rem;
}

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

.logo img {
    max-inline-size: 32%;
    max-height: 235px;
    block-size: auto;
    object-fit: contain;
}

h1 span {
    line-height: 1;
}

.h1-cpr {
    font-family: 'Name Smile';
    font-weight: 200;
    font-size: clamp(4rem, 15vw, 10rem);

    text-transform: uppercase;

    color: var(--main-color);
}

.h1-line2 {
    font-family: 'Name Smile';
    font-size: clamp(0.5rem, 4vw, 2.6rem);

    text-transform: uppercase;

    color: var(--main-color);
}

.h1-line3 {
    font-family: 'Barlow Condensed';
    font-size: clamp(0.3rem, 3.2vw, 2.1rem);

    text-transform: uppercase;

    color: var(--main-color2);
}

.call-us {
    font-family: 'Lato', sans-serif;
    font-size: clamp(1.5rem, 5vw, 3rem);
    max-width: 75ch;
    text-align: center;

    color: var(--main-color);
}

.call-us a {
    color: var(--main-color2);
}