:root {
    --main-color: #B89B5E;
    --main-color-opacity: rgba(184, 155, 94, 0.1);
    --secondary-color: #223555;
    --white-color: #FFF;
    --black-color: #000;
    --light-gray-color: #9F9F9F;
    --dark-gray-color: #707070;
    --footer-color: #F4F4F4;
}

@font-face {
    font-family: "LoraMedium";
    src: url("/public/fonts/Lora-Medium.ttf");
}

@font-face {
    font-family: "LoraBold";
    src: url("/public/fonts/Lora-Bold.ttf");
}

@font-face {
    font-family: "PoppinsRegular";
    src: url("/public/fonts/Poppins-Regular.ttf");
}

@font-face {
    font-family: "PoppinsMedium";
    src: url("/public/fonts/Poppins-Medium.ttf");
}

@font-face {
    font-family: "PoppinsSemiBold";
    src: url("/public/fonts/Poppins-SemiBold.ttf");
}

@font-face {
    font-family: "PoppinsLight";
    src: url("/public/fonts/Poppins-Light.ttf");
}

.px-4-p {
    padding-right: 1.9rem!important;
    padding-left: 1.9rem!important;
}

.bg-blue {
    background-color: var(--secondary-color) !important;
}

.bg-light-p {
    background-color: var(--footer-color) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--white-color) !important;
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--main-color) !important;
}

.navbar-light .navbar-toggler {
    border-color: rgba(255, 255, 255, 1) !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

#main {
    background-image: url("/public/images/balanza_bn.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

#main::after, #asesoramiento-index::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#main-nuestra-firma, #main-areas, #main-contacto, #main-contacto-gracias {
    background-color: var(--secondary-color);
}

.index h1 {
    color: var(--white-color);
    font-family: "LoraBold";
}

#descr-index {
    color: var(--white-color);
    font-family: "PoppinsLight";
}

#descr-gracias {
    color: var(--black-color);
    font-family: "PoppinsLight";
}

#div-main-title, #div-firma-title, #div-practica-title {
    color: var(--main-color);
    height: 2px;
    opacity: 1;
}

#div-main-title-firma, #div-main-title-practicas, #div-main-title-contacto, #div-main-title-contacto-gracias {
    color: var(--main-color);
    height: 3px;
    opacity: 1;
}

.btn-primary {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    font-family: "PoppinsLight";
}

#nuestra-firma h2, #practica h2 {
    color: var(--secondary-color);
    font-family: "LoraBold";
}

#descr-firma-index, #descr-practica-index, .descr-firma {
    color: var(--black-color);
    font-family: "PoppinsRegular";
}

.show-more {
    color: var(--main-color);
    font-family: "PoppinsMedium";
    text-decoration-line: none;
}

#asesoramiento-index {
    background-image: url("/public/images/birome_bn.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

#asesoramiento-index h2 {
    color: var(--white-color);
    font-family: "PoppinsSemiBold";
}

#asesoramiento-index p {
    color: var(--white-color);
    font-family: "PoppinsRegular";
}

footer #menu h3, footer #contacto h3 {
    font-family: "PoppinsSemiBold";
    color: var(--secondary-color);
}

footer #menu ul, footer #contacto ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer #menu li a, footer #contacto li {
    font-family: "PoppinsRegular";
    color: var(--dark-gray-color);
    text-decoration-line: none;
}

footer #derechos-reservados {
    font-family: "PoppinsRegular";
    color: var(--secondary-color);
}

.header-page h6 {
    font-family: "PoppinsLight";
    color: var(--light-gray-color);
}

.header-page h1 {
    font-family: "LoraBold";
    color: var(--secondary-color);
}

.header-page p {
    font-family: "PoppinsMedium";
    color: var(--main-color);
}

#card-especialidades .card {
    border: none;
    border-radius: .85rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.card-text {
    font-family: "LoraMedium";
    color: var(--white-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

#cardPenalEmpresarial {
    background-image: url("/public/images/penal_empresarial.png");
}

#cardDelitosInformaticos {
    background-image: url("/public/images/delitos_informaticos.png");
}

#cardPenalEconomico {
    background-image: url("/public/images/penal_economico.png");
}

#cardDerechoContravencional {
    background-image: url("/public/images/derecho_contravencional.png");
}

