/* ======================================================
   TABLE OF CONTENTS
======================================================
1.  Font Face Declarations
2.  Root Variables
3.  General Style
    3.1 Headings
    3.2 Paragraphs
    3.3 Links
    3.4 Buttons
    3.5 Image
    3.6 Lists
4.  Utility Classes
    4.1 Color Utilities
    4.2 Background Utilities
    4.3 Sizing Utilities
    4.4 Other Utilities
5.  Navbar Styles
    5.1 Offcanvas
    5.1.1 Offcanvas Social Icon
    5.2 Dropdown
6.  Hero Styles
7.  About Styles
8.  Service Styles
9.  Process Styles
10. Pricing Styles
11. Client & Testimonials Styles
12. FAQs Styles
13. Blog Post Styles
14. Contact Styles
15. Banner Styles
16. Team Styles
17. Quotation Styles
18. Career Styles
19. 404 Error Styles
20. Single Post Styles
21. Maps Styles
22. Footer Styles
23. Animation
24. Media Queries
====================================================== */

/* ======================================================
   1. FONT FACE DECLARATIONS
   Define custom fonts used throughout the template.
====================================================== */
@font-face {
    font-family: 'space-grotesk';
    src: url(../font/space-grotesk.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'goldman-bold';
    src: url(../font/Goldman-Bold.ttf) format(truetype);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'goldman';
    src: url(../font/Goldman-Regular.ttf) format(truetype);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nunito';
    src: url(../font/NunitoSans-VariableFont.ttf) format(truetype);
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima-nova';
    src: url(../font/ProximaNova-Regular.ttf) format(truetype);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima-nova-bold';
    src: url(../font/ProximaNova-Bold.ttf) format(truetype);
    font-weight: 700;
    font-style: normal;
}

/* ======================================================
   2. ROOT VARIABLES
   Global variables for colors, fonts, and reusable values.
====================================================== */
:root {
    --text-color-1: #b6b6b6;
    --text-color-2: #2a2a2a;
    --text-color-3:#FFFFFF;
    --text-color-4:#0041a8;
    --text-color-5:#000000;
    --color-main: #ea5c2a;
    --color-darker: #b54853;
    --color-primary: #f4f4f4;
    --color-bg-1: #121212;
    --color-bg-2: #0041a8;
    --color-border: #f4f4f436;
    --font-1: "space-grotesk";

    --font-2: "goldman-bold";
    --font-3: "goldman";
    --font-4: "proxima-nova";
    --font-5: "proxima-nova-bold";

    --color-main-1: #04245C;
    --color-main-2: #0041a8;
    --color-main-3: #e83738;
}

html,
body {
    font-size: 16px;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}


/* ======================================================
   3. GENERAL STYLE
   Base styles for HTML elements.
====================================================== */

/* ------------------------------------------------------
   3.1 HEADINGS
   Typography for all heading levels.
------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-2);
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
}

h1 {
    font-size: 80px;
}

h2 {
    font-size: 60px;
}

h3 {
    font-size: 50px;
}

h4 {
    font-size: 30px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

/* ------------------------------------------------------
   3.2 PARAGRAPHS
   Styles for paragraph text.
------------------------------------------------------ */
p {
    font-size: 20px;
    color: var(--text-color-3);
    font-weight: 400;
    font-family: var(--font-4);
    line-height: 1.5em;
}

.subtitle {
    font-size: 18px;
    font-weight: 500;
    word-spacing: 6px;
    letter-spacing: 1.2px;
    color: var(--text-color-1);
}

span {
    font-weight: 400;
    color: var(--text-color-1);
    font-family: var(--font-4);
}

/* ------------------------------------------------------
   3.3 LINKS
   Anchor tag styles.
------------------------------------------------------ */
a {
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    font-size: 18px;
    color: var(--color-primary);
    font-family: var(--font-5);
}

/* Estilos botón flotante */
.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 9999px;
  background: var(--color-main-3);            /* Cambia al color de tu marca/Bootstrap primary */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Estado visible */
.back-to-top.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hover/Focus */
.back-to-top:hover,
.back-to-top:focus-visible{
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  outline: none;
}

/* Alto contraste opcional */
@media (prefers-contrast: more){
  .back-to-top{ box-shadow: none; }
}

/* Si usas un footer fijo, puedes ajustar el bottom en responsive */
@media (max-width: 576px){
  .back-to-top{ right: 16px; bottom: 16px; }
}


.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;            /* color WhatsApp */
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  z-index: 9999;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.whatsapp-float img.img-icono-whatsapp{
    width: 45px;
}

/* Tooltip */
.tooltip {
    font-family: var(--font-4);
    position: absolute;
    right: 70px; /* lo desplaza a la izquierda del botón */
    bottom: 15px;
    background: #FFF;
    color: #000;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
transition: all 0.3s ease;
}

.whatsapp-float svg {
  width: 40px;
  height: 40px;
  fill: #fff;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  outline: none;
}
.whatsapp-float:hover .tooltip {
  opacity: 1;
  transform: translateX(0);
}


@media (hover: none) {
  .whatsapp-float:hover { transform: none; }
}

/* Animación suave (respetando reduced motion) */
@keyframes wa-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.whatsapp-float {
  animation: wa-pulse 2.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
}

/* Ajustes responsivos */
@media (max-width: 480px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: 90px;
  }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

/* Modo oscuro opcional */
@media (prefers-color-scheme: dark) {
  .whatsapp-float { box-shadow: 0 8px 20px rgba(0,0,0,.45); }
}


/* ------------------------------------------------------
   3.4 BUTTONS
   Button base styles.
------------------------------------------------------ */
button {
    font-family: var(--font-1);
    font-weight: 600;
    font-size: 16px;
}

.btn-1 {
    padding: 12px 20px;
    color: var(--color-primary);
    background-color: var(--color-main-3);
    border-radius: 5px;
    transition: all 0.3s ease;
    border-radius: 50px;
    text-transform: uppercase;
}

.btn-1:hover {
    background-color: var(--color-primary);
    color: var(--color-main-1);
}

.btn-2 {
    padding: 12px 20px;
    color: white;
    background-color: var(--color-main-3);
    border-radius: 5px;
    transition: all 0.3s ease;
    min-width: max-content;
    max-width: 100%;
    border-radius: 50px;
    text-transform: uppercase;
}

.btn-2:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-2);
}

