/* =========================================
   FLOURIZ PREMIUM WEBSITE CSS
   PART 1/8
========================================= */


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

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Poppins', sans-serif;
    background: #fffaf3;
    color: #222;
    overflow-x: hidden;

}


a {

    text-decoration: none;
    color: inherit;

}


img {

    max-width: 100%;
    display: block;

}





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


.header {

    width: 100%;
    padding: 18px 7%;

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

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

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

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

}




.logo-area {

    display: flex;
    align-items: center;
    gap: 12px;

}



.logo {

    width: 55px;
    height: 55px;
    object-fit: contain;

}




.logo-mark {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #7c3aed;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(124,58,237,0.22);
}

.logo-area h1 {

    font-size: 32px;
    font-weight: 800;

    color: #c2410c;

}





/* =============== NAVBAR =============== */


.navbar {

    display: flex;
    gap: 35px;

}



.navbar a {

    font-size: 16px;
    font-weight: 500;

    transition: 0.3s;

}



.navbar a:hover {

    color: #c2410c;

}





/* =============== THEME BUTTON =============== */


.theme-btn {

    border: none;

    background: #c2410c;

    color: white;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 20px;

}
/* =========================================
   HERO SECTION
========================================= */


.hero {

    min-height: 90vh;

    padding: 60px 7%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    background: linear-gradient(
        135deg,
        #fff7ed,
        #ffedd5
    );

}





.hero-content {

    width: 50%;

}





.hero-content h2 {

    font-size: 55px;

    line-height: 1.2;

    font-weight: 800;

    color: #7c2d12;

    margin-bottom: 20px;

}





.hero-content p {

    font-size: 18px;

    line-height: 1.8;

    color: #555;

    margin-bottom: 35px;

}




.hero-btn {

    padding: 15px 35px;

    border: none;

    border-radius: 30px;

    background: #c2410c;

    color: white;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;

}




.hero-btn:hover {

    transform: translateY(-5px);

    background: #9a3412;

}





.hero-image {

    width: 45%;

    display: flex;

    justify-content: center;

}





.hero-image img {

    width: 420px;

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

}





@keyframes float {

    0% {

        transform: translateY(0);

    }


    50% {

        transform: translateY(-15px);

    }


    100% {

        transform: translateY(0);

    }

}






/* =========================================
   SECTION TITLE
========================================= */


.section-title {

    text-align: center;

    padding: 60px 20px 40px;

}





.section-title h2 {

    font-size: 38px;

    color: #7c2d12;

    font-weight: 800;

}





.section-title p {

    margin-top: 10px;

    color: #666;

    font-size: 16px;

}
/* =========================================
   PRODUCTS SECTION
========================================= */


.products-section {

    padding: 40px 7% 80px;

}




.search-box {

    display: flex;

    justify-content: center;

    margin-bottom: 40px;

}





.search-box input {

    width: 400px;

    padding: 15px 20px;

    border-radius: 30px;

    border: 2px solid #fed7aa;

    outline: none;

    font-size: 16px;

}





.products-container {

    display: grid;

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

    gap: 30px;

}





.product-card {

    background: white;

    padding: 25px;

    border-radius: 20px;

    text-align: center;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.08);

    transition: 0.4s;

}





.product-card:hover {

    transform: translateY(-10px);

}





.product-card img {

    width: 220px;

    height: 220px;

    object-fit: contain;

    margin: auto;

}





.product-card h3 {

    margin: 20px 0 10px;

    font-size: 22px;

    color:#9a3412;

}





.product-card p {

    color:#666;

    line-height:1.6;

    margin-bottom:20px;

}





.buy-btn {

    padding:12px 30px;

    border:none;

    border-radius:25px;

    background:#c2410c;

    color:white;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}





.buy-btn:hover {

    background:#9a3412;

}





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


.about-section {

    padding:80px 7%;

    display:flex;

    align-items:center;

    gap:50px;

    background:#fff7ed;

}





.about-image {

    width:45%;

}





