@charset "utf-8";
/* CSS Document */
/* =====================================
   DIMENSIUNI DE TESTARE (Mobile First)
   =====================================

   320px  - Telefoane mici (iPhone SE)
   360px x 640px  - Android standard
   375px x 667px  - iPhone 12/13 Mini
   414px x 896px  - iPhone Pro Max
   480px - 600px - Telefoane mari / mici tablete
   <768px - Limită maximă pentru mobile
   768px  - Tablete (ex: iPad vertical)
   1024px - Desktop mic (iPad orizontal)
   1280px+ - Desktop normal / mare
*/

/* Ex. media queries:
@media (min-width: 768px) { ... }  -> tabletă
@media (min-width: 1024px) { ... } -> desktop mic
@media (min-width: 1280px) { ... } -> desktop mare






/* ========== FONTURI ========== */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2');
}

/* festive-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  src: url('/webdesign-simplu/fonts/festive-v10-latin-regular.woff2') format('woff2');
 /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ===========================
   GUST SIMPLU - Mobile First
   =========================== */


/* Reset simplu */
*{
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  transition: all .2s linear;
}

html{
  overflow-x: hidden;
  scroll-padding-top: 112px;
  scroll-behavior: smooth;
}
body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    padding: 0;
}

/* ====== HEADER ====== */



header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ff914d;
    color: #fff;
}

header .logo img {
  width: 80px;
  height: 81px;
  object-fit: cover;
  animation: despreImage 4s ease-in-out infinite;
  border: 1px dotted #ffa366;
}

/* Meniu pe mobil */
#nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 145, 77, 0.7); /* culoare cu transparență */
    backdrop-filter: blur(8px); /* efect de blur pe fundal */
    -webkit-backdrop-filter: blur(8px); /* compatibilitate Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 99;
}


#nav-menu.active {
    transform: translateY(0);
}

#nav-menu ul {
    list-style: none;
    text-align: center;
}

#nav-menu ul li a {
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
}

/* Hamburger fix în colțul dreapta-sus */
#hamburger {
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 100; /* peste meniu */
}
/* Hamburger animat */
.hamburger {
    width: 25px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
	   margin: 1rem;
    z-index: 100; /* peste meniu */
}

.hamburger span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Stare activă - implicit (desktop și tablete) */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Efect de apariție/dispariție pentru link-urile din meniu */
#nav-menu ul li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Clasa care activează animația linkurilor */
#nav-menu.show-links ul li {
    opacity: 1;
    transform: translateY(0);
}

/* Întârziere progresivă pentru fiecare link la apariție */
#nav-menu.show-links ul li:nth-child(1) {
    transition-delay: 0.1s;
}
#nav-menu.show-links ul li:nth-child(2) {
    transition-delay: 0.2s;
}
#nav-menu.show-links ul li:nth-child(3) {
    transition-delay: 0.3s;
}




/* ====== INTRO ====== */
.intro {
    position: relative;
    text-align: center;
    color: #fff;
    overflow: hidden;
	   
}

.intro picture,
.intro img {
    display: block;
    width: 100%;
    height: auto;
}

.intro-text {
    position: absolute;
    width: 100%;        /* se adaptează la ecran */
    max-width: 400px;   /* limităm pe desktop */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 15px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    text-align: center;
    box-sizing: border-box;
}

/* Text mobil: mai mic ca să încapă */
.intro-text h1 {
    font-family: 'Festive', cursive;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 10px;
}

.intro-text p {
    font-size: 1rem;
}


/* ====== CARDURI REȚETE ====== */
.retete {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 15px;
}



