/* ==========================================================
   Franklin Theme v1.0
   Dr. Franklin's Herbal Remedies
   Author : Global Index
   Version: 1.0
========================================================== */


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

:root{

    --primary:#2E7D32;
    --primary-dark:#236427;
    --secondary:#6FA83A;
    --gold:#C89F4A;

    --white:#ffffff;
    --light:#F7FAF5;
    --border:#E8ECE6;

    --text:#333333;
    --text-light:#777777;

    --radius:18px;

    --transition:.35s ease;

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

    --container:1320px;

}


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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:var(--white);

    font-size:15px;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

ul{

    margin:0;

    padding:0;

    list-style:none;

}

.container{

    max-width:1320px;

}


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

h1,h2,h3,h4,h5{

    font-family:'Playfair Display',serif;

    color:#222;

    font-weight:700;

}

p{

    color:var(--text-light);

}


/*==========================================================
TOP BAR
==========================================================*/

.topbar{

    background:var(--primary);

    color:#fff;

    font-size:13px;

}

.topbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:42px;

}

.topbar-left{

    display:flex;

    gap:25px;

}

.topbar-left span{

    display:flex;

    align-items:center;

    gap:8px;

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:20px;

}

.topbar-right a{

    color:#fff;

}

.topbar i{

    color:#B7F28C;

}


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

.main-header{

    background:#fff;

    position:relative;

    z-index:1000;

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

}

.header-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:90px;

}

.site-logo img{

    max-height:60px;

}


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

.desktop-menu{

    flex:1;

    display:flex;

    justify-content:center;

}

.desktop-menu ul{

    display:flex;

    gap:38px;

}

.desktop-menu li{

    position:relative;

}

.desktop-menu a{

    color:#222;

    font-weight:600;

    font-size:15px;

    padding:10px 0;

    position:relative;

}

.desktop-menu a:after{

    content:'';

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.desktop-menu a:hover{

    color:var(--primary);

}

.desktop-menu a:hover:after{

    width:100%;

}


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

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.header-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--light);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    color:#333;

}

.header-icon:hover{

    background:var(--primary);

    color:#fff;

}


/*==========================================================
SEARCH
==========================================================*/

.header-search{

    width:260px;

}

.header-search input{

    width:100%;

    height:46px;

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

    border-radius:30px;

    padding:0 20px;

    background:#fff;

    outline:none;

    transition:.3s;

}

.header-search input:focus{

    border-color:var(--primary);

}


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

.cart-area{

    position:relative;

}

.cart-area .btn{

    border-radius:30px;

}


/*==========================================================
MOBILE BUTTON
==========================================================*/

.mobile-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    background:var(--light);

    border-radius:12px;

    font-size:24px;

    cursor:pointer;

}


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

.header-sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:#fff;

    box-shadow:var(--shadow);

    animation:headerDown .35s ease;

}

@keyframes headerDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}


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