.btn-3 {
    color: white;
    background-color: transparent;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-3:hover {
    color: var(--color-main);
}

.btn-4 {
    padding: 12px 20px;
    color: white;
    background-color: var(--color-bg-1);
    transition: all 0.3s ease;
    min-width: max-content;
    max-width: 100%;
    border-radius: 5px;
}

.btn-4:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-1);
}

.btn-5 {
    padding: 12px 20px;
    color: var(--color-bg-1);
    background-color: var(--color-primary);
    transition: all 0.3s ease;
    min-width: max-content;
    max-width: 100%;
    border-radius: 5px;
}

.btn-5:hover {
    background-color: var(--color-bg-1);
    color: var(--color-primary);
}

.btn-circle-1 {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--text-color-2);
    transition: all 0.3s ease;
}

.btn-circle-1 i {
    transition: transform 0.3s ease;
}

.btn-circle-1:hover {
    background-color: var(--color-main-3);
    color: white;
}

.btn-circle-1:hover i {
    transform: rotate(-45deg);
}

.btn-circle-2 {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--color-main);
    color: white;
    transition: all 0.3s ease;
}

.btn-circle-2 i {
    transition: transform 0.3s ease;
}

.btn-circle-2:hover {
    background-color: wheat;
    color: black;
}

.btn-circle-2:hover i {
    transform: rotate(-45deg);
}

.btn-fit {
    width: fit-content;
}


/* ------------------------------------------------------
   3.5 IMAGE
   Image element styles.
------------------------------------------------------ */
img {
    object-fit: cover;
    object-position: center;
    width: 100%;
}

/* ------------------------------------------------------
   3.6 LISTS
   List element styles.
------------------------------------------------------ */
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    font-family: var(--font-1) !important;
    font-weight: 400;
    color: var(--text-color-1);
}

