/*-----------------------------------------INICIO-----------------------------------------------------------*/

          
          html, body {
  
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }


        #home{
            height: 100vh;
        }

        * {
        box-sizing: border-box;
          }


        .contain{
            text-align: center;
        }


        :root {
            --roboto-font: 'Roboto', sans-serif;
            --open-sans-font: 'Open Sans', sans-serif;
           
        }

      section {
        min-height: 10vh; /*Garantiza al menos la altura del viewport */
        height: auto; /*Ajusta la altura según el contenido */
    }


            :root { 
          --background-color: #ffffff; 
          --default-color: #444444; 
          --heading-color: #040677; 
          --accent-color: #FF6A13; 
          --surface-color: #ffffff; 
          --contrast-color: #ffffff; 
        }



        /*------------------SCROLLBAR--------------------------------------------*/
         /*Personalizar el ancho del scrollbar*/
        ::-webkit-scrollbar {
            width: 12px; /*Ancho del scroll vertical*/
            height: 12px; /*Ancho del scroll horizontal (si es necesario)*/
        }

        /*Estilo del "pulgar" del scrollbar (la parte que se arrastra)*/
        ::-webkit-scrollbar-thumb {
            background-color: #FF6A13;/*Color del pulgar*/
            border-radius: 10px;/*Bordes redondeados*/
            border: 2px solid #fff;/*Borde alrededor del pulgar*/
        }

        /*Cambiar el color al pasar el ratón sobre el pulgar*/
        ::-webkit-scrollbar-thumb:hover {
            background-color:#F8B229;/*Color al pasar el ratón*/
        }

        /*Estilo de la pista (el fondo del scrollbar)*/
        ::-webkit-scrollbar-track {
            background-color: #ecf0f1;/*Color del fondo de la barra*/
            border-radius: 10px;/*Bordes redondeados de la pista*/
        }

        /*----------------------------------------------------------------------PRELOADER----------------------------------------------------------------------------*/

         .preloader-container {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #ECF0F1;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
        }

        .load {
          width: 100px;
          height: 100px;
          position: relative;
        }

        .load hr {
          border: 0;
          margin: 0;
          width: 40%;
          height: 40%;
          position: absolute;
          border-radius: 50%;
          animation: spin 2s ease infinite;
          opacity: 1;  /* Asegura que no haya transparencia */
        }

        .load :first-child {
          background: #4B4F54;
          animation-delay: -1.5s;
        }

        .load :nth-child(2) {
          background: #003057;
          animation-delay: -1s;
        }

        .load :nth-child(3) {
          background: #F8B229;
          animation-delay: -0.5s;
        }

        .load :last-child {
          background: #FF6A13;
        }

        @keyframes spin {
          0%, 100% { transform: translate(0) }
          25% { transform: translate(160%) }
          50% { transform: translate(160%, 160%) }
          75% { transform: translate(0, 160%) }
        }


         /*----------------------------------------------------------------------MENU----------------------------------------------------------------------------*/

            .navbar{
            font-family:  'Rubik', sans-serif;
            font-weight: bold;
            padding:0;
            margin:0;
            list-style-type: none;
            display: inline-flex;
            overflow: hidden;
            font-weight: bold;
            width: 100vw;
            height: 50px;
            margin-top: 0px;
            justify-content: right;
            letter-spacing: 1px;
            text-decoration: none;
            z-index: 1000;
            position: fixed;
            space-between:8px;
            }


            /*CAMBIO DE MENU CONTROLADO EN JS*/

            .navbar-transparent {
              background-color: transparent; !important;
              transition: background-color 0.3s ease;
            }


            .navbar-color {
              background-color: #FF6A13 !important;
              transition: background-color 0.3s ease;
            }


            /*ESTILO MENU*/


            ul li a {
                font-family:  'Rubik', sans-serif;
                position: relative;
                
            }

            .nav-link{
                font-weight: bold;
                font-size: 14px;
                margin-right: -10px;
                font-family:  'Rubik', sans-serif;
            }

            .navbar {
            --bs-navbar-color: transparent;

           }

            .navbar-nav {
                display:flex;
                gap:4px;
              --bbackground-color: #444343 !important;

            }

            .navbar-nav .nav-link.active, .navbar-nav .nav-link.show,  .nav-link:hover {
                color: #003057;   
            }

            /*hover*/
            .navbar-links-color .nav-link:hover{
                color: #003057;
            }


            .navbar-links-transparent .nav-link:hover{
                color: #003057;
            }


            .navbar-links-color .nav-link {
              color: white;
            }

            .navbar-links-transparent .nav-link {
              color: white ;
            }


            /*CLASE nav.underline por si quiero la linea abajo*/

            
            /*offcanvas*/
            .offcanvas{
              background-color: #FF6A13;
            }

            .navbar-toggler{
                position: fixed; /* Fija el elemento en la pantalla */
                right: 0;  
                height: 30px;
                border: transparent;
                padding: 3px;
                margin-right: 4px;
            
            }


            .navbar-toggler-icon{
                display: inline-block;
                width: 2.5em;
                height: 2em;
                position: relative;
                top: -12px;
            }

            

            .close-button {
              position: absolute;
              top: 10px;
              right: 10px;
              background: none;
              border: none;
              padding: 0;
            }

            .close-button img {
              width: 40px;
              height: 40px;
              transition: transform 0.3s ease;
            }

            .close-button:hover img {
              transform: scale(1.1);
            }



    /*------------------------------------------------------------------FIN ESTILO MENU--------------------------------------------------------------------*/
      

    /*----------------------------------------------------------------------INICIO-------------------------------------------------------------------------*/      

        .sitename{
            color: white;
            font-family: var(--poppins-font);
            position: fixed;
            top: 13px;
            left:10px;
            z-index: 1000;
            font-size: 23px;
            display: block;
        }

        section#home .sitename,
          .home .sitename {
            display: none;
          }


        .fondo {
            background:linear-gradient(rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.6)),url("../imagenes/bg.jpg") no-repeat;
            background-size: cover;
            background-repeat: no-repeat; 
            background-position: center; 
            background-attachment: fixed;
            padding: 230px 0;            
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 100vh;
            box-sizing: border-box;
            
        }

        /*para que no se vea raro en telefonos*/
        @media(max-width: 768px) {
          .fondo{
            padding:  120px 20px;
            background-attachment: scroll;  
            min-width: auto;  
          }
        }


        
          /*Media queries*/
            
        .btn-get-started {
            border: 2px solid #FF6A13;
            margin: 5px;
            transition: 0.5s;
            border-radius: 50px;
            padding: 12px 40px;
            display: inline-block;
            letter-spacing: 1px;
            font-family: var(--poppins-font);
            color:white;
            text-decoration: none;
        }

        .btn-get-started:hover {
            background-color: #FF6A13;
            color: white;
        }


       


        @media (min-aspect-ratio: 16/9) and (min-width: 100vw) and (min-height: 100vh) {
          .fondo {
           
            background-size: 100% 100%;
            
          }
        }

        .name {
            font-weight: 100;
            font-size: 4em;
            font-family:  'Arvo', serif;
            color: #fff;
        }

        .descripcion {
            color: #fff;
            font-family: 'Quicksand', sans-serif;
            font-size: 18px;
            text-align: justify;
        }


         .titulo2{
        font-family: 'Rubik', sans-serif;
          color:#003057;
          font-size: 50px;
          text-align: center;
          font-weight: bold;
        }



        .subtitulo {
            text-align: center;
            font-size: 19px;
            margin-top:1%;
            font-family: 'Quicksand', sans-serif;
            }

      
        .btn-get-started {
            cursor: pointer;
        }

       
        /*MEDIA QUERIES*/

        /* Responsive tablet */
        @media (max-width: 952px) {
            .container {
                padding: 0 15px;
                margin-top: 0%;
            }
        }

        /* Responsive telefono */
        @media (max-width: 767.98px){
          
            ul li a {
                font-family:  'Arvo', serif;
                line-height: 80px;
                
            }

            .name{
                font-size: 45px;
            }

             .titulo2{
                font-size: 40px;
            }


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

        @media (max-width: 462px){

          .name{
            font-size: 40px;
          }

            .descripcion {
          font-size: 18px;
          text-align: justify;
        }

        }



         @media (max-width: 400px){

          .name{
            font-size: 30px;
          }

      
            .descripcion {
          font-size: 16px;
          text-align: justify;

        }

        }

          @media (max-width: 350px){

          .name{
            font-size: 23px;
          }

            .descripcion {
          font-size: 14px;
          text-align: justify;
        }


        }


/*----------------------------------------------------------------------FIN INICIO-----------------------------------------------------------------------*/   

/*----------------------------------------------------------------------------NOSOTROS-------------------------------------------------------------------*/

       /*CSS NOSOTROS*/

       .valores {
          list-style: none; 
          padding: 0; 
          margin: 0; 
        }

        .valores li {
          display: flex; 
          align-items: center; 
          margin-bottom: 10px; 
        }

        .valores i {
          color: orange; 
          margin-right: 10px; 
        }

        .valores span {
          color: black; 
    }

        .letra{
            font-size: 17px;
            text-align: justify;
            text-align-last: left;
            font-family:'Quicksand', sans-serif;

        }


        .nosotros{
          color: #FF6A13;
          font-size: 40px;
          font-family:  'Arvo', serif;
        }


        @media (max-width: 767.98px){
            .nosotros{
            font-size: 30px;
          }

      }




         @media (max-width: 400px){

          .letra{
            font-size: 16px;
          }

        }



     .swiper {
      width: 80%;
      height: 400px;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      transition: transform 0.5s ease;
    }

    .swiper-slide img.bg-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      
    }

    .bgs-image {
      display: flex; 
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 100px;
      margin: 0 auto;
    }

   
    .swiper-slide-active .bg-image {
      transform: scale(1.2);
      opacity: 1;
    }

   
    .swiper-slide-prev,
    .swiper-slide-next {
      transform: scale(0.9);
      opacity: 0.7;
    }



