@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
	--primary-color: #dab200c4;
	--background-color: #f9f5f0;
	--dark-color: #151515;
	--secundary-color: #2e6001 ;
}
html{
    font-size: 62.5%;
    font-family:'Poppins', sans-serif
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

/* ********************************** */
/*             UTILIDADES             */
/* ********************************** */
.container-util {
	max-width: 120rem;
	margin: 0 auto;
}

.heading-1 {
	text-align: center;
	font-weight: 500;
	font-size: 4rem;
}

/* ********************************** */
/*               MENU                 */
/* ********************************** */
:root {
    --primary-color: #f7d000;
    --dark-color: #202020;
    --light-color: #ffffff;
}

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

.container-navbar {
    background-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.09);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    position: relative;
}

.container-logo img {
    max-height: 80px;
    width: auto;
    margin-right: 1.5rem;
}

/* Menú principal */
.menu {
    display: flex;
    gap: 8rem;
    list-style: none;
    align-items: center;
}

.menu li {
    list-style: none;
}

.menu a {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 10rem;
    color: var(--dark-color);
    font-weight: 700;
    transition: color 0.3s ease;
}

.menu a::after {
    content: '';
    width: 1.5rem;
    height: 1px;
    background-color: var(--dark-color);
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%, 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu a:hover::after,
.menu a:focus::after {
    opacity: 1;
}

.menu a:hover,
.menu a:focus {
    color: var(--light-color);
}

/* Ícono hamburguesa - oculto en escritorio */
.navbar .fa-bars {
    display: none;
    font-size: 2.7rem;
    cursor: pointer;
    color: var(--dark-color);
}


/* Botones usuario y carrito */
.btnlogi,
.btncart {
    color: var(--dark-color);
    font-size: 1.8rem;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.btnlogi:hover,
.btncart:hover {
    color: var(--light-color);
}

/* Media Query para pantallas <= 768px */
@media (max-width: 768px) 
    .navbar .fa-bars {
        display: block;
    }
}
    .menu,
    .container-user {
        display: none;
    }

    .menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-color);
        padding: 1rem 0;
        z-index: 1000;
    }

    .menu li {
        margin: 1rem 0;
        text-align: center;
    }

    .menu a {
        font-size: 1.5rem;
    }


.btnlogi {
	border: none;
	border-radius: 3rem;
	background-color: var(--primary-color);
	font-size: 3rem;
	position:relative;
    transition: all 300ms ease;
	cursor: pointer;
	color: #000;
}
.btnlogi:hover{
	text-decoration: none;
	color: #ffffff;
    background: var(--primary-color);
}
.btnlog {
	border: none;
	background-color: var(--primary-color);
	border-radius: 3rem;
}

.container-user {
	position: relative;
	font-size:medium;
	display: flex;
  	align-items: center; 
	gap: 15px;
	font-size: 3rem; 
	color: #000;
	gap: 1rem;
}
.btncart{
	border: none;
	background-color: var(--primary-color);
	font-size: 3rem;
	border-radius: 3rem;
}
.content-cart-shopping{
	display: flex;
	flex-direction: row;
	
}

/* ********************************** */
/*               SLIDER              */
/* ********************************** */
.cont-carousel {
    max-width: 80%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: auto; /* Ajusta altura automáticamente al contenido */
}

.container-carousel {
    width: 100%;
    height: auto; /* Altura automática para seguir la imagen */
    background-color: #e0e0e0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.66);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.carruseles {
    width: 100%;
    height: auto; /* Altura automática según contenido */
    display: flex;
}

.slider-section {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto; /* Altura adaptable a la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 15px;
}

.slider-section img {
    width: 100%;
    height: auto !important; /* Mantiene proporción real sin recortar */
    object-fit: contain; /* Imagen completa dentro del contenedor */
    display: block;
    border-radius: 15px;
}

/* Responsive para tablets */
@media (max-width: 768px) {
    .cont-carousel {
        max-width: 95%;
        height: auto;
    }
    .carruseles {
        width: 100%;
        height: auto;
    }
    .slider-section {
        height: auto;
    }
    .slider-section img {
        width: 100%;
        height: auto !important;
        object-fit: contain;
    }
}

