html,
body {
height: 100%;
}
/* NAVBAR INMATRICULACION - FORZAR PILLS HORIZONTALES */
.navbar-inmatriculacion {
background-color: #f8f9fa !important;
padding: 20px !important;
border-bottom: 1px solid #e9ecef !important;
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100% !important;
list-style: none !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.navbar-inmatriculacion > div {
background-color: transparent !important;
color: #495057 !important;
padding: 0 !important;
display: inline-block !important;
list-style: none !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.navbar-inmatriculacion > div > a {
color: #495057 !important;
text-decoration: none !important;
padding: 12px 24px !important;
border-radius: 25px !important;
transition: all 0.3s ease !important;
font-weight: 500 !important;
font-size: 14px !important;
display: inline-block !important;
background-color: #e9ecef !important;
border: 1px solid transparent !important;
cursor: pointer !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.navbar-inmatriculacion > div > a:hover {
background-color: #dee2e6 !important;
color: #212529 !important;
}
.navbar-inmatriculacion > div.active > a {
background-color: #ffc107 !important;
color: #212529 !important;
font-weight: 600 !important;
}
.navbar-inmatriculacion > div.active > a:hover {
background-color: #e0a800 !important;
color: #212529 !important;
}
/* Responsive */
@media (max-width: 767.98px) {
.navbar-inmatriculacion {
padding: 15px 10px !important;
gap: 6px !important;
}
.navbar-inmatriculacion > div > a {
padding: 10px 16px !important;
font-size: 13px !important;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.navbar-inmatriculacion {
padding: 18px !important;
gap: 7px !important;
}
}
@media (min-width: 1024px) {
.navbar-inmatriculacion {
padding: 20px !important;
gap: 8px !important;
}
}
body {
/* background: #EAECEE; */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#root {
flex: 1;
}
.form-label {
margin-bottom: 1px;
}
/* .App{
font-family: Graphik-Regular;
} */
:root {
--color-fondo-menu-primario: #1c2536;
/*Fondo del menú*/
--color-texto-nav-item: #9da4ae;
/*Texto Menu opciones*/
--color-fondo-nav-item-activo: #545c64;
/*Fondo Menu opciones activo*/
--color-texto-nav-item-activo: #ffffff;
/*Texto Menu opciones activo*/
--color-button-primario: #704afa;
--color-button-primario-hover: #8665ff;
--color-button-primario-text: #ffffff;
--color-button-secundario: #9da4ae;
--color-button-secundario-hover: #6b727f;
--color-button-secundario-text: #ffffff;
--primary-font: "Poppins", sans-serif;
--secondary-font: "Poppins", sans-serif;
--h1-size: 3.7rem;
--h1-weight: 600;
--h2-size: 3rem;
--h2-weight: 600;
--h3-size: 2rem;
--h3-weight: 600;
--h4-size: 1.5rem;
--h4-weight: 600;
--h5-size: 1.2rem;
--h5-weight: 600;
--h6-size: 1rem;
--h6-weight: 600;
--p-size: 1rem;
--p-weight: 400;
--header-bg-color: #121117;
--nav-brand-height: 55px;
--top-nav-item-color: #F5F5F5;
--nav-item-color: #121117;
--primary-color: #0053a1;
--secondary-color: #4528DC;
--white-color: #F9F9F9;
--black-color: #040402;
--grey-color: #f3f5f7;
--dark-grey-color: #191919;
--primary-t-color: #222;
--secondary-t-color: #F5F5F5;
--primary-p-color: #565656;
--secondary-p-color: #E1E1E1;
--primary-b-color: #F5F5F5;
--primary-l-color: rgba(0, 0, 0, .12);
--secondary-l-color: rgba(45, 49, 54, 0.09);
--border-radius-sm: 0.5rem;
--border-radius-md: 1rem;
--border-radius-lg: 2rem;
--valid-color: #007A4D;
--invalid-color: #E34F4F;
--primary-bg-color: #FFFFFF;
--primary-bg-color-2: #F6F9FE;
--primary-bg-color-3: #E5E5E5;
--secondary-bg-color: #040402;
--secondary-bg-color-2: #111111;
--secondary-bg-color-3: #191919;
--card-bg-color: #16182D;
--footer-bg-color: #121117;
--transform-scale: scale3d(1.06, 1.06, 1.06);
--transition-function: cubic-bezier(.645, .045, .355, 1);
--transition-duration: 0.35s;
--transition-duration-short: 0.25s;
}
.GraphikR {
font-family: Graphik-Regular;
}
.form-seccion div {
margin: 5px 0;
}
.navbar-lista li a {
color: white !important;
}
.form-section {
line-height: 35px;
}
.form-section div label {
margin-bottom: 10px !important;
}
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
border-color: #704afa;
background-color: #fff;
box-shadow: 0 0 0 0.15rem rgba(77, 13, 253, 0.25);
}
.form-check-input:checked {
border-color: #8665ff;
background-color: #704afa;
}
.main-colored {
background: var(--color-button-primario) !important;
color: var(--color-button-primario-text) !important;
}
.secondary-colored {
background: var(--color-button-secundario) !important;
color: var(--color-button-secundario-text) !important;
}
.btn-main {
background: var(--color-button-primario);
color: var(--color-button-primario-text);
/* white; */
}
.btn-main:hover {
background: var(--color-button-primario-hover);
color: var(--color-button-primario-text);
/* white; */
}
.btn-outline-main {
color: var(--color-button-primario);
border: 0.1rem solid var(--color-button-primario);
}
.btn-outline-main:hover,
.btn-outline-main:focus {
background-color: var(--color-button-primario);
color: var(--color-button-primario-text);
}
.btn-secundario {
background: var(--color-button-secundario);
color: var(--color-button-secundario-text);
/* white; */
}
.btn-secundario:hover,
.btn-secundario:focus {
background: var(--color-button-secundario-hover);
color: var(--color-button-secundario-text);
/* white; */
}
.btn-outline-secundario {
color: var(--color-button-secundario);
border: 2px solid var(--color-button-secundario);
}
.btn-outline-secundario:hover,
.btn-outline-secundario:focus {
background-color: var(--color-button-secundario);
color: var(--color-button-secundario-text);
}
.subrayado:hover {
text-decoration: underline;
cursor: pointer;
}
.login-bk1 {
background: #d0c5dd;
}
.login-bk2 {
background: #e2dbeb;
}
.login-height {
height: 100vh;
background-image: url("/images/login.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Sidebar */
.main-container {
display: flex;
min-height: 100vh;
}
.sidebar {
/* background: rgb(0, 7, 61); */
background: var(--color-fondo-menu-primario);
color: white;
/* height: 100vh; */
overflow-y: auto;
display: flex;
flex-direction: column;
}
/*BANNER*/
.bg-menu-primario {
background: var(--color-fondo-menu-primario) !important;
color: var(--color-texto-nav-item);
--bs-gradient: linear-gradient(
180deg,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 100%
);
}
.bg-gradient {
background-image: var(--bs-gradient) !important;
}
.top_section {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
}
.logo {
font-size: 18px;
line-height: 0;
}
.bars {
width: 30px;
cursor: pointer;
}
.hide {
display: none;
}
.search {
display: flex;
align-items: center;
margin: 10px 0;
height: 30px;
padding: 10px;
}
.search input {
border: none;
margin-left: 10px;
border-radius: 5px;
background: rgb(238, 238, 238);
color: #000;
}
.routes {
/* margin-top: 15px; */
display: flex;
flex-direction: column;
gap: 5px;
}
.routes a {
/* margin: 1px 15px; */
border-radius: 5px;
}
/* .routes div{
padding: 6px 20px;
} */
.link {
display: flex;
align-items: center;
color: var(--color-texto-nav-item);
gap: 10px;
padding: 5px 5px;
margin-left: 3px;
margin-right: 6px;
/* border-right: 4px solid transparent; */
transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
text-decoration: none;
}
.link-submenu {
display: flex;
color: var(--color-texto-nav-item);
gap: 10px;
padding: 5px 0px;
/* border-right: 4px solid transparent; */
transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
text-decoration: none;
margin-left: 3px;
margin-right: 6px;
/* margin-right: 10px; */
}
.link:hover {
/* border-right: 4px solid white; */
/* background: rgb(45, 51, 89); */
background: var(--color-fondo-nav-item-activo);
transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
color: var(--color-texto-nav-item-activo);
}
.link-submenu:hover {
background: var(--color-fondo-nav-item-activo);
transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
color: var(--color-texto-nav-item-activo);
}
.active {
/* border-right: 4px solid white; */
/* background: rgb(45, 51, 89); */
background: var(--color-fondo-nav-item-activo);
color: var(--color-texto-nav-item-activo);
}
.link_text {
white-space: nowrap;
font-size: 0.75rem;
text-transform: capitalize;
}
.menu {
display: flex;
/* margin: 2px 10px; */
transition: 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045);
justify-content: space-between;
align-items: center;
padding: 5px 5px;
margin-left: 3px;
margin-right: 6px;
border-radius : 5px
}
.menu_item {
display: flex;
/* gap: 10px; */
}
.menu_container {
display: flex;
flex-direction: column;
}
.menu_container .link {
padding-left: 0px;
/* border-bottom: #fff 0.5px solid; */
}
.usuario {
margin: 2px 15px;
padding: 5px 3px;
border-radius: 5px;
}
.color-iconos {
color: var(--color-button-primario) !important;
}
.color-iconos-sidebar {
color: var(--color-texto-nav-item);
}
/* FIN SIDEBAR */
/* Cambiar los input a numeros */
/* Para navegadores basados en WebKit (como Chrome y Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* Para navegadores basados en Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
.error {
color: red;
}
.btn-subir {
width: 90px;
/* Ancho deseado del botón "Subir" */
}
.btn-cancelar {
width: 90px;
/* Ancho deseado del botón "Cancelar" */
}
.table-archivos thead,
.table-archivos tbody tr td {
line-height: 13px;
}
/***** POP UP APLICACIONES*****/
.boton-apps > div > button {
height: 35px;
width: 35px;
margin: 0 !important;
font-size: 10px;
background: transparent;
}
.popup-aplicaciones > ul > li {
align-items: start;
/* width: 130px; */
}
.popup-aplicaciones > ul li > div {
flex-direction: column !important;
padding: 0 10px;
}
.popup-aplicaciones > ul li > div > div {
display: flex;
justify-content: center;
}
.custom-dialog-paper {
border-radius: 7px !important;
min-width: 350px;
}
/** Loader externo**/
.loader-externo {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
position: relative;
}
.loader-externo:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
}
.loader-externo-inner {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.loader-externo-block {
display: inline-block;
width: 10px;
height: 10px;
margin: 2px;
background-color: var(--color-button-primario);
box-shadow: 0 0 20px #fff;
animation: loader_562 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-externo-block:nth-child(1) {
animation-delay: 0.1s;
}
.loader-externo-block:nth-child(2) {
animation-delay: 0.2s;
}
.loader-externo-block:nth-child(3) {
animation-delay: 0.3s;
}
.loader-externo-block:nth-child(4) {
animation-delay: 0.4s;
}
.loader-externo-block:nth-child(5) {
animation-delay: 0.5s;
}
.loader-externo-block:nth-child(6) {
animation-delay: 0.6s;
}
.loader-externo-block:nth-child(7) {
animation-delay: 0.7s;
}
.loader-externo-block:nth-child(8) {
animation-delay: 0.8s;
}
@keyframes loader_562 {
0% {
transform: scale(1);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
20% {
transform: scale(1, 2.5);
box-shadow: 0 0 50px rgba(255, 255, 255, 0.7);
}
40% {
transform: scale(1);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
}
/** Fin Loader externo **/
/** Loader PDF**/
.loader {
position: relative;
width: 54px;
height: 54px;
border-radius: 10px;
}
.loader div {
width: 8%;
height: 24%;
background: rgb(128, 128, 128);
position: absolute;
left: 50%;
top: 30%;
opacity: 0;
border-radius: 50px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
animation: fade458 1s linear infinite;
}
@keyframes fade458 {
from {
opacity: 1;
}
to {
opacity: 0.25;
}
}
.loader .bar1 {
transform: rotate(0deg) translate(0, -130%);
animation-delay: 0s;
}
.loader .bar2 {
transform: rotate(30deg) translate(0, -130%);
animation-delay: -1.1s;
}
.loader .bar3 {
transform: rotate(60deg) translate(0, -130%);
animation-delay: -1s;
}
.loader .bar4 {
transform: rotate(90deg) translate(0, -130%);
animation-delay: -0.9s;
}
.loader .bar5 {
transform: rotate(120deg) translate(0, -130%);
animation-delay: -0.8s;
}
.loader .bar6 {
transform: rotate(150deg) translate(0, -130%);
animation-delay: -0.7s;
}
.loader .bar7 {
transform: rotate(180deg) translate(0, -130%);
animation-delay: -0.6s;
}
.loader .bar8 {
transform: rotate(210deg) translate(0, -130%);
animation-delay: -0.5s;
}
.loader .bar9 {
transform: rotate(240deg) translate(0, -130%);
animation-delay: -0.4s;
}
.loader .bar10 {
transform: rotate(270deg) translate(0, -130%);
animation-delay: -0.3s;
}
.loader .bar11 {
transform: rotate(300deg) translate(0, -130%);
animation-delay: -0.2s;
}
.loader .bar12 {
transform: rotate(330deg) translate(0, -130%);
animation-delay: -0.1s;
}
/** Fin Loader PDF **/
/* Estilo para poner en negrita */
.montos p {
font-weight: bold;
}
.btn-salir {
width: 90px;
/* Ancho deseado del botón "Subir" */
}
.btn-cancelar {
width: 90px;
/* Ancho deseado del botón "Cancelar" */
}
/* cambiar contraseña */
.botones-accion button {
margin: 0 1rem;
}
.btn-cambiar-psw {
background: transparent;
color: var(--color-texto-nav-item);
}
.btn-cambiar-psw:hover {
background: var(--color-fondo-nav-item-activo);
color: var(--color-texto-nav-item-activo);
border-radius: 5px;
}
iframe.iframePersonalizado img {
width: "100%";
}
/* NUEVOS ESTILOS AGREGADOS*/
.file-group {
display: flex;
border: 1px #ced4da solid;
border-radius: 5px;
overflow: hidden;
}
.file {
padding: 0.1rem 0.75rem;
}
.file-btn {
background-color: rgb(233 236 239);
width: fit-content;
}
.file-group:hover .file-btn {
transition: 0.5s;
background-color: rgb(194, 194, 194);
cursor: pointer;
}
.file-text {
flex-grow: 1;
}
.table-reporte td {
padding: 0;
font-size: 12px;
}
.table-reporte th {
font-size: 13px;
font-weight: 600;
color: white;
font-weight: 400;
font-family: unset;
direction: ltr;
}
.text-capitalize {
text-transform: capitalize;
}
.bg-card {
border: 2px solid black;
border-radius: var(--radius_l);
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
box-shadow: 0 7px 10px -5px var(--colors_gray08);
}
.bg-mn-2 {
margin-top: -20px;
}
.bg-mn-4 {
margin-top: -40px;
}
.bg-gradient-2 {
background-image: linear-gradient(
195deg,
rgba(255, 255, 255, 0.25),
rgba(255, 255, 255, 0)
) !important;
box-shadow:
0 10px 15px 0 rgba(0, 0, 0, 0.1),
0 10px 10px 0 rgba(0, 0, 0, 0.1);
}
.bg-gradient-3 {
background-image: linear-gradient(
195deg,
rgba(255, 255, 255, 0.35),
rgba(255, 255, 255, 0)
) !important;
box-shadow:
0 10px 15px 0 rgba(0, 0, 0, 0.1),
0 10px 10px 0 rgba(0, 0, 0, 0.1);
}
.bg-gradient-4 {
background-image: linear-gradient(
190deg,
rgba(255, 255, 255, 0.45),
rgba(255, 255, 255, 0)
) !important;
box-shadow:
0 10px 15px 0 rgba(0, 0, 0, 0.1),
0 10px 10px 0 rgba(0, 0, 0, 0.1);
}
.border-box {
box-shadow:
0 10px 15px 0 rgba(0, 0, 0, 0.1),
0 10px 10px 0 rgba(0, 0, 0, 0.1);
}
.dashboard-color {
color: #727272;
}
.highcharts-credits {
display: none;
}
.border-box-5 {
border: 0.055rem solid #c3c3c3;
box-shadow:
rgba(247, 217, 127, 0.8) -3px 3px,
rgba(247, 217, 127, 0.3) -6px 6px,
rgba(247, 217, 127, 0.2) -9px 9px,
rgba(247, 217, 127, 0.1) -12px 12px,
rgba(20, 20, 20, 0.05) -15px 15px;
}
.bold {
font-weight: 500 !important;
}
.bold-1 {
font-weight: bold !important;
}
.bold-2 {
font-weight: 800 !important;
}
.fs-7 {
font-size: 0.9rem !important;
}
.fs-8 {
font-size: 0.8rem !important;
}
.mouse:hover {
cursor: pointer;
}
.select-react > div {
min-height: 25px !important;
}
.css-t3ipsp-control:hover,
.css-t3ipsp-control,
.css-t3ipsp-control:focus {
border-color: #704afa !important;
background-color: #fff !important;
box-shadow: 0 0 0 0.15rem rgb(77 13 253 / 25%) !important;
}
.activeRow {
background: rgb(53, 161, 179) !important;
color: aliceblue;
}
.css-1nmdiq5-menu {
line-height: 15px !important;
padding: 0;
margin: 0;
}
.bg-light {
background-color: #f0f5f8 !important;
background-color: #e9eef1 !important;
}
@media (max-width: 2768px) {
.table,
.table > tbody > th,
.table > tbody > tr {
font-size: 12px;
}
}
@media (max-width: 1920px) {
.table,
.table > tbody > th,
.table > tbody > tr {
font-size: 11px;
}
}
@media (max-width: 1500px) {
.table,
.table > tbody > th,
.table > tbody > tr {
font-size: 9px;
}
}
@media (max-width: 1367px) {
.table,
.table > tbody > th,
.table > tbody > tr {
font-size: 9px;
}
.modal-xl {
--bs-modal-width: 1340px;
}
}
/* Estilos para pantallas con un ancho máximo de 480px */
@media (max-width: 768px) {
.table,
.table > tbody > th,
.table > tbody > tr {
font-size: 8px;
}
h1 {
font-size: 1.5rem;
}
}
.parpadeo {
position: relative;
width: 28px;
/* Ajusta el tamaño del círculo */
height: 28px;
background-color: #0074f0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: parpadeo 1s infinite;
}
@keyframes parpadeo {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.rotate-icon {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.css-1fdsijx-ValueContainer {
padding: 0px 8px;
}
.css-qbdosj-Input,
.css-166bipr-Input {
margin: 0px !important;
padding-bottom: 0px !important;
padding-top: 0px !important;
}
.nav-link {
text-align: center;
color: #313131 !important;
}
.active-ads {
background: #cc9e26 !important;
color: white !important;
}
.tabs-right-selected {
line-height: 48px;
background: #2258ee;
color: white;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 30px;
width: 100%;
}
.tabs-right-unset {
line-height: 48px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-right: 1px solid #ccc;
line-height: 30px;
width: 100%;
}
.row2 {
border: 1px solid #ccc;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
.tabs-active {
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
/* FAQ.css */
.accordion-item {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.accordion-header {
background: rgb(123 137 201 / 20%);
padding: 1rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
transition: background-color 0.3s ease;
}
.accordion-header:hover {
background: rgb(123 137 201);
color: white;
font-weight: 600;
}
.accordion-icon {
font-size: 1.5rem;
}
.accordion-body {
max-height: 0;
overflow: hidden;
transition: 1s ease-in-out;
padding: 0 1rem;
}
.accordion-body.show {
max-height: 600px;
/* Ajusta según la altura del contenido */
padding: 1rem;
}
/* Contenedor de la línea divisora */
.horizontal-spinner-container {
position: relative;
width: 100%;
height: 2px;
/* Altura de la línea divisora */
background-color: #ecf0f1;
/* Color base de la línea */
overflow: hidden;
/* Oculta el desbordamiento */
margin: 20px 0;
/* Espaciado superior e inferior */
}
/* Spinner animado */
.horizontal-spinner {
position: absolute;
top: 0;
left: -50px;
/* Comienza fuera de la vista */
width: 80vw;
/* Ancho del spinner */
height: 100%;
/* Altura igual a la línea */
background: linear-gradient(90deg, #6a11cb, #abc9fc, #6a11cb);
animation: move-horizontal 6s infinite alternate;
/* Animación infinita */
border-radius: 10px;
/* Bordes redondeados para suavizar */
}
/* Animación */
@keyframes move-horizontal {
0% {
transform: translateX(-100%);
/* Comienza desde la izquierda */
}
100% {
transform: translateX(100vw);
/* Termina en la derecha */
}
}
.list-group-item:hover {
background: #cbae614f;
}
.bg-overlay {
background-color: rgb(38 45 97 / 80%);
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.documento_zoom:hover {
transform: scale(1.2);
transition: transform 0.5s ease;
cursor: pointer;
}
.opciones-container {
position: relative;
display: inline-block;
}
.opciones-btn {
background: none;
border: none;
cursor: pointer;
font-size: 1.3rem;
}
/* CSS ESTILOS PARA EL MENU OPCIONES */
/* Menú desplegable */
.menu-desplegable {
position: absolute;
width: max-content;
top: 100%;
right: 0;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
animation: fadeIn 0.3s ease-in-out;
z-index: 1000;
}
/* Lista de opciones */
.menu-desplegable ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu-desplegable li div {
padding: 0.3rem 0.5rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.menu_bandeja:hover {
cursor: pointer;
background-color: #eeeeee;
/* Gris muy claro */
}
.formulario,
.formulario input,
.formulario select {
font-size: 12px !important;
line-height: 1rem !important;
}
.formulario label {
line-height: 1.5rem !important;
}
.css-b62m3t-container {
line-height: 1rem !important;
}
.css-hlgwow {
padding: 0;
}
.filtros-container {
overflow: hidden; /* Importante para que el contenido no se desborde durante la animación */
transition:
max-height 1s ease-in-out,
opacity 1s ease-in-out; /* Transición para altura y opacidad */
}
.filtros-container.mostrar {
max-height: 800px; /* Suficientemente grande para contener la tabla cuando está visible */
opacity: 1;
}
.filtros-container.ocultar {
max-height: 0; /* Oculta la tabla colapsando su altura */
opacity: 0;
}
/* Estilos básicos para la tabla para que se vea mejor */
.filtros-container table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.filtros-container th,
.filtros-container td {
padding: 10px;
border: 1px solid #eee;
text-align: left;
}
.filtros-container th {
background-color: #e2e2e2;
}
.filtros-container label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.filtros-container input[type="date"],
.filtros-container input[type="text"] {
width: calc(100% - 20px);
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.table-responsive-container {
/* Es crucial que el contenedor que maneja el scroll tenga una altura definida */
/* o un overflow para que 'sticky' funcione correctamente dentro de él. */
/* Si este contenedor es el que hace scroll para la tabla, añade un alto máximo. */
max-height: 88vh; /* Ejemplo: 80% del alto de la ventana. Ajusta según necesites. */
overflow-y: auto; /* Permite el scroll vertical dentro de este contenedor */
overflow-x: auto; /* Si ya lo tienes para scroll horizontal, mantenlo. */
direction: rtl;
&::-webkit-scrollbar {
width: 20px; /* Para scrollbar vertical */
height: 20px; /* Para scrollbar horizontal, si aplica */
}
/* Fondo de la pista de la barra de desplazamiento */
&::-webkit-scrollbar-track {
background: #f0f0f0; /* Un gris muy claro */
border-radius: 10px;
}
}
/* Para Firefox: */
.table-responsive-container {
scrollbar-color: #0578a5 #ddedf8;
}
.table-header-sticky {
position: sticky;
top: 0; /* Esto hace que el encabezado se pegue en la parte superior del contenedor con scroll */
z-index: 1; /* Asegura que el encabezado esté por encima del contenido de la tabla al hacer scroll */
/* Considera añadir un fondo, ya que el contenido puede pasar por debajo y verse a través de las letras */
}
/* Si los `| ` tienen colores de fondo definidos por `colores`, asegúrate de que sean opacos */
.table-header-sticky th {
/* Mantener los colores que ya tienes, pero asegúrate de que el fondo sea sólido */
background-clip: padding-box; /* Esto es importante si tienes bordes y un fondo. */
}
.table-responsive-container table {
direction: ltr; /* Revierte la dirección del contenido de la tabla */
/* Asegúrate de que la tabla se extienda lo necesario para que el scroll horizontal aparezca */
width: max-content;
min-width: 100%; /* Para que la tabla ocupe al menos el 100% del contenedor */
}
/* Animación de entrada */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn-menu-main {
min-width: 180px;
}
/* Contenedor principal: Centrado y Estructura */
.pagination-container {
display: flex;
flex-direction: column; /* Apila la info debajo de los botones */
align-items: center;
padding: 16px 0;
font-family: sans-serif; /* Fuente limpia */
}
/* Barra de navegación de botones */
.pagination-nav {
display: inline-flex;
border: 1px solid #e0e0e0; /* Borde suave y delgado */
border-radius: 6px; /* Bordes redondeados modernos */
overflow: hidden; /* Para que los botones se integren bien */
}
/* Botones base */
.pagination-btn {
background-color: #ffffff;
border: none;
padding: 10px 14px;
cursor: pointer;
color: #333333;
transition: background-color 0.2s, color 0.2s;
font-size: 14px;
line-height: 1;
}
/* Separadores entre botones */
.pagination-btn:not(:last-child) {
border-right: 1px solid #e0e0e0;
}
/* Botón activo (página actual) */
.pagination-btn.is-active {
background-color: #007bff; /* Color de marca */
color: white;
font-weight: 600;
}
/* Hover effect */
.pagination-btn:hover:not(:disabled):not(.is-active) {
background-color: #f5f5f5;
color: #007bff;
}
/* Estado deshabilitado (más sutil) */
.pagination-btn:disabled {
cursor: not-allowed;
color: #cccccc;
background-color: #ffffff; /* Mismo fondo */
}
/* Puntos suspensivos */
.pagination-dots {
padding: 10px 4px;
color: #888888;
font-size: 14px;
line-height: 1;
user-select: none;
border-right: 1px solid #e0e0e0;
}
/* Info de página */
.pagination-info {
margin-top: 10px;
font-size: 0.85em;
color: #666666;
}
/* ===== WEB-SITE STYLES (from src/web-site/index.css) ===== */
.ws-site .modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
}
.ws-site .modal {
position: fixed;
inset: 0;
z-index: 9999;
overflow: hidden;
}
.ws-site header .navbar-expand:not(.navbar-sticky) .navbar-nav.items .nav-item a:not(.btn) {
color: var(--nav-item-color);
}
.ws-site header .navbar-expand:not(.navbar-sticky) .navbar-nav.toggle .nav-item a {
color: var(--nav-item-color);
}
.ws-site header .navbar-expand:not(.navbar-sticky) {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
}
.ws-site .header .navbar-expand:not(.navbar-sticky) .navbar-nav.items .nav-item .nav-link:not(.btn):not(.title):hover,
.ws-site .header .navbar-expand:not(.navbar-sticky) .navbar-nav.items .nav-item .nav-link.active:not(.btn):not(.title) {
color: var(--secondary-color);
}
/* FAQ (custom accordion - no Bootstrap collapse dependency) */
.ws-site .ws-faq #sapp-accordion.ws-faq-accordion {
display: grid;
gap: 14px;
}
.ws-faq .ws-faq-item {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
overflow: hidden;
}
.ws-faq .ws-faq-item__header {
margin: 0;
}
.ws-faq .ws-faq-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border: 0;
background: transparent;
text-align: left;
color: inherit;
}
.ws-faq .ws-faq-button:focus-visible {
outline: 2px solid rgba(0, 39, 76, 0.5);
outline-offset: 2px;
}
.ws-faq .ws-faq-button__text {
font-weight: 500;
font-size: 0.98rem;
line-height: 1.35;
color: #111;
}
.ws-faq .ws-faq-button__icon {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.12);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.ws-faq .ws-faq-button__icon::before {
content: "+";
font-weight: 800;
font-size: 18px;
line-height: 1;
}
.ws-faq .ws-faq-item.is-open .ws-faq-button__icon::before {
content: "-";
}
.ws-faq .ws-faq-panel__body {
padding: 0 18px 16px;
color: rgba(0, 0, 0, 0.62);
font-size: 0.95rem;
line-height: 1.6;
}
/* Footer hover / click affordance */
.footer-area .nav-item a.nav-link {
cursor: pointer;
}
.footer-area .nav-item a.nav-link:hover {
color: var(--secondary-color);
}
#page-libro-de-reclamaciones {
color: #1f272e;
}
#page-libro-de-reclamaciones .page-content-wrapper {
background: #f7fafc;
min-height: 100vh;
}
#page-libro-de-reclamaciones .lre-nav {
position: sticky;
top: 0;
z-index: 5;
background: #fff;
border-bottom: 1px solid #eef2f5;
}
#page-libro-de-reclamaciones .lre-nav .container {
max-width: 900px;
display: flex;
align-items: center;
height: 56px;
}
#page-libro-de-reclamaciones .lre-nav__brand {
color: #1f272e;
text-decoration: none;
font-weight: 700;
}
#page-libro-de-reclamaciones .page_content {
padding: 0;
}
#page-libro-de-reclamaciones .web-form-container {
max-width: 900px;
margin: 0 auto;
}
#page-libro-de-reclamaciones .web-form-header {
padding: 1.1rem 1.25rem;
border-bottom: 1px solid #eef2f5;
background: #fff;
}
#page-libro-de-reclamaciones .web-form-title h1 {
font-size: 1.75rem;
line-height: 1.2;
margin: 0;
}
#page-libro-de-reclamaciones .web-form {
background: #fff;
border: 1px solid #d1d8dd;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(18, 40, 58, 0.08);
overflow: hidden;
}
#page-libro-de-reclamaciones .web-form-body {
padding: 1.25rem 1.25rem 0.5rem;
}
#page-libro-de-reclamaciones .web-form-body h4 {
font-size: 1.1rem;
font-weight: 600;
margin: 1rem 0 0.75rem;
}
#page-libro-de-reclamaciones .form-label {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.35rem;
color: #36414c;
}
#page-libro-de-reclamaciones .form-control,
#page-libro-de-reclamaciones .form-select {
border: 1px solid #d1d8dd;
border-radius: 6px;
padding: 0.55rem 0.7rem;
font-size: 0.95rem;
background: #f2f4f6;
}
#page-libro-de-reclamaciones .form-control:focus,
#page-libro-de-reclamaciones .form-select:focus {
outline: none;
border-color: #6b7785;
box-shadow: none;
}
#page-libro-de-reclamaciones .form-check-input {
border: 1px solid #d1d8dd;
}
#page-libro-de-reclamaciones .web-form-footer {
border-top: 1px solid #eef2f5;
background: #fff;
padding: 0.9rem 1.25rem;
}
#page-libro-de-reclamaciones .web-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
#page-libro-de-reclamaciones .web-form-actions .right-area {
display: flex;
align-items: center;
}
#page-libro-de-reclamaciones .btn {
border-radius: 8px;
font-weight: 600;
}
#page-libro-de-reclamaciones .btn-default,
#page-libro-de-reclamaciones .btn.btn-default {
background: #fff;
border: 1px solid #d1d8dd;
color: #36414c;
}
#page-libro-de-reclamaciones .btn-primary,
#page-libro-de-reclamaciones .btn.btn-primary {
background: #1f272e;
border: 1px solid #1f272e;
color: #fff;
}
#page-libro-de-reclamaciones .btn-primary:hover,
#page-libro-de-reclamaciones .btn.btn-primary:hover {
background: #11161a;
border-color: #11161a;
}
#page-libro-de-reclamaciones .success-page {
background: #fff;
border: 1px solid #d1d8dd;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(18, 40, 58, 0.08);
padding: 1.25rem;
}
#page-libro-de-reclamaciones .success-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
#page-libro-de-reclamaciones .success-message {
margin: 0.5rem 0 1rem;
color: #4c5a67;
}
/* Utilities (scoped) - the original page relied on Bootstrap */
#page-libro-de-reclamaciones .container {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
}
#page-libro-de-reclamaciones .row {
display: flex;
flex-wrap: wrap;
margin-left: -12px;
margin-right: -12px;
}
#page-libro-de-reclamaciones [class^='col-'],
#page-libro-de-reclamaciones [class*=' col-'] {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
#page-libro-de-reclamaciones .col-12 {
flex: 0 0 100%;
max-width: 100%;
}
#page-libro-de-reclamaciones .col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 768px) {
#page-libro-de-reclamaciones .col-md-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
#page-libro-de-reclamaciones .mb-3 {
margin-bottom: 1rem;
}
#page-libro-de-reclamaciones .mb-4 {
margin-bottom: 1.5rem;
}
#page-libro-de-reclamaciones .my-4 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#page-libro-de-reclamaciones .mt-0 {
margin-top: 0;
}
#page-libro-de-reclamaciones .ml-2 {
margin-left: 0.5rem;
}
/* WebSite Sections - Hero & Features */
.ws-site .hero-section {
position: relative;
background-attachment: scroll;
background-repeat: no-repeat;
overflow: hidden;
z-index: 1;
}
.ws-site .hero-section .hero-content {
position: relative;
z-index: 1;
}
.ws-site .hero-section .hero-content .sub-heading {
font-size: 1.1rem;
line-height: 1.6;
}
.ws-site .hero-section .hero-thumb.animate img {
position: relative;
animation: bounceHero 3s infinite;
}
.ws-site .hero-section.layout-1 {
background-image: url("../img/content/welcome-bg.html");
}
.ws-site .hero-section.layout-1 .hero-thumb {
max-width: 300px;
}
@media (max-width: 767px) {
.ws-site .hero-section.layout-1 .hero-thumb {
max-width: 270px;
}
}
@media (max-width: 575px) {
.ws-site .hero-section.layout-1 .hero-thumb {
max-width: 230px;
}
}
.ws-site .hero-section.layout-2 {
background-image: url("../img/content/welcome-bg-3.html");
}
.ws-site .hero-section.layout-2 .shapes-container {
background-color: #fff;
}
.ws-site .hero-section.layout-3 {
background-image: url("../img/content/welcome-bg-4.html");
background-attachment: fixed;
}
.ws-site .hero-section.layout-3 .shape-bottom svg {
overflow: hidden;
width: 100%;
line-height: 0;
direction: ltr;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.ws-site .hero-section.layout-4 {
background-image: url("../img/content/welcome-bg-5.html");
}
.ws-site .hero-section.layout-4 .shape-bottom {
transform: rotate(180deg);
}
.ws-site .hero-section.layout-4 .shape-bottom svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
left: 50%;
transform: translateX(-50%) rotateY(180deg);
}
.ws-site .hero-section.layout-5 {
background-image: url("../img/content/welcome-bg-2.html");
}
.ws-site .hero-section.layout-5 .shape-bottom {
left: -30px;
}
/* Responsive styles for hero-section.layout-2 */
@media (max-width: 991px) {
.ws-site .hero-section.layout-2 .hero-content h1 {
font-size: 2.8rem;
line-height: 1.3;
}
.ws-site .hero-section.layout-2 .hero-content {
padding: 0 15px;
}
}
@media (max-width: 767px) {
.ws-site .hero-section.layout-2 {
padding: 100px 0 60px;
}
.ws-site .hero-section.layout-2 .hero-content h1 {
font-size: 2.2rem;
line-height: 1.2;
margin-bottom: 1rem;
}
.ws-site .hero-section.layout-2 .hero-content .sub-heading {
font-size: 1rem;
line-height: 1.5;
}
.ws-site .hero-section.layout-2 .hero-content {
padding: 0 20px;
text-align: center;
}
.ws-site .hero-section.layout-2 .hero-thumb {
max-width: 280px;
margin: 30px auto 0;
}
}
@media (max-width: 575px) {
.ws-site .hero-section.layout-2 {
padding: 80px 0 50px;
}
.ws-site .hero-section.layout-2 .hero-content h1 {
font-size: 1.8rem;
line-height: 1.2;
}
.ws-site .hero-section.layout-2 .hero-content .sub-heading {
font-size: 0.95rem;
margin: 1rem 0;
}
.ws-site .hero-section.layout-2 .hero-content {
padding: 0 15px;
}
.ws-site .hero-section.layout-2 .hero-thumb {
max-width: 240px;
}
}
@keyframes bounceHero {
0% {
top: 0px;
}
50% {
top: 25px;
}
100% {
top: 0px;
}
}
.ws-site .features-section {
overflow: hidden;
}
.ws-site .features-section .features-slider-wrapper {
background: rgba(0, 0, 0, 0) url("../img/content/mobile-slider.html") no-repeat scroll top center/cover;
padding: 67px 23px 90px 26px;
background-size: 100%;
max-width: 290px;
margin: 0 auto;
}
.ws-site .features-section .features-slider-wrapper .features-slider {
padding: 0;
}
.ws-site .features-section .features-slider-wrapper .slide-item {
margin: 0;
}
@media (max-width: 767px) {
.ws-site .features-section .features-slider-wrapper {
padding: 52px 18px 90px 21px;
max-width: 245px;
}
}
@media (max-width: 575px) {
.ws-site .features-section .features-slider-wrapper {
padding: 52px 18px 90px 21px;
max-width: 220px;
}
}
.ws-site .features-section .features-item.list-group .list-group-item {
margin: 0;
margin-top: 30px;
}
@media (max-width: 575px) {
.ws-site .features-section .features-item.list-group .list-group-item {
padding: 0;
}
}
/* WebSite Navbar & Images */
.ws-site header {
position: relative;
z-index: 5;
}
.ws-site header .navbar-expand {
position: fixed;
top: 0;
z-index: 2;
width: 100%;
padding: 20px 25px;
}
.ws-site header .navbar-expand .navbar-brand {
padding: 0;
font-size: 1.5rem;
font-weight: 600;
line-height: 0;
color: var(--nav-item-color);
}
.ws-site header .navbar-expand .navbar-brand i {
font-size: 1.8rem;
font-weight: bold;
font-style: initial;
color: var(--primary-color);
}
.ws-site header .navbar-expand .navbar-nav.toggle {
display: none;
}
.ws-site header .navbar-expand .navbar-nav.toggle i {
font-size: 20px;
}
.ws-site header .navbar-expand .navbar-nav .nav-item {
margin: 0;
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu {
display: block;
width: max-content;
min-width: 14.375rem;
padding: 0.625rem 0;
border: none;
border-radius: 2px;
visibility: hidden;
opacity: 0;
transform: translateY(20px);
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu::before {
content: "";
position: absolute !important;
top: -10px;
right: auto;
bottom: auto;
left: 10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu .nav-link:not(.btn) {
justify-content: space-between;
padding: 0.625rem;
color: var(--nav-item-color);
font-size: 0.8125rem;
text-transform: uppercase;
font-weight: 700;
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu .nav-link.title {
font-weight: 600;
color: var(--primary-t-color);
opacity: 0.8;
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu .nav-link:not(.btn):not(.title):hover {
background-color: rgba(1, 114, 128, 0.05);
color: var(--primary-color);
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu .dropdown-menu {
top: -8px;
left: 100%;
}
.ws-site header .navbar-expand .navbar-nav .dropdown .dropdown-menu .dropdown-menu::before {
content: none;
}
.ws-site header .navbar-expand .navbar-nav .dropdown i.icon-arrow-down {
position: relative;
top: 1.5px;
margin: 0 0 0 0.3rem;
font-size: 12px;
font-weight: 600;
}
.ws-site header .navbar-expand .navbar-nav .dropdown i.icon-arrow-right {
position: relative;
top: 0;
left: 5px;
margin: 0 0 0 0.3rem;
font-size: 10px;
font-weight: 600;
}
.ws-site header .navbar-expand .navbar-nav .dropdown:hover > .dropdown-menu {
visibility: unset;
opacity: 1;
margin: 0;
transform: translateY(0px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.ws-site header .navbar-expand .icons i {
font-weight: 400;
}
.ws-site header .navbar-expand:not(.navbar-sticky) .navbar-brand:not(.invert) img {
filter: brightness(0) invert(1);
}
.ws-site header .navbar-sticky {
background-color: rgba(255, 255, 255, 0.69);
backdrop-filter: blur(10px);
animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
/* WebSite Navbar Media Queries */
@media (max-width: 1199px) {
.ws-site header .navbar-expand .navbar-nav.toggle {
display: flex;
}
.ws-site header .navbar-expand .navbar-nav.contacts,
.ws-site header .navbar-expand .navbar-nav.items,
.ws-site header .navbar-expand .navbar-nav.icons .social {
display: none;
}
}
@media (max-width: 767px) {
.ws-site header .navbar-expand .navbar-brand {
margin: 0;
}
}
@media (max-width: 600px) {
.ws-site header .navbar-sticky {
margin-top: 0 !important;
}
}
/* WebSite Images */
.ws-site .img1,
.ws-site .img2,
.ws-site .img3,
.ws-site .img4,
.ws-site .img5,
.ws-site .img6 {
width: 40%;
height: 15vh;
object-fit: contain;
}
@media (max-width: 575px) {
.ws-site .img1 {
width: auto;
height: 15vh;
object-fit: contain;
padding-left: 60px;
}
.ws-site .img2 {
width: auto;
height: 10vh;
object-fit: contain;
padding-left: 65px;
}
.ws-site .img3 {
width: auto;
height: 15vh;
object-fit: contain;
padding-left: 90px;
}
.ws-site .img4 {
width: auto;
height: 15vh;
object-fit: contain;
padding-left: 50px;
}
.ws-site .img5 {
width: auto;
height: 15vh;
object-fit: contain;
padding-left: 40px;
}
.ws-site .img6 {
width: auto;
height: 15vh;
object-fit: contain;
padding-left: 72px;
}
}
/* #endregion Reset */
/*----------------------------------------------
4. General
----------------------------------------------*/
/* #region General */
.ws-site ::-moz-selection {
background: rgba(166, 175, 189, 0.3);
}
.ws-site ::selection {
background: rgba(166, 175, 189, 0.3);
}
.ws-site ::-moz-selection {
background: rgba(166, 175, 189, 0.3);
}
.ws-site *,
.ws-site *:after,
.ws-site *:before {
box-sizing: border-box;
}
.ws-site a:not(.btn),
.ws-site a:link:not(.btn),
.ws-site a:visited:not(.btn),
.ws-site a:hover:not(.btn),
.ws-site a:active:not(.btn) {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--primary-color);
text-decoration: none;
transition: all 0.4s ease-out 0s;
}
.ws-site a:not([href]),
.ws-site a:not([href]):hover,
.ws-site a:not([href]) i,
.ws-site a:not([href]) i:hover {
color: var(--primary-b-color);
}
.ws-site p {
margin: 1.5rem 0;
font-size: var(--p-size);
font-weight: var(--p-weight);
line-height: 1.5;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site p:first-child {
margin-top: 0;
}
.ws-site p:last-child {
margin-bottom: 0;
}
.ws-site .odd:not(.comment) p {
color: var(--white-color);
}
.ws-site .page-template .odd p {
opacity: 0.7;
}
.ws-site .swiper-wrapper.odd p {
opacity: 0.8;
}
.ws-site h1 {
margin-bottom: 1.5rem;
font-size: var(--h1-size);
font-weight: var(--h1-weight);
line-height: 1.2;
font-family: var(--primary-font);
color: var(--primary-t-color);
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site h1 em {
display: block;
font-size: var(--h2-size);
font-weight: 300;
}
.ws-site h2 {
margin: 1.5rem 0;
font-size: var(--h2-size);
font-weight: var(--h2-weight);
line-height: 1.2;
font-family: var(--primary-font);
color: var(--primary-t-color);
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site .odd h2 {
color: var(--white-color);
}
.ws-site h3 {
margin: 1.5rem 0;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.2;
font-family: var(--primary-font);
color: var(--primary-t-color);
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site h4 {
margin: 1.5rem 0;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
font-family: var(--primary-font);
color: var(--primary-t-color);
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site .odd h4 {
color: var(--secondary-t-color);
}
.ws-site h5 {
margin: 1.5rem 0;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.2;
font-family: var(--primary-font);
color: var(--primary-t-color);
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site h6 {
margin: 1.5rem 0;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
font-family: var(--primary-font);
color: var(--primary-t-color);
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.ws-site b,
strong {
font-weight: 700;
}
.ws-site li {
margin: 0.5rem 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.ws-site img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
.ws-site dt {
margin: 15px 0;
}
.ws-site address {
margin-bottom: 1rem;
}
.ws-site form {
width: 100%;
}
.ws-site input,
.ws-site textarea,
.ws-site select {
width: 100%;
height: 50px;
background: no-repeat;
box-shadow: none;
padding: 0.7rem 1rem;
border-color: var(--primary-l-color);
border-width: 2px;
border-radius: 0.375rem;
}
.ws-site input {
border-color: var(--primary-p-color);
color: var(--primary-p-color);
}
.ws-site input:focus {
border-color: var(--primary-t-color);
color: var(--primary-t-color);
}
.ws-site input[type=radio] {
height: initial;
}
.ws-site input[type=submit] {
border: 1px solid;
padding: 2.5px 10px;
display: block;
width: fit-content;
max-width: 200px;
text-align: center;
color: var(--primary-color);
}
.ws-site input[type=submit]:hover {
background-color: var(--primary-color);
color: var(--primary-b-color);
border-color: var(--primary-color);
}
.ws-site input[type=checkbox] {
padding: 0;
}
.ws-site textarea {
height: 100px;
resize: none;
border-color: var(--primary-p-color);
color: var(--primary-t-color);
}
.ws-site textarea:focus {
border-color: var(--primary-t-color);
color: var(--primary-t-color);
}
.ws-site select {
appearance: none;
text-indent: 1px;
text-overflow: "";
line-height: 1.2;
border-color: var(--primary-l-color);
color: var(--primary-t-color);
}
.ws-site select option {
color: #2f323a;
}
.ws-site select:focus {
border-color: var(--primary-t-color);
color: var(--primary-t-color);
}
.ws-site .input-group .btn {
border-radius: 0.375rem;
}
.ws-site hr {
margin: 35px 0;
border-top: 1px solid var(--primary-l-color);
}
.ws-site .odd hr {
margin: 35px 15px;
border-top: 1px solid var(--secondary-l-color);
}
/* #endregion General */
/*----------------------------------------------
5. Section
----------------------------------------------*/
/* #region Section */
.ws-site section {
width: 100%;
padding: 130px 0;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.ws-site section.no-hero {
padding: 150px 0 130px;
}
.ws-site section#slider:not(.bg-inherit) {
background-color: var(--hero-bg-color);
}
.ws-site main {
padding: 0;
}
.ws-site .container {
padding: 0;
max-width: 1400px;
}
.ws-site .container.header {
max-width: 1140px;
}
.ws-site .container.full {
max-width: 100%;
}
.ws-site .container.full-grid {
padding: 0;
max-width: calc(100% - 30px);
margin: 0 15px;
}
.ws-site container.smaller {
max-width: 970px;
}
.ws-site .vh-75 {
height: 75vh;
}
.ws-site .vh-85 {
height: 85vh;
}
@media (max-width: 575px) {
.ws-site .vh-85 {
height: 100%;
}
}
.ws-site .vh-90 {
height: 90vh;
}
@media (max-width: 575px) {
.ws-site .vh-90 {
height: 100%;
}
}
.ws-site .clearfix {
display: block;
content: "";
clear: both;
}
/* #endregion Section */
/*----------------------------------------------
6. Helper Class
----------------------------------------------*/
/* #region Helper Class */
.ws-site .avatar-sm {
height: 3rem;
width: 3rem;
}
.ws-site .avatar-md {
height: 4rem;
width: 4rem;
}
.ws-site .avatar-lg {
height: 5rem;
width: 5rem;
}
.ws-site .avatar-max-lg {
height: 6rem;
width: 6rem;
}
.ws-site .swap-icon {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 14px 26px;
}
.ws-site .swap-icon .icon {
margin: 0 !important;
height: auto;
width: auto;
font-size: 2rem !important;
line-height: 1;
}
.ws-site .swap-icon:hover .icon {
animation: swap ease-out var(--transition-duration);
}
@keyframes swap {
0% {
transform: translateX(0);
}
25% {
opacity: 0;
}
30% {
transform: translateX(1rem);
}
35% {
transform: translateX(-1rem);
}
85% {
opacity: 1;
}
100% {
transform: translateX(0);
}
}
.ws-site .video-play-button {
display: flex;
}
.ws-site .video-play-button a.play-button {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 80px;
background-color: #fff;
border-radius: 100%;
transform: scale(1);
}
.ws-site .video-play-button a.play-button i {
fill: var(--primary-color);
font-size: 18px;
}
.ws-site .video-play-button a.play-button::before {
position: absolute;
content: "";
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: inherit;
animation: ripple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
}
.ws-site .video-play-button a.play-button.hide-animation::before {
display: none;
}
.ws-site .video-play-button a.play-button:hover {
transform: scale(1.1);
background-color: #ffffff;
}
@keyframes ripple {
0% {
border-width: 4px;
transform: scale(1);
}
80% {
border-width: 1px;
transform: scale(1.35);
}
100% {
opacity: 0;
}
}
.ws-site .intro {
margin-bottom: 60px;
}
.ws-site .intro .title:not(.layout-2) {
position: relative;
}
.ws-site .intro .title:not(.layout-2)::after {
position: absolute;
content: "";
height: 3px;
width: 50px;
background-color: var(--primary-color);
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.ws-site .intro .title:not(.layout-2).layout-3::after {
left: 0;
transform: inherit;
}
.ws-site .intro .badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 500;
}
.ws-site .intro .badge i {
color: var(--primary-color);
}
.ws-site .list-group-item {
margin: 0;
background: none;
font-size: 1rem;
padding-right: 0;
padding-left: 0;
background-color: transparent;
border-color: var(--card-bg-color);
}
.ws-site .list-group-item1 {
margin: 0;
background: none;
font-size: 1.5rem;
padding-right: 0;
padding-left: 0;
background-color: transparent;
border-color: var(--card-bg-color);
justify-content: center;
}
.ws-site .list-group-item a {
transition: 0.3s;
}
.ws-site .list-group-item .badge.circle {
background-color: var(--card-bg-color);
}
.ws-site .post-holder {
list-style: none;
width: 100%;
border-left: 5px solid var(--primary-color);
background-color: var(--primary-bg-color-2);
padding: 25px;
margin-top: 35px;
}
.ws-site .posted-on a:not(.btn) {
font-weight: 600;
}
.ws-site .list-group .list-group-item {
margin: 0.25rem 0;
}
.ws-site .list-group .list-group-item .icon {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: var(--border-radius-sm);
font-size: 1.5rem;
color: var(--primary-color);
}
.ws-site .list-group .list-group-item .icon span {
font-size: 2rem;
}
.ws-site .list-group .list-group-item .icon.layout-2 {
background-color: transparent;
}
.ws-site .list-group.list-group-horizontal .list-group-item:not(:last-child) {
margin-right: 0.8rem;
}
/*----------------------------------------------
8. Feature
----------------------------------------------*/
/* #region Feature */
.ws-site .preloader-main {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99999;
}
.ws-site .preloader-main .preloader-wapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.ws-site .preloader-main .loader-section {
position: fixed;
top: 0;
height: 100%;
width: calc(50% + 1px);
background-color: var(--primary-bg-color);
}
.ws-site .preloader-main .loader-section.section-left {
left: 0;
}
.ws-site .preloader-main .loader-section.section-right {
right: 0;
}
.ws-site .preloader-main .preloader {
position: relative;
display: block;
height: 80px;
width: 170px;
top: -40px;
z-index: 99;
}
.ws-site .preloader-main .loaded .section-right {
transform: translateX(101%);
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.ws-site .preloader-main .loaded .section-left {
transform: translateX(-101%);
transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.ws-site .preloader-main .loaded .preloader {
transition: 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
.ws-site .preloader-main circle.dot:nth-of-type(1) {
animation: slide 2s ease infinite;
}
.ws-site .preloader-main circle.dot:nth-of-type(2) {
transform: translateX(55px);
animation: slide 2s ease infinite;
animation-delay: 1s;
}
@keyframes slide {
0%, 100% {
transform: translateX(0px);
}
50% {
transform: translateX(70px);
}
}
.ws-site .icon {
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 44px;
display: block;
margin: auto;
}
.ws-site .icon3 {
width: auto;
height: 44px;
line-height: 44px;
text-align: center;
font-size: 44px;
display: block;
margin: auto;
}
.ws-site .icon2 {
width: auto;
height: 90px;
line-height: 90px;
text-align: center;
font-size: 90px;
}
.ws-site .icon.smaller {
width: 24px;
height: 24px;
line-height: 24px;
font-size: 24px;
}
.ws-site .icon.bigger {
width: 7rem;
height: 7rem;
margin: auto;
font-size: 6.5rem;
line-height: 7rem;
font-weight: bold;
}
.ws-site .icon.circle {
border-radius: 100px;
font-size: 28px;
}
.ws-site .icons {
display: inline-block;
font-size: 3rem;
line-height: 1;
}
.ws-site .items .item {
margin-top: 30px;
}
.ws-site .card {
background-color: transparent;
border: none;
border-radius: var(--border-radius-sm);
}
.ws-site .card .image-holder {
position: relative;
border-radius: var(--border-radius-sm);
overflow: hidden;
}
.ws-site .card .image-holder img {
transition: all var(--transition-function) var(--transition-duration);
}
.ws-site .card .card-overlay {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
display: flex;
padding: 3vh;
color: var(--white-color);
}
.ws-site .card .card-overlay.top {
top: 0;
bottom: auto;
background: 17, 16, 19;
background: linear-gradient(180deg, rgba(17, 16, 19, 0.5) 0%, rgba(17, 16, 19, 0) 100%);
}
.ws-site .card .card-overlay.fade-up {
transform: translateY(6%);
opacity: 0;
transition: all var(--transition-function) var(--transition-duration);
}
.ws-site .card .card-overlay.fade-down {
transform: translateY(-6%);
opacity: 0;
transition: all var(--transition-function) var(--transition-duration);
}
.ws-site .card .card-overlay:not(.top) {
bottom: 0;
}
.ws-site .card.scale:hover .card-thumb img {
transform: var(--transform-scale);
}
.ws-site .card.has-shadow .card-thumb::before {
position: absolute;
content: "";
bottom: 0;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 85%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 7, 18, 0)), to(rgba(3, 7, 18, 0.45)));
background: linear-gradient(180deg, rgba(3, 7, 18, 0), rgba(3, 7, 18, 0.45));
-webkit-transition: opacity var(--transition-function) var(--transition-duration);
transition: opacity var(--transition-function) var(--transition-duration);
}
.ws-site .card.layout-2 .card-overlay {
color: var(--white-color);
}
.ws-site .card.layout-2 .card-overlay .title,
.ws-site .card.layout-2 .card-overlay .badge {
color: var(--white-color);
}
.ws-site .card.layout-2 .card-overlay .show-project .project-link a {
color: var(--white-color);
}
.ws-site .card.layout-2 .card-overlay:not(.top) {
background: 17, 16, 19;
background: linear-gradient(360deg, rgba(17, 16, 19, 0.5) 0%, rgba(17, 16, 19, 0) 100%);
}
.ws-site .card:hover .card-overlay.fade-up {
transform: none;
opacity: 1;
}
.ws-site .card:hover .card-overlay.fade-down {
transform: none;
opacity: 1;
}
.ws-site .has-overlay {
position: relative;
z-index: 1;
}
.ws-site .has-overlay::after {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.94;
z-index: -1;
}
.ws-site .has-overlay.overlay-gradient::after {
background: linear-gradient(-47deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.ws-site .has-overlay.overlay-dark::after {
background: rgba(16, 16, 45, 0.9);
}
.ws-site .clip-text,
.ws-site .text-effect {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ws-site .bg-text, .ws-site .btn,
.ws-site .text-effect,
.ws-site .blog-details .pagination > li.active > a {
background-image: linear-gradient(150deg, var(--secondary-color) 0%, var(--primary-color) 78%);
}
.ws-site a.badge:not(.btn),
.ws-site .badge {
display: inline-flex;
gap: 0.25em;
margin: 0.25rem 0;
padding: 0.35rem 0.62rem;
border-radius: 50rem;
font-size: 0.94em;
font-weight: 500;
transition: all var(--transition-function) var(--transition-duration);
}
.ws-site a.badge:not(.btn).small,
.ws-site .badge.small {
padding: 0.35rem 0.65rem;
}
.ws-site a.badge:not(.btn).outlined,
.ws-site .badge.outlined {
border: 2px solid currentColor;
color: currentColor;
}
.ws-site a.badge:not(.btn):not(.outlined),
.ws-site .badge:not(.outlined) {
background-color: #e5e6f6;
}
.ws-site a.badge:not(.btn):hover,
.ws-site .badge:hover {
background-color: var(--primary-color);
color: var(--white-color);
}
.ws-site .shapes-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.ws-site .shape {
position: relative;
}
.ws-site .shape-bottom {
position: absolute;
top: auto;
bottom: -1px;
left: 0;
right: 0;
}
.ws-site .bg-shape {
position: absolute;
height: 190%;
width: 100%;
display: block;
border-radius: 120px;
background: var(--primary-bg-color-2);
bottom: 0;
right: 0;
transform: translate(35%, -28%) rotate(-35deg);
z-index: 0;
}
@media (max-width: 991px) {
.ws-site .bg-shape {
height: 130%;
}
}
.ws-site .social-icons i {
display: block;
height: 100%;
margin: 0 auto;
line-height: 2.5rem;
transition: all var(--transition-function) var(--transition-duration-short);
}
.ws-site .social-icons > a.icon {
width: 2.5rem;
height: 2.5rem;
margin: 5px;
background-color: var(--white-color);
border-radius: calc(var(--border-radius-sm) / 2);
color: var(--primary-color);
transition: all var(--transition-function) var(--transition-duration-short);
overflow: hidden;
}
.ws-site .social-icons > a.icon:hover i:first-child {
margin-top: -2.5rem;
}
.ws-site .swiper-container-horizontal > .swiper-pagination-bullets,
.ws-site .swiper-pagination-custom,
.ws-site .swiper-pagination-fraction {
margin-top: 50px;
position: relative;
}
.ws-site .swiper-pagination-bullet {
width: 40px !important;
height: 5px !important;
border-radius: 0 !important;
background-color: var(--primary-p-color);
border: none !important;
opacity: 0.25 !important;
}
.ws-site .swiper-pagination-bullet-active {
background-color: var(--primary-color);
opacity: 1 !important;
}
.ws-site .main {
background-color: var(--primary-bg-color);
}
.ws-site .scroll-to-top {
position: fixed;
z-index: 5;
right: 25px;
bottom: 25px;
display: none;
width: 40px;
height: 45px;
border-radius: 4px;
background-color: rgba(35, 35, 35, 0.65);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
line-height: 45px;
text-align: center;
opacity: 0.85;
transition: all var(--transition-function) var(--transition-duration);
}
.ws-site .scroll-to-top a {
display: block;
width: 100%;
height: 100%;
line-height: 45px !important;
}
.ws-site .scroll-to-top i {
font-size: 22px;
font-weight: 600;
color: var(--white-color);
}
.ws-site .scroll-to-top:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
opacity: 1;
}
.ws-site .primary-bg {
background-color: var(--primary-bg-color-2);
}
.ws-site .primary-bg .btn-bordered::after {
background-color: var(--primary-bg-color-2);
}
.ws-site .primary-bg .badge {
background-color: #fff !important;
}
.ws-site .download-button img {
max-width: 190px;
}
.ws-site .hero-form {
position: relative;
padding: 45px;
background-color: #fff;
border-radius: var(--border-radius-md);
z-index: 1;
}
@media (max-width: 575px) {
.ws-site .hero-form {
padding: 32px;
}
}
.ws-site .hero-form hr {
border-style: solid;
}
.ws-site .hero-form .form-text a:not(.btn) {
font-size: 1em;
font-weight: 500;
}
@keyframes bounceHero {
0% {
top: 0px;
}
50% {
top: 25px;
}
100% {
top: 0px;
}
}
.ws-site .counter:not(.is-visible) {
visibility: hidden;
}
.ws-site .counter-area {
padding: 50px 0;
}
.ws-site .counter-area .item .counter-item {
position: relative;
}
.ws-site .counter-area .item .counter-item span {
font-size: var(--h2-size);
font-weight: var(--h2-weight);
background-image: linear-gradient(-47deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
.ws-site .counter-area .item .counter-item span {
font-size: 2.5rem;
}
}
.ws-site .counter-area .item .counter-item::after {
position: absolute;
content: "";
height: 70%;
width: 1px;
background-color: var(--primary-t-color);
top: 50%;
right: 0;
transform: translateY(-50%);
opacity: 0.15;
}
@media (max-width: 767px) {
.ws-site .counter-area .item .counter-item::after {
height: 45%;
}
}
.ws-site .counter-area .item:last-of-type .counter-item::after {
display: none;
}
@media (max-width: 575px) {
.ws-site .counter-area .item:nth-child(2) .counter-item::after {
display: none;
}
}
.ws-site .countdown {
text-transform: uppercase;
color: var(--white-color);
}
.ws-site .countdown .countdown-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 0.25rem;
padding: 0.5rem;
}
@media (max-width: 767px) {
.ws-site .countdown .countdown-container {
margin: 0 0.2rem;
padding: 0.25rem;
}
}
@media (max-width: 575px) {
.ws-site .countdown .countdown-container {
margin: 0 0.15rem;
padding: 0;
}
}
.ws-site .countdown .countdown-container .countdown-heading {
margin: 10px;
font-size: 1rem !important;
font-weight: 600;
}
.ws-site .countdown .countdown-container .countdown-value {
display: flex;
justify-content: center;
align-items: center;
height: 4rem;
width: 4rem;
background-color: var(--white-color);
border-radius: calc(var(--border-radius-sm) / 2);
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
}
.ws-site .image-box {
padding: 45px;
border-radius: 1rem;
box-shadow: 0 3px 20px 0px var(--primary-l-color);
transition: transform 0.3s ease 0s;
}
.ws-site .image-box .icon {
color: var(--primary-color);
transition: transform var(--transition-function) var(--transition-duration-short);
}
.ws-site .image-box:hover {
transform: translateY(-10px);
box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.125);
}
.ws-site .image-box:hover .icon {
display: flex;
gap: 1rem;
}
.ws-site .image-box.layout-2.center:hover {
transform: inherit;
box-shadow: inherit;
}
.ws-site .work-section {
padding: 80px 0;
}
.ws-site .work-section .items {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0;
padding: 20px 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ws-site .work-section .items::-webkit-scrollbar {
display: none;
}
.ws-site .work-section .item {
flex: 0 0 18%;
min-width: 180px;
max-width: 220px;
}
.ws-site .work-section .arrow-container {
flex: 0 0 auto;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
}
.ws-site .work-section .arrow {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
}
.ws-site .work-section .icon-box {
padding: 1rem 0.5rem;
text-align: center;
}
.ws-site .work-section .icon-box h6 {
font-size: 1rem;
margin-bottom: 0.5rem;
line-height: 1.3;
color: #fff;
}
.ws-site .work-section .icon-box p {
font-size: 0.85rem;
line-height: 1.4;
margin: 0;
color: #fff;
}
.ws-site .work-section .icon {
margin-bottom: 0.75rem;
}
/* Responsive for work-section */
@media (max-width: 1199px) {
.ws-site .work-section .item {
flex: 0 0 20%;
min-width: 160px;
}
.ws-site .work-section .icon-box h6 {
font-size: 0.95rem;
}
.ws-site .work-section .icon-box p {
font-size: 0.8rem;
}
}
@media (max-width: 991px) {
.ws-site .work-section {
padding: 60px 0;
}
.ws-site .work-section .items {
overflow-x: scroll;
padding: 20px 10px;
}
.ws-site .work-section .item {
flex: 0 0 25%;
min-width: 200px;
}
.ws-site .work-section .arrow {
font-size: 1.2rem;
}
}
@media (max-width: 767px) {
.ws-site .work-section {
padding: 50px 0;
}
.ws-site .work-section .item {
flex: 0 0 45%;
min-width: 180px;
}
.ws-site .work-section .icon-box {
padding: 0.75rem 0.5rem;
}
.ws-site .work-section .icon-box h6 {
font-size: 0.9rem;
}
.ws-site .work-section .icon-box p {
font-size: 0.75rem;
line-height: 1.3;
}
.ws-site .work-section .arrow-container {
padding: 0 4px;
}
.ws-site .work-section .arrow {
font-size: 1rem;
}
}
@media (max-width: 575px) {
.ws-site .work-section {
padding: 40px 0;
}
.ws-site .work-section .item {
flex: 0 0 80%;
min-width: 260px;
max-width: 300px;
}
.ws-site .work-section .arrow-container {
display: none;
}
.ws-site .work-section .items {
flex-direction: column;
align-items: center;
gap: 20px;
overflow-x: hidden;
}
.ws-site .work-section .icon-box h6 {
font-size: 1rem;
}
.ws-site .work-section .icon-box p {
font-size: 0.85rem;
}
}
.ws-site .reviews .review-meta {
position: relative;
}
.ws-site .reviews .review-meta::after {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: var(--primary-bg-color-2);
bottom: calc(100% - 10px);
left: 15%;
transform: rotate(45deg);
}
.ws-site .reviews .review-meta .reviewer span {
font-weight: 500;
}
.ws-site .reviews:hover {
box-shadow: 0 1rem 3rem rgba(31, 45, 61, 0.125);
}
.ws-site .testimonial-area .item img {
width: 100px;
height: 100px;
border: 1px solid var(--primary-l-color);
border-radius: 50%;
}
.ws-site .testimonial-area .review-text {
font-size: 1.2rem;
color: var(--primary-t-color);
}
.ws-site .pricing-table {
position: relative;
padding: 45px;
background-color: #fff;
border-radius: 1rem;
}
@media (max-width: 575px) {
.ws-site .pricing-table {
padding: 30px;
}
}
.ws-site .pricing-table .package-type {
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2rem;
color: var(--primary-t-color);
}
.ws-site .pricing-table .package-price {
font-size: 3rem;
font-weight: 700;
color: #333 !important;
}
.ws-site .pricing-table .package-price small {
font-size: 0.75em;
}
.ws-site .pricing-table .package-list li {
margin: 0;
padding: 1rem 0;
border-color: var(--primary-l-color);
}
.ws-site .pricing-table .package-button {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ws-site .pricing-table .package-button .btn {
border-radius: var(--border-radius-sm);
}
@media (max-width: 767px) {
.ws-site .pricing-table .package-button {
position: inherit;
left: inherit;
transform: inherit;
}
}
.ws-site .notice,
.ws-site .notice > a {
font-weight: 500 !important;
}
.ws-site #sapp-accordion .accordion-item {
background-color: transparent;
color: var(--primary-p-color);
}
.ws-site #sapp-accordion .accordion-item:not(.outlined) {
border: none;
}
.ws-site #sapp-accordion .accordion-item:not(.outlined):not(:last-child) {
margin-bottom: 0.8rem;
}
.ws-site #sapp-accordion .accordion-item.outlined {
padding: 0.8rem 0;
}
.ws-site #sapp-accordion .accordion-item .accordion-header {
margin: 0;
}
.ws-site #sapp-accordion .accordion-item .accordion-button {
position: relative;
background-color: var(--primary-bg-color-2);
border-radius: var(--border-radius-sm);
box-shadow: none;
font-size: 1rem;
font-weight: 500;
color: var(--primary-t-color);
width: 90%;
}
.ws-site #sapp-accordion .accordion-item .accordion-button::after {
position: absolute;
content: "+";
left: calc(100% - 3rem);
height: inherit;
background-image: none;
font-size: inherit;
font-weight: 900;
font-family: "Font Awesome 6 Free";
transition-timing-function: var(--transition-function);
}
.ws-site #sapp-accordion .accordion-item .accordion-button:focus {
z-index: 1;
}
.ws-site #sapp-accordion .accordion-item:has(.collapse.show) .accordion-button::after {
content: "\f068" !important;
}
.ws-site .team-item {
border-radius: var(--border-radius-md);
}
.ws-site .team-item .image-holder {
border-radius: var(--border-radius-md);
}
.ws-site .team-item .card-overlay {
top: 0;
justify-content: center;
align-items: center;
border-radius: var(--border-radius-md);
opacity: 0;
transform: scale(0);
transition: all var(--transition-function) var(--transition-duration);
}
.ws-site .team-item .card-overlay::after {
border-radius: var(--border-radius-md);
}
.ws-site .team-item .card-overlay .social-icons i {
line-height: 2.2rem;
}
.ws-site .team-item .card-overlay .social-icons > a.icon {
width: 2.2rem;
height: 2.2rem;
}
.ws-site .team-item .card-overlay .social-icons > a.icon:hover i:first-child {
margin-top: -2.2rem;
}
.ws-site .team-item:hover .card-overlay {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.ws-site .download-area {
position: relative;
background-color: #0053a1;
z-index: 1;
}
.ws-site .subscribe-area {
background-image: url("../img/content/map.html");
background-attachment: scroll;
background-repeat: no-repeat;
}
.ws-site .subscribe-area .subscribe-btn {
border-radius: var(--border-radius-sm);
}
.ws-site .contact-info .list-group .list-group-item {
margin: 0;
padding: 1rem 0;
border-color: var(--primary-l-color);
}
.ws-site .contact-info .list-group .list-group-item .icon {
background-color: var(--primary-color);
color: #fff;
}
.ws-site .contact-info .list-group .list-group-item .icon .contact-icon {
font-size: 24px !important;
color: var(--white-color) !important;
}
.ws-site .contact-info .list-group .list-group-item span,
.ws-site .contact-info .list-group .list-group-item a {
font-size: 1.2rem !important;
}
.ws-site .contact-info .list-group .list-group-item span:not(:hover),
.ws-site .contact-info .list-group .list-group-item a:not(:hover) {
color: var(--primary-t-color) !important;
}
.ws-site .contact-form .form-control {
background-color: var(--primary-bg-color-2);
border-width: 0;
}
.ws-site .contact-form.outlined .form-control {
background-color: #fff;
border-width: 2px;
}
.ws-site .error-area h1 {
font-size: 18vmax;
}
@media (max-width: 767px) {
.ws-site .error-area h1 {
font-size: 8em !important;
}
}
@media (max-width: 575px) {
.ws-site .error-area h1 {
font-size: 7em !important;
}
}
.ws-site .height-emulator {
float: left;
height: 585px;
}
.ws-site .breadcrumb-area .breadcrumb-content .breadcrumb {
background-color: transparent;
margin: 0;
}
.ws-site .breadcrumb-area .breadcrumb-content .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: ">";
color: var(--white-color);
}
.ws-site .breadcrumb-area .breadcrumb-content .breadcrumb .breadcrumb-item,
.ws-site .breadcrumb-area .breadcrumb-content .breadcrumb .breadcrumb-item a {
font-weight: 500;
}
.ws-site .accounts {
background-image: url("../img/content/accounts.html");
background-attachment: scroll;
background-repeat: no-repeat;
}
.ws-site .coming-soon {
background-image: url("../img/content/welcome-bg-2.html");
background-attachment: scroll;
background-repeat: no-repeat;
}
.ws-site .download-page {
background-image: url("../img/content/download-bg-2.html");
background-attachment: scroll;
background-repeat: no-repeat;
}
.ws-site .download {
background-image: url("../img/content/inner-bg.html");
background-repeat: no-repeat;
}
@keyframes grow {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.5);
opacity: 0;
}
}
.ws-site .map-area {
height: 550px;
width: 100%;
}
@media (max-width: 575px) {
.ws-site .map-area {
height: 450px;
}
}
.ws-site .map-area iframe {
height: 100%;
width: 100%;
}
/*----------------------------------------------
9. Footer
----------------------------------------------*/
/* #region Footer */
.ws-site .footer-area .footer-top {
padding: 80px 0;
}
.ws-site .footer-area .footer-top hr {
margin: 25px 0;
border-style: solid;
}
.ws-site .footer-area .footer-top .social-icons a.icon {
color: var(--white-color);
}
.ws-site .footer-area .nav-item {
margin: 0;
}
.ws-site .footer-area .nav-item a.nav-link {
display: inline-block;
padding: 0.5rem 0;
font-weight: 500;
}
.ws-site .footer-area .nav-item a.nav-link:not(:hover) {
color: var(--nav-item-color);
}
.ws-site .footer-area .copyright-area {
border-top: 1px solid var(--primary-l-color);
}
@media (min-width: 992px) {
.ws-site .footer-area.footer-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
}
@media (max-width: 575px) {
.ws-site .footer-area .items .item:first-child {
margin-top: 0;
}
}
/* #endregion Footer */
/*----------------------------------------------
10. Modal
----------------------------------------------*/
/* #region Modal */
.ws-site .modal-open {
overflow-x: hidden;
overflow-y: hidden;
}
.ws-site .modal-dialog-slideout {
min-height: 100%;
margin: 0 0 0 auto;
}
.ws-site .modal.fade .modal-dialog.modal-dialog-slideout {
height: 100%;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
transform: translate(100%, 0) scale(1);
}
.ws-site .modal.fade.show .modal-dialog.modal-dialog-slideout {
display: flex;
align-items: start;
height: 100%;
transform: translate(0, 0);
}
.ws-site .modal-content {
overflow-x: hidden;
border: none;
border-radius: 0;
background-color: var(--primary-bg-color);
}
.ws-site .modal-content.full {
height: 100%;
}
.ws-site .modal-header {
align-items: center;
padding: 25px;
border: none;
border-radius: 0;
font-weight: 600;
color: var(--primary-t-color);
}
.ws-site .modal-header .modal-title {
line-height: 0;
}
.ws-site .modal-header .icon-close {
font-size: 24px;
cursor: pointer;
}
.ws-site .modal-body {
display: flex;
align-items: center;
width: 100%;
padding: 25px 25px 75px;
}
/* WebSite Content Sections - Responsive Styles */
.ws-site .content-section {
padding: 100px 0;
}
.ws-site .content-section .content h2 {
font-size: 2.2rem;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.ws-site .content-section .content h2 span {
font-size: 1.8rem;
}
.ws-site .content-section .list-group-item {
padding: 0.75rem 0;
}
.ws-site .content-section .icon-box {
flex-shrink: 0;
}
.ws-site .content-section .icon-box .icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
}
.ws-site .content-section .icon-box .icon svg {
width: 24px;
height: 24px;
}
.ws-site .primary-bg {
background-color: var(--primary-bg-color, #f8f9fa);
}
.ws-site #hacemos .content h2 {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 2rem;
}
.ws-site #hacemos .list-group-item {
padding: 1rem 0;
font-size: 1rem;
line-height: 1.6;
}
.ws-site #hacemos .icon.layout-2 {
flex-shrink: 0;
}
.ws-site #hacemos .icon.layout-2 svg {
width: 32px;
height: 32px;
color: var(--primary-color, #007aff);
}
/* Responsive styles for content sections */
@media (max-width: 991px) {
.ws-site .content-section {
padding: 80px 0;
}
.ws-site .content-section .content h2 {
font-size: 1.9rem;
}
.ws-site .content-section .content h2 span {
font-size: 1.6rem;
}
.ws-site #hacemos .content h2 {
font-size: 1.8rem;
}
}
@media (max-width: 767px) {
.ws-site .content-section {
padding: 60px 0;
}
.ws-site .content-section .content {
padding: 0 15px;
text-align: center;
}
.ws-site .content-section .content h2 {
font-size: 1.6rem;
line-height: 1.3;
}
.ws-site .content-section .content h2 span {
font-size: 1.4rem;
}
.ws-site .content-section .list-group-item {
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem 0;
}
.ws-site .content-section .list-group-item span {
margin-top: 0.75rem;
}
.ws-site .content-section .icon-box {
margin-right: 0 !important;
margin-bottom: 0.5rem;
}
.ws-site #hacemos .content {
padding: 0 15px;
text-align: center;
}
.ws-site #hacemos .content h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.ws-site #hacemos .list-group-item {
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem 0;
}
.ws-site #hacemos .icon.layout-2 {
margin-right: 0 !important;
margin-bottom: 0.5rem;
}
.ws-site #hacemos .icon.layout-2 svg {
width: 36px;
height: 36px;
}
.ws-site #hacemos .list-group-item span {
margin-top: 0.5rem;
}
}
@media (max-width: 575px) {
.ws-site .content-section {
padding: 50px 0;
}
.ws-site .content-section .content h2 {
font-size: 1.4rem;
}
.ws-site .content-section .content h2 span {
font-size: 1.2rem;
}
.ws-site .content-section .icon-box .icon {
width: 44px;
height: 44px;
}
.ws-site .content-section .icon-box .icon svg {
width: 20px;
height: 20px;
}
.ws-site #hacemos .content h2 {
font-size: 1.3rem;
}
.ws-site #hacemos .list-group-item {
font-size: 0.95rem;
padding: 0.75rem 0;
}
.ws-site #hacemos .icon.layout-2 svg {
width: 30px;
height: 30px;
}
}
/* WebSite Grid System - Pure CSS (No Bootstrap) */
.ws-site .ws-container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 15px;
}
.ws-site .ws-row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
justify-content: space-between;
align-items: center;
}
.ws-site .ws-col {
padding: 0 15px;
flex: 1;
}
.ws-site .ws-col-content {
flex: 0 0 50%;
max-width: 50%;
}
.ws-site .ws-col-img {
flex: 0 0 50%;
max-width: 50%;
text-align: center;
}
.ws-site .ws-list {
list-style: none;
padding: 0;
margin: 0;
}
.ws-site .ws-list-item {
display: flex;
align-items: flex-start;
padding: 1rem 0;
border: none;
}
/* Responsive for ws-grid */
@media (max-width: 991px) {
.ws-site .ws-col-content,
.ws-site .ws-col-img {
flex: 0 0 100%;
max-width: 100%;
}
.ws-site .ws-col-img {
margin-bottom: 2rem;
}
.ws-site .ws-row {
flex-direction: column;
}
}
@media (max-width: 767px) {
.ws-site .ws-container {
padding: 0 20px;
}
.ws-site .ws-col {
padding: 0;
}
.ws-site .ws-list-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.ws-site .ws-col-img {
display: none;
}
}
|