/*-------------------------------------------------------------------------FIN NOSOTROS-------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------SERVICIOS---------------------------------------------------------------------------*/

         #services{
              background-color: #fff;
            }



            .circle {
                background-color: #fee7db;
                margin:auto;
                width: 70px;
                height: 70px;
                border-radius: 50%;
            }

            img{
                margin-top: 15px;
                width: 40px;
                height:45px;
                margin-left: 1px;

            }

            .card{
            height: 18rem;
            border: none;
            box-shadow: 0px 5px 12px 8px rgba(9, 70, 255, 0.05);
            text-align: center;
            border-radius: 10px;

            }

      


          .flex-container {
            display: flex;  /*Flexbox */
            flex-direction: row; 
            align-items: center; /*Elementos centrados */
            justify-content: center;
            align-content: center;
            margin-top: 0%;
            flex-wrap: wrap;
            text-overflow: ellipsis;
          }
          
          .tarjetas{
             width:18rem;
             margin-top: 15px;
             display: grid; 
             margin: 0.5rem;
          }


            h5{
             text-align: center;
             margin-top: 15px;
            font-weight: bold;
            font-size: 20px;
            font-family: 'Rubik', sans-serif;
            color: #044c56;
            }

          p{
            font-size: 15px;
            font-family: 'Quicksand', sans-serif;
          }

          .textcard{
            text-align: center;
            font-size: 16px;
            font-family: 'Quicksand', sans-serif;

          }



        /*---------------------------------------------------SLIDER----------------------------------------------------*/

        /*Configuracion de fondo*/

        .carousel-inner{
        	margin-top: 8%;
        	
        }


        .carousel-indicators [data-bs-target] {  /*Configuracion de botones*/
        	width: 12px;
        	height: 12px;
        	border-radius: 50%;
        	background-color: #ffc107;
        	margin-bottom: 3.5%;

        }


        /*Configuracion de imagen*/
        img.my-image {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          margin: auto;
          justify-content: center;
          display: flex;
          border: solid 7px #00000038;

        }

        /*Configuracion de fondos del slider*/

        .backg{
          height: 530px; 
          padding: 80px 0;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),url("../imagenes/slider1.jpg") no-repeat;
          background-position: center center;
          background-size: cover;
          position: relative;
        }

        .backg1{
          height: 530px; 
          padding: 80px 0;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),url("../imagenes/slider2.jpg") no-repeat;
          background-position: center center;
          background-size: cover;
          position: relative;
        }

        .backg2{
          height: 530px; 
          padding: 80px 0;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),url("../imagenes/slider3.jpg") no-repeat;
          background-position: center center;
          background-size: cover;
          position: relative;
        }

        .backg3{
          height: 530px; 
          padding: 80px 0;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),url("../imagenes/slider4.jpeg") no-repeat;
          background-position: center center;
          background-size: cover;
          position: relative;
        }

        .backg4{
          height: 530px; 
          padding: 80px 0;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),url("../imagenes/slider5.jpg") no-repeat;
          background-position: center center;
          background-size: cover;
          position: relative;
        }



        .d-none {
            display: block !important;
        }


        /*Configuracion de fondos de textos*/


        .text1 {
        	margin-bottom: 12px;
        	text-align: center;
          color: white;
        }

        .text2{
        	
          margin-bottom: 25px;
          font-size: 18px;
          text-align: center;
        }

        .text3{
        	font-size: 18px;
        	font-style: italic;
        	margin-left: 10%;
        	margin-right: 10%;
        }


        /*Configuracion de comillas*/


        img.tamanocomi {
            width: 30px;
            height: 30px;
        }

        .comilla1{
            margin-top: -15px;	
        }
        .comilla2{
            margin-top: 8px;	
            margin-left: -2px;
        }


        .carousel-caption {
            position: sticky;
            padding-top: 0rem;
            padding-bottom: 4.5rem;

        }


        .carousel-indicators {
            display: none;
        }

        .carousel-control-next{
        	z-index: 0;
        }



