* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

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

    letter-spacing: -0.5px;

}



:root {

    /* Color palette */

    --primary-color: #58CC9D;      /* Updated green for CTAs and highlights */

    --secondary-color: #FF6B4A;    /* Updated warmer accent color */

    --background-color: #FDFCFB;   /* Warm background */

    --light-bg: #F8F9FA;           /* Light backgrounds */

    --text-color: #212529;         /* Main text color */

    --light-text: #6C757D;         /* Lighter text for secondary info */

    --dark-bg: #343A40;            /* For search container background */

    --card-bg: #FFFFFF;            /* Card background */

    --footer-bg: #285943;          /* Footer background */

    --footer-text: #F7F7F7;        /* Footer text color */

    --overlay-bg: rgba(0, 0, 0, 0.75); /* Overlay background with opacity */

}



body {

    background-color: var(--background-color);

    color: var(--text-color);

    line-height: 1.6;

}



.full-page-body {

    width: 100%;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    position: relative; /* Added for positioning context */

}



.hero-section {

    width: 100%;

    padding: 5rem 1.25rem;

    text-align: center;

    background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),

    url('./image/pexels-ella-olsson-572949-1640774.jpg') center/cover no-repeat;

    position: relative;

    overflow: hidden;

}



/* Add subtle animation to hero section */

.hero-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: radial-gradient(circle, transparent 50%, rgba(255,255,255,0.1) 100%);

    animation: pulse 10s infinite alternate;

    z-index: 1;

    pointer-events: none;

}



@keyframes pulse {

    0% { opacity: 0.3; }

    100% { opacity: 0.7; }

}



.hero-section-top {

    margin-bottom: 3rem;

    position: relative;

    z-index: 2;

}



.headline h1 {

    font-size: 3rem;

    color: var(--text-color);

    margin-bottom: 0.7rem;

    line-height: 1.2;

    font-weight: 700;

    text-shadow: 0 2px 4px rgba(0,0,0,0.1);

}


.highlight-green {
    color: #66b97c;
    font-weight: 800;
  }



.sub-headline p {

    font-size: 1.1rem;

    color: var(--light-text);

    max-width: 36rem;

    margin: 0 auto;

}



.hero-section-bottom {

    margin-top: 20px;

    position: relative;

    z-index: 2;

}



.search-container {

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: var(--dark-bg);

    border-radius: 3.2rem;

    padding: 0.4rem 0.4rem 0.4rem 1.7rem;

    max-width: 50rem;

    margin: 0 auto;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.search-container:hover {

    transform: translateY(-3px);

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

}



.search-icon {

    font-size: 1.5rem;

    color: #fff;

    margin-right: 0.7rem;

}



.search-container input[type="text"] {

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    color: #fff;

    font-size: 1rem;

    padding: 0.8rem 0;

}



.search-container input[type="text"]::placeholder {

    color: #fff;

    opacity: 0.8;

}



.search-container .button {

    background-color: var(--secondary-color);

    border: none;

    color: #fff;

    padding: 0.8rem 1.5rem;

    border-radius: 3.1rem;

    cursor: pointer;

    font-size: 1rem;

    margin-left: 0.7rem;

    transition: all 0.3s ease;

    font-weight: 600;

}



.search-container .button:hover {

    background-color: #722408;

    transform: scale(1.05);

}



.recipe-lists {

    margin-top: 2rem;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.8rem;

}



.recipe-lists .ingredient {

    background-color: rgba(52, 58, 64, 0.8);

    color: #fff;

    padding: 0.6rem 1.2rem;

    border-radius: 1.5rem;

    font-size: 0.9rem;

    cursor: pointer;

    transition: all 0.3s ease;

    backdrop-filter: blur(5px);

}



.recipe-lists .ingredient:hover {

    background-color: #444444;

    transform: translateY(-3px);

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}



.cards-section {

    width: 100%;

    padding: 4rem 1.25rem;

    background-color: var(--light-bg);

}



.features-recipe h3 {

    font-size: 2.5rem;

    color: var(--text-color);

    text-align: center;

    margin-bottom: 2.25rem;

    position: relative;

    font-weight: 700;

}



.features-recipe h3::after {

    content: '';

    display: block;

    width: 80px;

    height: 4px;

    background: var(--secondary-color);

    margin: 15px auto 0;

    border-radius: 2px;

}



.recipe-cards {

    display: grid;

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

    gap: 2rem;

    max-width: 75rem;

    margin: 0 auto;

}



.cards {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: start;

    background-color: var(--card-bg);

    border-radius: 0.7rem;

    overflow: hidden;

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

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    cursor: pointer;

}



.cards:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 30px rgba(0,0,0,0.1);

}