.card {
	   position: relative;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
	   opacity: 0;
    transform: translateY(20px); /* mobil: doar sus-jos */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animație bounce subtil */
@keyframes bounceSubtle {
    0%   { transform: translateY(20px); }
    60%  { transform: translateY(-5px); }
    80%  { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* Aplicăm animația când cardul devine vizibil */
.card.visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
    animation: bounceSubtle 0.6s ease-out;
}


.card.visible {
    opacity: 1;
    transform: translateY(0);
}

.card img {
    width: 100%;
    display: block;
	   transition: transform 0.5s ease;
}

/* banda de lumină */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-25deg);
    transition: left 0.5s ease;
    z-index: 2; /* deasupra imaginii */
}
.card:hover::before {
    left: 125%;
}

.card h2 {
    font-size: 1.5rem;
	   font-family: 'Festive', cursive;
    margin: 10px 0;
}

.card p {
    padding: 0 10px;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* Card rețetă hover */
.card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* ridică cardul ușor */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.card img {
    transition: transform 0.5s ease;
}

.card:hover img {
    transform: scale(1.05); /* zoom imagine */
}

/* Fundal luminos subtil pe hover */
.card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0);
    transition: background 0.3s ease;
    z-index: 1; /* sub ::before */
}

.card:hover::after {
    background: rgba(255,255,255,0.1); /* ușor luminos */
    pointer-events: none;
}

/* Pentru ca textul și butonul să fie deasupra luminii */
.card h2,
.card p,
.card .btn {
    position: relative;
    z-index: 3;
}




.btn {
    display: inline-block;
    margin-bottom: 15px;
    background: #ff914d;
    color: #fff;
    padding: 10px 18px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(255, 145, 77, 0.3);
}

.btn:hover {
    background: #ff751a;
    box-shadow: 0 6px 15px rgba(255, 117, 26, 0.4);
    transform: translateY(-2px);
}

/* Efect val de lumină */
.btn {
    position: relative;
    overflow: hidden; /* ascunde valul în afara butonului */
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-25deg);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 125%; /* mutăm „valul” peste buton */
}


/* ====== FOOTER ====== */
footer {
    text-align: center;
    background: #ff914d;
    color: #fff;
    padding: 10px;
    font-size: 0.85rem;
	   
}




/*---Inceput-stil-pagina-reteta.html---*/
/* Mobile first (320px+) */
.reteta-intro {
    display: flex;
    flex-direction: column;    /* text sub imagine pe mobil */
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background-color: #fff3e6;
}

.reteta-intro img {
    width: 100%;
    height: auto;
    max-width: 400px;          /* limitează imaginea pe mobil */
}

.reteta-intro .intro-text {
    width: 100%;
    max-width: 400px;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(255,255,255,0.5);
}


.ingrediente, .pasi {
    padding: 20px;
    max-width: 800px;
    margin: auto;
}

.ingrediente h2, .pasi h2 {
    color: #ff751a;
    text-align: center;
	   font-size: 1.5rem;
	   font-family: 'Festive', cursive;
    margin: 10px 0;
}

.ingrediente ul, .pasi ol {
    font-size: 1rem;
    line-height: 1.6;
    margin-left: 20px;
	   list-style-type: none;
}

/* Buton Înapoi */
.back-home {
    text-align: center;
    padding: 20px;
}