/* Responsive para móviles */
@media (max-width: 480px ) {
    .cont-carousel {
        max-width: 100%;
        padding: 5px;
        box-sizing: border-box;
        height: auto;
    }
    .carruseles {
        width: 100%;
        height: auto;
    }
    .slider-section {
        height: auto;
    }
    .slider-section img {
        width: 100%;
        height: auto !important;
        object-fit: contain;
        margin: 0 auto;
        padding: 0;
        border-radius: 15px;
        box-sizing: border-box;
        display: block;
    }
    .cont-carousel,
    .container-carousel,
    .carruseles,
    .slider-section {
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

.btn-left,
.btn-right {
    display: flex;
    position: fixed;
    top: 70%;
    font-size: 4rem;
    background-color: transparent;
    padding: 50px;
    font-weight: 600;
    cursor: pointer;
    color: var(--secundary-color);
    transform: translate(0,-50%);
    transition: .5s ease;
    user-select: none;
}
.btn-left {
    left: 15px;
}
.btn-right {
    right: 15px;
}

/* ********************************** */
/*              CATEGORIAS            */
/* ********************************** */
.heading-1 {
	display: relative;
	flex-direction: column;
	gap: 10rem;
	color: var(--secundary-color);
}
.container-ourcategories{
	display: grid;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
	max-width: 1300px;
    margin: 90px;
    padding: 5px;
}

.card-feature {
	display: block;
	align-items: center;
	justify-content: center;
	border-color: var(--primary-color);
	border-style: groove;
	padding: 15px;
	height: 20rem;
	width: 20rem;
	border-radius: 18rem;
	gap: 1.5rem;
}

.card-feature i {
	padding: 1rem;
	font-size: 8rem;
	color: #db6c00;
}

.feature-content {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	gap: 0.000001rem;
	background-repeat: no-repeat;
}

.feature-content span {
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--dark-color);
}

.feature-content span {
	color: #000000;
	font-weight: 500;
}

/* ********************************** */
/*             WHATSAPP               */
/* ********************************** */
.btn-wsp {
    position: fixed;
    width: 60px;
    height: 60px;
    line-height: 63px;
    bottom: 25px;
    right: 25px;
    background: #25d366;
    color: #ffffff;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index: 100;
    transition: all 300ms ease;

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none; /* Elimina subrayado */
}

.btn-wsp:hover {
    background: #ffffff; /* Fondo blanco en hover */
    color: #25d366;      /* Logo verde en hover */
    text-decoration: none; /* Asegura que no haya subrayado */
}

@media only screen and (min-width:320px) and (max-width:768px) {
    .btn-wsp {
        width: 63px;
        height: 63px;
        line-height: 66px;
    }
}

/* ********************************** */
/*               FOOTER               */
/* ********************************** */
.footer {
    background-color: #d6ba00;
    color: #000;
    padding: 1.2rem 1rem; /* menos padding vertical */
    font-family: 'Arial', sans-serif;
}

.container-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* menos espacio entre bloques */
    max-width: 1200px;
    margin: 0 auto;
}

.menu-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; /* menos espacio entre columnas */
    justify-items: start;
    text-align: left;
}

.title-footer, .ayuda {
    font-weight: 700;
    font-size: 1.7rem;
    text-transform: uppercase;
    margin-bottom: 0.6rem; /* menos espacio debajo de títulos */
    color: #111;
}

.contact-info ul,
.information ul,
.social-icons ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.3rem; /* reducir gap vertical */
}

.contact-info ul li,
.information ul li,
.social-icons ul li {
    font-size: 1.2rem;
    font-weight: 300;
    color: #111;
    display: flex;
    align-items: center;
    gap: 0.5rem; /* menos espacio entre icono y texto */
    margin: 0; /* sin márgenes extra */
}

.information ul li a {
    color: #0e0d0d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.information ul li a:hover {
    color: #333;
}