/*----------------------------------------------------------------FIN SERVICIOS---------------------------------------------------------------------------------*/

/*----------------------------------------------------------------INICIO PROYECTOS---------------------------------------------------------------------------------*/

        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }    
       

        body, html {
              width: 100%;
              overflow-x: hidden;
            }
           

          #portfolio{
            background-color: #fff;
          }

        .img-fluid{
          width: 80%;
        }

          

       /*PORTFOLIO FILTERS*/
      .portfolio #portfolio-flters {
          list-style: none;
          margin-bottom: 20px;
          padding: 10px;
        }
        
        .portfolio #portfolio-flters li {
          cursor: pointer;
          display: inline-block;
          margin:  0 7px 7px 7px;
          font-size: 15px;
          font-family: 'Rubik', sans-serif;
          font-weight: 600;
          line-height: 1;
          padding: 7px 5px;
          text-align: center;
          text-transform: uppercase;
          color: #444444;
          transition: all 0.3s ease-in-out;
          border: 2px solid #fff;
        }

        .d-flex {
            display: flex !important;
            flex-wrap: wrap !important;
        }
        
        
        .portfolio #portfolio-flters li:hover{
          color: #f3a200;
          border-color:#ffc107;
            
        }
        .portfolio #portfolio-flters li.active {
          color: #f3a200;
          border-color:#FF6A13;
        }
        
        .portfolio .portfolio-item {
          margin-bottom: 30px;
        }
        
        .portfolio .portfolio-item .portfolio-img {
          overflow: hidden;
        }
        
        .portfolio .portfolio-item .portfolio-info {
          opacity: 0;
          position: absolute;
          left: 15px;
          bottom: 0;
          z-index: 0;
          right: 15px;
          background: rgba(0, 0, 0, 0.5);
          padding: 20px 15px;
        }
        
        .portfolio .portfolio-item .portfolio-info h4 {
          font-size: 18px;
          color: #fff;
          font-weight: 600;
          color: #fff;
          margin-bottom: 0px;
        }
        
        .portfolio .portfolio-item .portfolio-info p {
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
          margin-bottom: 0;
        }
        
        .portfolio .portfolio-item .portfolio-info .preview-link,
        .portfolio .portfolio-item .portfolio-info .details-link {
          position: absolute;
          right: 40px;
          font-size: 24px;
          top: calc(50% - 18px);
          color: #fff;
          transition: 0.3s;
        }
        
        .portfolio .portfolio-item .portfolio-info .preview-link:hover,
        .portfolio .portfolio-item .portfolio-info .details-link:hover {
          color: #FF6A13;
        }
        
        .portfolio .portfolio-item .portfolio-info .details-link {
          right: 10px;
        }

        /*CARDS*/
        
      
        .ajust{
          margin: 5px;
          padding: 10px;
        }

        .portfolio-item .card {
          width: 100%; 
          height: 100%; 
        }
        .portfolio-item .card-img-top {
          height: 250px; 
          object-fit: cover; 
          margin-top: 30px;
        }
        .portfolio-item .card-body {
          height: 150px; 
          overflow-y: auto; 
          
        }


      
        .container{
        margin-left:auto;
        margin-right: auto;
        }

        .card-img-top img-fluid {
          height: 200px;
        }

        .custom-width {
        padding-top:15px ;
        
      }

      .card-text{
        text-align: justify;
      }

      
      
      /* MEDIAS*/
      @media (max-width: 768px){
          .portfolio #portfolio-flters li {
           font-size: 15px;
            flex-direction: column;
        }
      }


        @media (max-width: 500px) {
         .portfolio #portfolio-flters li {
            font-size: 15px;
             flex-direction: column;
          }
        }


         @media (max-width: 436px) {
         .portfolio #portfolio-flters li {
            font-size: 15px;
             flex-direction: column;
          }

        }


