:root {
        --white: #FFFFFF;
        --black: #000000;
        --very-light-pink: #C7C7C7;
        --text-input-field: #F7F7F7;
        --hospital-green: #ACD9B2;
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
    }           


    /* general styles */
  
    :root {
       --clr-neutral-100: hsl(0, 0%, 100%);
       --clr-primary-100: hsl(205, 15%, 58%);
       --clr-primary-400: hsl(215, 25%, 27%);
       --clr-primary-800: hsl(217, 33%, 17%);
       --clr-primary-900: hsl(218, 33%, 9%);
    }  

    body{
         margin:0;
         font-family:Arial, Helvetica, sans-serif;
         background:#f4f5f7; 
         font-family: 'Quicksand', sans-serif;
    }
     
     /* whatsapp*/
    .whatsapp-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
        background-color: #25d366;
        border-radius: 50px; 
        width: 60px; 
        height: 60px; 
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease-in-out; 
        animation: efecto 1.2s infinite;
    }
    .whatsapp-button img {
        width: 50px;
    }
    .whatsapp-button:hover {
        transform: scale(1.1);
        transition: 0.3s;
    }

    
     /* boton de llamada */

    .llamadas-button{
        position: fixed;
        bottom: 90px;
        right: 20px;
        z-index: 999;
       /* background-color: #25d366;*/
        border-radius: 50px; 
        width: 60px; 
        height: 60px; 
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s ease-in-out; 
    }
    .llamadas-button img {
        width: 50px;
    }
    .llamadas-button:hover {
        transform: scale(1.1);
    }
    
   
    /* pie de pagina */
    footer {
        background-color: #05060a!important;
        color: #fff;
        text-align: left;
        border-bottom: 0px solid var(--very-light-pink);
        padding: 20px;  
    }

    .copyright
    {
        margin: 0px 0px 0px 50px;
        font-size: 14px;
        color: #ffffff;
    }
    .s-s {
        background-color: #2a2a2b!important;
        color: #ffff;
        border-bottom: 0px solid var(--very-light-pink);
        padding: 60px;
        text-align: justify;
        text-justify: center;
        font-size: 14px;  
    }
    .ss1 {
        display: flex;
    }
     .sobre-nosotros {
        border: 0px solid #ddd;
        margin: 50px;
        text-align: justify; 
        font-size: 14px;  
       
    }
    .experiencia {
        border: 0px solid #ddd;
        margin: 50px;
        text-align: justify; 
         font-size: 14px;  
    }

    /* formulario de contacto */

    .marcas-img {
         height: 60px;
         margin: 0 10px;
         width:100%;
         max-width:500px;
         background:#ffffff;
         padding:5px;
         border-radius:12px;
         box-shadow:0 8px 20px rgba(0,0,0,.15);
    }

    .marcas-conocemos{
        text-align: center;
        background-color: #4985a3e7!important;
        background-image: linear-gradient(90deg, rgba(187, 202, 50, 0.8), rgba(68, 109, 136, 0.8), rgba(28, 100, 148, 0.8)), url("./IMAGEN/MESA-DE-TALLER-CON-LAS-HERRAMIENTAS-IMPRESCINDIBLES-QUE-NO-PUEDEN-FALTAR-EN-CASA-NI-EN-EL-TRABAJO.webp");
        background-size: cover;
        color: #ece8e8;
        border-bottom: 0px solid var(--very-light-pink); 
        font-size: 30px;
        padding: 30px;
        font-weight: bold;

    }

    .contacto4{
        display:flex;
        justify-content:right;
        align-items:center;
        min-height:100vh;
    
    }
    .repair-service{
        width: 24%;
        height: 100%;
        border-radius:12px;
        display:flex;
    }
    .repair-service2{
        width: 29%;
        height: 100%;
        border-radius:12px;
        display:flex;
    }

     .repair-service3{
        width: 50%;
        height: 100%;
        border-radius:12px;
        display:flex;
    }
 
    .cuadro-formulario {
        display: flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
        padding:50px;
    }

    .formulario{
        width:100%;
        max-width:500px;
        background:#ffffff;
        padding:30px;
        border-radius:12px;
        box-shadow:0 8px 20px rgba(0,0,0,.15);
    }

    .formulario h2{
        text-align:center;
        color:#003366;
        margin-bottom:20px;
    }

    .formulario input, .formulario select, .formulario textarea{
        width:100%;
        padding:14px;
        margin-bottom:15px;
        border:2px solid #e0d204;
        border-radius:8px;
        font-size:16px;
        box-sizing:border-box;
        outline:none;
    }

    .formulario input:focus, .formulario select:focus, .formulario textarea:focus{
        border-color:#0077cc;
    }

    .formulario textarea{
        resize:vertical;
    }

    .formulario button{
        width:40%;
        padding:14px;
        background:#0077cc;
        color:#fff;
        border:none;
        border-radius:8px;
        font-size:16px;
        cursor:pointer;
    }

    .formulario button:hover{
        background:#005fa3;
    }
    .privacidad{
        display:flex;
        align-items:flex-start;
        gap:10px;
        margin:15px 0;
        font-size:14px;
        color:#333;
        line-height:1.4;
    }

    .privacidad input{
        margin-top:3px;
        width:18px;
        height:18px;
        cursor:pointer;
    }

    .privacidad a{
        color:#0077cc;
        text-decoration:none;
        font-weight:bold;
    }

    .privacidad a:hover{
        text-decoration:underline;
    }
 