.social-icons ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: #fff;
    font-size: 1.8rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.facebook a {
    background-color: #3b5998;
}

.instagram a {
    background: linear-gradient(
        #405de6,
        #833ab4,
        #c13584,
        #e1306c,
        #fd1d1d,
        #f56040,
        #fcaf45
    );
}

.t-icon {
    flex-grow: 1;
    text-align: left;
    color: #111;
    font-size: 1.2rem;
    line-height: 1.2;
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 1px solid #0a0a0a;
    font-size: 1.1rem;
    color: #0e0d0d;
    margin-top: 0.5rem;
}

/* Responsive para pantallas menores a 768px */
@media (max-width: 767px) {
    .menu-footer {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
        justify-items: center;
    }

    .contact-info ul,
    .information ul,
    .social-icons ul {
        align-items: center;
    }

    .contact-info ul li,
    .information ul li,
    .social-icons ul li {
        justify-content: center;
        gap: 0.3rem;
        font-size: 1.1rem;
    }

    .social-icons ul li a {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.6rem;
    }

    .t-icon {
        display: none;
    }

    .title-footer, .ayuda {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }
}

/* Responsive para pantallas muy pequeñas (móvil) */
@media (max-width: 400px) {
    .contact-info ul li,
    .information ul li,
    .social-icons ul li {
        font-size: 1rem;
    }

    .footer {
        padding: 0.8rem 0.5rem;
    }
}
/* ********************************** */
/*        MEDIOS DE PAGO              */
/* ********************************** */
/* Contenedor general y row para distribuir elementos en pantallas grandes y pequeñas */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col-md-7, .col-md-5 {
  flex: 1 1 100%; /* Base en móvil, crece en pantallas mayores */
  max-width: 100%;
  padding: 10px;
}

@media (min-width: 768px) {
  /* Ajusta en pantallas medianas en adelante */
  .col-md-7 {
    flex: 0 0 65%;
    max-width: 65%;
  }
  .col-md-5 {
    flex: 0 0 35%;
    max-width: 35%;
  }
}

/* Para la sección de listado de imágenes */
ul.list-group.img-row {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px; /* Limita en pantallas grandes */
}

ul.list-group.img-row > li.list-group-item {
  display: flex;
  flex-wrap: wrap; /* Permite que las imágenes puedan bajar en pantallas pequeñas */
  justify-content: center; /* Centra las imágenes en pantallas pequeñas */
  align-items: center;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}

ul.list-group.img-row > li.list-group-item > img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Personalización de la sección de consejos en la columna derecha */
.col-md-5 {
  background-color: #f9fafb;
  border-radius: 12px;
  padding: 20px 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0 auto; /* Centro en pantallas grandes */
}

.col-md-5 h4 {
  color: #2c3e50;
  font-weight: 700;
  margin-bottom: 15px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}

.col-md-5 ul {
  padding-left: 0;
  list-style: none;
}

.col-md-5 ul li {
  background: url('data:image/svg+xml;utf8,<svg fill="green" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17l-3.5-3.5-1.41 1.41L9 19 20.5 7.5 19.09 6.09z"/></svg>') no-repeat left center;
  background-size: 18px 18px;
  padding-left: 28px;
  margin-bottom: 12px;
  color: #34495e;
  font-size: 15px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.col-md-5 ul li:hover {
  color: #3498db;
}

.col-md-5 img {
  display: block;
  margin: 0 auto 30px auto;
  max-height: 80px;
  object-fit: contain;
}


.img-grande {
  width: 100%; /* O un valor fijo como 600px */
  height: auto;
}



/* ********************************** */
/*            NOSOTROS                */
/* ********************************** */
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    margin: 0;
    background-color: #220e0e;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .heading-1 {
    font-weight: 700;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--secundary-color, #065513);
  }

  .card {
    border-radius: 8px;
    transition: transform 0.3s ease;
    background: #fff;
  }

  .card:hover {
    transform: translateY(-8px);
  }


  .card-text p {
    line-height: 1.6;
    font-size: large;
  }
  .reseña-text {
    font-size: medium;
  }

  /* Alinear texto justificado */
  .text-justify {
    text-align: justify;
    text-justify: inter-word;
  }
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0 20px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
  padding: 30px;
  margin: 40px 30px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: 0.3s;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.testimonials .swiper-slide {
  opacity: 0.3;
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide-active {
    opacity: 1;
  }

  .testimonials .swiper-pagination {
    margin-top: 0;
  }

  .testimonials .testimonial-item {
    margin: 40px 20px;
  }
}