.about-image img {

    border-radius:25px;

}





.about-content {

    width:55%;

}





.about-content h2 {

    font-size:40px;

    color:#7c2d12;

    margin-bottom:20px;

}
/* =========================================
   ABOUT POINTS
========================================= */


.about-content > p {

    color:#555;

    font-size:17px;

    line-height:1.8;

    margin-bottom:15px;

}




.about-points {

    display:grid;

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

    gap:20px;

    margin-top:35px;

}





.point {

    background:white;

    padding:20px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,0.08);

}





.point span {

    font-size:35px;

}





.point h3 {

    margin:15px 0 8px;

    color:#9a3412;

}





.point p {

    color:#666;

    font-size:14px;

}







/* =========================================
   FEATURES SECTION
========================================= */


.features-section {

    padding:80px 7%;

}





.features-container {

    display:grid;

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

    gap:25px;

}





.feature-card {

    background:white;

    padding:30px 20px;

    text-align:center;

    border-radius:20px;

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

    transition:.3s;

}





.feature-card:hover {

    transform:translateY(-8px);

}





.feature-icon {

    font-size:45px;

    margin-bottom:20px;

}





.feature-card h3 {

    color:#9a3412;

    margin-bottom:10px;

}





.feature-card p {

    color:#666;

    line-height:1.6;

}







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


.contact-section {

    padding:80px 7%;

    background:#fff7ed;

}





.contact-container {

    display:grid;

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

    gap:30px;

}



.contact-card {

    background:white;

    padding:30px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}



.contact-icon {

    font-size:40px;

    margin-bottom:15px;

}



.contact-card h3 {

    color:#9a3412;

    margin-bottom:10px;

}
/* =========================================
   CONTACT FORM
========================================= */


.contact-form {

    margin-top:50px;

    display:flex;

    flex-direction:column;

    gap:20px;

    max-width:600px;

    margin-left:auto;

    margin-right:auto;

}





.contact-form input,

.contact-form textarea {

    width:100%;

    padding:15px 20px;

    border-radius:12px;

    border:1px solid #fed7aa;

    outline:none;

    font-size:15px;

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

}





.contact-form textarea {

    height:150px;

    resize:none;

}