.cards .top-card img {

    width: 100%;

    height: 15rem;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.cards:hover .top-card img {

    transform: scale(1.05);

}



.info-card {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 1.5rem;

}



.card-head h5 {

    font-size: 1.125rem;

    color: var(--text-color);

    margin-bottom: 0.5rem;

    font-weight: 700;

    cursor: pointer;

}



.card-head h5:hover {

    color: var(--secondary-color);

}



.card-head p {

    font-size: 0.95rem;

    color: var(--light-text);

    margin-bottom: 0.25rem;

}



.rating-down {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: auto;

    border-top: 1px solid #EEE;

    padding-top: 15px;

    margin-top: 15px;

}



.rating-down .left-side {

    display: flex;

    align-items: center;

    font-size: 16px;

    color: var(--text-color);

}



.rating-down .left-side span {

    margin-left: 5px;

    color: var(--light-text);

}



.rating-down .right-side {

    font-size: 20px;

    color: var(--text-color);

    cursor: pointer;

    transition: transform 0.3s ease, color 0.3s ease;

}



.rating-down .right-side:hover {

    color: var(--secondary-color);

    transform: translateX(5px);

}



.footer-section {

    background-color: var(--footer-bg);

    color: var(--footer-text);

    padding: 5rem 2rem 2rem;

}



.sets-items {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    max-width: 75rem;

    margin: 0 auto;

    gap: 2rem;

}



.sets {

    flex: 1 1 12.5rem;

    margin-bottom: 1.5rem;

}



.sets .head-set h6 {

    font-size: 1.1rem;

    margin-bottom: 1.2rem;

    text-transform: uppercase;

    letter-spacing: 0.1rem;

    font-weight: 700;

}



.sets .items-list p {

    font-size: 0.95rem;

    margin-bottom: 0.75rem;

    cursor: pointer;

    transition: color 0.3s ease, transform 0.3s ease;

}



.sets .items-list p:hover {

    color: var(--primary-color);

    transform: translateX(5px);

}



.right-side-footer {

    flex: 1.5 1 18rem;

    margin-bottom: 1.25rem;

}



.right-side-footer .head-set h6 {

    font-size: 1.1rem;

    margin-bottom: 1.2rem;

    text-transform: uppercase;

    letter-spacing: 0.1rem;

    font-weight: 700;

}



.input-sub {

    display: flex;

    width: 100%;

    max-width: 22rem;

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 0.5rem;

    overflow: hidden;

    transition: all 0.3s ease;

    align-items: center;

}



.input-sub:focus-within {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 2px rgba(88, 204, 157, 0.3);

}

.input-sub .input-email-type {
    flex: 1;
  }

.input-sub .input-email-type input {

    width: 100%;

    border: none;

    outline: none;

    padding: 0.75rem 1rem;

    font-size: 0.875rem;

    flex: 1;

    background-color: transparent;

    color: var(--footer-text);

}



.input-sub .input-email-type input::placeholder {

    color: var(--footer-text);

    opacity: 0.7;

}



.send-button {

    background-color: var(--primary-color);

    padding: 0.9rem 1.9rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    border-left: 1px solid #ccc;

    transition: background-color 0.3s ease;

    flex-shrink: 0;

}



.send-button:hover {

    background-color: #4AB589;

}



.send-button .arrow-icon {

    font-size: 1rem;

    color: #fff;

}



.copy-right {

    border-top: 1px solid rgba(255,255,255,0.2);

    padding-top: 2rem;

    margin-top: 2rem;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    max-width: 75rem;

    margin: 2rem auto 0;

}



.copy-right p {

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



.copy-right .termss {

    display: flex;

    gap: 1.5rem;

}



.copy-right .termss h6 {

    font-size: 0.9rem;

    cursor: pointer;

    transition: color 0.3s ease;

    font-weight: 400;

}



.copy-right .termss h6:hover {

    color: var(--primary-color);

}



/* RECIPE OVERLAY STYLES */

.recipe-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--overlay-bg);

    display: none; /* Hidden by default */

    justify-content: center;

    align-items: center;

    z-index: 1000;

    backdrop-filter: blur(5px);

}