@media (min-width: 1200px) {
  .testimonials .swiper-slide-next {
    opacity: 1;
    transform: scale(1.12);
  }
}

/* ********************************** */
/*     		 Servicios                */
/* ********************************** */

.card-body ul li {
  font-size: 1.15rem;        /* Texto un poco más grande */
  line-height: 1.5;          /* Mejorar la legibilidad */
  padding-left: 1.8rem;      /* Más espacio para el icono ✔ */
  margin-bottom: 0.6rem;     /* Espacio entre ítems */
  text-align: justify;       /* Justificar texto */
  position: relative;
}
.card-body p {
   font-size: 1.16rem;        /* Texto un poco más grande */
  line-height: 1.5;          /* Mejorar la legibilidad */
  margin-bottom: 0.6rem;     /* Espacio entre ítems */
  text-align: justify;       /* Justificar texto */
  position: relative;
}
.card-bod ul li::before {
  content: "✔";
  color: var(--secundary-color);
  position: absolute;
  left: 0;
  top: 0.2rem;              /* Mejor alineación vertical */
  font-size: 1.2rem;        /* Tamaño acorde al texto */
}


* {
  filter: none !important;
  opacity: 1 !important;
}


/* ********************************** */
/*       MEDIA QUERIES -- 768px       */
/* ********************************** */
@media (max-width: 768px) {
	html {
		font-size: 55%;
	}

	.hero {
		padding: 2rem;
	}

	.customer-support {
		display: none;
	}

	.content-shopping-cart {
		display: none;
	}

	.navbar {
		padding: 1rem 2rem;
	}

	.navbar .fa-bars {
		display: block;
		color: #fff;
		font-size: 3rem;
	}

	.menu {
		display: none;
	}

	.content-banner {
		max-width: 50rem;
		margin: 0 auto;
		padding: 25rem 0;
	}

	.container-features {
		grid-template-columns: repeat(2, 1fr);
		padding: 3rem 2rem;
	}

	.card-feature {
		padding: 2rem;
	}

	.heading-1 {
		font-size: 2.4rem;
	}

	.card-category {
		height: 12rem;
	}

	.card-category p {
		font-size: 2rem;
		text-align: center;
		line-height: 1;
	}

	.card-category span {
		font-size: 1.4rem;
	}

	.container-options {
		align-items: center;
	}

	.container-options span {
		text-align: center;
		padding: 1rem 2rem;
	}

	.containerse-products {
		grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	}

	.gallery {
		grid-template-rows: repeat(2, 15rem);
	}

	.container-blogs {
		overflow: hidden;
		grid-template-columns: 1fr 1fr;

		height: 52rem;
	}

	.menu-footer {
		grid-template-columns: repeat(2, 1fr);
	}

	.copyright {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
	}
									}

