/* ============================================================
   TASTY KAAWA WEBSITE
   Main Stylesheet
   Version: 1.0
   Author: ChatGPT
============================================================ */


/*=============================================================
 GOOGLE FONTS
=============================================================*/

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


/*=============================================================
 CSS VARIABLES
=============================================================*/

:root{

    /* Brand Colours */

    --coffee-dark:#2C1810;
    --coffee-medium:#5C3D2E;
    --coffee-light:#8B6B4D;

    --gold:#C8A96E;
    --gold-dark:#B18D4F;

    --cream:#F5F0E8;
    --white:#FFFFFF;

    --green:#4A7C59;
    --terracotta:#C46D5A;

    --text:#3D2B1F;
    --light-text:#6B5B4F;

    --border:#E8E0D8;

    /* Shadows */

    --shadow-sm:0 3px 10px rgba(0,0,0,.08);

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

    --shadow-lg:0 18px 45px rgba(0,0,0,.15);

    /* Radius */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:30px;

    /* Spacing */

    --space-xs:.5rem;

    --space-sm:1rem;

    --space-md:2rem;

    --space-lg:4rem;

    --space-xl:6rem;

    /* Animation */

    --transition:.35s ease;

}



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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:var(--cream);

    line-height:1.7;

    overflow-x:hidden;

}



/*=============================================================
 TYPOGRAPHY
=============================================================*/

h1,h2,h3,h4,h5,h6{

    font-family:'Playfair Display',serif;

    color:var(--coffee-dark);

    margin-bottom:1rem;

}

h1{

    font-size:3.5rem;

    font-weight:700;

}

h2{

    font-size:2.6rem;

    font-weight:700;

}

h3{

    font-size:1.8rem;

}

h4{

    font-size:1.3rem;

}

p{

    margin-bottom:1rem;

    color:var(--text);

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    width:100%;

    display:block;

}



/*=============================================================
 CONTAINERS
=============================================================*/

section{

    padding:90px 0;

}

.container{

    max-width:1200px;

}



/*=============================================================
 SECTION TITLES
=============================================================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    position:relative;

    display:inline-block;

}

.section-title h2::after{

    content:"";

    position:absolute;

    width:70px;

    height:4px;

    background:var(--gold);

    left:50%;

    bottom:-15px;

    transform:translateX(-50%);

    border-radius:5px;

}

.section-title p{

    margin-top:25px;

    color:var(--light-text);

}



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

.btn-coffee{

    background:var(--gold);

    color:white;

    padding:14px 34px;

    border-radius:50px;

    border:none;

    font-weight:700;

    letter-spacing:.5px;

    transition:var(--transition);

    display:inline-block;

}

.btn-coffee:hover{

    background:var(--gold-dark);

    transform:translateY(-3px);

    color:white;

    box-shadow:var(--shadow-md);

}



.btn-outline-coffee {
    border: 2px solid var(--coffee-dark);
    color: var(--coffee-dark);
    padding: 13px 32px;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    display: inline-block;
    
}

.btn-outline-coffee:hover{

    background:var(--coffee-dark);

    color:white;

}



/*=============================================================
 NAVIGATION
=============================================================*/

.navbar{

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(10px);

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

    padding:20px 0;

    transition:.4s;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;
    z-index:1000;

}

.navbar-brand img{

    height:70px;

    width:auto;

}

.navbar-nav .nav-link{

    color:var(--coffee-dark);

    font-weight:600;

    margin-left:15px;

    transition:var(--transition);

}

.navbar-nav .nav-link:hover{

    color:var(--gold);

}

.navbar-nav .nav-link.active{

    color:var(--gold);

}



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

.navbar.scrolled{

    padding:8px 0;

    box-shadow:var(--shadow-md);

}



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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:linear-gradient(rgba(44,24,16,.75),
               rgba(44,24,16,.75)),
               url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    color:white;
       padding-top:160px;
       padding-bottom:90px;

}

.hero h1{

    color:white;

    font-size:4rem;

}

.hero p{

    color:white;

    font-size:1.2rem;

    margin-bottom:45px;

    max-width:600px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:120px !important;

}



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

.text-gold{

    color:var(--gold);

}

