.d-flex {
  letter-spacing: 0.2rem !important;
}

.container {
  margin-top:3%;
  margin-bottom: 10%;
  /* padding-left: 0; */
  /* padding-right: 0; */
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial;
  font-weight:700;
}

.fancyTab, .fancyTab1 {
	text-align: center;
  /* padding:15px 0; */
  /* background-color: #ff585f;
	box-shadow: 0 0 0 1px #ddd; */
	top:;	
  transition: top .2s;
  border-radius: 10px;
}

.fancyTab.active, .fancyTab1.active {
  top:0;
  transition:top .2s;
}

.whiteBlock {
  display:none;
}

.fancyTab.active .whiteBlock, .fancyTab.active1 .whiteBlock {
  display:block;
  height:2px;
  bottom:-2px;
  background-color:;
  width:99%;
  position:absolute;
  z-index:1;
}

.fancyTab a, .fancyTab1 a {
	font-family: Arial;
	font-size:1.35em;
	font-weight:300;
  transition:.2s;
  color:#fff;
}

/*.fancyTab .hidden-xs {
  white-space:nowrap;
}*/

.hidden-xs {
  font-weight: bolder;
  vertical-align: middle;
}

.fancyTabs, .fancyTabs1 {
	border-bottom:0px solid #ddd;
  margin: 0 0 0;
  padding-bottom: 10px;
}

li.fancyTab a, li.fancyTab1 a {
  padding-top:;
  top:;
  padding-bottom:0;
}

li.fancyTab.active a, li.fancyTab1.active a {
  padding-top: inherit;
}

.fancyTab .fa, .fancyTab1 .fa {
  font-size: 40px;
	width:100%;
	padding: 15px 0 5px;
  color:#666;
}

.fancyTab.active .fa, .fancyTab1.active .fa {
  color: #cfb87c;
}

.fancyTab a:focus, .fancyTab1 a:focus {
	outline:none;
}

.fancyTabContent, .fancyTab1Content {
  border-color: transparent;
  box-shadow: 0 -2px 0 -1px #fff, 0 0 0 1px #ddd;
  /* padding: 30px 0px 0px; */
  position:relative;
  background-color:#fff;
  border-radius: 10px;
}

.nav-tabs > li.fancyTab.active > a, 
.nav-tabs > li.fancyTab.active > a:focus,
.nav-tabs > li.fancyTab.active > a:hover,
.nav-tabs > li.fancyTab1.active > a, 
.nav-tabs > li.fancyTab1.active > a:focus,
.nav-tabs > li.fancyTab1.active > a:hover {
	border-width:0;
}

.nav-tabs > li.fancyTab:hover, .nav-tabs > li.fancyTab1:hover {
	background-color:;
	/* box-shadow: 0 0 0 1px #ddd; */
}

.nav-tabs > li.fancyTab.active:hover, .nav-tabs > li.fancyTab1.active:hover {
  background-color:;
  box-shadow: 1px 1px 0 1px #fff, 0 0px 0 1px #ddd, -1px 1px 0 0px #ddd inset;
}

.nav-tabs > li.fancyTab:hover a, .nav-tabs > li.fancyTab1:hover a {
	border-color:transparent;
}

.nav.nav-tabs .fancyTab a[data-toggle="tab"], .nav.nav-tabs .fancyTab1 a[data-toggle="tab"] {
  background-color:transparent;
  border-bottom:0;
}

.nav-tabs > li.fancyTab:hover a, .nav-tabs > li.fancyTab1:hover a {
  border-right: 1px solid transparent;
}

.nav-tabs > li.fancyTab > a, .nav-tabs > li.fancyTab1 > a {
	margin-right:0;
	border-top:0;
  /* padding-bottom: 30px;
  margin-bottom: -30px; */
}

.nav-tabs > li.fancyTab, .nav-tabs > li.fancyTab1 {
	margin-right:0;
	margin-bottom:0;
}

.nav-tabs > li.fancyTab:last-child a, .nav-tabs > li.fancyTab1:last-child a {
  border-right: 1px solid transparent;
}

.nav-tabs > li.fancyTab.active:last-child, .nav-tabs > li.fancyTab1.active:last-child {
  border-right: 0px solid #ddd;
	box-shadow: 0px 2px 0 0px #fff, 0px 0px 0 1px #ddd;
}