/* ********************************** */
/*       MEDIA QUERIES -- 468px       */
/* ********************************** */
@media (max-width: 468px){
	html {
		font-size: 42.5%;
	}

	.content-banner {
		max-width: 50rem;
		padding: 22rem 0;
	}

	.heading-1 {
		font-size: 2.8rem;
	}

	.card-feature {
		flex-direction: column;
		border-radius: 2rem;
	}

	.feature-content {
		align-items: center;
	}

	.feature-content p {
		font-size: 1.4rem;
		text-align: center;
	}

	.feature-content span {
		font-size: 1.6rem;
		text-align: center;
	}

	.container-options span {
		font-size: 1.8rem;
		padding: 1rem 1.5rem;
		font-weight: 500;
	}

	.containerse-products {
		grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
		gap: 1rem;
	}

	.container-im .discount {
		font-size: 2rem;
	}

	.content-card-product h3 {
		font-size: 2.2rem;
	}

	.gallery {
		grid-template-rows: repeat(2, 20rem);
	}

	.blogs {
		padding: 2rem;
	}

	.container-blogs {
		grid-template-columns: 1fr;
		height: 75rem;
	}

	.content-blog h3 {
		font-size: 2.4rem;
	}

	.content-blog span {
		font-size: 1.8rem;
	}

	.content-blog p {
		font-size: 2.2rem;
	}

	.btn-read-more{
		font-size: 1.8rem;
	}

	.contact-info ul,
	.information ul,
	.my-account ul{
		display: none;
	}

	.contact-info {
		align-items: center;
	}

	.menu-footer{
		grid-template-columns: 1fr;
	}

	.content p{
		font-size: 1.6rem;
}
}





:root {
	--pyp-green: #2d5016;
	--pyp-orange: #ff8c00;
	--pyp-yellow: #ffd700;
	--pyp-light-green: #7cb342;
}

/* ======= SECCIÓN LOGIN ======= */
.login-section {
	min-height: calc(100vh - 200px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	margin: 0 auto;
}

.login-box {
	display: flex;
	flex-wrap: wrap;
	background: white;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	max-width: 1000px;
	width: 100%;
}

/* ======= LADO IZQUIERDO - LOGO ======= */
.logo-section {
	flex: 1 1 45%;
	background: linear-gradient(135deg, var(--pyp-green) 0%, var(--pyp-light-green) 50%, var(--pyp-orange) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
	padding: 40px;
	position: relative;
}

.logo-section::before {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	top: -100px;
	right: -100px;
}

.logo-placeholder i {
	font-size: 120px;
	margin-bottom: 20px;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.logo-placeholder h1 {
	font-size: 42px;
	font-weight: 700;
	margin: 0;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* ======= LADO DERECHO - FORMULARIO ======= */
.login-container {
	flex: 1 1 55%;
	padding: 50px 40px;
}

.login-container h3 {
	color: var(--pyp-green);
	font-weight: 700;
	margin-bottom: 15px;
	font-size: 28px;
	text-align: center;
}

.subtitle {
	color: #666;
	margin-bottom: 30px;
	font-size: 15px;
	text-align: center;
}

/* ======= INPUTS Y BOTONES ======= */
.form-control {
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	padding: 14px 16px;
	transition: all 0.3s ease;
	font-size: 15px;
}

.form-control:focus {
	border-color: var(--pyp-orange);
	box-shadow: 0 0 0 0.2rem rgba(255, 140, 0, 0.25);
}

.input-group-text {
	background: transparent;
	border: 2px solid #e0e0e0;
	border-right: none;
	border-radius: 10px 0 0 10px;
	color: var(--pyp-green);
	padding: 14px 16px;
}

.input-group .form-control {
	border-left: none;
	border-radius: 0 10px 10px 0;
}

.btn-login {
	background: linear-gradient(135deg, var(--pyp-orange) 0%, var(--pyp-yellow) 100%);
	border: none;
	border-radius: 10px;
	padding: 14px;
	font-weight: 600;
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	font-size: 16px;
}

.btn-login:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(255, 140, 0, 0.4);
}

/* ======= RESPONSIVE ======= */
@media (max-width: 991px) {
	.logo-section {
		flex: 1 1 100%;
		min-height: 250px;
		padding: 30px;
	}

	.logo-placeholder i {
		font-size: 80px;
	}

	.logo-placeholder h1 {
		font-size: 32px;
	}

	.login-container {
		flex: 1 1 100%;
		padding: 35px 25px;
	}
}

@media (max-width: 576px) {
	.login-container h3 {
		font-size: 24px;
	}

	.form-control, .input-group-text {
		padding: 12px 14px;
		font-size: 14px;
	}

	.btn-login {
		padding: 12px;
		font-size: 15px;
	}
}