/*==================================================
        ZAIZAH FRAGRANCES
        Luxury Website
        Clean style.css Part 1
==================================================*/


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

:root{

    --black:#090909;
    --black-light:#111111;

    --gold:#C9A86A;
    --gold-light:#E7C88B;

    --white:#F8F5F0;
    --gray:#9F9F9F;

    --border:rgba(255,255,255,.08);

    --transition:.4s ease;

    --radius:18px;

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

}



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

*{

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

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:var(--black);

    color:var(--white);

    overflow-x:hidden;

}


img{

    width:100%;
    max-width:100%;
    display:block;
    transition:.5s;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


button,
input{

    font-family:inherit;

    outline:none;

}


::selection{

    background:var(--gold);

    color:#000;

}




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


::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#111;

}


::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}





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


.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}



section{

    padding:110px 0;

}




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


.section-title{

    text-align:center;

    margin-bottom:70px;

}


.section-title span,
.section-tag{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:14px;

}


.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    font-weight:600;

    margin:18px 0;

}


.section-title p{

    max-width:700px;

    margin:auto;

    color:var(--gray);

    line-height:1.8;

}




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


.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}



.btn-primary{

    background:var(--gold);

    color:#000;

}


.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(201,168,106,.45);

}



.btn-secondary{

    border:1px solid var(--gold);

    color:var(--white);

}



.btn-secondary:hover{

    background:var(--gold);

    color:#000;

}







/*==============================
        PRELOADER
==============================*/


#preloader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

}



.loader-logo{

    font-family:'Cormorant Garamond',serif;

    font-size:52px;

    color:var(--gold);

    letter-spacing:10px;

}



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


#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    transition:.4s;

}



#header.scrolled{

    background:rgba(10,10,10,.90);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);

}



.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
}

.logo-img {
    height: 45px;
    width: auto;
}

.logo-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}




/*==============================
        NAV MENU
==============================*/


.nav-menu{

    display:flex;

    gap:35px;

}



.nav-menu a{

    font-size:15px;

    position:relative;

    transition:.3s;

}



.nav-menu a:hover,
.nav-menu a.active{

    color:var(--gold);

}



.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.3s;

}



.nav-menu a:hover::after{

    width:100%;

}






/*==============================
        NAV ICONS
==============================*/


.nav-icons{

    display:flex;

    gap:20px;

}


.nav-icons a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border);

    border-radius:50%;

    transition:.3s;

}



.nav-icons a:hover{

    background:var(--gold);

    color:#000;

}



.nav-icons i{

    font-size:20px;

}





.menu-toggle{

    display:none;

    font-size:30px;

}






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


.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#000;
}

.hero-video{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:1;

    overflow:hidden;

}

.hero-video video{

    height:100%;

    width:auto;

    object-fit:cover;

}


.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.82),
        rgba(0,0,0,.45)
    );

}



.hero-overlay{

      position:absolute;

    inset:0;

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

    z-index:2;


}



.hero .container{

    position:relative;

    z-index:3;

}



.hero-content{

    max-width:700px;

}



.hero-subtitle{

    display:inline-block;

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:25px;

}



.hero-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:90px;

    line-height:1;

    margin-bottom:25px;

}



.hero-content p{

    font-size:18px;

    color:#ddd;

    line-height:1.9;

    max-width:600px;

    margin-bottom:40px;

}



.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}




.scroll-down{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    color:var(--gold);

    letter-spacing:2px;

}



.scroll-down i{

    margin-top:8px;

    font-size:24px;

}
/*==================================================
        FEATURED COLLECTION
==================================================*/


.featured{

    background:#0d0d0d;

}



.product-grid{

    display:grid;

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

    gap:35px;

}



.product-card{

    background:#121212;

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    position:relative;

    transition:.4s;

}



.product-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

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

}



.product-image{

    height:420px;

    overflow:hidden;

    position:relative;

    background:#000;

}



.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



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

    transform:scale(1.08);

}





.product-image::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

}



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

    animation:shine 1.2s;

}



@keyframes shine{

    100%{

        left:180%;

    }

}





.product-info{

    padding:28px;

}



