* {
            padding: 0;
            margin: 0
        }
        
         :root {
            --color-bg-dark: #0E2C40;
            --color-bg-light: #ffffff;
            --color-item-primary: #EFBC75;
            --color-item-secundary: #d6a765;
            --color-item-checked: #C1E1A7;
            --color-text-primary-dark: #ffffff;
            --color-text-primary-light: #000000;
            --color-text-item-primary: #000000;
            --color-text-item-secundary: #ffffff
        }
        
        @font-face {
            font-family: Nunito-Regular;
            src: url(./../fonts/Nunito-Regular.ttf)
        }
        
        @font-face {
            font-family: Nunito-Light;
            src: url(./../fonts/Nunito-Light.ttf)
        }
        
        @font-face {
            font-family: Nunito-Italic;
            src: url(./../fonts/Nunito-Italic.ttf)
        }
        
        @font-face {
            font-family: Nunito-Black;
            src: url(./../fonts/Nunito-Black.ttf)
        }
        
        @font-face {
            font-family: Nunito-Bold;
            src: url(./../fonts/Nunito-Bold.ttf)
        }
        
        @font-face {
            font-family: Nunito-SemiBold;
            src: url(./../fonts/Nunito-SemiBold.ttf)
        }
        
        .main {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: var(--color-bg-light);
        }
        
        .logo {
            margin-top: 15px;
            margin-bottom: 10px;
            width: 200px
        }
        
        .title {
            font-size: 1.7rem;
            font-family: Nunito-SemiBold;
            color: #fd5100;
            border-bottom: 2px solid #fd5100
        }
        
        .subtitle {
            font-size: 1rem;
            font-family: Nunito-Regular;
            margin-top: -5px
        }
        
        h6 {
            color: #fd5100;
        }
        
        #list {
            width: 100%;
            min-height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 5px
        }
        
        .card_new {
            position: relative;
            width: 200px;
            height: 200px;
            color: #a18a96;
            border-radius: 20px;
            overflow: hidden;
            margin: 5px
        }
        
        .card__content {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            padding: 20px;
            background-color: rgb(253 81 0);
            border-top-left-radius: 20px;
            transform: translateY(50px);
            transition: transform .25s
        }
        
        .card__content::before {
            content: '';
            position: absolute;
            top: -41px;
            right: -55px;
            width: 90px;
            height: 80px;
            transform: rotate(168deg);
            border-radius: 50%;
            box-shadow: inset 48px 48px #fd5100
        }
        
        .card__title {
            font-family: Nunito-SemiBold;
            color: #fff;
            line-height: 20px;
            text-align: center;
            font-size: 1.1rem
        }
        
        .btn-outline-light:hover {
            color: #fd5100!important
        }
        
        .card_subtitle {
            display: block;
            font-size: 12px;
            margin-bottom: 10px
        }
        
        .card__description {
            font-size: 14px;
            opacity: 0;
            transition: opacity .5s;
            color: #fff
        }
        
        .card_new:hover .card__content {
            transform: translateY(6px)
        }
        
        .card_new:hover .card__description {
            opacity: 1;
            transition-delay: .25s
        }
        
        .socorrista {
            background: url('./../../assets/img/capas/capa-socorrista.webp') center no-repeat;
            background-size: cover
        }
        
        .geografia {
            background: url('./../../assets/img/capas/capa-geografia.webp') center no-repeat;
            background-size: cover
        }
        
        .matematica {
            background: url('./../../assets/img/capas/capa-matematica.webp') center no-repeat;
            background-size: cover
        }
        
        .fiscaldeloja {
            background: url('./../../assets/img/capas/capa-fiscaldeloja.webp') center no-repeat;
            background-size: cover
        }
        
        .ingleskids {
            background: url('./../../assets/img/capas/capa-ingleskids2.webp') center no-repeat;
            background-size: cover
        }
        
        .inglesbteens {
            background: url('./../../assets/img/capas/capa-englishteens2.webp') center no-repeat;
            background-size: cover
        }
        
        .cuidador {
            background: url('./../../assets/img/capas/capa-cuidador.webp') center no-repeat;
            background-size: cover
        }
        
        .empreendedorismo {
            background: url('./../../assets/img/capas/capa-empreendedorismo.webp') center no-repeat;
            background-size: cover
        }
        
        .access {
            background: url('./../../assets/img/capas/capa-access.webp') center no-repeat;
            background-size: cover
        }
        
        .internet {
            background: url('./../../assets/img/capas/capa-internet.webp') center no-repeat;
            background-size: cover
        }
        
        .auxiliarcreche {
            background: url('./../../assets/img/capas/capa-auxiliarcreche.webp') center no-repeat;
            background-size: cover
        }
        
        .espanhol {
            background: url('./../../assets/img/capas/capa-espanhol.webp') center no-repeat;
            background-size: cover
        }
        
        .manutencaopc {
            background: url('./../../assets/img/capas/capa-manutencaopc.webp') center no-repeat;
            background-size: cover
        }
        
        .roboticakids {
            background: url('./../../assets/img/capas/capa-roboticakids.webp') center no-repeat;
            background-size: cover
        }
        
        footer {
            position: relative;
            width: 100%;
            bottom: 0;
            text-align: center;
            background-color: #000000d1;
            padding: 10px;
            color: #fff
        }
        
        footer p {
            margin: 0!important
        }
        
        footer a {
            color: #fd5100;
            text-decoration: none
        }
        
        footer a:hover {
            color: #fd5100;
            text-decoration: underline
        }