/************
1. 1800px
************/

@media only screen and (max-width: 1800px)
{

	.header {
		height: 110px;
	}

	.logo1 a {
		font-size: 65px;
	}
	.logo1 img {
		max-height: 100px;
	}

	.main_nav ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	.main_nav li {
		margin: 10px;
	}

	.main_nav ul li a {
		font-size: 12px;
		margin: 0 29px;
	}

	.main_nav ul li.logo-container {
		margin: 0px;
	}
	.search
	{
		width: 200px;
	}

    .contact-form-container {
        height: auto;
        padding-top:200px !important   ; /* Ajusta esto según la altura de tu header */
        padding-bottom: 20px;
        align-items: flex-start;
        padding: 30px;
      }
}



/************
4. 1199px
************/

@media only screen and (max-width: 1199px)
{


	.header {
		height: 110px;
	}

	.logo1 a {
		font-size: 65px;
	}
	.logo1 img {
		max-height: 100px;
		margin-top: 2px;
	}

	.main_nav ul {
		flex-wrap: wrap;
		justify-content: center;
		padding-left:100px;
		margin-top: 37px;
	}

	.main_nav li {
		margin: 10px;
	}

	.main_nav ul li a {
		font-size: 12px;
		margin: 0 11px;
	}

	.main_nav ul li.logo-container {
		margin: 0px;
	}
	.sidebar_right
	{
		width: 960px;
	}
	
	
	.contact-form-container {
        height: auto;
        padding-top:200px !important   ; /* Ajusta esto según la altura de tu header */
        padding-bottom: 20px;
        align-items: flex-start;
        padding: 30px;
      }
}


