/* ==========================================================
   SPICELO STORIES
   Version 1.7 Professional CSS Architecture
   Developer: Sanjay Majumdar
   ========================================================== */

/* ==========================================================
   01. GLOBAL STYLES
   ========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: #FAF3E0;
    font-family: "Inter", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    animation: fadeIn 0.8s ease-in;
}


/* ==========================================================
   02. TYPOGRAPHY
   ========================================================== */

h1 {

    color: #d35400;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px lightgray;
}

h2 {
    color: #e67e22;
}

p {
    color: #444444;
    font-size: 18px;
}

li {
    color: #006400;
    font-size: 18px;
}

button {
    background-color: #e67e22;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background-color: #d35400;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(211,84,0,0.35);
}

/* ==========================================================
   03. NAVBAR
   ========================================================== */

    nav {
    background-color: #2c3e50;
    padding: 15px;
    text-align: center;
    border-radius: 8px;

    position: sticky;
    top: 0;
    z-index: 1000;

    margin: 20px auto;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}


nav a {
    color: white;
    text-decoration: none;
    margin: 0 8px;
    font-size: 18px;
    font-weight: bold;

   transition: all 0.3s ease;
    padding: 8px 12px;
}

nav a:hover {
    color: #f39c12;
    background-color: rgba(255,255,255,0.10);
    border-radius: 6px;
    
}


.hero{
    background: linear-gradient(135deg,#fff7f0,#ffe8cc);
    min-height:80vh;

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

    text-align:center;

    padding:60px 20px;

    border-radius:18px;

    margin:30px auto;
}

.hero h1{
    font-size:56px;
    color:#d35400;
    font-family:'Poppins',sans-serif;
    margin-bottom:15px;
}
.hero p{
    font-size:20px;
    color:#555;
    max-width:700px;
    line-height:1.8;
}

.tagline {
    font-size: 28px;
    font-style: italic;
    color: #d35400;
}

.hero-text {
    font-size: 20px;
    color: #444;
    margin: 20px;
}

.hero button{

    margin-top:30px;

    background:#d35400;
    color:white;

    padding:15px 35px;

    border:none;

    border-radius:10px;

    font-size:18px;

    cursor:pointer;

    transition:all .3s ease;

}

.hero button:hover{

    background:#e67e22;

    transform:translateY(-3px);

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

}

/* ===== Professional Recipe Card ===== */

.food-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.food-card h3 {
    color: #d35400;
    font-size: 28px;
}

.food-card p {
    color: #555;
    font-size: 18px;
}

.food-card button {
    background-color: #e67e22;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.food-card button:hover {
    background-color: #d35400;

}
/* ===== Professional Recipe Images ===== */

.food-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    transition: transform 0.4s ease;
    
}

.food-card:hover img{

    transform: scale(1.05);

}

 .recipe-info {
    display: flex;
    justify-content: space-around;
    background: #fff3e0;
    padding: 15px;
    margin: 20px 0;
    border-radius: 12px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.recipe-info span {
    color: #d35400;
    font-size: 18px;
}
/* ===== Pizza Recipe Page ===== */

h1 {
    margin-bottom: 20px;
}

h2 {
    margin-top: 35px;
    margin-bottom: 15px;
}

ul, ol {
    padding-left: 25px;
}

ul li,
ol li {
    margin-bottom: 10px;

}

/* ==========================================================
   05. RECIPE PAGES
   ========================================================== */

/* ===== Professional Recipe Container ===== */

.recipe-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(211, 84, 0, 0.08);
}

/* ===== Recipe Cards Grid ===== */

.food-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}


@media (max-width: 768px) {
    .food-grid {
        grid-template-columns: 1fr;
    }

    /* ==========================================================
   03. HERO SECTION
   ========================================================== */
}


/* ===== Premium Footer ===== */

.footer {
    background: linear-gradient(135deg, #1f2937, #2c3e50);
    color: white;
    text-align: center;
    padding: 55px 20px 30px;
    margin-top: 70px;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.12);
}

/* ===== Premium Footer Heading ===== */