/* Fade-in pentru secțiuni */
.ingrediente, .pasi, .back-home {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ingrediente.visible, .pasi.visible, .back-home.visible {
    opacity: 1;
    transform: translateY(0);
}

/*---Sfarsit-stil-pagina-reteta.html---*/




/*---Inceput-stil-sectiune-pagina-despre.html---*/
.despre .heading{
  font-size: 2rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
	 color: #000;
	 text-align: center;
}
.despre .heading span{
  color: orange;
	 ont-size: 2rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
}
.despre .row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.despre .row .image{
  flex: 1 1 100%;
}
.despre .row .image img{
  width: 100%;
  animation: despreImage 4s linear infinite;
}
.despre .row .content{
  flex: 1 1 100%;
}
.despre .row .content .title{
	 font-family: 'Festive', cursive;
  color:#443;
	 text-align: center;
  font-size: 1.6rem;
}
.despre .row .content p{
   font-family: Arial, sans-serif;
	 text-align: justify;
   padding: 0 10px;
   font-size: 0.95rem;
   margin-bottom: 10px;
}
.despre .row .content .btn{
	margin: 1rem;
}
.despre .row .content .icons-container{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
}
.despre .row .content .icons-container .icons{
  flex: 1 1 160px;
  padding: 16px;
  text-align: center;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  border: 1px solid #443;
}
.despre .row .content .icons-container .icons i{
	font-size: 40px;
	color: #ff914d;
}
/* Aplicați o rotație de -10 grade pentru div-urile impare */
.despre .row .content .icons-container .icons:nth-child(odd):hover {
  transform: rotate(-10deg);
	 transition: transform 0.3s ease;
}

/* Aplicați o rotație de +10 grade pentru div-urile pare */
.despre .row .content .icons-container .icons:nth-child(even):hover {
  transform: rotate(10deg);
	 transition: transform 0.3s ease;
}
.despre .row .content .icons-container .icons:hover{
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  border: 1px dashed #443;
  cursor: pointer;
}
.despre .row .content .icons-container .icons:hover i{
	font-size: 50px;
}
.despre .row .content .icons-container .icons p{
  font-size: 1.5rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
	 color:#443;
	 text-align: center;
}


/*---Sfarsit-stil-sectiune-pagina-despre.html---*/






/*---Inceput-stil-sectiune-footer---*/
.footer .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  gap: 16px;
	 text-align: center;
}
.footer .box-container .box h3{
  font-size: 2rem;
	 font-family: 'Festive', cursive;
  color:#444;
  padding: 8px 0;
}
.footer .box-container .box a{
  display: block;
  font-size: 16px;
  padding: 4px 0;
  color:#444;
}
.footer .box-container .box a i{
  padding-right: 8px;
}
.footer .box-container .box a:hover i{
  padding-right: 32px;
}

	.footer .credit p{
		font-size: 1.2rem;
	 font-family: Arial, sans-serif;
  margin: 10px 0;
	 color:#443;
	 text-align: center;
	}

/*---Sfarsit-stil-sectiune-footer---*/



/*---Inceput-stil-sectiune-contact---*/
.map{
	width: 100%;
	height: 200px;
	margin: 0 auto;
}


/*---Inceput-stil-sectiune-contact---*/
.map{
	width: 100%;
	height: 300px;
	margin: 0 auto;
}
	
	.contact .container h1{
		font-size: 1.6rem;
		text-align: center;
	 font-family: 'Festive', cursive;
  color:#444;
  padding: 4px 0;
	}
	.contact .container p{
		font-family: Arial, sans-serif;
	  text-align: center;
   padding: 0 10px;
   font-size: 1rem;
   margin-bottom: 10px;
	}
	
	.contact-form {
  display: flex;
  flex-direction: column;
		width: 100%;
		margin: 0 5px;
  gap: 5px;
  text-align: left;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  padding: 5px 15px;
  font-size: 1rem;
  border-bottom: 1px dotted #ffa366;      /* bordura portocalie normală */
  border-radius: 6px;
  outline: none;                  /* elimină bordura albastră implicită */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff7a00;          /* bordura portocalie intensă la focus */
  box-shadow: 0 0 8px rgba(255, 122, 0, 0.6); /* efect glow subtil */
}
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffa366; /* înlocuiește cu o bordură portocalie subtilă */
}


.contact-form textarea {
  resize: none;
}
	
	.contact .container .contact-form .btn{
		width: 120px;
		cursor: pointer;
		margin: auto;
	}
	
/*---Sfarsit-stil-sectiune-contact---*/



/*---Sfarsit-stil-sectiune-contact---*/