/* ------------------------------------------------------
   4.1 COLOR UTILITIES
   Utility classes for text colors.
------------------------------------------------------ */
.c-text-1 {
    color: var(--text-color-1) !important;
}

.c-text-2 {
    color: var(--text-color-2) !important;
}

.c-text-3{
    color: var(--color-main-1);
}
.c-main {
    color: var(--color-main-3);
}

.c-darker {
    color: var(--color-darker);
}

.c-primary {
    color: var(--text-color-3);
}

.c-bg-1 {
    color: var(--color-bg-1);
}

.c-bg-2 {
    color: var(--color-bg-2);
}

.c-border {
    color: var(--color-border);
}

.c-white {
    color: white !important;
}

.c-black {
    color: black;
}

/* ------------------------------------------------------
   4.2 BACKGROUND UTILITIES
   Utility classes for background colors.
------------------------------------------------------ */
.bg-text-1 {
    background-color: var(--text-color-1);
}

.bg-text-2 {
    background-color: var(--text-color-2);
}

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

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

.bg-prime {
    background-color: var(--color-primary);
}

.bg-bg-1 {
    background-color: var(--color-main-1);
}

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

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

.bg-white {
    background-color: white;
}

.bg-black {
    background-color: black;
}

.bg-bg-hero {
  background-image: url("../img/degradado-hero.jpg"); /* Cambia por la ruta de tu imagen */
  background-position: center; /* Centrada */
  background-repeat: no-repeat; /* No se repite */
  background-size: cover; /* Ajusta al contenedor */
  background-attachment: scroll; /* O fixed para efecto parallax */
  width: 100%; 
  height: 100%; /* O altura fija ej. 400px */
}


.bg-bg-testimonial {
  background-image: url("../img/degradado-testimonial.jpg"); /* Cambia por la ruta de tu imagen */
  background-position: center; /* Centrada */
  background-repeat: no-repeat; /* No se repite */
  background-size: cover; /* Ajusta al contenedor */
  background-attachment: scroll; /* O fixed para efecto parallax */
  width: 100%; 
  height: 100%; /* O altura fija ej. 400px */
}

.bg-bg-img {
  background-image: url("../img/degradado1.jpg"); /* Cambia por la ruta de tu imagen */
  background-position: center; /* Centrada */
  background-repeat: no-repeat; /* No se repite */
  background-size: cover; /* Ajusta al contenedor */
  background-attachment: scroll; /* O fixed para efecto parallax */
  width: 100%; 
  height: 100%; /* O altura fija ej. 400px */
}

.bg-bg-img-2 {
  background-image: url("../img/degradados3.jpg"); /* Cambia por la ruta de tu imagen */
  background-position: center; /* Centrada */
  background-repeat: no-repeat; /* No se repite */
  background-size: cover; /* Ajusta al contenedor */
  background-attachment: scroll; /* O fixed para efecto parallax */
  width: 100%; 
  height: 100%; /* O altura fija ej. 400px */
}
.bg-bg-img-3 {
  background-image: url("../img/degradado2.jpg"); /* Cambia por la ruta de tu imagen */
  background-position: center; /* Centrada */
  background-repeat: no-repeat; /* No se repite */
  background-size: cover; /* Ajusta al contenedor */
  background-attachment: scroll; /* O fixed para efecto parallax */
  width: 100%; 
  height: 100%; /* O altura fija ej. 400px */
}

.bg-bg-nav{
    background: transparent;
    position: absolute;
    z-index: 10;
    height: 120px;
    width: 100%;
}

.process-grafico{
position: absolute;
    width: 35%;
    top: 19%;
    z-index: 999;
    left: 61%;
}
.process-grafico2{
position: absolute;
    width: 50%;
    top: 20%;
    z-index: 999;
    left:0;
}

.process-grafico4-s{
position: absolute;
    width: 4%;
    top: 10%;
    z-index: 999;
    left:2%;
    animation: blink 6s infinite ease-in-out;
}

.process-grafico4{
position: absolute;
    width: 9%;
    top: 15%;
    z-index: 999;
    left: 95%;
    animation: blink 6s infinite ease-in-out;
}