.product-info h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    margin-bottom:10px;

}



.product-info p{

    color:var(--gray);

    margin-bottom:20px;

    line-height:1.7;

}



.price{

    color:var(--gold);

    font-size:22px;

    font-weight:600;

}





.product-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--gold);

    color:#000;

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    z-index:5;

}









/*==================================================
        BRAND STORY
==================================================*/


.story{

    background:var(--black);

}



.story-wrapper{

    display:grid;

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

    gap:80px;

    align-items:center;

}



.story-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}



.story-image img{

    width:100%;

}



.story-image:hover img{

    transform:scale(1.08);

}



.story-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    line-height:1.15;

    margin:20px 0;

}



.story-content p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:25px;

}









/*==================================================
        WHY ZAIZAH
==================================================*/


.why-zaizah{

    background:#0c0c0c;

}



.features-grid{

    display:grid;

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

    gap:30px;

}



.feature-card{

    background:#121212;

    border:1px solid var(--border);

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

    transition:.4s;

}



.feature-card:hover{

    transform:translateY(-12px);

    border-color:var(--gold);

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

}



.feature-card i{

    font-size:50px;

    color:var(--gold);

    margin-bottom:25px;

}



.feature-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    margin-bottom:15px;

}



.feature-card p{

    color:var(--gray);

    line-height:1.8;

}









/*==================================================
        BEST SELLERS
==================================================*/


.best-sellers{

    background:var(--black);

}



.best-grid{

    display:grid;

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

    gap:35px;

}



.best-grid .product-card{

    height:100%;

}
/*==================================================
        LUXURY BANNER
==================================================*/


.luxury-banner{

    padding:140px 0;

    background:
    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.75)
    ),
    url("../images/banner.jpg") center/cover;

    text-align:center;

}



.banner-content span{

    color:var(--gold);

    letter-spacing:4px;

    text-transform:uppercase;

}



.luxury-banner h2{

    font-family:'Cormorant Garamond',serif;

    font-size:72px;

    line-height:1.1;

    margin:25px 0;

}



.luxury-banner p{

    max-width:750px;

    margin:0 auto 45px;

    color:#ddd;

    line-height:2;

}









/*==================================================
        ZAIZAH COINS
==================================================*/


.zaizah-coins{

    background:#0b0b0b;

}



.coins-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}



.coins-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:64px;

    margin:20px 0;

}



.coins-content p{

    max-width:700px;

    margin:0 auto 45px;

    color:var(--gray);

    line-height:1.9;

}



.coins-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}









/*==================================================
        AFFILIATE
==================================================*/


.affiliate-section{

    background:#090909;

}



.affiliate-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}



.affiliate-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    margin:20px 0;

}



.affiliate-content p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:35px;

}



.affiliate-list{

    margin-bottom:40px;

}



.affiliate-list li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    color:#ddd;

}



.affiliate-list i{

    color:var(--gold);

    font-size:20px;

}



.affiliate-image{

    overflow:hidden;

    border-radius:20px;

}



.affiliate-image img{

    width:100%;

}



.affiliate-image:hover img{

    transform:scale(1.06);

}









/*==================================================
        TESTIMONIALS
==================================================*/


.testimonials{

    background:#0d0d0d;

}



.testimonial-grid{

    display:grid;

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

    gap:30px;

}



.testimonial-card{

    background:#111;

    border:1px solid var(--border);

    padding:40px;

    border-radius:18px;

    transition:.4s;

}



.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}



.testimonial-card p{

    color:#d5d5d5;

    line-height:2;

    margin-bottom:25px;

    font-style:italic;

}



.testimonial-card h4{

    color:var(--gold);

    font-size:20px;

}









/*==================================================
        INSTAGRAM
==================================================*/


.instagram-feed{

    background:#090909;

}



.instagram-grid{

    display:grid;

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

    gap:25px;

}



.instagram-grid img{

    height:320px;

    object-fit:cover;

    border-radius:18px;

}



.instagram-grid img:hover{

    transform:scale(1.05);

}









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


.newsletter{

    background:#101010;

}



.newsletter-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}



