/* ==========================================================
   QUICK FOOD RECIPES
   Premium Responsive UI (2026)
   File : assets/css/style.css
   ========================================================== */


/* ==========================================================
   GOOGLE FONT
   ========================================================== */

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


/* ==========================================================
   ROOT VARIABLES
   ========================================================== */

:root{

--primary:#ff7a00;
--primary-dark:#e26000;
--secondary:#ffb347;

--white:#ffffff;

--light:#fff9f3;

--text:#222;

--text-light:#666;

--border:#ececec;

--shadow:0 15px 40px rgba(0,0,0,.08);

--radius:18px;

--transition:.35s ease;

--max-width:1400px;

}


/* ==========================================================
   RESET
   ========================================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:#fafafa;

color:var(--text);

line-height:1.6;

overflow-x:hidden;

}


/* ==========================================================
   LINKS
   ========================================================== */

a{

text-decoration:none;

color:inherit;

}


/* ==========================================================
   IMAGES
   ========================================================== */

img{

display:block;

width:100%;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

width:92%;

max-width:var(--max-width);

margin:auto;

}


/* ==========================================================
   HERO
   ========================================================== */

.hero{

position:relative;

width:100%;

min-height:520px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:70px 25px;

overflow:hidden;

background:
linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
url("https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1800")
center center/cover no-repeat;

}


/* ==========================================================
   DARK OVERLAY
   ========================================================== */

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(135deg,
rgba(255,122,0,.35),
rgba(0,0,0,.20));

}


/* ==========================================================
   HERO CONTENT
   ========================================================== */

.hero-content{

position:relative;

z-index:10;

max-width:900px;

color:#fff;

}


/* ==========================================================
   MAIN TITLE
   ========================================================== */

.hero h1{

font-size:58px;

font-weight:800;

line-height:1.15;

margin-bottom:18px;

text-shadow:0 4px 18px rgba(0,0,0,.40);

}


/* ==========================================================
   SUBTITLE
   ========================================================== */

.hero p{

font-size:21px;

font-weight:400;

opacity:.95;

margin-bottom:40px;

}


/* ==========================================================
   SEARCH BAR
   ========================================================== */

#recipeSearch{

width:100%;

max-width:620px;

height:62px;

border:none;

outline:none;

padding:0 28px;

border-radius:60px;

font-size:17px;

background:#fff;

box-shadow:0 15px 40px rgba(0,0,0,.20);

transition:var(--transition);

}


#recipeSearch:focus{

transform:translateY(-2px);

box-shadow:0 20px 50px rgba(0,0,0,.25);

}


/* ==========================================================
   REDIRECT INFO
   ========================================================== */

.redirect-info{

margin-top:28px;

font-size:17px;

font-weight:500;

letter-spacing:.3px;

}


.redirect-info strong{

display:inline-block;

margin:0 8px;

padding:4px 14px;

border-radius:30px;

background:var(--primary);

color:#fff;

font-size:20px;

}


/* ==========================================================
   SECTION WRAPPER
   ========================================================== */

.recipe-wrapper{

padding:70px 0;

background:#fafafa;

}


/* ==========================================================
   RECIPE GRID
   ========================================================== */

.recipe-grid{

width:92%;

max-width:1450px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(270px,1fr));

gap:30px;

align-items:stretch;

}


/* ==========================================================
   RECIPE CARD
   ========================================================== */

.recipe-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

}


/* Floating Glow */

.recipe-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

z-index:2;

}


.recipe-card:hover::before{

left:130%;

}


/* Hover */

.recipe-card:hover{

transform:translateY(-10px);

box-shadow:

0 25px 55px rgba(0,0,0,.18);

}

/* ==========================================================
   RECIPE IMAGE
   ========================================================== */

.recipe-image{

position:relative;

overflow:hidden;

aspect-ratio:16/10;

background:#f3f3f3;

}


.recipe-image img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .6s ease;

display:block;

}


.recipe-card:hover .recipe-image img{

transform:scale(1.08);

}