.process-grafico4-test{
position: relative;
    width: 9%;
    top: 10%;
    z-index: 999;
    left: 75%;
    animation: blink 6s infinite ease-in-out;

}
.process-grafico6{
    width: 23%;
   margin-top: -30px;
   position: relative;
   left: 12%;
}

.process-grafico-logo{
    width: 50%;
}
/* ------------------------------------------------------
   4.3 SIZING UTILITIES
   Utility classes for element sizing and spacing.
------------------------------------------------------ */
.navbar-size {
    width: 1300px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.page-size {
    width: 1300px;
    padding-top: 100px;
    padding-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
}



/* ------------------------------------------------------
   4.4 OTHER UTILITIES
   Miscellaneous utility classes.
------------------------------------------------------ */
.divider {
    border: 1px solid var(--color-border);
}


/* ======================================================
   5. NAVBAR STYLES
   Styles for navigation bar and navigation elements.
====================================================== */
.nav-logo {
    width: 100%;
    max-height: 110px;
    max-width: 250px;
}

.nav-link {
    color: var(--text-color-3);
    font-size: 15px;
    font-family: var(--font-3);
    font-weight: 600;
    box-shadow: none;
    text-transform: uppercase;
}

.nav-link {
    color: var(--text-color-3);
    font-size: 15px;
    font-family: var(--font-3);
    font-weight: 500;
    text-align: center;
}

.nav-item:hover .nav-link {
    color: var(--color-main-3);
}

.nav-link.active {
    color: var(--color-main-3) !important;
    background-color: transparent !important;
    box-shadow: none;
}

/* ------------------------------------------------------
   5.1 OFFCANVAS
   Styles for offcanvas navigation menu.
------------------------------------------------------ */
.offcanvas-header .btn-close-custom {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background-color: transparent;
    border: 1px solid var(--text-color-2);
    border-radius: 10px;
    font-size: 16px;
    padding: 5px 12px;
    cursor: pointer;
}

.btn-close {
    color: var(--color-main) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0893f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1 !important;
}

.btn-close:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0893f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

}

.offcanvas-icon {
    
    padding: 8px;
    border-radius: 4px;
}
.offcanvas-icon::before{
    color: var(--color-main-3);
    font-size: 28px;
}

.offcanvas {
    background-color: var(--color-main-2) !important;
}

/* ------------------------------------------------------
   5.1.1 OFFCANVAS SOCIAL ICON
   Social icon styles in offcanvas menu.
------------------------------------------------------ */
.social-icon-32 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid white;
    border-radius: 50%;
    color: white;
    background-color: transparent;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
    cursor: pointer;
}

.social-icon-32:hover {
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
}

.social-icon-32-single-post {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-main);
    border-radius: 50%;
    color: var(--color-main);
    background-color: transparent;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
    cursor: pointer;
}

.social-icon-32-single-post:hover {
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
    color: white;
}

/* ------------------------------------------------------
   5.2 DROPDOWN
   Dropdown menu styles in navbar.
------------------------------------------------------ */
.nav-item.dropdown .nav-link:hover {
    color: #F7F0EBA8;
    box-shadow: none;
}

.nav-item.dropdown .nav-link:active {
    box-shadow: none;
}



.nav-link:focus,
.dropdown-item:focus {
    color: var(--color-main);
    outline: none;
    box-shadow: none !important;
}

.dropdown-icon-size {
    font-size: 10px;
}

.dropdown-menu {
    padding-left: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 10px;
    background-color: var(--text-color-2);
    min-width: 200px;
    border: none;
    box-shadow: none;
    border-radius: 5px;
}