@media (min-width: 768px) {
    
    header {
        padding: 15px 25px;
    }
	
   	
	 #nav-menu {
        position: static;
        transform: none;
        height: auto;
        background: none;
        backdrop-filter: none;
        display: flex;
        justify-content: flex-end; /* sau cum vrei poziționarea */
        align-items: center;
    }

    #nav-menu ul {
        display: flex;
        gap: 20px;
    }

   /* Linkuri meniul desktop - fade-in progresiv */
#nav-menu ul li {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Clasa care declanșează animația */
header.loaded #nav-menu ul li:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}
header.loaded #nav-menu ul li:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}
header.loaded #nav-menu ul li:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
}
	header.loaded #nav-menu ul li:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}
/* Dacă ai mai multe linkuri, continuă numărătoarea */

	/* Efect wow la hover pe linkurile desktop */
#nav-menu ul li a {
        display: inline-block; /* necesar pentru transform */
        transition: transform 0.3s ease, color 0.3s ease;
	       font-size: 1.2rem;
        color: #fff; /* text alb implicit */
    }
	
@keyframes neonPulse {
        0% {
            text-shadow:
                0 0 5px #ff914d,
                0 0 10px #ff914d,
                0 0 20px #ff914d,
                0 0 30px #ff751a,
                0 0 40px #ff751a;
        }
        50% {
            text-shadow:
                0 0 10px #ff914d,
                0 0 20px #ff914d,
                0 0 30px #ff914d,
                0 0 40px #ff751a,
                0 0 50px #ff751a;
        }
        100% {
            text-shadow:
                0 0 5px #ff914d,
                0 0 10px #ff914d,
                0 0 20px #ff914d,
                0 0 30px #ff751a,
                0 0 40px #ff751a;
        }
    }

#nav-menu ul li a:hover {
        transform: scale(1.1); /* crește ușor mai mult */
        animation: neonPulse 1s infinite;
        color: #fff;
    }



    #hamburger {
        display: none; /* ascunde butonul pe desktop */
    }
	
	
	.intro-text h1 {
        font-size: 2.4rem;
    }
    .intro-text p {
        font-size: 1.2rem;
    }
	
	
	.retete{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }
.card:nth-child(odd) {
        transform: translateX(-30px) translateY(20px);
    }
    .card:nth-child(even) {
        transform: translateX(30px) translateY(20px);
    }
	
	/* Card vizibil */
.card.visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}
	
	
	
	/*---Inceput-stil-pagina-reteta---*/
	.reteta-intro {
        flex-direction: row;    /* imagine și text alături */
        gap: 30px;
        padding: 30px;
    }

    .reteta-intro img {
        max-width: 450px;       /* imagine mai mare pe tabletă */
    }

    .reteta-intro .intro-text {
        max-width: 400px;
        text-align: center;       /* text la stânga sau centrat după preferință */
    }

    
	
	.reteta-sectiuni {
        display: flex;
        gap: 20px;
        max-width: 1000px;
        margin: auto;
        padding: 20px;
    }

    .reteta-sectiuni .ingrediente,
    .reteta-sectiuni .pasi {
        flex: 1;
        margin: 0; /* scoatem margin:auto care bloca */
    }

    .reteta-sectiuni h2 {
        text-align: left;
    }
	
	/*---Sfarsit-stil-pagina-reteta---*/
	
	
	
	
	/*---Inceput-stil-sectiune-pagina-despre.html---*/
.despre .heading{
  font-size: 2.5rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
	 color: #000;
	 text-align: center;
}
.despre .heading span{
 color: orange;
}
.despre .row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.despre .row .image{
  flex: 1 1 100%;
}
.despre .row .image img{
  width: 100%;
  animation: despreImage 4s linear infinite;
}
.despre .row .content{
  flex: 1 1 100%;
}
.despre .row .content .title{
	 font-family: 'Festive', cursive;
  color:#443;
	 text-align: center;
  font-size: 1.6rem;
}
.despre .row .content p{
   font-family: Arial, sans-serif;
	 text-align: justify;
   padding: 0 10px;
   font-size: 0.95rem;
   margin-bottom: 10px;
}
.despre .row .content .btn{
	margin: 1rem;
}
.despre .row .content .icons-container{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
}
.despre .row .content .icons-container .icons{
  flex: 1 1 160px;
  padding: 16px;
  text-align: center;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  border: 1px solid #443;
}
.despre .row .content .icons-container .icons i{
	font-size: 40px;
	color: #ff914d;
}
/* Aplicați o rotație de -10 grade pentru div-urile impare */
.despre .row .content .icons-container .icons:nth-child(odd):hover {
  transform: rotate(-10deg);
	 transition: transform 0.3s ease;
}