.footer h3 {
    color: #f39c12;
    font-size: 32px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

/* ===== Premium Footer Text ===== */

.footer p {
    color: #ecf0f1;
    font-size: 18px;
    line-height: 1.6;
}

.footer-links {
    margin: 25px 0;
}

/* ===== Premium Footer Links ===== */

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    margin: 0 10px;
    padding: 8px 12px;
    font-weight: bold;
    display: inline-block;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #f39c12;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}


/* ===== Premium Copyright ===== */

.copyright {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 14px;
    color: #bdc3c7;
}

/* ==========================================================
   09. ANIMATIONS
   ========================================================== */


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== Spicelo Stories Professional Hero ===== */

.hero {
    min-height: 450px;
    text-align: center;
    padding: 45px 20px 50px;
    background-color: #ffffff;
}

.hero-intro {
    margin-bottom: 30px;
}

.hero-intro p:first-child {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* ===== Cinematic Split Title ===== */

.hero-intro h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    margin: 0 0 8px;
    font-weight: 700;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    overflow: visible;
}

.spicelo-word,
.stories-word {
    display: inline-block;
    opacity: 0;
}

.spicelo-word {
    animation: spiceloEnter 1.4s ease-out 0.3s forwards;
}

.stories-word {
    animation: storiesEnter 1.8s ease-out 0.45s forwards;
}

/* SPICELO — left se entry */

@keyframes spiceloEnter {
    0% {
        opacity: 0;
        transform: translateX(-100vw) scale(1.15);
    }

    70% {
        opacity: 1;
        transform: translateX(8px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* STORIES — right se slightly slower entry */

@keyframes storiesEnter {
    0% {
        opacity: 0;
        transform: translateX(100vw) scale(1.12);
    }

    70% {
        opacity: 1;
        transform: translateX(-6px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ===== Cinematic Fly-In Title Reveal ===== */

@keyframes spiceLoTitleReveal {

    0% {
        opacity: 0;
        transform: translateX(-120vw) scale(1.25);
        letter-spacing: 12px;
    }

    55% {
        opacity: 1;
        transform: translateX(8px) scale(1.03);
        letter-spacing: 3px;
    }

    75% {
        transform: translateX(-3px) scale(1.01);
        letter-spacing: 2px;
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        letter-spacing: 1px;
    }
}
.hero-intro p:last-child {
    font-size: 17px;
    margin: 0;
}

.hero-banner {
    background:
        linear-gradient(rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40)),
        url("images/hero-banner.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 430px;
    width: 100%;

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

    border-radius: 20px;
}

.hero-overlay {
    text-align: center;
    color: white;
    width: 100%;
    padding: 40px 20px;
}

.hero-overlay h1 {
    color: white;
    font-size: 60px;
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.6);
}

.hero-overlay .tagline {
    color: #ffe082;
    font-size: 30px;
    margin-top: 15px;
}

.hero-overlay .hero-text {
    color: white;
    font-size: 22px;
    max-width: 700px;
    margin: 20px auto;
}
/* ===== Professional Recipes Heading ===== */

#recipes {
    text-align: center;
    color: #d35400;
    font-size: 38px;
    margin-top: 50px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
/* ===== Professional About Section ===== */

#about {
    max-width: 900px;
    margin: 70px auto 20px;
    padding: 0 20px;
    text-align: center;
    color: #d35400;
    font-size: 38px;
}

#about + p,
#about + p + p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px;
    text-align: center;
}

#about + p {
    font-size: 22px;
    font-weight: bold;
    color: #2c3e50;
}

#about + p + p {
    font-size: 18px;
    color: #555;
}
/* ===== About Card ===== */

#about {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
}
/* ===== Professional Contact Section ===== */

#contact {
    max-width: 900px;
    margin: 70px auto 20px;
    padding: 30px 20px 10px;
    text-align: center;
    color: #d35400;
    font-size: 38px;
}

#contact + p,
#contact + p + p {
    text-align: center;
    color: #555;
    font-size: 18px;
    margin: 10px auto;
}

/* ==========================================================
   10. RESPONSIVE DESIGN
   ========================================================== */
   
/* ===== Mobile Responsive Hero ===== */

@media (max-width: 768px) {
    .hero {
        min-height: 500px;
        border-radius: 0 0 16px 16px;
    }

    .hero-overlay {
        padding: 30px 18px;
    }

    .hero-overlay h1 {
        font-size: 40px;
    }

    .hero-overlay .tagline {
        font-size: 22px;
    }

    .hero-overlay .hero-text {
        font-size: 17px;
        max-width: 500px;
    }

    .hero button {
        font-size: 17px;
        padding: 13px 25px;
    }
}/* ===== Mobile Recipe Cards ===== */