.fancyTab:last-child, .fancyTab1:last-child {
  /* box-shadow: 0 0 0 1px #ddd; */
}

.tabs .nav-tabs li.fancyTab.active a, .tabs .nav-tabs li.fancyTab1.active a {
	box-shadow:none;
  top:0;
}


.fancyTab.active, .fancyTab1.active {
  background: #fff;
	box-shadow: ;
  padding-bottom:;
}

.arrow-down {
	display:none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 22px solid #ddd;
  position: absolute;
  top: -1px;
  left: calc(50% - 20px);
}

.arrow-down-inner {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 12px solid #fff;
  position: absolute;
  top: -22px;
  left: -18px;
}

.fancyTab.active .arrow-down, .fancyTab1.active .arrow-down {
  display: block;
}

.box {
  height: 560px;  
  display: flex;
  justify-content: center;
  font-size:13px;
  
 }
 
.frame {
  width: 420px;
  height: 600px;
  /* padding-top: 50px; */
  padding-bottom: 5px;
}	

#myTabContent {
  display: none;
}


/* @media (max-width: 1200px) {  
  .fancyTab .fa {
  	font-size: 36px;
  }  
  .fancyTab .hidden-xs {
    font-size:22px;
	}	
}	
@media (max-width: 992px) {    
  .fancyTab .fa {
  	font-size: 33px;
  }    
  .fancyTab .hidden-xs {
  	font-size:18px;
    font-weight:normal;
  }	
}	 */
#Img_serv {display: block;}
#Img_serv1 {display: none;}

@media (max-width: 590px) {	   
  .fancyTab > a, .fancyTab1 > a {
    font-size:18px;
  }    
  .nav > li.fancyTab > a, .nav > li.fancyTab1 > a {    
    margin-bottom:inherit;
  }    
  .fancyTab .fa, .fancyTab1 .fa {
    font-size:30px;
  }    
  .nav-tabs > li.fancyTab > a, .nav-tabs > li.fancyTab1 > a {
    border-right:1px solid transparent;
    padding-bottom:0;
  }    
  .fancyTab.active .fa, .fancyTab1.active .fa {
    color: #333;
	}
  .frame {
    width: 100%;
    height:;    
	}	
  .box {
    height: 730px;
    margin-top: 10px;  
   }
  .box div p {
    font-size:15px;
   }
   #Img_serv {display: none;}
   #Img_serv1 {display: block;}
   .container {
    padding-right: 0;
    padding-left: 0;
  }  


  /* 1. Contenedor Principal: Pone los dos GRUPOS uno al lado del otro */
.contenedor-botones1 {
  /* Habilitar Flexbox */
  display: flex;
  /* Organizar los elementos de arriba a abajo */
  flex-direction: column;
  /* Añadir espacio entre los elementos si se desea */
  gap: 20px; 
}

/* 2. Grupos Izquierdo: Los botones van APILADOS (Columna) */
.grupo-izquierdo1 {
  display: flex;/* Apila los elementos verticalmente */
  flex-direction: column; 
  gap: 28px; 
  order: 2;
}

/* 2.1. Estilo para las imágenes del Grupo Izquierdo (Aumentar tamaño) */
.grupo-izquierdo1 img {
  width: 140px !important; /* Por ejemplo, 160px */
  height: auto !important; /* Mantiene la proporción */
  /* Si el margen auto ya lo tienes in-line, esto lo complementa */
  display: block;
  margin: auto;
}

/* 3. Grupos Derecho: Los botones van en una FILA (Horizontal) */
.grupo-derecho1 {
  display: flex;/* La dirección por defecto de Flexbox es 'row', pero lo especificamos para claridad */
  flex-direction: row; /* Añade un espacio horizontal entre el botón MOVI y TU MOVILNET */
  gap:30px; /* Para que el grupo derecho quede alineado con el primer botón izquierdo, 
     probablemente no necesites un 'align-items' en el .grupo-derecho. 
     Con que los anclas <a> ya están centrando las imágenes con CSS in-line, debería verse bien. */
     order: 1;
     margin: auto;
}


/* 3.1. Estilo para las imágenes del Grupo Derecho (Para que no se corten y su tamaño deseado) */
.grupo-derecho1 img {
  width: 130px !important; /* Aumenta este valor (ej: 200px) para que se vea el botón completo.
                            Si la imagen original es más ancha, esto la escalará. */
  height: auto !important; /* Mantiene la proporción de la imagen */
  display: block; /* Necesario para que el "margin: auto" funcione y centre si el padre es más grande */
  margin: auto; /* Centra la imagen dentro de su etiqueta <a> */
}

/* Opcional: Estilos para las anclas <a> si quieres que ocupen todo el ancho y no solo la imagen */
.grupo-izquierdo a, 
.grupo-derecho a {
    /* Esto ayuda a que el área de clic sea el tamaño de la imagen */
    line-height: 0; 
}

.imagen-boton1:active {
  /* 1. Mover hacia abajo para simular hundimiento */
  transform: translateY(4px); 

  /* 2. Reducir la sombra exterior */
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.4), /* Sombra exterior muy pequeña */
    inset 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra 'inset' para el borde interior (Opcional) */
}
    
}

 @media (max-width: 362px) {	
  .fancyTabContent, .fancyTab1Content {
    padding: 0px 0px 0px;
  }
  .box {
    height: 740px;  
   }
   .frame {
    height:;    
	}	
}