/* ==========================================================
   RECIPE CONTENT
   ========================================================== */

.recipe-content{

padding:22px;

display:flex;

flex-direction:column;

justify-content:space-between;

min-height:155px;

}


.recipe-content h2{

font-size:22px;

font-weight:700;

line-height:1.35;

color:var(--text);

margin-bottom:18px;

transition:var(--transition);

}


.recipe-card:hover h2{

color:var(--primary);

}


/* ==========================================================
   RECIPE LINK BUTTON
   ========================================================== */

.recipe-link{

display:inline-flex;

align-items:center;

justify-content:center;

width:max-content;

padding:12px 24px;

border-radius:40px;

background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

font-size:15px;

font-weight:600;

letter-spacing:.3px;

transition:var(--transition);

box-shadow:
0 8px 20px rgba(255,122,0,.30);

}


.recipe-card:hover .recipe-link{

transform:translateY(-3px);

box-shadow:
0 16px 30px rgba(255,122,0,.40);

}


/* ==========================================================
   SEO SECTION
   ========================================================== */

.seo-content{

padding:80px 25px;

background:#fff;

border-top:1px solid #eee;

}


.seo-content .container{

max-width:1000px;

margin:auto;

text-align:center;

}


.seo-content h2{

font-size:38px;

font-weight:800;

margin-bottom:20px;

color:var(--text);

}


.seo-content p{

font-size:18px;

line-height:1.9;

color:var(--text-light);

}


/* ==========================================================
   FOOTER
   ========================================================== */

footer{

margin-top:0;

background:#1d1d1d;

color:#fff;

}


.footer-inner{

width:92%;

max-width:1300px;

margin:auto;

padding:30px 0;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}


.footer-inner p{

font-size:15px;

letter-spacing:.4px;

opacity:.85;

}


/* ==========================================================
   SMOOTH ANIMATIONS
   ========================================================== */

.hero-content{

animation:fadeUp .9s ease;

}


.recipe-card{

animation:cardFade .8s ease;

}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

width:11px;

}


::-webkit-scrollbar-track{

background:#f3f3f3;

}


::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--primary-dark)
);

border-radius:50px;

}


::-webkit-scrollbar-thumb:hover{

background:#d95d00;

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

background:var(--primary);

color:#fff;

}


/* ==========================================================
   INPUT PLACEHOLDER
   ========================================================== */

::placeholder{

color:#999;

font-weight:500;

}


/* ==========================================================
   IMAGE LOADING EFFECT
   ========================================================== */

.recipe-image{

position:relative;

}


.recipe-image::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(255,255,255,0),
rgba(255,255,255,.15),
rgba(255,255,255,0)
);

opacity:0;

transition:.5s;

}


.recipe-card:hover .recipe-image::after{

opacity:1;

}


/* ==========================================================
   SMALL POLISH
   ========================================================== */

.hero h1,
.hero p{

max-width:900px;

margin-left:auto;

margin-right:auto;

}


.recipe-card{

cursor:pointer;

}

.recipe-card:active{

transform:scale(.98);

}

/* ==========================================================
   LARGE DESKTOPS (1600px+)
   ========================================================== */

@media (min-width:1600px){

.hero{

min-height:620px;

}

.hero h1{

font-size:72px;

max-width:1100px;

}

.hero p{

font-size:24px;

}

.recipe-grid{

grid-template-columns:repeat(5,1fr);

max-width:1650px;

}

.recipe-content h2{

font-size:24px;

}

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (max-width:1400px){

.recipe-grid{

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

}

.hero h1{

font-size:54px;

}

}


/* ==========================================================
   TABLETS
   ========================================================== */

@media (max-width:992px){

.hero{

min-height:470px;

padding:60px 20px;

}

.hero h1{

font-size:42px;

line-height:1.2;

}

.hero p{

font-size:18px;

margin-bottom:30px;

}

#recipeSearch{

height:56px;

font-size:16px;

}

.recipe-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.recipe-content{

min-height:140px;

padding:18px;

}

.recipe-content h2{

font-size:20px;

}

.seo-content{

padding:60px 20px;

}

.seo-content h2{

font-size:30px;

}

.seo-content p{

font-size:16px;

}

}