/* Aplicați o rotație de +10 grade pentru div-urile pare */
.despre .row .content .icons-container .icons:nth-child(even):hover {
  transform: rotate(10deg);
	 transition: transform 0.3s ease;
}
.despre .row .content .icons-container .icons:hover{
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  border: 1px dashed #443;
  cursor: pointer;
}
.despre .row .content .icons-container .icons:hover i{
	font-size: 50px;
}
.despre .row .content .icons-container .icons p{
  font-size: 1.5rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
	 color:#443;
	 text-align: center;
}


/*---Sfarsit-stil-sectiune-pagina-despre.html---*/
	
	
	
	
	/*---Inceput-stil-sectiune-footer---*/
.footer .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
	 text-align: center;
}
.footer .box-container .box h3{
  font-size: 2rem;
	 font-family: 'Festive', cursive;
  color:#444;
  padding: 8px 0;
}
.footer .box-container .box a{
  display: block;
  font-size: 16px;
  padding: 4px 0;
  color:#444;
}
.footer .box-container .box a i{
  padding-right: 8px;
}
.footer .box-container .box a:hover i{
  padding-right: 32px;
}

	.footer .credit p{
		font-size: 1.2rem;
	 font-family: Arial, sans-serif;
  margin: 10px 0;
	 color:#443;
	 text-align: center;
	}

/*---Sfarsit-stil-sectiune-footer---*/

	
	
	
	
	/*---Inceput-stil-sectiune-contact---*/
.map{
	width: 100%;
	height: 300px;
	margin: 0 auto;
}
/*---Sfarsit-stil-sectiune-contact---*/
	
	

	
	/*---Inceput-stil-sectiune-contact---*/
.map{
	width: 100%;
	height: 300px;
	margin: 0 auto;
}
	
	.contact .container h1{
		font-size: 1.8rem;
		text-align: center;
	 font-family: 'Festive', cursive;
  color:#444;
  padding: 4px 0;
	}
	.contact .container p{
		font-family: Arial, sans-serif;
	  text-align: center;
   padding: 0 10px;
   font-size: 1rem;
   margin-bottom: 10px;
	}
	
	.contact-form {
  display: flex;
  flex-direction: column;
		max-width: 600px;
		margin: 0 auto;
  gap: 5px;
  text-align: left;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  padding: 5px 15px;
  font-size: 1rem;
  border-bottom: 1px dotted #ffa366;      /* bordura portocalie normală */
  border-radius: 6px;
  outline: none;                  /* elimină bordura albastră implicită */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff7a00;          /* bordura portocalie intensă la focus */
  box-shadow: 0 0 8px rgba(255, 122, 0, 0.6); /* efect glow subtil */
}
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffa366; /* înlocuiește cu o bordură portocalie subtilă */
}


.contact-form textarea {
  resize: none;
}
	
	.contact .container .contact-form .btn{
		width: 160px;
		cursor: pointer;
		margin: auto;
	}
	
/*---Sfarsit-stil-sectiune-contact---*/
	
	
	
}