.dropdown-menu a {
    padding-top: 12px;
    padding-bottom: 12px;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.dropdown-item {
    font-size: 15px;
    color: var(--text-color-1) !important;
    font-weight: 500 !important;
    border-radius: 5px;
}

.dropdown-item.active {
    background-color: transparent !important;
    color: var(--color-main) !important;
}

.dropdown-item:hover {
    background-color: transparent !important;
    color: white !important;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-icon {
    font-size: 12px;
    color: var(--color-main);
}

.nav-link:hover .dropdown-icon {
    color: white;
}

/* ------------------------------------------------------
   6. HERO STYLES
   Styles for the hero section and its components.
------------------------------------------------------ */

.pd-80{
    padding-top: 80px;
}
.ml-70{
    margin-left: 105px;
}

.pt-200{
    padding-top: 200px !important;
}

.hero-paragraph-size {
    width:70%;
}

.hero-img {
    width: 600px;
    object-fit: contain;
    z-index: 1;
    transition: all 0.5s ease-in-out;
}

.hero-img:hover {
    top: 200px;
}

.hero-client {
    height: 500px;
}

.active-client-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto;
    border: 5px solid var(--color-bg-1);
}

.active-client-circle:nth-child(1) {
    margin-right: -20px;
}

.active-client-circle:nth-child(2) {
    margin-right: -20px;
}

.active-client-circle:nth-child(3) {
    margin-right: -20px;
}

.active-client-circle:nth-child(4) {
    margin-right: -20px;
}

.active-client-text {
    width: 14%;
}

.offer-img {
    border-radius: 5px;
}

.offer-item:first-child {
    margin-top: 200px;
}

.offer-item:nth-child(2) {
    margin-top: 100px;
}

/* ------------------------------------------------------
   7. ABOUT STYLES
   Styles for the about section and its components.
------------------------------------------------------ */
.about-img {
    height: 100%;
    border-radius: 5px;
}

.about-img-2 {
    width: 100%;
    border-radius: 5px;
}

.about-img-card {
    position: absolute;
    bottom: 40px;
    left: 60px;
    background-color: var(--color-bg-1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 6;
    padding: 32px;
    border-radius: 5px;
}

.about-img-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-card {
    background-color: var(--text-color-2);
    padding: 24px;
    border-radius: 5px;


  

}

/* ------------------------------------------------------
   8. SERVICE STYLES
   Styles for the service section and its components.
------------------------------------------------------ */
.service-text {
    width: 50%;
}

.services-row {
    position: relative;
}

.services-card {
    height: 100%;
}

.services-icon {
    object-fit: contain;
    width: 90px;
    height: 80px;
}

.services-body{
    background-color: var(--color-main-2);
    /*box-shadow: -8px 10px 0px rgba(21, 33, 49, 1); */
    box-shadow: -8px 10px 0px rgba(18, 18, 18, 1);
    border-radius: 12px;
    padding: 15px;
    border: 2px solid #121212;
    height: 60%;
    align-content: center;
}
.services-body h4{
    font-family: var(--font-4);
    text-transform: initial;
    text-align: center;
}

.header {
    font-size: 26px;
    font-weight: 600;
    font-family: var(--font-1);
    color: var(--color-primary);
}

/* ------------------------------------------------------
   9. PROCESS STYLES
   Styles for the process section and its components.
------------------------------------------------------ */
.process-bg {
   /* background-color: var(--color-main-1);*/
    padding: 64px;
    position: relative;
}



.process-bg-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/conexiones900x600.png');
    background-size: cover;
    background-position: center;
    padding: 48px;

    box-shadow: -8px 10px 0px rgba(21, 33, 49, 1); 
    border-radius: 12px;
}

.process-border {
    width: 100%;
    border-bottom: 1px solid var(--text-color-1);
}

.process-icon {
    font-size: 40px;
}

.process-item:nth-child(2) {
    margin-top: 90px;
}

.process-item:nth-child(3) {
    margin-top: 180px;
}

/* ------------------------------------------------------
   10. PRICING STYLES
   Styles for the pricing section and its components.
------------------------------------------------------ */
.pricing-card {
    background-color: var(--text-color-3);
    padding: 50px 32px;
    border-radius: 40px;
    border: 2px solid #121212;
     box-shadow: -15px 15px 0px rgba(18, 18, 18, 0.2);

}
.pricing-card h4{
    font-size: 45px;
    font-family: 'goldman-bold';
}

.pricing-card .bg-start {
  position: relative;
  text-align: center; /* Centra los textos */
  padding: 40px 20px; /* Ajusta el espacio interno */
  
  background-image: url("../img/grafico1.svg"); /* tu estrella */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 300px 300px; /* controla el tamaño de la estrella */
}  

.pricing-card .pricing-card-pricing{
 background-image: url("../img/grafico1.png"); /* Cambia por la ruta de tu imagen */
  background-position: center; /* Centrada */
  background-repeat: no-repeat; /* No se repite */
  background-size: contain; /* Ajusta al contenedor */
  background-attachment: scroll; /* O fixed para efecto parallax */
  width: 100%; 
  height: 100%; /* O altura fija ej. 400px */
}
.icon-circle {
    padding: 6px;
    font-size: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-main-3);
    color: var(--text-color-3);
    border: 2px solid var(--color-main-3);
    margin-right: 12px;
}