/* ==========================================================
   MOBILE DEVICES
   ========================================================== */

@media (max-width:768px){

.hero{

min-height:430px;

padding:45px 18px;

}

.hero h1{

font-size:34px;

margin-bottom:15px;

}

.hero p{

font-size:16px;

margin-bottom:25px;

}

#recipeSearch{

height:54px;

font-size:15px;

padding:0 20px;

}

.redirect-info{

font-size:15px;

}

.recipe-wrapper{

padding:45px 0;

}

.recipe-grid{

grid-template-columns:1fr;

gap:20px;

width:94%;

}

.recipe-content{

padding:18px;

}

.recipe-content h2{

font-size:19px;

}

.recipe-link{

width:100%;

justify-content:center;

padding:14px;

font-size:15px;

}

.footer-inner{

padding:24px 15px;

}

.footer-inner p{

font-size:14px;

line-height:1.6;

}

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:480px){

.hero{

min-height:390px;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

#recipeSearch{

height:50px;

font-size:14px;

}

.recipe-content{

padding:16px;

}

.recipe-content h2{

font-size:18px;

}

.redirect-info strong{

font-size:18px;

padding:4px 10px;

}

.seo-content{

padding:45px 15px;

}

.seo-content h2{

font-size:26px;

}

.seo-content p{

font-size:15px;

}

}


/* ==========================================================
   VERY SMALL DEVICES
   ========================================================== */

@media (max-width:360px){

.hero h1{

font-size:24px;

}

.hero p{

font-size:14px;

}

.recipe-content h2{

font-size:17px;

}

.recipe-link{

font-size:14px;

}

}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


@keyframes cardFade{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/* ==========================================================
   UTILITIES
   ========================================================== */

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mb-20{

margin-bottom:20px;

}

.mb-30{

margin-bottom:30px;

}

.hidden{

display:none !important;

}


/* ==========================================================
   PERFORMANCE
   ========================================================== */

.recipe-card,
.recipe-image img,
.recipe-link,
.hero-content{

will-change:transform;

}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

.hero,
footer,
.redirect-info,
#recipeSearch{

display:none;

}

.recipe-grid{

display:block;

}

.recipe-card{

page-break-inside:avoid;

margin-bottom:20px;

box-shadow:none;

border:1px solid #ddd;

}

}





/* ==========================================================
   INDEX2.PHP STYLES
   ========================================================== */


/* ==========================================================
   TOP BANNER
   ========================================================== */

.register-banner{

width:100%;

margin:0;

padding:0;

line-height:0;

overflow:hidden;

}

.register-banner img{

width:100%;

height:auto;

display:block;

object-fit:cover;

}



/* ==========================================================
   WELCOME SECTION
   ========================================================== */

.welcome-section{

padding:70px 20px;

background:#ffffff;

text-align:center;

}

.welcome-section .container{

max-width:900px;

margin:auto;

}

.welcome-section h1{

font-size:48px;

font-weight:700;

color:#222;

margin-bottom:20px;

line-height:1.25;

}

.welcome-section h2{

font-size:26px;

font-weight:700;

line-height:1.5;

margin-bottom:25px;

color:#444;

}

.welcome-section p{

font-size:18px;

line-height:1.9;

color:#666;

}



/* ==========================================================
   ABOUT SECTION
   ========================================================== */

.about-recipes{

background:#f4f4f4;

padding:70px 20px;

text-align:center;

}

.about-recipes .container{

max-width:900px;

margin:auto;

}

.about-recipes h2{

font-size:38px;

font-weight:700;

margin-bottom:18px;

color:#222;

}

.about-recipes h3{

font-size:24px;

font-weight:700;

margin-bottom:25px;

color:#444;

}

.about-recipes p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:20px;

}