.bg-coffee{

    background:var(--coffee-dark);

}

.bg-cream{

    background:var(--cream);

}

.bg-white{

    background:white;

}

.rounded-xl{

    border-radius:20px;

}

.shadow-coffee{

    box-shadow:var(--shadow-md);

}

.mt-6{

    margin-top:5rem;

}

.mb-6{

    margin-bottom:5rem;

}

.py-6{

    padding:6rem 0;

}

/*=============================================================
 CREDIBILITY STRIP
=============================================================*/

.credibility-strip{
    background:#ffffff;
    padding:40px 0;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.badge-item{
    text-align:center;
    padding:20px;
    transition:var(--transition);
}

.badge-item:hover{
    transform:translateY(-8px);
}

.badge-item i{
    font-size:2.5rem;
    color:var(--gold);
    margin-bottom:15px;
}

.badge-item h5{
    font-size:1.05rem;
    margin-bottom:8px;
}

.badge-item p{
    font-size:.9rem;
    color:var(--light-text);
    margin:0;
}


/*=============================================================
 GENERAL CARDS
=============================================================*/

.card-coffee{

    background:#ffffff;

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    height:100%;

}

.card-coffee:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.card-coffee img{

    height:260px;

    object-fit:cover;

}

.card-body{

    padding:30px;

}

.card-coffee h3{

    margin-bottom:15px;

}

.card-coffee p{

    color:var(--light-text);

}



/*=============================================================
 IMAGE ZOOM EFFECT
=============================================================*/

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:transform .7s;

}

.image-hover:hover img{

    transform:scale(1.08);

}



/*=============================================================
 GREEN COFFEE LOT CARDS
=============================================================*/

.lot-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.lot-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.lot-image{

    height:260px;

    overflow:hidden;

}