.bg-start h2{
    font-size: 80px !important;
    color: var(--text-color-4) !important;
}

.bg-start h6{
    color: var(--color-main-1);
}

.pricing-list li {
    margin-bottom: 12px;
}

.popular {
    background-color: white;
    color: black;
    font-size: 15px;
    font-weight: 600;
    padding: 3px 18px;
    border-radius: 5px;
}

/* ------------------------------------------------------
   11. CLIENT & TESTIMONIALS STYLES
   Styles for the client and testimonials sections.
------------------------------------------------------ */
.client-logo {
    width: 220px;
    object-fit: contain;
    border-radius: 5px;
    opacity: 0.6;
    padding: 24px;
    transition: opacity 0.3s ease;
}


.client-logo:hover {
    opacity: 1;
}

.testimonials-card {
    background-color: var(--text-color-3);
     box-shadow: -8px 10px 0px rgba(18, 18, 18, 0.3);
    border-radius: 12px;
    padding: 15px 15px;
    height: 100%;
    border: 2px solid #121212;
}
.testimonials-card h5{
    font-family: var(--font-5);
    text-transform: initial;
}
.testimonials-card p{
    color: var(--color-bg-1);
    margin-bottom: 0px;
}
.testimonials-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-right: 12px;
}

.testimonials-job {
    font-size: 14px;
    color: var(--color-bg-1);
    font-weight: 600;
}

.testimonials-quote {
    font-size: 48px;
}

/* ------------------------------------------------------
   12. FAQS STYLES
   Styles for the frequently asked questions section.
------------------------------------------------------ */
.accordion {
    margin-bottom: 20px;
}

.accordion-item {
    background-color: var(--color-bg-1);
    border: none;
    border-radius: 8px;
    margin-bottom: 10px;
}

.accordion-button {
    color: white;
    background-color: var(--color-main-1);
}

.accordion-button::after {
    display: none !important;
}

.accordion-button .icon {
    font-size: 2.4rem;
    color: white;
    transition: transform 0.3s ease;
}

.accordion-button.collapsed .icon::before {
    content: '+';
}

.accordion-button:not(.collapsed) .icon::before {
    content: '×';
}

.accordion-button:focus {
    background-color: var(--color-main-2);
    color: white;
    box-shadow: none;
    outline: none;
}

.accordion-body {
    color: white;
    padding: 20px;
    background-color: var(--color-bg-2);
}

/* ------------------------------------------------------
   13. BLOG POST STYLES
   Styles for the blog post section and its components.
------------------------------------------------------ */
.blog-card {
    background-color: var(--text-color-2);
    padding: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.blog-img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.blog-img-wrapper {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.blog-img-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 10;
}

.blog-header {
    font-size: 26px;
    font-weight: 600;
    font-family: var(--font-1);
    color: var(--color-primary);
}

.blog-img-wrapper:hover .blog-img,
.blog-col-1:hover .blog-img,
.blog-col-2:hover .blog-img,
.blog-col-3:hover .blog-img,
.blog-col-4:hover .blog-img,
.blog-col-5:hover .blog-img,
.blog-col-6:hover .blog-img {
    transform: scale(1.05) rotate(2deg);
}

.blog-img-wrapper:hover::before {
    opacity: 1;
}

/* ------------------------------------------------------
   14. CONTACT STYLES
   Styles for the contact section and its components.
------------------------------------------------------ */
.contact-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/contact-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 64px;
}

.contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color:#000000;
    color:#FFFFFF;
    font-size: 18px;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.contact-icon:hover {
    color: var(--color-main-3);
    background-color: white;
}

.contact-card {
    background-color: var(--text-color-2);
    padding: 32px;
    border-radius: 5px;
}

.contact-input {
    background-color: var(--color-bg-2);
    padding: 12px;
    color: white;
    border: none;
    outline: none;
    border-radius: 5px;
    width: 100%;
}

.contact-input::placeholder {
    color: var(--text-color-1);
}

.contact-textarea {
    background-color: var(--color-bg-2);
    color: white;
    padding: 12px;
    border-radius: 5px;
    border: none;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-textarea::placeholder {
    color: var(--text-color-1);
}

.contact-textarea:focus {
    outline: none;
    border: none;
}

.contact-img {
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

/* ------------------------------------------------------
   15. BANNER STYLES
   Styles for the banner section and its components.
------------------------------------------------------ */
.banner-height {
    height: 420px;
}


/* ------------------------------------------------------
   17. QUOTATION STYLES
   Styles for the quotation section and its components.
------------------------------------------------------ */
.quotation-card {
    background-color: var(--color-main);
    padding: 32px;
    border-radius: 5px;
}

.quotation-card-2 {
    background-color: var(--text-color-2);
    padding: 32px;
    border-radius: 5px;
}

.quotation-text {
    color: var(--text-color-1);
}

.quotation-text:hover {
    color: var(--color-primary);
}


/* ------------------------------------------------------
   19. 404 ERROR STYLES
   Styles for the 404 error page.
------------------------------------------------------ */
.error-bg {
    background-color: var(--color-bg-1);
    min-height: 84vh;
    height: 720px;
}

.error-text {
    font-size: 99px;
    font-weight: 600;
    font-family: var(--font-1);
    color: var(--color-primary);
}

.error-p {
    width: 30%;
}


/* ------------------------------------------------------
   21. MAPS STYLES
   Styles for the maps section and its components.
------------------------------------------------------ */
.maps-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 5px;
    overflow: hidden;
}

.maps-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: background-color 0.3s ease;
}

.maps-overlay:hover {
    background-color: transparent;
}

.maps {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1;
    pointer-events: auto;
}

/* ------------------------------------------------------
   22. FOOTER STYLES
   Styles for the footer section and its components.
------------------------------------------------------ */
.footer .col:nth-child(1) {
  border-right: 1px solid #000000;   /* Primer col */
}

.footer .col:nth-child(2) {
  border-right: 1px solid #000000; /* Segundo col */
}

.footer .col:nth-child(3) {
  border-right: 1px solid #000000;  /* Tercer col */
}


.footer-header {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-2);
    color: var(--text-color-5);
}

.footer-list {
    list-style: none;
    margin: 12px 0;
    padding: 0;
}

.footer-list li {
    margin-bottom: 10px;
}

.footer-link,
.footer-text {
    color: var(--text-color-5);
    font-size: 16px;
}

.footer-link:hover,
.footer-text:hover {
    color:var(--color-main-3);
}

.footer-logo {
    width: 200px;
}

.newsletter-card {
    background-color: transparent;
    border-radius: 5px;
    border-bottom: 1px solid var(--color-border);
}

.newsletter-input {
    background-color: transparent;
    padding: 12px;
    color: white;
    border: none;
    outline: none;
    width: 100%;
}

.newsletter-input::placeholder {
    color: var(--color-main);
}

.newsletter-button {
    background-color: transparent;
    border: none;
    outline: none;
}

.newsletter-icon {
    background-color: var(--color-bg-1);
    color: var(--text-color-1);
    font-size: 20px;
    cursor: pointer;
}

.newsletter-icon:hover {
    color: var(--color-main);
}

.newsletter-icon:active {
    color: var(--color-main);
}