.newsletter-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    margin-bottom:20px;

}



.newsletter-content p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:40px;

}



.newsletter form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}



.newsletter input{

    width:420px;

    padding:18px 22px;

    border-radius:50px;

    border:1px solid var(--border);

    background:#161616;

    color:#fff;

}



.newsletter button{

    padding:18px 40px;

    border-radius:50px;

    background:var(--gold);

    color:#000;

    font-weight:600;

}



.newsletter button:hover{

    transform:translateY(-4px);

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


footer{

    background:#070707;

    padding-top:90px;

}



.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}



.footer-about h3{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    margin-bottom:20px;

}



.footer-about span{

    color:var(--gold);

}



.footer-about p{

    color:var(--gray);

    line-height:2;

}



footer h4{

    color:var(--gold);

    margin-bottom:25px;

}



footer ul li{

    margin-bottom:15px;

}



footer ul li a{

    color:#d2d2d2;

    transition:.3s;

}



footer ul li a:hover{

    color:var(--gold);

}



.social-icons{

    display:flex;

    gap:15px;

}



.social-icons a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid var(--border);

    transition:.3s;

}



.social-icons a:hover{

    background:var(--gold);

    color:#000;

}



.footer-bottom{

    margin-top:70px;

    padding:25px 0;

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

    text-align:center;

}



.footer-bottom p{

    color:#888;

}









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


@keyframes float{

    0%{

        transform:translate(-50%,0);

    }


    50%{

        transform:translate(-50%,10px);

    }


    100%{

        transform:translate(-50%,0);

    }

}



.scroll-down{

    animation:float 2s infinite;

}









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


@media(max-width:1200px){


    .product-grid{

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

    }



    .features-grid{

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

    }



    .footer-grid{

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

    }



}








@media(max-width:992px){


    section{

        padding:90px 0;

    }



    .nav-menu{

        display:none;

    }



    .menu-toggle{

        display:block;

    }



    .story-wrapper,
    .affiliate-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }



    .hero-content h1{

        font-size:65px;

    }



    .section-title h2{

        font-size:48px;

    }



    .luxury-banner h2{

        font-size:55px;

    }



}









@media(max-width:768px){


    section{

        padding:70px 0;

    }



    .product-grid,
    .features-grid,
    .testimonial-grid,
    .instagram-grid,
    .best-grid{

        grid-template-columns:1fr;

    }



    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }



    .social-icons{

        justify-content:center;

    }



    .hero-content h1{

        font-size:50px;

    }



    .hero-content p{

        font-size:16px;

    }



    .section-title h2,
    .coins-content h2{

        font-size:42px;

    }



    .luxury-banner h2{

        font-size:42px;

    }



    .affiliate-content h2{

        font-size:42px;

    }



    .newsletter input{

        width:100%;

    }



    .newsletter button{

        width:100%;

    }



}








@media(max-width:576px){


    .container{

        width:92%;

    }



    .hero-content h1{

        font-size:40px;

    }



    .hero-buttons{

        flex-direction:column;

    }



    .btn-primary,
    .btn-secondary{

        width:100%;

    }



    .product-image{

        height:350px;

    }



}
/*==================================================
        ZAIZAH WHATSAPP
==================================================*/

.whatsapp-wrapper{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:9999;

}

.whatsapp-btn{

    width:68px;

    height:68px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#090909;

    border:2px solid #C9A86A;

    color:#C9A86A;

    font-size:32px;

    text-decoration:none;

    box-shadow:0 0 25px rgba(201,168,106,.35);

    transition:.4s;

}

.whatsapp-btn:hover{

    background:#C9A86A;

    color:#090909;

    transform:translateY(-5px);

    box-shadow:0 0 40px rgba(201,168,106,.6);

}

.whatsapp-tooltip{

    position:absolute;

    right:85px;

    bottom:8px;

    width:220px;

    background:#111;

    border:1px solid rgba(201,168,106,.35);

    border-radius:12px;

    padding:15px;

    opacity:0;

    visibility:hidden;

    transform:translateX(20px);

    transition:.35s;

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

}