@media (min-width: 768px) and (max-width: 1023px) {
    #nav-menu ul li a:hover {
        transform: scale(1.15); /* crește mai puțin textul */
        animation: neonPulseSoft 1.5s infinite;
        color: #fff;
    }

    @keyframes neonPulseSoft {
        0% {
            text-shadow:
                0 0 3px #ff914d,
                0 0 6px #ff914d,
                0 0 10px #ff751a;
        }
        50% {
            text-shadow:
                0 0 5px #ff914d,
                0 0 10px #ff914d,
                0 0 15px #ff751a;
        }
        100% {
            text-shadow:
                0 0 3px #ff914d,
                0 0 6px #ff914d,
                0 0 10px #ff751a;
        }
    }
}













@media (min-width: 1024px) {
	section{
  padding: 0 9%;
}
    .retete {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
					   margin: 0 9%;
    }

    header {
        padding: 20px 40px;
					   margin: 0 9%;
    }

    .intro-text {
        max-width: 70%; /* mai lat pe desktop */
    }
    .intro-text h1 {
        font-size: 3rem; /* poate sta pe un singur rând */
    }
    .intro-text p {
        font-size: 1.3rem;
    }
	

    #nav-menu {
        position: static;
        transform: translateY(0);
        height: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
        gap: 20px;
    }

    #nav-menu ul {
        display: flex;
        gap: 20px;
    }

    /* Ascundem hamburger-ul pe desktop */
    .hamburger {
        display: none;
    }

    .btn {
        padding: 12px 22px;
        font-size: 1rem;
    }
	
	
	#nav-menu ul li a:hover {
        transform: scale(1.3); /* text mai mare */
        animation: neonPulseDesktop 1s infinite; /* puls rapid */
        color: #fff;
    }

    @keyframes neonPulseDesktop {
        0% {
            text-shadow:
                0 0 5px #ff914d,
                0 0 15px #ff914d,
                0 0 25px #ff914d,
                0 0 35px #ff751a,
                0 0 50px #ff751a;
        }
        50% {
            text-shadow:
                0 0 10px #ff914d,
                0 0 20px #ff914d,
                0 0 35px #ff914d,
                0 0 50px #ff751a,
                0 0 70px #ff751a;
        }
        100% {
            text-shadow:
                0 0 5px #ff914d,
                0 0 15px #ff914d,
                0 0 25px #ff914d,
                0 0 35px #ff751a,
                0 0 50px #ff751a;
        }
    }
	
	
	
	
	
	/*---Inceput-stil-pagina-reteta---*/
	.reteta-intro{
		margin: 0 9%;
	} 
	.reteta-intro img {
        max-width: 500px;       /* imagine mai mare pe desktop */
    }

    .reteta-intro .intro-text {
        max-width: 450px;
        text-align: center;
    }
	
    .ingrediente, .pasi {
        padding: 40px;
    }
    .ingrediente h2, .pasi h2 {
        font-size: 2.2rem;
    }
	
	/*---Sfarsit-stil-pagina-reteta---*/
	
	
	
	
	
	/*---Inceput-stil-sectiune-pagina-despre.html---*/
.despre .heading{
  font-size: 2.5rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
	 color: #000;
	 text-align: center;
}
.despre .heading span{
 color: orange;
}
.despre .row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.despre .row .image{
  flex: 1 1 300px;
}
.despre .row .image img{
  width: 100%;
  animation: despreImage 4s linear infinite;
}
.despre .row .content{
  flex: 1 1 500px;
}
.despre .row .content .title{
	 font-family: 'Festive', cursive;
  color:#443;
	 text-align: center;
  font-size: 2rem;
}
.despre .row .content p{
   font-family: Arial, sans-serif;
	  text-align: justify;
   padding: 0 10px;
   font-size: 1rem;
   margin-bottom: 10px;
}
.despre .row .content .btn{
	margin: 1rem;
}
.despre .row .content .icons-container{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
}
.despre .row .content .icons-container .icons{
  flex: 1 1 160px;
  padding: 16px;
  text-align: center;
  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  border: 1px solid #443;
}
.despre .row .content .icons-container .icons i{
	font-size: 40px;
	color: #ff914d;
}
/* Aplicați o rotație de -10 grade pentru div-urile impare */
.despre .row .content .icons-container .icons:nth-child(odd):hover {
  transform: rotate(-10deg);
	 transition: transform 0.3s ease;
}