.send-btn {

    padding:15px;

    border:none;

    border-radius:30px;

    background:#c2410c;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}





.send-btn:hover {

    background:#9a3412;

}







/* =========================================
   TESTIMONIAL SECTION
========================================= */


.testimonial-section {

    padding:80px 7%;

}





.testimonial-container {

    display:grid;

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

    gap:30px;

}





.testimonial-card {

    background:white;

    padding:30px;

    border-radius:20px;

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

    text-align:center;

}





.stars {

    font-size:22px;

    margin-bottom:15px;

}





.testimonial-card p {

    color:#555;

    line-height:1.7;

    margin-bottom:15px;

}





.testimonial-card h3 {

    color:#9a3412;

    font-size:16px;

}







/* =========================================
   NEWSLETTER SECTION
========================================= */


.newsletter-section {

    padding:70px 7%;

    background:#7c2d12;

    color:white;

    text-align:center;

}





.newsletter-content h2 {

    font-size:35px;

    margin-bottom:15px;

}





.newsletter-content p {

    margin-bottom:30px;

}





.newsletter-box {

    display:flex;

    justify-content:center;

    gap:10px;

}





.newsletter-box input {

    width:350px;

    padding:15px 20px;

    border:none;

    border-radius:30px;

    outline:none;

}





.newsletter-box button {

    padding:15px 30px;

    border:none;

    border-radius:30px;

    background:#fb923c;

    color:white;

    cursor:pointer;

    font-weight:600;

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


.footer {

    background:#1c1917;

    color:white;

    padding:60px 7% 20px;

}





.footer-container {

    display:grid;

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

    gap:35px;

}





.footer-logo {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

}





.footer-logo img {

    width:55px;

    height:55px;

}





.footer-logo h2 {

    color:#fb923c;

}





.footer-box h3 {

    margin-bottom:20px;

    color:#fb923c;

}





.footer-box p {

    color:#d6d3d1;

    line-height:1.8;

}





.footer-box a {

    display:block;

    color:#d6d3d1;

    margin-bottom:10px;

    transition:.3s;

}





.footer-box a:hover {

    color:#fb923c;

}





.social-links a {

    display:inline-block;

    margin-right:10px;

}







.footer-bottom {

    margin-top:40px;

    padding-top:20px;

    text-align:center;

    border-top:1px solid #444;

}





.footer-bottom p {

    color:#a8a29e;

}







/* =========================================
   BACK TO TOP BUTTON
========================================= */


.back-to-top {

    position:fixed;

    bottom:30px;

    right:30px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#c2410c;

    color:white;

    font-size:25px;

    cursor:pointer;

    display:none;

    z-index:999;

}





.back-to-top:hover {

    background:#9a3412;

}







/* =========================================
   DARK MODE
========================================= */


body.dark {

    background:#18181b;

    color:white;

}





body.dark .header {

    background:#27272a;

}





body.dark .product-card,

body.dark .feature-card,

body.dark .point,

body.dark .contact-card,

body.dark .testimonial-card {

    background:#27272a;

    color:white;

}





body.dark p {

    color:#d4d4d8;

}





body.dark .about-section,

body.dark .contact-section {

    background:#18181b;

}
/* =========================================
   RESPONSIVE DESIGN - TABLET
========================================= */


@media (max-width: 1024px) {


    .hero {

        flex-direction:column;

        text-align:center;

    }



    .hero-content {

        width:100%;

    }



    .hero-image {

        width:100%;

    }



    .products-container {

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

    }



    .features-container {

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

    }



    .about-section {

        flex-direction:column;

        text-align:center;

    }



    .about-image,

    .about-content {

        width:100%;

    }



    .about-points {

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

    }



    .contact-container {

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

    }



    .testimonial-container {

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

    }



    .footer-container {

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

    }



}
/* =========================================
   RESPONSIVE DESIGN - MOBILE
========================================= */


@media (max-width:768px) {


    .header {

        padding:15px 5%;

        flex-wrap:wrap;

    }



    .logo-area h1 {

        font-size:25px;

    }



    .navbar {

        width:100%;

        justify-content:center;

        gap:18px;

        margin-top:15px;

        flex-wrap:wrap;

    }



    .navbar a {

        font-size:14px;

    }



    .hero {

        padding:40px 5%;

    }



    .hero-content h2 {

        font-size:38px;

    }



    .hero-content p {

        font-size:15px;

    }



    .hero-image img {

        width:300px;

    }



    .section-title h2 {

        font-size:30px;

    }



    .search-box input {

        width:100%;

    }



    .products-container {

        grid-template-columns:1fr;

    }



    .about-points {

        grid-template-columns:1fr;

    }



    .features-container {

        grid-template-columns:1fr;

    }



    .contact-container {

        grid-template-columns:1fr;

    }



    .testimonial-container {

        grid-template-columns:1fr;

    }



    .newsletter-box {

        flex-direction:column;

        align-items:center;

    }



    .newsletter-box input {

        width:100%;

    }



    .footer-container {

        grid-template-columns:1fr;

        text-align:center;

    }



    .footer-logo {

        justify-content:center;

    }



    .back-to-top {

        right:20px;

        bottom:20px;

    }


}
/* Flouriz product catalogue */
.products-section .products-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.products-section .product-card {
    background: #fff;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    text-align: center;
}
.products-section .product-card img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    display: block;
}
.home-product-price {
    color: #16a34a;
    font-size: 24px;
    font-weight: 700;
    margin: 12px 0;
}
.products-section .buy-btn {
    border: 0;
    border-radius: 24px;
    padding: 12px 24px;
    cursor: pointer;
}
@media (max-width: 900px) {
    .products-section .products-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .products-section .products-container { grid-template-columns: 1fr; }
}