.btn-primary{

    background:var(--primary);

    border:none;

    border-radius:40px;

    padding:13px 30px;

    font-weight:600;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:40px;

    padding:12px 30px;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


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

.section{

    padding:80px 0;

}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title h2{

    font-size:42px;

    margin-bottom:15px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}


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

.shadow{

    box-shadow:var(--shadow);

}

.rounded{

    border-radius:var(--radius);

}

.bg-light{

    background:var(--light);

}

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

.hero-section{

    background:#F8FBF5;

    padding:80px 0;

    overflow:hidden;

}

.hero-item{

    min-height:550px;

    display:flex;

    align-items:center;

}

.hero-content{

    padding-right:40px;

}

.hero-subtitle{

    display:inline-block;

    background:#E8F6E8;

    color:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:58px;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-content p{

    font-size:17px;

    margin-bottom:35px;

    max-width:520px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    max-width:100%;

    animation:floatImage 4s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================================
TRUST FEATURES
=========================================================*/

.trust-section{

    padding:70px 0;

    background:#ffffff;

}

.trust-box{

    background:#fff;

    border:1px solid #edf2ea;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s ease;

    height:100%;

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

}

.trust-box:hover{

    transform:translateY(-8px);

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

}

.trust-icon{

    width:75px;

    height:75px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#eef8eb;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:34px;

}

.trust-box h5{

    font-size:20px;

    margin-bottom:12px;

    color:#222;

}

.trust-box p{

    font-size:14px;

    color:#777;

    margin:0;

    line-height:1.8;

}

/*=========================================
Health Categories
=========================================*/

.health-category-section{

    padding:90px 0;

    background:#F8FBF5;

}

.subtitle{

    display:inline-block;

    color:var(--primary);

    background:#EAF6E7;

    padding:8px 20px;

    border-radius:30px;

    margin-bottom:18px;

    font-weight:600;

}

.health-card{

    display:block;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

    height:100%;

}

.health-card:hover{

    transform:translateY(-10px);

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

}

.health-image{

    background:#F2F8EF;

    padding:25px;

}

.health-image img{

    width:100%;

    height:180px;

    object-fit:contain;

    transition:.35s;

}

.health-card:hover img{

    transform:scale(1.08);

}

.health-content{

    padding:25px;

}

.health-content h5{

    font-size:20px;

    margin-bottom:15px;

    color:#222;

}

.health-content span{

    color:var(--primary);

    font-weight:600;

}

.health-content i{

    margin-left:8px;

}
/*=========================================================
FRANKLIN COLLECTION
=========================================================*/

.franklin-collection{

    background:#fff;

    padding:90px 0;

}

/*=========================================================
  FRANKLIN PRODUCT CARD
=========================================================*/

.product-card{
    position:relative;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #edf2ea;
    transition:all .35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    height:100%;
    display:flex;
    flex-direction:column;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}


/*-----------------------------------
Product Image
------------------------------------*/

.product-image{
    position:relative;
    background:#F8FBF5;
    padding:25px;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:240px;
    object-fit:contain;
    transition:all .45s ease;
}

.product-card:hover .product-image img{
    transform:scale(1.08);
}


/*-----------------------------------
Badges
------------------------------------*/

.sale-badge,
.new-badge{

    position:absolute;
    left:15px;
    top:15px;

    padding:6px 14px;

    border-radius:25px;

    font-size:12px;

    font-weight:600;

    color:#fff;

    z-index:5;

}

.sale-badge{

    background:#E53935;

}

.new-badge{

    background:#2E7D32;

}


/*-----------------------------------
Wishlist
------------------------------------*/

.wishlist-btn{

    position:absolute;

    right:15px;

    top:15px;

    z-index:10;

}

.wishlist-btn a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border-radius:50%;

    color:#444;

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

    transition:.3s;

}

.wishlist-btn a:hover{

    background:#2E7D32;

    color:#fff;

}


/*-----------------------------------
Quick View
------------------------------------*/

.quick-view{

    position:absolute;

    left:50%;

    bottom:15px;

    transform:translateX(-50%) translateY(15px);

    opacity:0;

    transition:.35s;

}

.product-card:hover .quick-view{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.quick-view a{

    background:#fff;

    padding:10px 22px;

    border-radius:30px;

    font-weight:600;

    color:#222;

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

}

.quick-view a:hover{

    background:#2E7D32;

    color:#fff;

}


/*-----------------------------------
Content
------------------------------------*/

.product-content{

    padding:22px;

    display:flex;

    flex-direction:column;

    flex-grow:1;

}

.product-content h5{

    margin-bottom:10px;

    font-size:18px;

    line-height:1.5;

    min-height:54px;

}

.product-content h5 a{

    color:#222;

}

.product-content h5 a:hover{

    color:#2E7D32;

}

.product-content p{

    color:#777;

    font-size:14px;

    line-height:1.7;

    min-height:48px;

    margin-bottom:15px;

}


/*-----------------------------------
Rating
------------------------------------*/

.product-rating{

    margin-bottom:18px;

    color:#FFC107;

    font-size:14px;

}


/*-----------------------------------
Price
------------------------------------*/

.product-price{

    margin-top:auto;

    margin-bottom:20px;

}

.product-price .price{

    font-size:24px;

    font-weight:700;

    color:#2E7D32;

}

.product-price .old-price{

    color:#999;

    text-decoration:line-through;

    margin-right:10px;

}

.product-price .special-price{

    color:#D32F2F;

    font-size:24px;

    font-weight:700;

}


/*-----------------------------------
Add To Cart
------------------------------------*/

.product-btn{

    margin-top:auto;

}

.product-btn .btn{

    width:100%;

    border-radius:35px;

    padding:13px;

    font-weight:600;

    transition:.35s;

}

.product-btn .btn:hover{

    transform:translateY(-2px);

}


/*-----------------------------------
Product Animation
------------------------------------*/

.product-card{

    animation:fadeProduct .5s ease;

}

@keyframes fadeProduct{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.product-rating{

    color:#f6b800;

    margin-bottom:15px;

}

.product-price{

    margin-bottom:20px;

}

.price{

    color:#2E7D32;

    font-size:22px;

    font-weight:700;

}

.old-price{

    text-decoration:line-through;

    color:#999;

    margin-right:10px;

}

.special-price{

    color:#d32f2f;

    font-size:22px;

    font-weight:700;

}

.wishlist-btn{

    position:absolute;

    right:15px;

    top:15px;

    z-index:10;

}

.wishlist-btn a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#444;

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

}

.wishlist-btn a:hover{

    background:#2E7D32;

    color:#fff;

}

.product-btn .btn{

    border-radius:30px;

    padding:12px;

}

/*=========================================
WHY FRANKLIN
=========================================*/

.why-franklin{

    background:#F8FBF5;

}

.why-image{

    text-align:center;

}

.why-image img{

    max-width:100%;

}

.why-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.why-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:22px;

    border-radius:18px;

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

    transition:.35s;

}

.why-item:hover{

    transform:translateX(8px);

}

.why-icon{

    width:65px;

    height:65px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF6E7;

    color:#2E7D32;

    font-size:28px;

}

.why-item h5{

    margin-bottom:8px;

    font-size:20px;

}

.why-item p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/*=========================================================
PROMOTIONAL BANNER
=========================================================*/

.promo-banner{

    padding:100px 0;

    background:linear-gradient(135deg,#2E7D32,#4C9A48);

    color:#fff;

    overflow:hidden;

}

.promo-content h2{

    color:#fff;

    font-size:48px;

    margin:20px 0;

    line-height:1.2;

}

.promo-content p{

    color:rgba(255,255,255,.9);

    font-size:17px;

    max-width:600px;

    margin-bottom:35px;

}

.promo-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.promo-buttons .btn-success{

    background:#fff;

    color:#2E7D32;

    border:none;

    padding:14px 34px;

    font-weight:600;

}

.promo-buttons .btn-success:hover{

    background:#F8FBF5;

}

.promo-buttons .btn-outline-success{

    border:2px solid #fff;

    color:#fff;

    padding:14px 34px;

}

.promo-buttons .btn-outline-success:hover{

    background:#fff;

    color:#2E7D32;

}

.promo-image{

    text-align:center;

}

.promo-image img{

    max-width:100%;

    animation:floatPromo 5s ease-in-out infinite;

}

@keyframes floatPromo{

    0%{transform:translateY(0);}

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

    100%{transform:translateY(0);}

}

/*=========================================================
PROMO CARDS
=========================================================*/

.promo-cards{

    padding:90px 0;

    background:#fff;

}

.promo-card{

    border-radius:24px;

    padding:50px;

    height:100%;

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.promo-card:hover{

    transform:translateY(-8px);

}

.promo-green{

    background:linear-gradient(135deg,#2E7D32,#4A9A47);

    color:#fff;

}

.promo-light{

    background:#F8FBF5;

    border:1px solid #e7efe4;

}

.promo-light h3{

    color:#222;

}

.promo-light p{

    color:#666;

}

.promo-subtitle{

    display:inline-block;

    margin-bottom:15px;

    font-weight:600;

    opacity:.9;

}

.promo-card h3{

    font-size:34px;

    margin-bottom:20px;

}

.promo-card p{

    font-size:16px;

    margin-bottom:25px;

    line-height:1.8;

}

.promo-card ul{

    margin:0 0 30px;

    padding:0;

    list-style:none;

}

.promo-card ul li{

    margin-bottom:12px;

    display:flex;

    align-items:center;

    gap:10px;

}

.promo-green ul i{

    color:#B7F28C;

}

.promo-light ul i{

    color:#2E7D32;

}

.promo-card .btn{

    padding:14px 34px;

    font-weight:600;

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

.footer{

    background:#1E2A20;

    color:#d9e3d8;

    padding:80px 0 0;

}

.footer-logo{

    max-height:70px;

}

.footer-widget h5{

    color:#fff;

    margin-bottom:25px;

}

.footer-widget ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-widget ul li{

    margin-bottom:12px;

}

.footer-widget ul li a{

    color:#d9e3d8;

    transition:.3s;

}

.footer-widget ul li a:hover{

    color:#6FA83A;

    padding-left:5px;

}

.footer-widget p{

    color:#cfd8cf;

    line-height:1.8;

}

.footer-widget p i{

    color:#6FA83A;

    margin-right:8px;

}

.footer-social{

    display:flex;

    gap:12px;

    margin:25px 0;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:#2E7D32;

}

.newsletter-box{

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

    padding-top:25px;

    margin-top:20px;

}

.newsletter-box h6{

    color:#fff;

    margin-bottom:10px;

}

.newsletter-box p{

    font-size:14px;

    margin-bottom:15px;

}

.newsletter-box .form-control{

    border:none;

    border-radius:30px 0 0 30px;

}

.newsletter-box .btn{

    border-radius:0 30px 30px 0;

    background:#2E7D32;

    border:none;

}

.footer-bottom{

    margin-top:70px;

    padding:20px 0;

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

    font-size:14px;

}