/* ======================================================
   23. ANIMATION
   Animation keyframes and animation utility classes.
====================================================== */
@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(120px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-120px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-120px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(120px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transform: translate(0, 0);
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
}

.fade-in-up {
    animation-name: fadeInUp;
}

.fade-in-down {
    animation-name: fadeInDown;
}

.fade-in-left {
    animation-name: fadeInLeft;
}

.fade-in-right {
    animation-name: fadeInRight;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
    animation-fill-mode: both;
}

.popup-message {
    display: none;
    background-color: var(--color-border);
    color: var(--color-primary);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-left: 0;
    margin-right: 0;
}

#contactForm .popup-message {
    background-color: var(--color-bg-1);
    max-width: 100%;
}

.popup-message-2 {
    display: none;
    background-color: var(--color-border);
    color: var(--color-primary);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

/* ======================================================
   24. MEDIA QUERIES
   Responsive styles for different screen sizes.
====================================================== */
@media screen and (max-width: 992px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.1em;
    }

    h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 38px;
    }

    h3 {
        font-size: 27px;
    }

    h4 {
        font-size: 21px;
    }

    h5 {
        font-size: 19px;
    }

    h6 {
        font-size: 14px;
    }

    p {
        font-size: 14px;
    }

    button {
        font-size: 12px;
    }

    a {
        font-size: 12px;
    }

    .page-size {
        width: 100%;
        padding: 50px 32px;
    }

    .navbar-size {
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .nav-link {
        font-size: 15px;
    }

    .dropdown-menu {
        border: none;
        background-color: var(--color-darker);
    }

    .dropdown-item {
        font-size: 14px;
        color: var(--color-main) !important;
    }

    .dropdown-item:hover {
        color: white !important;
    }

    .hero-img {
        width: 100%;
        height: auto;
        position: static;
        object-fit: contain;
        z-index: 5;
        transition: all 0.5s ease-in-out;
    }

    .hero-client {
        height: 60px;
    }

    .active-client-circle {
        width: 54px;
        height: 54px;
    }

    .offer-item:first-child {
        margin-top: 0;
    }

    .offer-item:nth-child(2) {
        margin-top: 0;
    }

    .client-logo {
        width: 180px;
    }

    .btn-circle-2 {
        width: 36px;
        height: 36px;
    }

    .active-client-text {
        width: 50%;
    }

    .about-img {
        height: 420px;
    }

    .services-row {
        margin-top: 0;
    }

    .service-text {
        width: 100%;
    }

    .services-item {
        margin-top: 60px;
    }

    .services-item:nth-child(4){
        margin-bottom: 60px;
    }
    .process-bg {
        padding: 32px;
    }

    .process-bg-img {
        padding: 32px;
    }

    .faqs-accordion:nth-child(2) {
        margin-top: -10px;
    }

    .team-card {
        left: 50%;
        transform: translateX(-50%);
    }

    .error-text {
        font-size: 66px;
    }

    .error-p {
        width: 60%;
    }

    .footer .col:nth-child(1) {
      border-right: none;
    }

    .footer .col:nth-child(2) {
      border-right: none;
    }

    .footer .col:nth-child(3) {
      border-right: none;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 32px;
    }

    h3 {
        font-size: 25px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 14px;
    }

    .page-size {
        padding: 50px 20px;
    }

    .navbar-size {
        padding-left: 20px;
        padding-right: 20px;
    }

    .nav-logo {
        width: 100%;
        max-height: 80px;
    }

    .active-client-text {
        width: 100%;
    }

    .offer-item:first-child {
        margin-top: 48px;
    }

    .offer-item:nth-child(2) {
        margin-top: 10px;
    }

    .about-img-card {
        width: 300px;
        bottom: 40px;
        transform: translateX(-50%);
    }

    .process-bg {
        padding: 24px;
    }

    .process-bg-img {
        padding: 24px;
    }

    .process-item:nth-child(2),
    .process-item:nth-child(3) {
        margin-top: 48px;
    }

    .pricing-card {
        padding: 24px;
    }

    .client-logo {
        width: 160px;
    }

    .contact-bg {
        padding: 24px;
    }

    .contact-card {
        padding: 20px;
    }

    .error-bg {
        height: 50vh;
    }

    .error-text {
        font-size: 33px;
    }

    .error-p {
        width: 100%;
    }
}