@media only screen and (min-width: 1025px) {
  .contact-form {
    padding: 40px;
    font-size: 16px;
  }

  .contact-form h2 {
    font-size: 28px;
  }

  .input-group input,
  .input-group textarea {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1024px) {
  .contact-form-container {
    padding: 40px 20px;
  }

  .contact-form {
    padding: 30px;
    max-width: 450px;
  }

  .contact-form h2 {
    font-size: 22px;
  }

  .input-group input,
  .input-group textarea {
    font-size: 15px;
  }
}


/************
6. 991px
************/

@media only screen and (max-width: 991px)
{

	.header {
		height: 110px;
	}

	.logo1 a {
		font-size: 65px;
	}
	.logo1 img {
		max-height: 100px;
	}

	.main_nav ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	.main_nav li {
		margin: 0px;
	}

	.main_nav ul li a {
		font-size: 10px;
		margin: 0 11px;
	}

	.main_nav ul li.logo-container {
		margin: 0px;
	}
	
	.shopping
	{
		padding-right: 49px;
	}
	.section_title
	{
		font-size: 48px;
	}
	.product
	{
		width: 50%;
	}
	.footer_nav ul li
	{
		margin-right: 30px;
	}
	.sidebar_right
	{
		width: 720px;
	}
}


/* Pantallas hasta 780px */
@media only screen and (max-width: 780px) {
   .dropdown, .inicio, .nosotros, .contacto {
		display: none !important;
	}
}


/* Muestra el menú hamburguesa solo en pantallas pequeñas (ej. menos de 768px) */
@media only screen and (max-width: 768px) {
    
	 .burger_container {
		top: calc(50% + 1px);
        display: block;
        position: relative;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        width: 25px;
        height: 16px;
        cursor: pointer;
        top: 8px;
    }
    
    .burger_container div {
        width: 100%;
        height: 2px;
        background: #ffffff;
        -webkit-transition: all 200ms ease;
        -moz-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        transition: all 200ms ease;
        pointer-events: none;
        top: -6px;
    }
    
    .burger_container:hover div {
        background: #937c6f;
    }
    .dropdown, .inicio, .nosotros, .contacto {
		display: none !important;
	}
	
	.contact-form-container {
        height: auto;
        padding-top:200px !important   ; /* Ajusta esto según la altura de tu header */
        padding-bottom: 20px;
        align-items: flex-start;
        padding: 30px;
      }

	.logo1 img {
		max-height: 100px; /* Reducir el tamaño del logo en pantallas pequeñas */
		width: auto;
		margin-top: 1px; /* Ajustar el margen superior */
		padding-left: 80px;
	}

}

/************
11. 575px
************/

@media only screen and (max-width: 575px)
{
	.home
	{
		height: 372px;
	}
.header {
		height: 100px;
		padding-right: 10px;
	}

	.logo a {
		font-size: 40px;
	}

	.main_nav ul {
		flex-direction: column;
		text-align: center;
	}

	.main_nav li {
		margin: 10px 0;
	}

	.main_nav ul li a {
		font-size: 12px;
		padding: 10px 0;
		margin: 0 10px;
	}

	.logo1 img {
		max-height: 89px; /* Reducir el tamaño del logo en pantallas pequeñas */
		width: auto;
		margin-top: 37px; /* Ajustar el margen superior */
	}
	.shopping {
		flex-direction: column;
		align-items: flex-start;
		padding-right: 30px;
		gap: 10px;
		
	}

	.cart_num_container,
	.star_num_container {
		top: 5px;
		left: -2px;
		width: 12px;
		height: 12px;
	}

	.cart_num,
	.star_num {
		font-size: 8px;
	}


	
	.avatar-img {
		width: 16px;
		height: 18px;
		
	}

	.dropdown-content {
		min-width: 140px;
		top: 35px;
	}

	/* Menú desplegable en pantallas muy pequeñas */
    .dropdown-menu1 {
        min-width: 100%; /* Asegurar que el menú ocupe todo el ancho */
		display: none;
    }
	.dropdown, .inicio, .nosotros, .contacto {
		display: none !important;
	}
	

    .dropdown > a:after {
        font-size: 14px; /* Aumentar el tamaño de la flecha en pantallas más pequeñas */
    }

    .dropdown-menu1 li a {
        padding: 10px 0px; /* Menos padding para que ocupe menos espacio */
        font-size: 13px; /* Fuente aún más pequeña para pantallas pequeñas */
    }
   


	.menu
	{
		width: 100%;
		left: -100%;
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 21px;
	}
	.menu .search
	{
		margin-bottom: 50px;
	}
	.menu .search_input
	{
		height: 36px;
	}
	.menu_close_container
	{
		right: 15px;
	}
	.menu .logo
	{
		margin-bottom: 35px;
		margin-right: auto;
	}
	.menu.active
	{
        left: 0;
	}
	
	.footer_logo a
	{
		font-size: 48px;
	}
	.footer_nav ul li
	{
		display: block;
		margin-right: 0;
		margin-bottom: 5px;
	}
	.footer_nav ul li:last-child
	{
		margin-bottom: 0;
	}
	.footer_social ul li
	{
		margin-right: 29px;
	}
	.footer_social ul li a i
	{
		font-size: 20px;
	}
}

/************
11. 539px
************/

@media only screen and (max-width: 539px)
{


	.carrt-sidebar {
        width: 100%;
        right: -100%;
    }
    
    .carrt-item {
        flex-direction: column;
    }
    
    .carrt-item img {
        width: 100%;
        height: auto;
        max-height: 150px;
        margin-right: 0;
        margin-bottom: 10px;
    }
	
}

/* Pantallas hasta 480px */
@media only screen and (max-width: 480px) {

  .header {
		height: 100px;
		padding-right: 10px;
	}

	.logo a {
		font-size: 40px;
	}

	.main_nav ul {
		flex-direction: column;
		text-align: center;
	}

	.main_nav li {
		margin: 10px 0;
	}

	.main_nav ul li a {
		font-size: 12px;
		padding: 10px 0;
		margin: 0 10px;
	}

	.logo1 img {
		max-height: 89px; /* Reducir el tamaño del logo en pantallas pequeñas */
		width: auto;
		margin-top: 0px; /* Ajustar el margen superior */
		padding-left: 15px;
	}
	.shopping {
		flex-direction: column;
		align-items: flex-start;
		padding-right: 30px;
		gap: 10px;
		
	}

	.cart_num_container,
	.star_num_container {
		top: 5px;
		left: -2px;
		width: 12px;
		height: 12px;
	}

	.cart_num,
	.star_num {
		font-size: 8px;
	}


	
	.avatar-img {
		width: 16px;
		height: 18px;
		
	}

	.dropdown-content {
		min-width: 140px;
		top: 35px;
	}

	/* Menú desplegable en pantallas muy pequeñas */
    .dropdown-menu1 {
        min-width: 100%; /* Asegurar que el menú ocupe todo el ancho */
		display: none;
    }
	.dropdown, .inicio, .nosotros, .contacto {
		display: none !important;
	}
	

    .dropdown > a:after {
        font-size: 14px; /* Aumentar el tamaño de la flecha en pantallas más pequeñas */
    }

    .dropdown-menu1 li a {
        padding: 10px 0px; /* Menos padding para que ocupe menos espacio */
        font-size: 13px; /* Fuente aún más pequeña para pantallas pequeñas */
    }



    .contact-form-container {
    height: auto;
    padding-top: 100px !important   ; /* Ajusta esto según la altura de tu header */
    padding-bottom: 20px;
    align-items: flex-start;
    padding: 30px;
  }

  .contact-form {
    padding: 56px;
    max-width: 100%;
  }

  .contact-form h2 {
    font-size: 20px;
  }

  .contact-form p {
    font-size: 14px;
  }

  .input-group {
    padding-right: 0;
  }

  .input-group input,
  .input-group textarea {
    font-size: 14px;
    padding: 10px;
  }

  .submit-btn {
    font-size: 15px;
    padding: 10px;
  }
	
.footer{
  padding-top: 0px;
}
	.footer_logo a img {
		max-height: 160px;
		font-size: 35px;
	}

	.footer_nav ul li {
		display: block;
		margin: 10px 0;
		padding-right: 30px;

	
	}

	.footer_nav ul li a {
		font-size: 12px;
	}
	
	.footer_social{
	    padding-right: 32px;
	}
	.footer_social ul li {
		display: inline-block;
		margin-right: 15px;
	}

	.footer_social ul li a i {
		font-size: 18px;
	}

	.copyright {
		font-size: 10px;
		text-align: center;
	}

}


   


/* Pantallas hasta 320px */
@media only screen and (max-width: 320px) {
    
     .header {
		height: 100px;
		padding-right: 10px;
	}

	.logo a {
		font-size: 40px;
	}

	.main_nav ul {
		flex-direction: column;
		text-align: center;
	}

	.main_nav li {
		margin: 10px 0;
	}

	.main_nav ul li a {
		font-size: 12px;
		padding: 10px 0;
		margin: 0 10px;
	}

	.logo1 img {
		max-height: 89px; /* Reducir el tamaño del logo en pantallas pequeñas */
		width: auto;
		margin-top: 0px; /* Ajustar el margen superior */
		padding-left: 15px;
	}
	.shopping {
		flex-direction: column;
		align-items: flex-start;
		padding-right: 30px;
		gap: 10px;
		
	}

	.cart_num_container,
	.star_num_container {
		top: 5px;
		left: -2px;
		width: 12px;
		height: 12px;
	}

	.cart_num,
	.star_num {
		font-size: 8px;
	}


	
	.avatar-img {
		width: 16px;
		height: 18px;
		
	}
    .contact-form h2 {
    font-size: 18px;
  }

  .contact-form p {
    font-size: 13px;
  }

  .input-group input,
  .input-group textarea {
    font-size: 13px;
    padding: 8px;
  }

  .submit-btn {
    font-size: 14px;
    padding: 9px;
  }
 
}



/* ======================= */
/* MOBILE: Menor a 768px */
/* ======================= *
@media (max-width: 768px) {

	.header_inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.main_nav ul {
		flex-direction: column;
		width: 100%;
		display: none; /* oculto inicialmente *
		background: #fff;
		position: absolute;
		top: 100%;
		left: 0;
		box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		z-index: 999;
		padding: 1rem;
	}

	.main_nav ul.active {
		display: flex;
	}

	.burger_container {
		display: flex;
		align-self: flex-end;
		margin: 1rem;
	}

	.logo-container {
		order: -1;
		margin-bottom: 1rem;
	}

	.contact-form-container {
		padding: 1rem;
	}

	.input-group {
		flex-direction: column;
	}

	.input-group input,
	.input-group textarea {
		width: 100%;
		margin-bottom: 1rem;
	}

	.footer_nav ul {
		flex-direction: column;
		gap: 0.5rem;
	}

	.footer_social ul {
		justify-content: center;
	}

}

/* ======================== */
/* Tablets: entre 768 y 1024px */
/* ======================== *
@media (min-width: 768px) and (max-width: 1024px) {

	.main_nav ul {
		gap: 1rem;
	}

	.contact-form-container {
		padding: 1.5rem;
	}

	.input-group {
		flex-wrap: wrap;
	}

	.input-group input {
		width: 48%;
	}

}