/*-------------- POPUP--------------*/
.popup {
  display: none;
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0em;
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  /* background-color: #000000; */
  border-radius: 10px;
  text-align: center;
  z-index: 1000;
  filter: Alpha(Opacity=70);
  opacity:0.7;
  transition: opacity 0.5s;
}

.popup.show {
  display: block;
  opacity: 0.9;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

/* 1. Contenedor Principal: Pone los dos GRUPOS uno al lado del otro */
.contenedor-botones {
  display: flex; /* Separa los grupos al máximo posible */
  flex-direction: row-reverse; /* Alinea el inicio de ambos grupos */
  align-items: flex-start; 
}

/* 2. Grupos Izquierdo: Los botones van APILADOS (Columna) */
.grupo-izquierdo {
  display: flex;/* Apila los elementos verticalmente */
  flex-direction: column; 
  gap: 30px; 
  }

/* 2.1. Estilo para las imágenes del Grupo Izquierdo (Aumentar tamaño) */
.grupo-izquierdo img {
  width: 180px !important; /* Por ejemplo, 160px */
  height: auto !important; /* Mantiene la proporción */
  /* Si el margen auto ya lo tienes in-line, esto lo complementa */
  display: block;
  margin: auto;
}

/* 3. Grupos Derecho: Los botones van en una FILA (Horizontal) */
.grupo-derecho {
  display: flex;/* La dirección por defecto de Flexbox es 'row', pero lo especificamos para claridad */
  flex-direction: row; /* Añade un espacio horizontal entre el botón MOVI y TU MOVILNET */
  gap: 50px; /* Para que el grupo derecho quede alineado con el primer botón izquierdo, 
     probablemente no necesites un 'align-items' en el .grupo-derecho. 
     Con que los anclas <a> ya están centrando las imágenes con CSS in-line, debería verse bien. */
}


/* 3.1. Estilo para las imágenes del Grupo Derecho (Para que no se corten y su tamaño deseado) */
.grupo-derecho img {
  width: 250px !important; /* Aumenta este valor (ej: 200px) para que se vea el botón completo.
                            Si la imagen original es más ancha, esto la escalará. */
  height: auto !important; /* Mantiene la proporción de la imagen */
  display: block; /* Necesario para que el "margin: auto" funcione y centre si el padre es más grande */
  margin: auto; /* Centra la imagen dentro de su etiqueta <a> */
}

/* Opcional: Estilos para las anclas <a> si quieres que ocupen todo el ancho y no solo la imagen */
.grupo-izquierdo a, 
.grupo-derecho a {
    /* Esto ayuda a que el área de clic sea el tamaño de la imagen */
    line-height: 0; 
}

.imagen-boton:active {
  /* 1. Mover hacia abajo para simular hundimiento */
  transform: translateY(4px); 

  /* 2. Reducir la sombra exterior */
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.4), /* Sombra exterior muy pequeña */
    inset 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra 'inset' para el borde interior (Opcional) */
}

    .imagen-boton:hover {
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.25), /* Un poco más de elevación en hover */
    0 8px 8px rgba(0, 0, 0, 0.3);
}

.imagen-boton {  
  
  /* 2. Mantenemos el mismo radio de borde en la imagen */
  border-radius: 12px; 
  cursor: pointer;
 
}