.recipe-overlay.active {

    display: flex;

    animation: fadeIn 0.3s forwards;

}



.overlay-content {

    background-color: var(--card-bg);

    width: 90%;

    max-width: 1000px;

    max-height: 90vh;

    border-radius: 0.5rem;

    position: relative;

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

    overflow: hidden;

    transform: scale(0.95);

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    animation: slideUp 0.5s forwards;

}



.close-overlay {

    position: absolute;

    top: 1.5rem;

    right: 2rem;

    font-size: 2rem;

    color: #fff;

    background-color: rgba(0,0,0,0.3);

    width: 2.5rem;

    height: 2.5rem;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;

    border: none;

}



.close-overlay:hover {

    background-color: rgba(255, 107, 74, 0.8);

    transform: rotate(90deg);

}



.recipe-detail-container {

    display: flex;

    flex-direction: column;

    max-height: 90vh;

    overflow-y: auto;

}



/* Custom scrollbar */

.recipe-detail-container::-webkit-scrollbar {

    width: 4px;

}



.recipe-detail-container::-webkit-scrollbar-track {

    background: rgba(0,0,0,0.05);

}



.recipe-detail-container::-webkit-scrollbar-thumb {

    background: var(--secondary-color);

    border-radius: 5px;

}



.recipe-image {

    height: 300px;

    width: 100%;

    overflow: hidden;

    position: relative;

}



.recipe-image::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100px;

    background: linear-gradient(to top, var(--card-bg), transparent);

}



.recipe-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.recipe-info {

    padding: 2rem;

}



.recipe-header {

    margin-bottom: 2rem;

}



.recipe-tags {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

    margin-bottom: 0.8rem;

}



.recipe-tags span {

    display: inline-block;

    background-color: rgba(88, 204, 157, 0.1);

    color: var(--primary-color);

    padding: 0.4rem 0.8rem;

    border-radius: 1rem;

    font-size: 0.9rem;

    font-weight: 500;

}



.recipe-title {

    font-size: 2.2rem;

    margin-bottom: 1rem;

    text-align: center;

    font-weight: 700;

    line-height: 1.2;

}



.recipe-rating {

    margin-bottom: 1.5rem;

    text-align: center;

    font-size: 1.2rem;

}



.start-cooking-btn {

    background-color: var(--secondary-color);

    color: white;

    border: none;

    display: block;

    margin: 1rem auto 2rem auto;
  
    width: 90%;

    text-align: center;

    padding: 0.8rem 2rem;

    border-radius: 3.1rem;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(255, 107, 74, 0.3);

    margin-bottom: 1.5rem;

}



.start-cooking-btn:hover {

    background-color: #FF5233;

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(255, 107, 74, 0.4);

}



.recipe-actions {

    display: flex;

    justify-content: center;

    gap: 2.5rem;

    margin-bottom: 2rem;

    flex-wrap: wrap;

}



.action-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.3rem;

    cursor: pointer;

    transition: transform 0.3s ease, color 0.3s ease;

}



.action-item:hover {

    transform: translateY(-5px);

    color: var(--secondary-color);

}



.action-item i {

    font-size: 1.2rem;

}



.recipe-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.recipe-ingredients h3,