#cardCompliance {
    background-image: url("/public/images/compliance.png");
}

#cardClippingLegislativo {
    background-image: url("/public/images/clipping_legislativo.png");
}

#cardAntipirateria {
    background-image: url("/public/images/antipirateria.png");
}

#cardDerechoLaboral {
    background-image: url("/public/images/derecho_laboral.png");
}

#cardDerechoAdministrativo {
    background-image: url("/public/images/derecho_administrativo.png");
}

.bg-card {
    background: #223555;
    opacity: 0.8;
}

label {
    color: var(--main-color);
    font-family: "PoppinsRegular";
}

input {
    border: none;
    border-bottom: 1px solid var(--main-color);
    width: 100%;
    font-family: "PoppinsLight" !important;
    color: var(--light-gray-color);
}

textarea {
    padding: 4px;
    border: 1px solid var(--main-color);
    border-radius: 5px;
    resize: none !important;
    font-family: "PoppinsLight" !important;
    color: var(--light-gray-color);
}

input::placeholder, textarea::placeholder {
    font-family: "PoppinsLight";
    color: var(--light-gray-color);
}

input:focus, textarea:focus {
    outline: none;
    background-color: var(--main-color-opacity);
}

.form-container {
    border: 2px solid var(--secondary-color);
    border-radius: 5px;
}

#place h6 {
    font-family: "PoppinsMedium";
    color: var(--main-color);
}

#place p {
    font-family: "PoppinsRegular";
    color: var(--light-gray-color);
}

.container-lg-fluid {
    max-width: 100% !important;
}

.index h1 {
    font-size: 90px;
    line-height: 116px;
}

#descr-index, .header-page p {
    font-size: 20px;
    line-height: 30px;
}

#div-main-title {
    width: 60%;
}

.btn-primary {
    font-size: 20px !important;
    line-height: 30px !important;
}

#nuestra-firma h2, #practica h2, .header-page h1 {
    font-size: 60px;
    line-height: 76px;
}

#descr-firma-index, #descr-practica-index, #asesoramiento-index p, .descr-firma {
    font-size: 20px;
    line-height: 34px;
}

.show-more {
    font-size: 20px;
    line-height: 30px;
}

#asesoramiento-index h2 {
    font-size: 40px;
    line-height: 60px;
}

#main::after, #asesoramiento-index::after {
    background: linear-gradient(to bottom, #010a18cb, #0714293d);
}

#logo-navbar {
    width: 70px;
}

footer #menu h3, footer #menu li, footer #contacto h3, footer #contacto li, footer #derechos-reservados, .header-page h6 {
    font-size: 20px;
    line-height: 30px;
}

#div-main-title-firma, #div-main-title-practicas, #div-main-title-contacto, #div-main-title-contacto-gracias {
    width: 10%;
}

#card-especialidades .card, .bg-card {
    height: 120px;
    width: 156px;
}

.card-text {
    font-size: 18px;
    line-height: 21px;
}

#card-especialidades .card, .bg-card {
    height: 230px;
    width: 266px;
}

@media (min-width: 1400px) {
    .container-xxl-fluid {
        max-width: 85% !important;
    }
    .container-navbar-xxl-fluid {
        max-width: 100% !important;
    }
}

@media (max-width: 1366px) {
    #logo-navbar {
        width: 60px;
    }
    #main::after, #asesoramiento-index::after {
        background: linear-gradient(to bottom, #010814cb, #0714293d);
    }
    #asesoramiento-index h2 {
        font-size: 36px;
        line-height: 56px;
    }
    #div-main-title-firma, #div-main-title-practicas, #div-main-title-contacto, #div-main-title-contacto-gracias {
        width: 12%;
    }
    .descr-firma {
        font-size: 16px;
        line-height: 30px;
    }
    #asesoramiento-index p {
        font-size: 18px;
        line-height: 32px;
    }
    #div-main-title {
        width: 62.5%;
    }
    footer #menu h3, footer #menu li, footer #contacto h3, footer #contacto li, footer #derechos-reservados, .header-page h6 {
        font-size: 16px;
        line-height: 22px;
    }
    #card-especialidades .card, .bg-card {
        height: 210px;
        width: 246px;
    }
    .card-text {
        font-size: 16px;
        line-height: 19px;
    }
}

