@font-face {
    font-family: 'Articulat';
    src: url('{{ asset("fonts/Articulat-CF.otf") }}');
}
@font-face {
    font-family: 'BespokeSerif';
    src: url('{{ asset("fonts/BespokeSerif.ttf") }}');
}
@font-face {
    font-family: 'Manrope';
    src: url('{{ asset("fonts/Manrope.ttf") }}');
}
@font-face {
    font-family: 'PTSerif';
    src: url('{{ asset("fonts/PTSerif.ttf") }}');
}

html {
    --bg: #ebebeb;
    --bg-panel: #35abe2;
    --color-headings: #000000;
    --color-text: #000000;
    --font-family-title: 'Articulat';
    --font-family-text: 'BespokeSerif', 'Manrope', 'PTSerif';
}

body {
    background-color: #fff;
    font-family: var(--font-family-text);
}

body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--bg-panel);
    border-radius: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    color: var(--color-headings);
}

.icon-change {
    color: var(--color-text);
}

.h-100 {
    min-height: 100vh;
    height: auto;
}

.row {
    margin: 0;
    padding: 0;
}

.bg-black {
    background-color: var(--bg-panel) !important;
}

.text-gc-black {
    color: #575757;
}

.text-gc-black:hover {
    color: white;
}

.min-vh-80 {
    min-height: 80vh;
    height: auto;
}

.br-2 {
    border-radius: 2px;
}

.br-8 {
    border-radius: 8px;
}

.bl-8 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.card-new-courses {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.border-white {
    border: solid 2px #fff;
}

.animate-logo:hover {
    transform: scale(1.1, 1.1);
}

.bg-gray {
    background-color: var(--color-white);
}

.card-course-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.font-source {
    font-size: 14px;
    text-transform: uppercase;
}

.text-sm {
    font-size: 12px;
}

/* .img-hover:hover {
    transform: scale(1.02,1.02);
    filter: grayscale(100%);
    background-image: url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/></svg>');
    -webkit-box-shadow: 0px 10px 13px -7px #1b1b1b, 5px 5px 15px 5px rgba(0,0,0,0);
    box-shadow: 0px 10px 13px -7px #1b1b1b, 5px 5px 15px 5px rgba(0,0,0,0);
} */

.img-cont {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.img-hover {
    width: 100%;
    height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: 0.3s ease;
    background-color: rgba(17, 17, 17, 0.493);
}

/* When you mouse over the container, fade in the overlay icon*/
.img-cont:hover .overlay {
    opacity: 1;
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
    color: #252627;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.icon:hover {
    color: white;
}

/* When you move the mouse over the icon, change color */
.fa-user:hover {
    color: #eee;
}

.bg-login {
    background-image: url(../img/login-bg.png);
    background-size: cover;
    background-repeat: repeat;
    width: 100vw;
}

.card-login {
    min-width: 325px;
    max-width: 375px;
    width: auto;
}

.btn-treinagc {
    background-color: #35abe2;
    color: #fff;
}

.btn-treinagc:hover {
    transform: scale(1.02, 1.02);
}

.btn-treinagc:focus {
    transform: scale(0.95, 0.95);
}

.bg-red {
    background-color: #d10505 !important;
}

.bg-green {
    background-color: #05cf27 !important;
}

#formPassRst {
    max-height: 450px;
}

.main-text-content {
    display: flex;
    max-width: 1106px;
    align-items: flex-end;
    align-content: flex-end;
    gap: 0px 305px;
    flex-wrap: wrap;
}

.main-text-title {
    color: #000;
    font-family: var(--font-family-title);
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 72px; /* 120% */
    letter-spacing: 1.8px;
    text-transform: capitalize;
    margin-top: 30%;
}

.main-text-desc {
    color: #5f6c76;
    font-family: var(--font-family-text);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 166.667% */
}

.itens-desc {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 5px;
    border-spacing: 5px;
}

.itens-front {
    border-radius: 4px;
    border: 1px solid #44cea9;
    background: #fff;
    box-shadow: 0px 4px 23px 0px rgba(0, 0, 0, 0.06);
    padding: 5px;
    border-spacing: 5px;
}

.text-title {
    color: #000;
    font-family: var(--font-family-title);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.6px;
    text-transform: capitalize;
    margin-bottom: 0rem;
}

.text-desc {
    color: #818182;
    font-family: var(--font-family-text);
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0rem;
}

.footer-text strong {
    font-family: var(--font-family-text);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.footer-text {
    padding-top: 50px;
    font-family: var(--font-family-text);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    vertical-align: middle;
}