@media (max-width: 768px) {
    .food-grid {
        gap: 20px;
        padding: 0 15px;
        margin: 30px auto;
    }

/* ==========================================================
   04. FOOD CARDS
   ========================================================== */

    .food-card {
        padding: 15px;
        border-radius: 16px;
    }

    .food-card img {
        height: 200px;
        border-radius: 12px;
    }

    .food-card h3 {
        font-size: 24px;
    }

    .food-card p {
        font-size: 16px;
    }

    .food-card button {
        padding: 10px 20px;
        font-size: 15px;
    }

}/* ===== Mobile Readability Upgrade ===== */

@media (max-width: 768px) {

    body {
        font-family: Arial, sans-serif;
        font-size: 18px;
        line-height: 1.75;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1 {
        font-size: 42px;
        line-height: 1.2;
        letter-spacing: 0.5px;
    }

    h2 {
        font-size: 32px;
        line-height: 1.3;
        letter-spacing: 0.3px;
    }

    h3 {
        font-size: 26px;

        line-height: 1.3;
    }

    p {
        font-size: 18px;
        line-height: 1.75;
        letter-spacing: 0.2px;
    }

    nav a {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    
}/* ===== Mobile Navbar Fix ===== */

@media (max-width: 768px) {

    nav {
        padding: 10px 5px;
        margin: 0;
        border-radius: 0;
    }

    nav a {
        margin: 0;
        padding: 6px 7px;
        font-size: 14px;
    }

}

/* ===== Spicelo Stories Professional Typography ===== */

h1,
h2,
h3,
nav a,
button,
.footer h3 {
    font-family: "Poppins", Arial, sans-serif;
}

h1,
h2,
h3 {
    font-weight: 700;
}

nav a,
button {
    font-weight: 600;
}

h2 {
    font-size: 30px;
    margin-top: 45px;
    margin-bottom: 20px;
}

.food-card h3 {
    font-size: 24px;
}
.food-card p {
    font-size: 17px;
    line-height: 1.7;
}
button {
    font-size: 16px;
    font-weight: 600;
}
.food-card {
    padding: 22px;
}
.food-card h3 {
    margin-top: 18px;
    margin-bottom: 10px;
}

.food-card p {
    margin-bottom: 18px;
}
.food-card button {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.food-card button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.recipes-cta {
    text-align: center;
    margin: 30px 0;
}

.recipes-cta button {
    background-color: #e67e22;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* ===== Professional Recipe Image ===== */

.recipe-container img {
    width: 100%;
    max-width: 700px;
    height: 420px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 25px auto;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* ===== Mobile Recipe Image ===== */

@media (max-width: 768px) {

    .recipe-container img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        object-position: center;
        margin: 20px auto;
        border-radius: 14px;
    }

}
.recipe-container ul {
    background: #fff8f0;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.recipe-container li {
    margin: 12px 0;
    font-size: 20px;
    line-height: 1.7;
}
.recipe-container ol {
    background: #fff8f0;
    padding: 20px 30px 20px 45px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.recipe-container ol li {
    margin: 12px 0;
    font-size: 20px;
    line-height: 1.7;
}

/* ==========================================================
   06. ABOUT SECTION
   ========================================================== */

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

.about {
    background: #ffffff;
    padding: 70px 20px;
}

.about .container {
    max-width: 900px;
    margin: auto;
}

.about h2 {
    text-align: center;
    font-size: 2rem;
    color: #d35400;
    margin-bottom: 25px;
}

.about p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    text-align: center;
    margin-bottom: 18px;
}

.about strong {
    color: #e67e22;
}

/* ==========================================================
   07. CONTACT SECTION
   ========================================================== */

/* ===== CONTACT SECTION ===== */

.contact{
    background:#fff7f0;
    padding:70px 20px;
    text-align:center;
}

.contact .container{
    max-width:800px;
    margin:auto;
}

.contact h2{
    font-size:2rem;
    color:#d35400;
    margin-bottom:20px;
}

.contact p{
    font-size:1.1rem;
    color:#555;
    margin:10px 0;
}

.contact-info{
    margin-top:25px;
    background:white;
    padding:25px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

/* ==========================================================
   08. FOOTER
   ========================================================== */

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

.footer{
    background:#2c3e50;
    color:white;
    text-align:center;
    padding:40px 20px;
}

.footer-content{
    max-width:900px;
    margin:auto;
}

.footer h3{
    margin-bottom:10px;
    color:#f39c12;
}

.footer-links{
    margin:20px 0;
}

.footer-links a{
    color:white;
    text-decoration:none;
    margin:0 12px;
    transition:0.3s;
}

.footer-links a:hover{
    color:#f39c12;
}

.designer{
    margin-top:15px;
    font-size:15px;
}
/* ===== Recipe Card Hover Animation ===== */

.food-card:hover{

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0,0,0,0.18);

}
/* ===== Universal Button Animation — Polished ===== */

button {
    background: linear-gradient(135deg, #d35400, #f39c12);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    filter: brightness(1.06);
}

button:active {
    transform: translateY(0) scale(0.97);
}
/* ===== Scroll Reveal ===== */

.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}
/* ===========================
   Premium Section Spacing
=========================== */

section{

    padding:80px 20px;

}

.container{

    max-width:1100px;

    margin:auto;

}

h2{

    font-size:38px;

    margin-bottom:20px;

    text-align:center;

    color:#2c3e50;

}

section p{

    font-size:18px;

    line-height:1.8;

    color:#555;

    text-align:center;

}
@media (max-width:768px){

    .recipe-container li{
        font-size:20px;
        line-height:1.8;
    }

    .recipe-container ol li{
        font-size:20px;
        line-height:1.8;
    }

}
/* ===== Final Mobile Recipe Font Fix ===== */

@media (max-width:768px){

    .recipe-container ul li,
    .recipe-container ol li{

        font-size:22px !important;
        line-height:1.9 !important;

    }

}
/* ===== Mobile Cinematic Title Fix ===== */

@media (max-width: 768px) {

    .hero-intro h1 {
        font-size: 32px;
        gap: 6px;
        white-space: nowrap;
    }

    .spicelo-word {
        animation: spiceloEnterMobile 1.4s ease-out 0.3s forwards;
    }

    .stories-word {
        animation: storiesEnterMobile 1.8s ease-out 0.45s forwards;
    }
}

/* Mobile SPICELO — controlled left entry */

@keyframes spiceloEnterMobile {

    0% {
        opacity: 0;
        transform: translateX(-55vw) scale(1.08);
    }

    70% {
        opacity: 1;
        transform: translateX(5px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Mobile STORIES — controlled right entry */

@keyframes storiesEnterMobile {

    0% {
        opacity: 0;
        transform: translateX(55vw) scale(1.06);
    }

    70% {
        opacity: 1;
        transform: translateX(-4px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* ===== SpiceLo Stories Logo ===== */

.spicelo-logo {
    display: block;
    width: 170px;
    height: 170px;
    object-fit: cover;
    margin: 0 auto 18px;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    animation: logoEntrance 1s ease-out both;
}

@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: scale(0.65) translateY(-25px);
    }

    70% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@media (max-width: 768px) {

    .spicelo-logo {
        width: 135px;
        height: 135px;
        margin-bottom: 15px;
    }

}
/* ===== SpiceLo Logo — Clear & Smooth ===== */

.spicelo-logo {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 18px;

    object-fit: contain;

    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    transform: translateZ(0);
}
@media (max-width: 768px) {
    .spicelo-logo {
        width: 125px;
        height: 125px;
        margin-bottom: 15px;
    }
}
/* ===== Mobile Recipe Image Fix ===== */

@media (max-width: 768px) {

    .recipe-container img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        object-position: center;
        border-radius: 14px;
    }

}
/* ==========================================================
   FINAL RECIPE IMAGE FIX
   ========================================================== */

.recipe-container img {
    width: 100% !important;
    max-width: 700px !important;
    height: 420px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 25px auto !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
}

/* Mobile recipe image */

@media (max-width: 768px) {

    .recipe-container img {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        object-position: center !important;
        margin: 20px auto !important;
        border-radius: 14px !important;
    }

}