.lot-image img{

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.lot-card:hover img{

    transform:scale(1.08);

}

.process-badge{

    background:var(--gold);

    color:white;

    display:inline-block;

    padding:7px 18px;

    border-radius:50px;

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:18px;

    font-weight:bold;

}

.lot-content{

    padding:30px;

}



/*=============================================================
 PRODUCT CARDS
=============================================================*/

.product-card{

    background:white;

    border-radius:18px;

    text-align:center;

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    height:100%;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.product-card img{

    width:220px;

    height:220px;

    object-fit:contain;

    margin:auto;

    margin-bottom:25px;

}

.product-card h4{

    margin-bottom:15px;

}

.product-card .price{

    color:var(--gold);

    font-size:1.5rem;

    font-weight:bold;

    margin-bottom:20px;

}

.product-card .btn-coffee{

    margin-top:10px;

}



/*=============================================================
 STAFF CARDS
=============================================================*/

.staff-card{

    background:white;

    text-align:center;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.staff-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.staff-image{

    width:170px;

    height:170px;

    border-radius:50%;

    overflow:hidden;

    margin:auto;

    margin-bottom:25px;

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

}

.staff-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.staff-card h4{

    margin-bottom:5px;

}

.staff-role{

    color:var(--gold);

    font-weight:700;

    margin-bottom:15px;

}



/*=============================================================
 ICON BOXES
=============================================================*/

.icon-box{

    background:white;

    text-align:center;

    padding:40px 30px;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.icon-box:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.icon-box i{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:20px;

}



/*=============================================================
 CTA SECTION
=============================================================*/

.cta-section{

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

    color:white;

    padding:90px 0;

    text-align:center;

}

.cta-section h2{

    color:white;

    margin-bottom:20px;

}

.cta-section p{

    color:#f4f4f4;

    max-width:700px;

    margin:auto;

    margin-bottom:35px;

}



/*=============================================================
 STATISTICS
=============================================================*/

.stats{

    background:white;

    padding:70px 0;

}

.stat-item{

    text-align:center;

}

.stat-item h2{

    color:var(--gold);

    font-size:3rem;

}

.stat-item p{

    margin:0;

    font-weight:600;

}



/*=============================================================
 GALLERY
=============================================================*/

.gallery-item{

    overflow:hidden;

    border-radius:18px;

}

.gallery-item img{

    transition:.7s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}



/*=============================================================
 PARTNER CARDS
=============================================================*/

.partner-card{

    background:white;

    border-radius:18px;

    text-align:center;

    padding:40px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.partner-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.partner-card img{

    max-width:160px;

    margin:auto;

    margin-bottom:20px;

}



/*=============================================================
 TIMELINE
=============================================================*/

.timeline{

    position:relative;

    padding-left:35px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:8px;

    top:0;

    width:4px;

    height:100%;

    background:var(--gold);

}

.timeline-item{

    position:relative;

    margin-bottom:40px;

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-34px;

    top:5px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--gold);

}



/*=============================================================
 DIVIDERS
=============================================================*/

.wave-divider{

    height:100px;

    background:linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,.4));

}



/*=============================================================
 SCROLL ANIMATION
=============================================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

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

.contact-form{

    background:#ffffff;

    padding:45px;

    border-radius:20px;

    box-shadow:var(--shadow-md);

}

.contact-form label{

    font-weight:700;

    margin-bottom:8px;

    color:var(--coffee-dark);

}

.contact-form .form-control,
.contact-form .form-select{

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

    border-radius:12px;

    padding:14px 16px;

    transition:var(--transition);

    background:#fff;

}

.contact-form .form-control:focus,
.contact-form .form-select:focus{

    border-color:var(--gold);

    box-shadow:0 0 0 .2rem rgba(200,169,110,.2);

}



/*=============================================================
 CONTACT INFORMATION
=============================================================*/

.contact-info{

    background:var(--coffee-dark);

    color:white;

    padding:45px;

    border-radius:20px;

    height:100%;

}

.contact-info h3{

    color:white;

}

.contact-info i{

    color:var(--gold);

    font-size:1.5rem;

    width:40px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}



/*=============================================================
 SHOP GRID
=============================================================*/

.shop-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;

    flex-wrap:wrap;

    gap:20px;

}

.shop-search{

    max-width:320px;

    width:100%;

}

.shop-search input{

    border-radius:50px;

    padding:12px 20px;

}

.category-filter{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.category-filter button{

    border:none;

    padding:10px 20px;

    border-radius:30px;

    background:#fff;

    transition:var(--transition);

}

.category-filter button:hover,

.category-filter .active{

    background:var(--gold);

    color:#fff;

}



/*=============================================================
 PRODUCT BADGES
=============================================================*/

.badge-sale{

    position:absolute;

    top:15px;

    left:15px;

    background:var(--terracotta);

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:.75rem;

    font-weight:bold;

}

.badge-new{

    position:absolute;

    top:15px;

    right:15px;

    background:var(--green);

    color:#fff;

    padding:6px 12px;

    border-radius:30px;

    font-size:.75rem;

}



/*=============================================================
 SHOPPING CART
=============================================================*/

.cart-table{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.cart-table table{

    margin:0;

}

.cart-table thead{

    background:var(--coffee-dark);

    color:#fff;

}

.cart-table img{

    width:80px;

    border-radius:12px;

}

.cart-summary{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow-sm);

}

.cart-summary h4{

    margin-bottom:25px;

}

.cart-summary hr{

    margin:20px 0;

}



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

.qty{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.qty button{

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    background:var(--gold);

    color:white;

    font-weight:bold;

}

.qty input{

    width:60px;

    text-align:center;

}



/*=============================================================
 ALERTS
=============================================================*/

.alert-coffee{

    background:#FFF7E8;

    border-left:5px solid var(--gold);

    padding:20px;

    border-radius:10px;

}

.alert-success{

    background:#E8F6EC;

    border-left:5px solid var(--green);

}

.alert-danger{

    background:#FCECEC;

    border-left:5px solid var(--terracotta);

}



/*=============================================================
 TABLES
=============================================================*/

.table-coffee{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.table-coffee thead{

    background:var(--coffee-dark);

    color:#fff;

}

.table-coffee tbody tr:hover{

    background:#faf7f3;

}



/*=============================================================
 ACCORDION
=============================================================*/

.accordion-button{

    font-weight:bold;

}

.accordion-button:not(.collapsed){

    background:var(--gold);

    color:#fff;

}



/*=============================================================
 BREADCRUMB
=============================================================*/

.breadcrumb{

    background:transparent;

}

.breadcrumb-item a{

    color:var(--gold);

}

.breadcrumb-item.active{

    color:var(--coffee-dark);

}



/*=============================================================
 PAGINATION
=============================================================*/

.pagination .page-link{

    color:var(--coffee-dark);

}

.pagination .active .page-link{

    background:var(--gold);

    border-color:var(--gold);

}



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

footer{

    background:var(--coffee-dark);

    color:#ddd;

    padding-top:80px;

}

footer h4{

    color:#fff;

    margin-bottom:25px;

}

footer ul{

    list-style:none;

    padding:0;

}

footer ul li{

    margin-bottom:12px;

}

footer a{

    color:#ddd;

}

footer a:hover{

    color:var(--gold);

}

.footer-logo{

    max-width:180px;

    margin-bottom:20px;

}

.footer-social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.footer-social a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--gold);

    color:white;

}

.footer-bottom{

    margin-top:60px;

    padding:25px 0;

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

    text-align:center;

}



/*=============================================================
 WHATSAPP FLOATING BUTTON
=============================================================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:95px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    z-index:999;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}

.whatsapp:hover{

    transform:scale(1.1);

    color:white;

}



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

.back-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--gold);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    background:var(--coffee-dark);

    color:white;

}



/*=============================================================
 LOADING SPINNER
=============================================================*/

.loader{

    width:60px;

    height:60px;

    border:6px solid #eee;

    border-top:6px solid var(--gold);

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/*=============================================================
 BADGES
=============================================================*/

.badge-coffee{

    background:var(--gold);

    color:white;

    padding:8px 16px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

}



/*=============================================================
 UTILITY CLASSES
=============================================================*/

.text-coffee{

    color:var(--coffee-dark);

}

.text-light-coffee{

    color:var(--light-text);

}

.bg-gold{

    background:var(--gold);

}

.border-radius{

    border-radius:20px;

}

.shadow-hover{

    transition:var(--transition);

}

.shadow-hover:hover{

    box-shadow:var(--shadow-lg);

}

.object-cover{

    object-fit:cover;

}

.min-vh-50{

    min-height:50vh;

}

.min-vh-75{

    min-height:75vh;

}

.min-vh-100{

    min-height:100vh;

}

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

/* Extra Large Screens */
@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

}

/* Large Screens */
@media (max-width:1200px){

    h1{
        font-size:3.2rem;
    }

    h2{
        font-size:2.4rem;
    }

}

/* Tablets */
@media (max-width:992px){

    section{
        padding:70px 0;
    }

    .hero{
        min-height:85vh;
        text-align:center;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero p{
        margin:auto;
        margin-bottom:30px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .navbar-brand img{
        height:60px;
    }

    .contact-info{
        margin-top:30px;
    }

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

}

/* Mobile */
@media (max-width:768px){

    h1{
        font-size:2.4rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.5rem;
    }

    section{
        padding:60px 0;
    }

    .hero{
        min-height:75vh;
    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-coffee,
    .btn-outline-coffee{

        width:100%;
        text-align:center;

    }

    .card-body{

        padding:25px;

    }

    .product-card{

        padding:25px;

    }

    .contact-form{

        padding:30px;

    }

    .contact-info{

        padding:30px;

    }

    .footer-social{

        justify-content:center;

    }

}

/* Small Phones */
@media (max-width:576px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    .hero{

        padding:120px 0 80px;

    }

    .badge-item{

        margin-bottom:20px;

    }

    .product-card img{

        width:170px;

        height:170px;

    }

}



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

.dropdown-menu{

    border:none;

    border-radius:15px;

    box-shadow:var(--shadow-md);

}

.dropdown-item{

    padding:12px 18px;

}

.dropdown-item:hover{

    background:var(--gold);

    color:white;

}



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

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(44,24,16,.65),
        rgba(44,24,16,.65)
    );

}

.hero .container{

    position:relative;

    z-index:2;

}



/*=============================================================
 GLASS EFFECT
=============================================================*/

.glass{

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.2);

    border-radius:20px;

}



/*=============================================================
 TESTIMONIAL CARD
=============================================================*/

.testimonial{

    background:white;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.testimonial:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.testimonial img{

    width:90px;

    height:90px;

    border-radius:50%;

    margin-bottom:20px;

}

.testimonial .stars{

    color:#FFC107;

    margin-bottom:15px;

}



/*=============================================================
 FEATURE BOX
=============================================================*/

.feature-box{

    text-align:center;

    padding:40px;

}

.feature-box i{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:20px;

}



/*=============================================================
 IMAGE OVERLAY
=============================================================*/

.image-overlay{

    position:relative;

    overflow:hidden;

}

.image-overlay::after{

    content:"";

    position:absolute;

    inset:0;

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

    transition:.5s;

}

.image-overlay:hover::after{

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

}



/*=============================================================
 HOVER EFFECTS
=============================================================*/

.hover-scale{

    transition:.5s;

}

.hover-scale:hover{

    transform:scale(1.04);

}

.hover-lift{

    transition:.5s;

}

.hover-lift:hover{

    transform:translateY(-12px);

}



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

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:1s;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:1s;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

.zoom-in{

    opacity:0;

    transform:scale(.9);

    transition:1s;

}

.zoom-in.show{

    opacity:1;

    transform:scale(1);

}



/*=============================================================
 DIVIDER
=============================================================*/

.divider{

    width:80px;

    height:4px;

    background:var(--gold);

    margin:25px auto;

}



/*=============================================================
 LIST STYLES
=============================================================*/

.list-coffee{

    list-style:none;

    padding:0;

}

.list-coffee li{

    margin-bottom:15px;

}

.list-coffee i{

    color:var(--gold);

    margin-right:12px;

}



/*=============================================================
 SOCIAL ICONS
=============================================================*/

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--gold);

    color:white;

    transition:.4s;

}

.social-icons a:hover{

    background:var(--coffee-dark);

}



/*=============================================================
 COOKIE BANNER
=============================================================*/

.cookie-banner{

    position:fixed;

    bottom:0;

    width:100%;

    background:var(--coffee-dark);

    color:white;

    padding:18px;

    display:none;

    z-index:1000;

}



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

@media print{

    .navbar,
    footer,
    .whatsapp,
    .back-top{

        display:none;

    }

}



/*=============================================================
 ACCESSIBILITY
=============================================================*/

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus{

    outline:3px solid rgba(200,169,110,.35);

    outline-offset:3px;

}



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

::selection{

    background:var(--gold);

    color:white;

}



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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:var(--coffee-medium);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--coffee-dark);

}



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

