﻿:root {
    --white: #FFFFFF;
    --white-30: #FFFFFF30;
    --white-90: #FFFFFF99;
    --black: #000000;
    --black-40: #17171766;
    --black-70: #00000070;
    --black-90: #00000099;
    --blue-100: #DEEDFB;
    --blue-200: #CBE2F9;
    --blue-300: #92D6E3;
    --blue-400: #339DFF;
    --blue-500: #005BAA;
    --blue-600: #004F9F;
    --green-300: #8CAA77;
    --green-500: #62BB46;
    --gray-800: #1C1A1F;
    --gray-700: #231F20;
    --gray-650: #383936;
    --gray-600: #4A4A4A;
    --gray-500: #B9B9B9;
    --gray-400: #C4C4C4;
    --gray-200: #EEEEEE;
    --purple-50: #ECECF7;
    --purple: #C7AEFC;
    --orange-50: #FBE7E7;
    --orange: #FE6505;
    --yellow-100: #FFF9D7;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    overflow-x: hidden;
    font-size: 1.6rem;
    font-family: 'Rawson';
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

a {
    color: var(--black);
    text-decoration: none;
}

.main {
    position: relative;
}

/* CONTAINER */
.itl-container {
    margin: auto;
    max-width: 152rem;
    padding-inline: 4rem;
}

.itl-container-pd-left {
    padding-left: calc((100% - 156rem) / 2 + 6rem);
}

/* BTN/LINK */
.itl-link {
    display: block;
    color: var(--gray-700);
    width: fit-content;
    padding: 1rem 2rem;
    border-radius: 100px;
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
    background-color: var(--gray-400);
}

.itl-link:hover {
    color: var(--white);
    background-color: var(--gray-700);
}

/* TEXTs */
.itl-title {
    margin: 0;
    color: var(--gray-700);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
}

.itl-text {
    color: var(--gray-700);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1.5;
    word-break: break-word;
}

.itl-text * {
    margin: 0;
}

.itl-text strong {
    font-weight: 800;
    letter-spacing: 1px;
}

/* BACKGROUND */
.itl-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* FILTERS */
.itl-bg.itl-bg-filter {
    filter: brightness(0.6);
}

.filter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: #00000070;
}

/* LOADER */
#loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 9999;
}

.spinner-border {
    width: 5rem;
    height: 5rem;
}

/* REDES SOCIAIS */
.social-media-list {
    display: flex;
    gap: 2rem;
    padding: 0;
    margin: 0;
}

.social-media-item img {
    width: 3.25rem;
    transition: .2s;
}

.social-media-item:hover img {
    transform: translateY(-1rem);
}

/* ANIMATIONS */
@keyframes bounce {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(0, 10px, 0);
    }
}


@media screen and (max-width: 1560px) {
    .itl-container-pd-left {
        margin-left: 4rem;
    }
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
    .itl-title {
        font-size: 4rem;
    }

    .itl-text {
        font-size: 2rem;
        line-height: 1.7;
    }

    .itl-btn {
        font-size: 1.8rem;
    }
}