/*-----------------------------------------------------------------FIN PROYECTOS-------------------------------------------------------------------------------------*/        


/*-----------------------------------------------------------------CONTACTO-------------------------------------------------------------------------------------*/


        #contact{
            background-color: #fff;
            padding-top: 80px;
        }


            .subtitulo {
                text-align: center;
                font-size: 18px;
                margin-top:1%;
            }
    
        
            .contact .info-item+.info-item {
              margin-top: 40px;
            }

            .contact .info-item i {
              color: var(--accent-color);
              background: color-mix(in srgb, var(--accent-color), transparent 92%);
              font-size: 20px;
              width: 44px;
              height: 44px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50px;
              transition: all 0.3s ease-in-out;
              margin-right: 15px;
            }

            .contact .info-item h3 {
              padding: 0;
              font-size: 18px;
              font-weight: 700;
              margin-bottom: 5px;
            }

            .contact .info-item p {
              padding: 0;
              margin-bottom: 0;
              font-size: 14px;
            }

            .contact .info-item:hover i {
              background: var(--accent-color);
              color: var(--contrast-color);
            }

            .contact .php-email-form {
              height: 100%;
            }

            .contact .php-email-form input[type=text],
            .contact .php-email-form input[type=email],
            .contact .php-email-form textarea {
              font-size: 14px;
              padding: 10px 15px;
              box-shadow: none;
              border-radius: 0;
              color: var(--default-color);
              background-color: color-mix(in srgb, var(--background-color), transparent 50%);
              border-color: color-mix(in srgb, var(--default-color), transparent 80%);
            }

            .contact .php-email-form input[type=text]:focus,
            .contact .php-email-form input[type=email]:focus,
            .contact .php-email-form textarea:focus {
              border-color: var(--accent-color);
            }

            .contact .php-email-form input[type=text]::placeholder,
            .contact .php-email-form input[type=email]::placeholder,
            .contact .php-email-form textarea::placeholder {
              color: color-mix(in srgb, var(--default-color), transparent 70%);
            }

            .contact .php-email-form button[type=submit] {
              color: var(--contrast-color);
              background: var(--accent-color);
              border: 0;
              padding: 10px 30px;
              transition: 0.4s;
              border-radius: 50px;
            }

             .contact .php-email-form button[type=submit]:hover{
                background:#F8B229;
             }
          


            /* PHP Email Form Messages
            ------------------------------*/
            .php-email-form .error-message {
              display: none;
              background: #df1529;
              color: #ffffff;
              text-align: left;
              padding: 15px;
              margin-bottom: 24px;
              font-weight: 600;
            }

            .php-email-form .sent-message {
              display: none;
              color: #ffffff;
              background: #059652;
              text-align: center;
              padding: 15px;
              margin-bottom: 24px;
              font-weight: 600;
            }

            .php-email-form .loading {
              display: none;
              background: var(--surface-color);
              text-align: center;
              padding: 15px;
              margin-bottom: 24px;
            }

            .php-email-form .loading:before {
              content: "";
              display: inline-block;
              border-radius: 50%;
              width: 24px;
              height: 24px;
              margin: 0 10px -6px 0;
              border: 3px solid var(--accent-color);
              border-top-color: var(--surface-color);
              animation: php-email-form-loading 1s linear infinite;
            }

            @keyframes php-email-form-loading {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }

            /*--------------------------------------------------------------
            #Global Sections
            --------------------------------------------------------------*/
         
        
            
            .section1 {
              color: var(--default-color);
              background-color: var(--background-color);
              padding: 100px 0;
              scroll-margin-top: 100px;
              overflow: clip;
            }

            @media (max-width: 1199px) {

             
              .section {
                scroll-margin-top: 66px;
              }

              .section1 {
                scroll-margin-top: 66px;
              }
            }

            /*--------------------------------------------------------------
            #Global Section Titles
            --------------------------------------------------------------*/
            .section-title {
              padding-bottom: 60px;
              position: relative;
            }

            .section-title h2 {
              font-size: 14px;
              font-weight: 500;
              padding: 0;
              line-height: 1px;
              margin: 0;
              letter-spacing: 1.5px;
              text-transform: uppercase;
              color: color-mix(in srgb, var(--default-color), transparent 50%);
              position: relative;
            }

            .section-title h2::after {
              content: "";
              width: 120px;
              height: 1px;
              display: inline-block;
              background: var(--accent-color);
              margin: 4px 10px;
            }

            .section-title div {
              color: var(--heading-color);
              margin: 0;
              margin: 0;
              font-size: 28px;
              font-weight: 700;
              text-transform: uppercase;
              font-family: var(--heading-font);
            }



            .contact .social-links a {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
              font-size: 16px;
              color: color-mix(in srgb, var(--default-color), transparent 30%);
              margin-right: 10px;
              transition: 0.3s;
            }

            .contact .social-links a:hover {
              color: var(--accent-color);
              border-color: var(--accent-color);
            }
                                    
               

 /*-----------------------------------------------------------------------FIN CONTACTO-------------------------------------------------------------------------*/

               

 


 /*--------------------------------------------------------------------------MARCAS----------------------------------------------------------------------------*/


            .container slider {
                width: 100%;
                max-width: 1200px; 
                margin: 0 auto; 
                padding: 20px 0; 
            }

            .swiper-slide img{
                width: 100%;
                height: auto;
                object-fit: contain;
            }

            .swiper {
                width: 100%;
                height: auto;
                max-width: 100%;
            }

            .swiper-wrapper {
                display: flex;
                align-items: center;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: transparent; 
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .swiper-slide img {
                width: 80%; 
                height: auto;
            }


            .swiper-pagination-bullet {
                background-color: #fff; 
                opacity: 0.7;
            }

            .swiper-pagination-bullet-active {
                background-color: #007bff; 
            }

/*----------------------------------------------------------------------FIN MARCAS-----------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------CHAT------------------------------------------------------------------------------------------*/

      /*Contenedor del chat*/
      .chat-container {
          width: 325px; /*Reduce el ancho del contenedor del chat*/
          background-color: #fff;
          border: 1px solid #ccc;
          border-radius: 5px;
          overflow: hidden;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          position: fixed;
          bottom: 70px;
          right: 20px;
          display: none; /*Ocultar el chat por defecto*/
          z-index: 2;
      }

      /*Ventana del chat*/
      .chat-window {
          height: 290px; /*Reduce la altura de la ventana del chat*/
          padding: 10px;
          overflow-y: auto;
          border-bottom: 1px solid #ccc;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          z-index: 1;
      }

      /* Respuesta del chat */
      .message {
          padding: 5px; /*Reduce el espacio alrededor de los mensajes*/
          margin: 5px 0; /*Reduce el espacio entre los mensajes*/
          border-radius: 5px;
          background-color: #e9efff;
          width: fit-content;
          color:black;
          align-items: flex-start;
          max-width: 75%;
          z-index: 1;
          font-size: 15px;
      }

      /*Mensajes que envía el usuario*/
      .message.mine {
          margin-top: 10%;
          background-color: #ffc10778;
          align-self: flex-end;
          z-index: 1;
          font-size: 15px;
      }

      /*Cuadro y botón enviar*/
      #chat-form {
          display: flex;
          padding: 10px;
         
      }

      /*Cuadro donde se envía el mensaje*/
      #message-input {
          flex: 1;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
          margin-right: 10px;
          width: 45px;
          font-size: 15px;
         
      }

      /*Botón enviar*/
      button.chat {
          height: 45px;
          width: 60px;
          background-color:#ffc107;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 15px;
          
         
      }

      button.chat:hover {
          background-color:#044c56;
      }

      /*Cierra el chat*/
      #close-chat-btn {
          position: absolute;
          top: 5px;
          right: 5px;
          background-color: transparent;
          border: none;
          font-size: 20px;
          cursor: pointer;
          color: red;
          font-weight: bold; 
        
      }

      /*Icono del chat*/
      .chat-icon {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: #044c56;
          color: #fff;
          border-radius: 50%;
          padding: 10px;
          cursor: pointer;
          font-size: 18px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1;
      }

      .chat-icon:hover {
          background-color: #ffc107;
      }