/* ==========================================================
   POPUP BACKGROUND
   ========================================================== */

#registerPopup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

background:rgba(0,0,0,.45);

z-index:999999;

}

/* ==========================================================
   POPUP BOX
   ========================================================== */

.popup-box{

width:100%;

max-width:520px;

background:#ffffff;

border-radius:14px;

padding:35px;

box-shadow:

0 15px 45px rgba(0,0,0,.25);

text-align:center;

}

.popup-box h2{

font-size:34px;

font-weight:700;

margin-bottom:20px;

color:#222;

}

.popup-box p{

font-size:17px;

line-height:1.8;

color:#555;

margin-bottom:20px;

}



/* ==========================================================
   REGISTER BUTTON
   ========================================================== */

.popup-register-btn{

display:block;

width:100%;

padding:16px;

margin-top:15px;

border-radius:8px;

background:#0d6efd;

color:#ffffff;

font-size:18px;

font-weight:600;

transition:.3s;

text-align:center;

}

.popup-register-btn:hover{

background:#0b5ed7;

}


/* ==========================================================
   CANCEL BUTTON
   ========================================================== */

.popup-cancel-btn{

width:100%;

margin-top:15px;

padding:16px;

border:none;

border-radius:8px;

background:#6c757d;

color:#ffffff;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.popup-cancel-btn:hover{

background:#5c636a;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:992px){

.welcome-section h1{

font-size:38px;

}

.welcome-section h2{

font-size:22px;

}

.about-recipes h2{

font-size:32px;

}

.popup-box{

max-width:470px;

padding:30px;

}

}



@media(max-width:768px){

.welcome-section{

padding:50px 20px;

}

.welcome-section h1{

font-size:30px;

}

.welcome-section h2{

font-size:20px;

}

.welcome-section p{

font-size:16px;

}

.about-recipes{

padding:50px 20px;

}

.about-recipes h2{

font-size:28px;

}

.about-recipes h3{

font-size:20px;

}

.about-recipes p{

font-size:16px;

}

.popup-box{

padding:25px;

}

.popup-box h2{

font-size:28px;

}

.popup-box p{

font-size:16px;

}

}



@media(max-width:480px){

.popup-box{

padding:22px;

border-radius:10px;

}

.popup-box h2{

font-size:24px;

}

.popup-box p{

font-size:15px;

line-height:1.7;

}

.popup-register-btn,

.popup-cancel-btn{

padding:15px;

font-size:16px;

}

}


/* ==========================================================
   FAKE PHONE NOTIFICATION
========================================================== */

#fakeNotification{

position:fixed;

top:-150px;

left:50%;

transform:translateX(-50%);

width:95%;

max-width:420px;

background:#ffffff;

border-radius:14px;

box-shadow:0 10px 35px rgba(0,0,0,.20);

display:flex;

align-items:center;

padding:14px;

z-index:999998;

transition:top .6s ease;

}


.notification-icon{

width:48px;

height:48px;

background:#0d6efd;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#fff;

flex-shrink:0;

}


.notification-content{

flex:1;

padding:0 12px;

}


.notification-title{

font-size:15px;

font-weight:700;

color:#222;

margin-bottom:4px;

}


.notification-text{

font-size:13px;

line-height:1.4;

color:#666;

}


.notification-time{

font-size:12px;

color:#888;

white-space:nowrap;

}

/* ==========================================================
   LEGAL BUTTONS
========================================================== */

.legal-buttons{

padding:40px 20px;

text-align:center;

background:#ffffff;

}

.legal-buttons .container{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.legal-btn{

display:inline-block;

padding:14px 28px;

background:#ff7a00;

color:#ffffff;

text-decoration:none;

font-size:16px;

font-weight:600;

border-radius:8px;

transition:.3s ease;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.legal-btn:hover{

background:#e56800;

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,0,0,.20);

}

@media (max-width:768px){

.legal-buttons .container{

flex-direction:column;

}

.legal-btn{

width:100%;

max-width:320px;

}

}