/* Aplicați o rotație de +10 grade pentru div-urile pare */
.despre .row .content .icons-container .icons:nth-child(even):hover {
  transform: rotate(10deg);
	 transition: transform 0.3s ease;
}
.despre .row .content .icons-container .icons:hover{
  border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  border: 1px dashed #443;
  cursor: pointer;
}
.despre .row .content .icons-container .icons:hover i{
	font-size: 50px;
}
.despre .row .content .icons-container .icons p{
  font-size: 1.5rem;
	 font-family: 'Festive', cursive;
  margin: 10px 0;
	 color:#443;
	 text-align: center;
}


/*---Sfarsit-stil-sectiune-pagina-despre.html---*/
	
	
	
	
	/*---Inceput-stil-sectiune-footer---*/
.footer .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 0;
	 text-align: center;
}
.footer .box-container .box h3{
  font-size: 2rem;
	 font-family: 'Festive', cursive;
  color:#444;
  padding: 8px 0;
}
.footer .box-container .box a{
  display: block;
  font-size: 16px;
  padding: 4px 0;
  color:#444;
}
.footer .box-container .box a i{
  padding-right: 8px;
}
.footer .box-container .box a:hover i{
  padding-right: 32px;
}

	.footer .credit p{
		font-size: 1.2rem;
	 font-family: Arial, sans-serif;
  margin: 10px 0;
	 color:#443;
	 text-align: center;
	}

/*---Sfarsit-stil-sectiune-footer---*/


	
	
	
	
	/*---Inceput-stil-sectiune-contact---*/
.map{
	width: 100%;
	height: 400px;
	margin: 0 auto;
}
	
	.contact .container h1{
		font-size: 2rem;
		text-align: center;
	 font-family: 'Festive', cursive;
  color:#444;
  padding: 8px 0;
	}
	.contact .container p{
		font-family: Arial, sans-serif;
	  text-align: center;
   padding: 0 10px;
   font-size: 1rem;
   margin-bottom: 10px;
	}
	
	.contact-form {
  display: flex;
  flex-direction: column;
		max-width: 800px;
		margin: 0 auto;
  gap: 15px;
  text-align: left;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 15px;
  font-size: 1rem;
  border-bottom: 1px dotted #ffa366;      /* bordura portocalie normală */
  border-radius: 6px;
  outline: none;                  /* elimină bordura albastră implicită */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ff7a00;          /* bordura portocalie intensă la focus */
  box-shadow: 0 0 8px rgba(255, 122, 0, 0.6); /* efect glow subtil */
}
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffa366; /* înlocuiește cu o bordură portocalie subtilă */
}


.contact-form textarea {
  resize: none;
}
	
	.contact .container .contact-form .btn{
		width: 200px;
		cursor: pointer;
		margin: auto;
	}
	
/*---Sfarsit-stil-sectiune-contact---*/
	
	
	
	
	
}








/* Large screen 1280px */
@media (min-width: 1280px) {
    .reteta-intro img {
        max-width: 600px; /* sau orice valoare preferi */
        margin: 0 auto;   /* centrează imaginea */
        display: block;
        height: auto;
    }

    .reteta-intro {
        text-align: center; /* păstrează textul centrat */
        position: relative;
    }

    .reteta-intro .intro-text {
        max-width: 400px; /* textul nu trebuie să fie prea lat */
        width: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .ingrediente ul, .pasi ol {
        font-size: 1.2rem;
    }
	
	
	
}













/* ========== ANIMAȚII ========== */
@keyframes despreImage {
  0%, 100% {
    transform: scale(.9);
    border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
  }
  50% {
    transform: scale(0.8);
    border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  }
}