@media (max-width: 1024px) {
    #logo-navbar {
        width: 60px;
    }
    #main::after, #asesoramiento-index::after {
        background: linear-gradient(to bottom, #010814cb, #0714293d);
    }
    .index h1 {
        font-size: 55px;
        line-height: 81px;
    }
    #div-main-title {
        width: 45%;
    }
    #div-main-title-firma, #div-main-title-practicas, #div-main-title-contacto, #div-main-title-contacto-gracias {
        width: 23%;
    }
    #descr-index {
        font-size: 16px;
        line-height: 24px;
    }
    .btn-primary {
        font-size: 16px !important;
    }
    #nuestra-firma h2, #practica h2, .header-page h1 {
        font-size: 30px;
        line-height: 46px;
    }
    #descr-firma-index, #descr-practica-index, .show-more, #asesoramiento-index p, .header-page p {
        font-size: 14px;
        line-height: 24px;
    }
    #asesoramiento-index h2 {
        font-size: 28px;
        line-height: 48px;
    }
    footer #menu h3, footer #menu li, footer #contacto h3, footer #contacto li, footer #derechos-reservados, .header-page h6 {
        font-size: 14px;
        line-height: 20px;
    }
    #card-especialidades .card, .bg-card {
        height: 179px;
        width: 215px;
    }
    .card-text {
        font-size: 14px;
        line-height: 17px;
    }
}

@media (max-width: 812px) {
    #logo-navbar {
        width: 65px;
    }
    #main::after, #asesoramiento-index::after {
        background: linear-gradient(to bottom, #010814cb, #0714296c);
    }
    .index h1 {
        font-size: 42px;
    }
    #div-main-title {
        width: 82%;
    }
    #div-main-title-firma, #div-main-title-practicas, #div-main-title-contacto, #div-main-title-contacto-gracias {
        width: 23%;
    }
    #descr-index, #descr-firma-index, #descr-practica-index, #asesoramiento-index p, .header-page p, .descr-firma, #place p {
        font-size: 16px;
        line-height: 25.8px;
    }
    #div-firma-title, #div-practica-title {
        width: 51.5%;
    }
    .btn-primary {
        font-size: 16px !important;
    }
    .show-more {
        font-size: 16px;
    }
    #nuestra-firma h2, #practica h2, .header-page h1 {
        font-size: 35px;
        line-height: 45px;
    }
    #asesoramiento-index h2 {
        font-size: 25px;
        line-height: 38px;
    }
    footer #menu h3, footer #menu li, footer #contacto h3, footer #contacto li, footer #derechos-reservados, .header-page h6, label, #place h6, #descr-gracias {
        font-size: 16px;
        line-height: 23px;
    }
    #card-especialidades .card, .bg-card {
        height: 120px;
        width: 156px;
    }
    .card-text {
        font-size: 13px;
        line-height: 16px;
    }
}

@media (max-width: 414px) {
    #logo-navbar {
        width: 50px;
    }
    #main {
        background-image: url("/public/images/background_home.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    #main::after {
        background: none;
    }
    #descr-index, #descr-firma-index, #descr-practica-index, #asesoramiento-index p, .header-page p, .descr-firma, #place p {
        font-size: 14px;
        line-height: 23.8px;
    }
    #div-firma-title, #div-practica-title {
        width: 73.5%;
    }
    #div-main-title-firma, #div-main-title-practicas, #div-main-title-contacto, #div-main-title-contacto-gracias {
        width: 23%;
    }
    .btn-primary {
        font-size: 14px !important;
    }
    .show-more {
        font-size: 14px;
    }
    #asesoramiento-index {
        background-image: url("/public/images/background_contacto.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    footer #menu h3, footer #menu li, footer #contacto h3, footer #contacto li, footer #derechos-reservados, .header-page h6, label, #place h6, #descr-gracias {
        font-size: 14px;
        line-height: 21px;
    }
    .card-text {
        font-size: 11px;
        line-height: 14px;
    }
    #card-especialidades .card, .bg-card {
        height: 120px;
        width: 156px;
    }
    input:focus {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }
    input, textarea {
        font-size: 10px !important;
        line-height: 16px !important;
    }
    input::placeholder, textarea::placeholder {
        font-size: 10px;
        line-height: 16px;
    }
}