@font-face {
    font-family: 'CabinetGrotesk';
    src: url('https://cdn.theinnercircle.co/fonts/cabinet-grotesk/CabinetGrotesk-Variable.woff2') format('woff2'),
    url('https://cdn.theinnercircle.co/fonts/cabinet-grotesk/CabinetGrotesk-Variable.woff') format('woff'),
    url('https://cdn.theinnercircle.co/fonts/cabinet-grotesk/CabinetGrotesk-Variable.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Redaction';
    src: url('https://cdn.theinnercircle.co/fonts/redaction/Redaction-Regular.woff2') format('woff2'),
    url('https://cdn.theinnercircle.co/fonts/redaction/Redaction-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Redaction';
    src: url('https://cdn.theinnercircle.co/fonts/redaction/Redaction-Italic.woff2') format('woff2'),
    url('https://cdn.theinnercircle.co/fonts/redaction/Redaction-Italic.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
}

@font-face {
    font-family: 'Redaction';
    src: url('https://cdn.theinnercircle.co/fonts/redaction/Redaction-Bold.woff2') format('woff2'),
    url('https://cdn.theinnercircle.co/fonts/redaction/Redaction-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'PP Formula';
    src: url('https://cdn.theinnercircle.co/fonts/ppformula/PPFormula-CondensedBlack.woff2') format('woff2'),
    url('https://cdn.theinnercircle.co/fonts/ppformula/PPFormula-CondensedBlack.woff') format('woff'),
    url('https://cdn.theinnercircle.co/fonts/ppformula/PPFormula-CondensedBlack.otf') format('opentype'),
    url('https://cdn.theinnercircle.co/fonts/ppformula/PPFormula-CondensedBlack.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

:root {
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --ic-font-cabinet-grotesk: "CabinetGrotesk", var(--bs-font-sans-serif);
    --ic-font-redaction: "Redaction", var(--bs-font-sans-serif);
    --ic-font-ppformula: "PP Formula", var(--bs-font-sans-serif);
    --ic-cobalt-blue: #0065FF;
    --ic-cobalt-blue-rgb: 0, 101, 255;
    --ic-cream-white: #F7F3EE;
    --ic-cream-white-rgb: 247, 243, 238;
    --ic-dark-grey: #1C1C1C;
    --ic-dark-grey-rgb: 28, 28, 28;
    --ic-hero-title-font-size-decrease: 0rem;
    --ic-hero-title-line-height-decrease: 0rem;
    --ic-hero-title-margin-bottom-increase: 0rem;
    --ic-hero-text-font-size-decrease: 0rem;
    --ic-title-font-size-decrease: 0rem;
    --ic-btn-lg-font-size-decrease: 0rem;

    --bs-white: #FFFFFF;
    --bs-black: #000000;
    --bs-body-color: var(--ic-dark-grey);
    --bs-body-color-rgb: var(--ic-dark-grey-rgb);
    --bs-body-bg: var(--ic-cream-white);
    --bs-body-bg-rgb: var(--ic-cream-white-rgb);
    --bs-primary: var(--ic-cobalt-blue);
    --bs-dark: var(--ic-dark-grey);
    --bs-dark-rgb: var(--ic-dark-grey-rgb);
    --bs-light: var(--ic-cream-white);
    --bs-light-rgb: var(--ic-cream-white-rgb);
    --bs-link-color: var(--ic-cobalt-blue);
    --bs-link-color-rgb: var(--ic-cobalt-blue-rgb);
    --bs-border-radius: 0;
    --bs-border-radius-lg: 0;
    --bs-nav-link-font-size: 0.75rem;

    --ic-font-display-1-decrease: 4rem;
    --ic-font-display-2-decrease: 2rem;
    --ic-font-display-3-decrease: 2.25rem;
    --ic-font-display-4-decrease: 2rem;
    --ic-font-display-5-decrease: 1.25rem;

    @media (min-width: 1200px) {
        --ic-font-display-1-decrease: 0rem;
        --ic-font-display-2-decrease: 0rem;
        --ic-font-display-3-decrease: 0rem;
        --ic-font-display-4-decrease: 0rem;
        --ic-font-display-5-decrease: 0rem;
    }
}

:lang(es) {
    --ic-hero-title-font-size-decrease: 2rem;
    --ic-hero-title-line-height-decrease: 2.25rem;
    --ic-hero-title-margin-bottom-increase: 1rem;
    --ic-hero-text-font-size-decrease: 0.3125rem;
    --ic-title-font-size-decrease: 0.5rem;

    @media (min-width: 1200px) {
        --ic-hero-title-font-size-decrease: 2.5rem;
        --ic-hero-title-line-height-decrease: 2.25rem;
    }
}

:lang(pt) {
    --ic-hero-title-font-size-decrease: 1.5rem;
    --ic-hero-title-line-height-decrease: 0.75rem;
    --ic-hero-text-font-size-decrease: 0.3125rem;
    --ic-title-font-size-decrease: 0.25rem;
    --ic-btn-lg-font-size-decrease: 0.25rem;
}

html,
body {
    height: 100%;
}

.navbar {
    --bs-navbar-padding-y: 1.5rem;
    --bs-navbar-color: var(--ic-dark-grey);
    --bs-navbar-hover-color: var(--bs-black);
}

.nav {
    --bs-nav-link-padding-y: 1.5rem;
    --bs-nav-link-color: var(--ic-dark-grey);
    --bs-nav-link-hover-color: var(--bs-black);
}

.nav-footer .nav-link {
    display: inline-block;
}

.logo-header {
    width: 100px;
    height: 41px;
}

.logo-footer {
    width: 200px;
    height: 82px;
}

@media (min-width: 768px) {
    .logo-footer {
        width: 250px;
        height: 103px;
    }
}

@media (min-width: 992px) {
    .logo-footer {
        width: 300px;
        height: 123px;
    }
}

@media (min-width: 1200px) {
    .logo-footer {
        width: 450px;
        height: 185px;
    }
}

@media (max-width: 659.98px) {
    .hero-container {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 991.98px) {
    .ic-container {
        max-width: 660px;
    }

    .hero-container {
        max-width: 660px;
    }
}

.display-1 {
    font-family: var(--ic-font-ppformula);
    font-weight: 900;
    font-size: calc(8.75rem - var(--ic-font-display-1-decrease));
    line-height: 1.1;
}

.display-2 {
    font-family: var(--ic-font-cabinet-grotesk);
    font-weight: 500;
    font-size: calc(3.75rem - var(--ic-font-display-2-decrease));
    line-height: 1.15;
}

.display-3 {
    font-family: var(--ic-font-redaction);
    font-weight: 400;
    font-size: calc(4.25rem - var(--ic-font-display-3-decrease));
}

.display-4 {
    font-family: var(--ic-font-cabinet-grotesk);
    font-weight: 700;
    font-size: calc(4.25rem - var(--ic-font-display-4-decrease));
    line-height: 1.2;
}

.display-5 {
    font-family: var(--ic-font-redaction);
    font-size: calc(2.75rem - var(--ic-font-display-5-decrease));
    font-weight: 400;
    line-height: 1;
}

.body {
    font-family: var(--ic-font-cabinet-grotesk);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
}

.footnote {
    font-family: var(--ic-font-cabinet-grotesk);
    font-size: 1rem;
    font-weight: 400;
}

.networks-hero-container {
    background-repeat: no-repeat;
    background-size: 105%;
    background-position-y: 40px;

    @media (min-width: 1400px) {
        background-size: 80%;
        background-position-y: 0;
    }
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: marquee linear infinite;
}

.marquee-text {
    font-family: var(--ic-font-cabinet-grotesk);
    font-weight: 400;
    white-space: nowrap;
    color: #212529;
    margin-right: 86px; /* Space between repeats */
}

.slideshow {
    position: relative;
    z-index: 1;
}
.slideshow img {
    aspect-ratio: 390 / 260;
    color: transparent;
    opacity: 0;
    z-index: 0;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    backface-visibility: hidden;
}

.slideshow img:not(:first-child) {
    position: absolute;
    top: 0px;
    left: 0px;
}

.slideshow img:nth-child(1) {
    opacity: 1;
    animation-name: fade1;
}

.slideshow img:nth-child(2) {
    opacity: 0;
    animation-name: fade2;
}

@keyframes fade1 {
    0%   { opacity: 1; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    95%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade2 {
    0%   { opacity: 0; }
    45%  { opacity: 0; }
    50%  { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.sentence-box:nth-child(even) {
    text-align: left;
}

.sentence-box:nth-child(even) {
    text-align: right;
}

.hero-title {
    font-family: var(--ic-font-ppformula);
    font-weight: 900;
    font-size: calc(5.25rem - var(--ic-hero-title-font-size-decrease));
}

.hero-title span {
    display: block;
}

.hero-title .line1 {
    line-height: calc(5.75rem - var(--ic-hero-title-line-height-decrease));
}

.hero-title .line2 {
    font-family: var(--ic-font-redaction);
    font-style: italic;
    font-weight: 400;
    font-size: calc(5.75rem - var(--ic-hero-title-font-size-decrease));
    line-height: calc(3.25rem - var(--ic-hero-title-line-height-decrease));
    margin-bottom: 1.25rem;
}

.hero-title .line3 {
    line-height: calc(5.75rem - var(--ic-hero-title-line-height-decrease));
}

.hero-text {
    font-family: var(--ic-font-cabinet-grotesk);
    font-weight: 500;
    font-size: calc(1.25rem - var(--ic-hero-text-font-size-decrease));
    line-height: 1.2;
}

.hero-content {
    padding: 440px 2rem 2rem;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 660px;
    color: var(--ic-cream-white);
    min-height: 1080px;
}

@media (min-width: 576px) {
    .hero-content {
        padding: 470px 3rem 3rem;
    }

    .hero-title {
        font-size: calc(7.25rem - var(--ic-hero-title-font-size-decrease));
    }

    .hero-title .line1 {
        line-height: calc(7.75rem - var(--ic-hero-title-line-height-decrease));
    }

    .hero-title .line2 {
        font-size: calc(8rem - var(--ic-hero-title-font-size-decrease));
        line-height: calc(4.25rem - var(--ic-hero-title-line-height-decrease));
        margin-bottom: 1.5rem;
    }

    .hero-title .line3 {
        line-height: calc(7.75rem - var(--ic-hero-title-line-height-decrease));
    }

    .hero-text {
        font-size: calc(1.5625rem - var(--ic-hero-text-font-size-decrease));
        line-height: 1.4;
    }
}

@media (min-width: 992px) {
    .hero-content {
        max-width: none;
        min-height: auto;
        padding: 0 0 4rem;
        background-image: none !important;
        color: var(--ic-dark-grey);
    }

    .hero-img {
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 600px;
        flex: 1 0 !important;
        max-width: 450px;
    }
}

@media (min-width: 1200px) {
    .hero-title {
        font-size: calc(9.6875rem - var(--ic-hero-title-font-size-decrease));
    }

    .hero-title .line1 {
        line-height: calc(9.75rem - var(--ic-hero-title-line-height-decrease));
    }

    .hero-title .line2 {
        font-size: calc(10.625rem - var(--ic-hero-title-font-size-decrease));
        line-height: calc(6rem - var(--ic-hero-title-line-height-decrease) * 2);
        margin-bottom: calc(1.75rem + var(--ic-hero-title-margin-bottom-increase));
    }

    .hero-title .line3 {
        line-height: calc(9.75rem - var(--ic-hero-title-line-height-decrease));
    }

    .hero-img {
        max-width: 500px;
    }
}

@media (min-width: 1400px) {
    .hero-img {
        max-width: 600px;
    }
}

.title {
    font-family: var(--ic-font-cabinet-grotesk);
    font-weight: 500;
    font-size: calc(2rem - var(--ic-title-font-size-decrease));
}

.side-text {
    max-width: 255px;
}

.side-text p {
    font-family: var(--ic-font-redaction);
    font-weight: 400;
    font-size: 0.9375rem;
}

@media (min-width: 1200px) {
    .title {
        font-size: calc(2.625rem - var(--ic-title-font-size-decrease));
    }
}

.btn,
.btn-lg {
    font-family: var(--ic-font-cabinet-grotesk);
    font-weight: 500;
}

.singles-btn,
.singles-btn-lg {
    font-family: var(--ic-font-cabinet-grotesk);
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
}

.btn-lg {
    font-size: calc(1.375rem - var(--ic-btn-lg-font-size-decrease));
    font-weight: 700;
}

@media (min-width: 1200px) {
    .btn-lg {
        font-size: 1.375rem;
    }
}

.btn-primary {
    --bs-btn-color: var(--ic-cream-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--ic-cream-white);
    --bs-btn-active-color: var(--ic-cream-white);
    --bs-btn-disabled-color: var(--ic-cream-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--ic-cream-white);
    --bs-btn-hover-color: var(--ic-cream-white);
    --bs-btn-active-color: var(--ic-cream-white);
}