.whatsapp-tooltip strong{

    display:block;

    color:#C9A86A;

    margin-bottom:6px;

}

.whatsapp-tooltip p{

    color:#ddd;

    font-size:14px;

    line-height:1.5;

}

.whatsapp-wrapper:hover .whatsapp-tooltip{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}

@media(max-width:768px){

    .whatsapp-tooltip{

        display:none;

    }

    .whatsapp-wrapper{

        right:18px;

        bottom:18px;

    }

    .whatsapp-btn{

        width:60px;

        height:60px;

        font-size:28px;

    }

}
/*==================================================
        ADDITIONS — page banners, collection hero,
        contact form (added to complete the site)
==================================================*/

.collection-hero,
.page-hero{
    position:relative;
    min-height:46vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(to right, rgba(0,0,0,.82), rgba(0,0,0,.55)),
        url('../images/collections/perfume-red.jpg') center/cover no-repeat;
    padding:160px 0 60px;
}

.collection-hero .container,
.page-hero .container{
    position:relative;
    z-index:3;
}

.collection-content,
.page-hero-content{
    max-width:700px;
}

.collection-content h1,
.page-hero-content h1{
    font-family:'Cormorant Garamond',serif;
    font-size:56px;
    line-height:1.1;
    margin-bottom:18px;
}

.collection-content p,
.page-hero-content p{
    font-size:17px;
    color:#ddd;
    line-height:1.8;
    max-width:600px;
}

@media(max-width:768px){
    .collection-content h1,
    .page-hero-content h1{
        font-size:38px;
    }
}

/* Contact page */
.contact-section{
    padding:100px 0;
}

.contact-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:60px;
    align-items:flex-start;
}

.contact-info-card{
    background:var(--black-light);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:40px;
}

.contact-info-card h3{
    font-family:'Cormorant Garamond',serif;
    font-size:26px;
    margin-bottom:22px;
    color:var(--gold);
}

.contact-info-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px;
}

.contact-info-row i{
    font-size:20px;
    color:var(--gold);
    margin-top:3px;
}

.contact-info-row b{
    display:block;
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--gray);
    margin-bottom:4px;
}

.contact-info-row span,
.contact-info-row a{
    font-size:15px;
    color:var(--white);
}

.contact-form{
    background:var(--black-light);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:44px;
}

.contact-form .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.contact-form label{
    display:block;
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--gray);
    margin-bottom:8px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    background:var(--black);
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px 16px;
    color:var(--white);
    font-family:'Poppins',sans-serif;
    font-size:15px;
    margin-bottom:20px;
    transition:var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--gold);
}

.contact-form textarea{
    min-height:130px;
    resize:vertical;
}

.contact-form .form-note{
    margin-top:14px;
    color:var(--gold-light);
    font-size:14px;
}

@media(max-width:860px){
    .contact-grid{grid-template-columns:1fr;}
    .contact-form .form-row{grid-template-columns:1fr;}
}

/* About page extras */
.about-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}

.about-value-card{
    background:var(--black-light);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px;
    text-align:center;
}

.about-value-card i{
    font-size:32px;
    color:var(--gold);
    margin-bottom:14px;
}

.about-value-card h4{
    font-family:'Cormorant Garamond',serif;
    font-size:22px;
    margin-bottom:10px;
}

.about-value-card p{
    color:var(--gray);
    font-size:14px;
    line-height:1.7;
}

@media(max-width:860px){
    .about-values{grid-template-columns:1fr;}
}
.product-card .btn-primary {
    background: #25D366 !important;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
}

.product-card .btn-primary:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.85;
}

/* =================================
   CATEGORY FILTER
================================== */

.collection-filter {
    padding: 30px 0;
    border-bottom: 1px solid #eee;
}

.filter-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    border: 1px solid #ddd;
    background: transparent;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* =================================
   SEARCH & SORT
================================== */

.shop-toolbar {
    padding: 25px 0;
}

.toolbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 10px 18px;
    max-width: 300px;
    width: 100%;
}

.search-box i {
    color: #999;
}

.search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}

.sort-box select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

@media (max-width: 600px) {

    .toolbar-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: 100%;
    }

}