/* contador */

    .contador{
        display:flex;
        justify-content:center;
        gap:20px;
        flex-wrap:wrap;
        padding:60px 20px;
        display: flex;
        background-color: #000000;
    }

    .caja{
        width:180px;
        background:#000000;
        padding:25px;
        text-align:center;
        border-radius:10px;
        box-shadow:0 5px 15px rgba(0,0,0,.1);
    }

    .numero{
        font-size:42px;
        color:#e4d50a;
        margin:0;
    }

    .caja p{
        margin-top:10px;
        color:#fcf9f9;
        font-size:16px;
    }

    .logo-cliente{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 20px;
        background-size: cover;
        background-color: #f3f2eb;
    }

    .servicio-tecnico{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 20px;
        background-size: cover;
    }
    .numero-celular{
        text-align: center;
        font-size: 80px;
        color: #000000;
       
    }
   
    /* tamano del titulo */
    h1,h2,h3{
        color: #000000;
        padding-bottom: 0px;
        line-height: 1em;
        font-weight: 800;
    }
    .Negrita-texto{
        font-weight: bold;
        color: #000000;
        
    }

    h1 {
        font-size: 35px;
    }
    h2 {
       font-size: 26px;
    }
    h3 {
       font-size: 20px;
    }

    .numero3 {
        font-size: 36px;

    }
    
/* regreso a la pagina inicial */
   
/* tamano de las img */
    .logo1,.logo2,.logo3 {
        width: 310px;
    }
    .logo2 {
        width: 400px;
        height: 240px;
    }
    .logo3 {
        height: 260px;
        padding: 20px 0;
    }