::placeholder{

    color:#999;

}



/*=============================================================
 DISABLE IMAGE DRAG
=============================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

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

@media (max-width: 991px) {

    .navbar-collapse {

        background: #F8F4EC;      /* Light cream */

        padding: 20px;

        margin-top: 15px;

        border-radius: 15px;

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

    }

    .navbar-nav .nav-link {

        color: #3E2A1F;

        padding: 12px 0;

        font-size: 1.1rem;

        font-weight: 600;

    }

    .navbar-nav .nav-link:hover {

        color: #C8A45A;

    }

    .navbar-nav .btn-coffee {

        margin-top: 15px;

        width: 100%;

        text-align: center;

    }

}

/*=====================================================
MOBILE NAVIGATION
=====================================================*/

@media (max-width:991.98px){

    .navbar{

        background:#fff;

    }

    .navbar-collapse{

        background:#F8F4EC;

        margin-top:15px;

        padding:20px;

        border-radius:16px;

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

    }

    .navbar-nav{

        gap:8px;

    }

    .navbar-nav .nav-item{

        width:100%;

    }

    .navbar-nav .nav-link{

        display:block;

        padding:14px 18px;

        color:#3E2A1F;

        font-weight:600;

        border-radius:10px;

        transition:.25s;

    }

    .navbar-nav .nav-link:hover,

    .navbar-nav .nav-link.active{

        background:#C8A45A;

        color:#fff;

    }

    .navbar-nav .btn-coffee{

        width:100%;

        margin-top:15px;

    }

}

.price-disclaimer {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-style: italic;
}


/*=============================================================
 END OF FILE
=============================================================*/