/*-------------------------------------------------------------------FIN CHAT------------------------------------------------------------------------------------------*/ 


/*----------------------------------------------------------------------ANIMACIONES-------------------------------------------------------------------------------------*/ 


            .circle{
                 transition: transform 0.3s, box-shadow 0.3s;
            }


            .circle:hover {
                transform: scale(1.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .chat-icon {
            animation: scaleAnimation 1s infinite;
          }

            @keyframes scaleAnimation {
              0% {
                transform: scale(1);
              }
              50% {
                transform: scale(1.2);
              }
              100% {
                transform: scale(1);
              }
            }



            .flecha{
                 transition: transform 0.3s, box-shadow 0.3s;
            }


            .flecha:hover {
                transform: scale(1.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }


             .clients .client-logo img{
                 transition: transform 0.3s;
            }


            .clients .client-logo img:hover {
                transform: scale(1.2);
                
            }

             .media{
                 transition: transform 0.3s, box-shadow 0.3s;
            }


            .media:hover {
                transform: scale(1.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .share{
                 transition: transform 0.3s, box-shadow 0.3s;
            }


            .share:hover {
                transform: scale(1.1);
            }


            .services{
            }



             .services:hover {
                 border-bottom: solid 5px #FF6A13;
            }


              .container-phone::before {
              content: '';
              position: absolute;
              top: 100%; 
              left: 0;
              width: 100%;
              height: 100%;
              background-color: #ffc107; 
              z-index: 1; 
              border-radius: 5px; 
              transition: transform 0.3s ease-in-out; 
            }

            .container-phone:hover::before {
              transform: translateY(-100%); 
            }

            .container-phone * {
              position: relative;
              z-index: 2; 
            }


            .container-txt:hover .icon i{
                color: white;
            }


            .container-phone:hover .icon i{
                color: white;
            }



            .container-media:hover .icon i{
                color: white;
            }


            .container-txt::before{
              content: '';
              position: absolute;
              color: white;
              top: 100%; 
              left: 0;
              width: 100%;
              height: 100%;
              background-color: #ffc107; 
              z-index: 1; 
              border-radius: 5px; 
              transition: transform 0.3s ease-in-out; 
            }

            .container-txt:hover::before {
              transform: translateY(-100%); 

            }

            .container-txt * {
              position: relative;
              z-index: 2; 
            }



            .container-media::before{
              content: '';
              position: absolute;
              color: white;
              top: 100%; 
              left: 0;
              width: 100%;
              height: 100%;
              background-color: #ffc107; 
              z-index: 1; 
              border-radius: 5px; 
              transition: transform 0.3s ease-in-out; 
            }

            .container-media:hover::before {
              transform: translateY(-100%); 

            }

            .container-media * {
              position: relative;
              z-index: 2; 
            }


/*------------------------------------------------------------------FIN ANIMACIONES-------------------------------------------------------------------------------------*/ 

            .reveal {
              opacity: 0;
              transition: opacity 0.5s ease-in;
            }

            .reveal.active {
              opacity: 1;
            }


/*--------------------------------------------------------------------------MARCAS----------------------------------------------------------------------------*/
          .clients {
              padding: 20px 0;
          }

         .clients .client-logo {
           display: flex;
           justify-content: center;
           align-items: center;
          overflow: hidden;
         }

        .clients .client-logo img {
         padding: 20px 20px;
         max-width: 100%;

        }

 

       @media (max-width: 640px) {
        .clients .client-logo img {
        padding: 20px;
      }
    }

/*----------------------------------------------------------------------FIN MARCAS-----------------------------------------------------------------------------------*/

/*------------------------------------------------------------------FIN CSS-------------------------------------------------------------------------------------*/