.recipe-directions h3,

.recipe-nutrition h3 {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 2px solid rgba(0,0,0,0.1);

}



.recipe-ingredients ul,

.recipe-directions ol,

.recipe-nutrition ul {

    padding-left: 1.5rem;

}



.recipe-ingredients li,

.recipe-directions li,

.recipe-nutrition li {

    padding: 0.5rem 0;

    border-bottom: 1px dashed rgba(0,0,0,0.1);

}



.nutrition-disclaimer {

    font-size: 0.9rem;

    color: var(--light-text);

    font-style: italic;

    margin-top: 1rem;

}



/* Animation keyframes */

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes slideUp {

    from {

        transform: translateY(50px) scale(0.9);

        opacity: 0;

    }

    to {

        transform: translateY(0) scale(1);

        opacity: 1;

    }

}



/* Loading animation for cards */

@keyframes pulse-loading {

    0% { opacity: 0.6; }

    100% { opacity: 0.9; }

}



.loading-card {

    height: 350px;

    background-color: #f0f0f0;

    border-radius: 0.7rem;

    animation: pulse-loading 1.5s infinite alternate;

}



/* Improve mobile responsive design */

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

    .recipe-content {

        grid-template-columns: 1fr;

    }

}



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

    .hero-section {

        padding: 3rem 1rem;

    }

    

    .headline h1 {

        font-size: 2.5rem;

    }

    

    .sub-headline p {

        font-size: 1rem;

    }

    

    .search-container {

        flex-direction: column;

        padding: 1rem;

        border-radius: 16px;

    }

    

    .search-container input[type="text"] {

        margin-bottom: 1rem;

        text-align: center;

        padding: 0.8rem;

        width: 100%;

    }

    

    .search-container .button {

        width: 100%;

        margin-left: 0;

    }

    

    .recipe-cards {

        grid-template-columns: 1fr;

    }

    

    .recipe-content {

        grid-template-columns: 1fr;

    }

    

    .recipe-image {

        height: 200px;

    }

    

    .recipe-title {

        font-size: 1.8rem;

    }

    

    .recipe-actions {

        justify-content: center;

    }

    

    .copy-right {

        flex-direction: column;

        text-align: center;

    }

    .input-sub {
        max-width: 100%;
        flex-direction: row;
      }
    
      .send-button {
        padding: 0.9rem 1rem;
      }
    

}



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

    .headline h1 {

        font-size: 2rem;

    }

    

    .features-recipe h3 {

        font-size: 2rem;

    }

    

    .recipe-lists .ingredient {

        font-size: 0.8rem;

        padding: 0.5rem 1rem;

    }

    

    .sets-items {

        gap: 1rem;

    }

    

    .recipe-info {

        padding: 1.5rem;

    }

    

    .recipe-title {

        font-size: 1.5rem;

    }

    

    .start-cooking-btn {

        width: 100%;

    }

}


/* Glass morphism effect for cards */

.cards {

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.2);

}



/* Floating elements effect */

.recipe-lists .ingredient {

    animation: float 3s ease-in-out infinite;

    animation-delay: calc(var(--i, 0) * 0.1s);

}



@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-5px); }

}



/* Add subtle hover effect to buttons */

.search-container .button,

.start-cooking-btn {

    position: relative;

    overflow: hidden;

}



.search-container .button::after,

.start-cooking-btn::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: 0.5s;

}



.search-container .button:hover::after,

.start-cooking-btn:hover::after {

    left: 100%;

}



/* Add 3D effect to cards */

.cards {

    transform-style: preserve-3d;

    perspective: 1000px;

}



.cards:hover {

    transform: translateY(-5px) rotateX(5deg);

}



/* Enhanced scrollbar */

::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.05);

    border-radius: 10px;

}



::-webkit-scrollbar-thumb {

    background: var(--secondary-color);

    border-radius: 10px;

    border: 2px solid transparent;

    background-clip: content-box;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--primary-color);

    border: 2px solid transparent;

    background-clip: content-box;

}