/* encabezado de la pagina */
    nav {
        
        background-color: #f7bb15!important;
        display: flex;
        justify-content: space-between;
        padding: 20px 20px;
        border-bottom: 0px solid var(--very-light-pink);
       
    }
    .navbar-right ul {
        
        list-style: none;
        padding: 0;
        margin: 0px;
        display: flex;
        align-items: center;
        height: 60px;          
    }
    .navbar-right {
        display: flex; 
    }
    .navbar-right ul li a { 
        text-decoration: none;
       /* color: var(--very-light-pink); */
        border: 0px solid var(--white);
        padding: 8px;
        border-radius: 8px;
    }
    .navbar-right ul li a:hover { 
        border: 0px solid var(--hospital-green);
        color: var(--hospital-green);
    }
    .inactive {
        display: none;
    }
    .mobile-menu {
        position: absolute;
        top: 70px;
        padding: 0px 10px;
        right: 0px;
        background-color: #f7bb15;
    }
    .mobile-menu a {
        text-decoration: none;
        color: black;
        font-weight: bold;
        margin-bottom: 24px;
    }
    .mobile-menu ul {
        padding: 0;
        margin: 24px 0 0;
        list-style: none;  
    }
    .mobile-menu ul:nth-child(1) {
        border-bottom: 0px solid var(--very-light-pink); 
    }
    .mobile-menu ul li {
        margin-bottom: 24px; 
    }
    
    /* samsung lg */
    .inactive-2 {
        display: none;
    }
    .samsung-lg {
        position: absolute;
        top: 70px;
        padding: 20px 20px;
        right: 0px;
        background-color: #f7bb15;
    }
    .samsung-lg a {
        text-decoration: none;
        color: black;
        font-weight: bold;
        margin-bottom: 28px;
    }
    .samsung-lg ul {
        padding: 0;
        margin: 24px 0 0;
        list-style: none;  
    }
    .samsung-lg ul:nth-child(1) {
        border-bottom: 0px solid var(--very-light-pink); 
    }
    .samsung-lg ul li {
        margin-bottom: 24px; 
    }
    .marcas, .marcas2 {
        cursor: pointer;
        color:#000000;
        text-decoration: none;
        font-size: 20px;
    }

    .marcas3 {
        cursor: pointer;
        color:#000000;
        text-decoration: none;
        font-size: 20px;
    }

    /*menu hamburguesa*/
    
    .bars__menu {
        width: 30px;
        height: 30px;
        cursor: pointer;
        display: none;
        margin: 20px;
    }
    .bars__menu span {
        display: block;
        width: 100%;
        height: 2px;
        background: black;
        margin-top: 6px;
        transform-origin: 0px 100%;
        transition: all 600ms;
    }
    .activeline1__bars_menu {
        transform: rotate(45deg) translate(-2px, 1px);
    }
    .activeline2__bars_menu {
        opacity: 0;
        margin-left: -30px;
    }
    .activeline3__bars_menu {
        transform: rotate(-45deg) translate(-4px, 2px);

    }


    .mantenimiento1 {
        text-align: right;
        background-image: linear-gradient(rgba(255, 255, 255, 0.432)), url("./IMAGEN/para modificar animado2.jpg");
        background-size: cover;
        color: #ece8e8;
        border-bottom: 0px solid var(--very-light-pink); 
        font-size: 54px;
        padding: 200px 50px;
        
      
    }
        
    .mantenimiento2{
        padding: 50px;
        margin:  0 -10px;
        
    }

    .mantenimiento3{
        text-align: center;
        background-color: #daa514!important;
        background-image: linear-gradient(rgba(238, 184, 5, 0.945), rgba(238, 184, 5, 0.945)), url("./IMAGEN/img3.jpg");
        padding: 50px;
        text-transform: capitalize;
    
    }


    /* logos*/
    .logos {
        background: #e6eeee;
        display: flex;
        justify-content: center;
        align-items: center; 
        display: grid;
        grid-template-columns: repeat(auto-fill, 240px);
        gap: 20px;
        place-content: center; 
    }
    .logo-samsung {
        padding: 0 30px;
        border: 0px solid white;
        border-radius: 8px;
    }
    .logo-lg {
        border: 0px solid white;
        padding: 0 70px;
        border-radius: 8px;
    }
    .logo-mabe {
       
        
        width: 100px;
       
    } 

    .logo {
        width: 80%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    .logo-sony {
        border: 0px solid white;
        border-radius: 8px;
        margin: 0 40px;
    }
    .untitled-total {
        border: 0px solid #ddd;
        display: flex;
        background-color: #c5caca;
     
    }

    .untitled-total2 {
        border: 0px solid #ddd;
        display: flex;
        background-color: #c5caca;
     
    }

     .untitled-total3 {
        border: 0px solid #ddd;
        display: flex;
        background-color: #c5caca;
     
    }

    .untitled {
        border: 0px solid #ddd;
        padding: 30px;
        text-align: justify;
    }
    .untitled2 {
        border: 0px solid #ddd;
        padding: 30px;
        text-align: justify;  
    }
    .untitled3 {
        border: 0px solid #ddd;
        padding: 30px;
        text-align: justify;  
    } 

    
    .testimonial {
        width: 250px;
        height: 340px;
        background-color: #ffff;
        border: 1px solid #ddd;
       /*border-radius: 10px;*/
        margin: 16px auto;
        padding: 30px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        text-align: center;
        display: grid; 
        position: 0px;       
    }
    .comillas {
        margin: -50px 0 30px;
    }
    .testimonial-orden {
        display: flex;
        padding: 12px 50px;
    }
    
    .resenas {
        text-align: center;
        background-color: #00000c!important;
        color: #fff;
        text-align: center;
        border-bottom: 0px solid var(--very-light-pink); 
        font-size: 22px;
        padding: 40px;
        font-weight: bold;
    }
    .fotos {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 20px;
        background-size: cover;
    }
    .name {
        font-size: 17px;
        font-weight: bold;
        text-align: left;
    }
   
    .contactos {
        vertical-align: baseline;
        background: 0 0;
        text-align: center;
    } 
    .contactos1 {
       text-align: center;
       color: #000000;
    }       
    .numero-contacto {
       text-decoration: none;
    } 
    .numero-celular2 {
        text-align: center;
        font-size: 17px;
        color: #ffff;
        text-decoration: none;
    }

     /*SCROLL*/

    .body3 {
       display: grid;
       min-block-size: 10vh;
       place-content: center;
       margin: 0px 0px -80px 0px;
     
     }

    .scroller {
       max-width: 1200px;
    }
  
    .scroller__inner {
       padding-block: 0px;
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
       align-items: center;
    
   }
  
    .scroller[data-animated="true"] {
    
       overflow: hidden;
       -webkit-mask: linear-gradient(
        90deg,
        transparent,
        white 20%,
        white 80%,
        transparent
       );
       mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    }
  
    .scroller[data-animated="true"] .scroller__inner {
       width: max-content;
       flex-wrap: nowrap;
       animation: scroll var(--_animation-duration, 10s)
       var(--_animation-direction, forwards) linear infinite;
    }
  
    .scroller[data-direction="right"] {
       --_animation-direction: reverse;
    }
 
    .scroller[data-speed="fast"] {
       --_animation-duration: 20s;
    }

   /* @Media */
  
   @keyframes scroll {
       to {
       transform: translate(calc(-50% - 0.5rem));
    
    }
    }
  

    @keyframes efecto {
        0% {
            box-shadow: 0 0 0 0 rgba(22, 54, 7, 0.822);
        }

        100% {
            box-shadow: 0 0 0 25px rgba(126, 224, 80, 0);
        }
    }

    @media (max-width: 500px){

    .bars__menu { display: block;}
    .navbar-right ul { display: none;}

    }


 @media (max-width: 950px) {

     .untitled-total2 {
        display: grid;
    }

    .untitled-total3 {
        display: grid;
    }


 }

    @media (max-width: 900px) {

   
    
    .numero-celular{
        text-align: center;
        font-size: 40px;
        color: #000000;
       
    }

    .logo1,.logo3, .logo2 {
        width: 100%;
    }
    .testimonial {
        width: 200px;
    }
    .logos{
        grid-template-columns: repeat(auto-fill, 240px);
        gap: 20px;
    }
    h3 {
        text-align: center;
        font-size: 22px;
    }
    .testimonial-orden {
        display: grid;
    }
    .ss1 { display: grid;}
    .ss { padding: 10px; }
    .contactos{ text-align: center;}

   
    .untitled-total {
        display: grid;
    }
    }

    @media (max-width: 1700px) {
    .untitled-total {
        display: grid;
    }

   
   
    }  


    @media (max-width: 1200px){


    .cuadro-formulario {
        display: grid;
   
   }

    .repair-service{
       width: 70%;
       height: 100%;

    }

    .ss1{
        display: grid;
      
    }

    }


    @media (max-width: 900px) {

    .contacto4{
        width: 100%;
    }
    

    .repair-service {
       width: 100%;
       height: 100%;
    }
    
    .repair-service2{
       width: 100%;
       height: 100%;
    }
     
    .repair-service3{
       width: 100%;
       height: 100%;
    }


    .ss1{
      display: grid;
      
    }

    .experiencia{
        display: grid;
        text-align:center;
        
    }

    .cuadro-formulario {
    display: grid;
   
   }

    .mantenimiento2{
        text-align: center;
        font-size: 40px;

     }


    .mantenimiento1{
        padding: 0px 0px;
       
    }

    }

    @media (max-width: 500px) {

    .mantenimiento2{
        text-align: center;
        font-size: 32px;  
       
    }

    .mantenimiento4{
        text-align: center;
        font-size: 25px;
       
       
    }

    .mantenimiento5{
        text-align: center;
        font-size: 25px;
       
    }

    }