/* ==========================================================
   MUSHILA WRITES
   Global Stylesheet
   Version 2.0
========================================================== */

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

:root{

--primary:#198754;
--primary-dark:#146c43;
--secondary:#6c757d;
--success:#198754;
--info:#0dcaf0;
--warning:#ffc107;
--danger:#dc3545;

--dark:#212529;
--light:#f8f9fa;
--white:#ffffff;

--border:#dee2e6;
--muted:#6c757d;

--shadow-sm:0 .125rem .25rem rgba(0,0,0,.075);
--shadow:0 .5rem 1rem rgba(0,0,0,.15);
--shadow-lg:0 1rem 3rem rgba(0,0,0,.175);

--radius-sm:8px;
--radius:12px;
--radius-lg:18px;

--transition:.3s ease;

}

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

*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--light);

color:var(--dark);

line-height:1.7;

font-size:16px;

overflow-x:hidden;

}

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

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

font-weight:700;

line-height:1.3;

margin-bottom:1rem;

color:var(--dark);

}

h1{

font-size:3rem;

}

h2{

font-size:2.4rem;

}

h3{

font-size:2rem;

}

h4{

font-size:1.6rem;

}

h5{

font-size:1.3rem;

}

h6{

font-size:1.05rem;

}

p{

margin-bottom:1rem;

color:#495057;

}

.lead{

font-size:1.2rem;

font-weight:400;

color:#6c757d;

}

/* ==========================================================
   LINKS
========================================================== */

a{

color:var(--primary);

text-decoration:none;

transition:var(--transition);

}

a:hover{

color:var(--primary-dark);

}

/* ==========================================================
   IMAGES
========================================================== */

img{

max-width:100%;

height:auto;

display:block;

}

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

.container{

max-width:1200px;

}

/* ==========================================================
   SECTIONS
========================================================== */

section{

padding:80px 0;

}

.section-title{

font-size:2.4rem;

font-weight:700;

margin-bottom:1rem;

position:relative;

}

.section-subtitle{

font-size:1.1rem;

color:var(--muted);

margin-bottom:3rem;

}

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

.btn{

border-radius:10px;

font-weight:600;

padding:.75rem 1.4rem;

transition:var(--transition);

}

.btn-primary{

background:var(--primary);

border-color:var(--primary);

}

.btn-primary:hover{

background:var(--primary-dark);

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

transform:translateY(-2px);

}

.btn-success{

background:var(--success);

border-color:var(--success);

}

.btn-success:hover{

transform:translateY(-2px);

}

.btn-warning{

font-weight:700;

}

.btn-outline-primary:hover{

transform:translateY(-2px);

}

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

.badge{

border-radius:30px;

padding:.55rem .9rem;

font-weight:600;

}

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

.card{

border:none;

border-radius:var(--radius);

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

transition:var(--transition);

}

.card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

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

.rounded-xl{

border-radius:20px;

}

.shadow-soft{

box-shadow:var(--shadow);

}

.text-primary{

color:var(--primary)!important;

}

.text-muted{

color:var(--muted)!important;

}

.bg-light{

background:var(--light)!important;

}

.bg-primary-gradient{

background:linear-gradient(135deg,#198754,#0d6efd);

color:#fff;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}

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

.navbar{

background:#ffffff !important;

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

transition:all .3s ease;

z-index:1030;

}

.navbar-brand{

font-size:1.55rem;

font-weight:700;

display:flex;

align-items:center;

gap:.75rem;

}

.navbar-brand img{

width:48px;

height:48px;

object-fit:cover;

border-radius:12px;

}

.navbar-brand small{

display:block;

font-size:.75rem;

font-weight:500;

color:var(--muted);

line-height:1.1;

}

.navbar-nav .nav-link{

font-weight:500;

padding:.85rem 1rem;

border-radius:8px;

transition:var(--transition);

color:var(--dark);

}

.navbar-nav .nav-link:hover{

background:#f8f9fa;

color:var(--primary);

}

.navbar-nav .nav-link.active{

color:var(--primary)!important;

font-weight:700;

}

.dropdown-menu{

border:none;

border-radius:16px;

padding:.6rem;

box-shadow:var(--shadow);

min-width:260px;

}

.dropdown-header{

font-size:.72rem;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:var(--primary);

}

.dropdown-item{

padding:.7rem 1rem;

border-radius:8px;

transition:var(--transition);

}

.dropdown-item:hover{

background:var(--primary);

color:#ffffff;

}

.dropdown-item:hover i{

color:#ffffff;

}

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

.hero{

padding:120px 0;

position:relative;

overflow:hidden;

background:linear-gradient(
135deg,
#ffffff,
#f7faf9
);

}

.hero h1{

font-size:3.4rem;

font-weight:800;

margin-bottom:1.25rem;

}

.hero p{

font-size:1.2rem;

max-width:720px;

margin-bottom:2rem;

color:var(--muted);

}

.hero-image{

border-radius:20px;

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

overflow:hidden;

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

}

/* ==========================================================
   FEATURE BOXES
========================================================== */

.feature-card{

background:#ffffff;

padding:2rem;

border-radius:18px;

text-align:center;

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

transition:var(--transition);

height:100%;

}

.feature-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.feature-icon{

width:80px;

height:80px;

margin:0 auto 1.5rem;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(25,135,84,.12);

font-size:2rem;

color:var(--primary);

}

.feature-title{

font-size:1.3rem;

font-weight:700;

margin-bottom:.8rem;

}

.feature-text{

color:var(--muted);

}

/* ==========================================================
   BOOK CARDS
========================================================== */

.book-card{

background:#ffffff;

border-radius:20px;

overflow:hidden;

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

transition:var(--transition);

height:100%;

}

.book-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.book-cover{

width:100%;

height:360px;

object-fit:cover;

background:#ececec;

transition:var(--transition);

}

.book-card:hover .book-cover{

transform:scale(1.04);

}

.book-body{

padding:1.5rem;

}

.book-category{

font-size:.8rem;

font-weight:600;

color:var(--primary);

text-transform:uppercase;

letter-spacing:.8px;

margin-bottom:.5rem;

}

.book-title{

font-size:1.25rem;

font-weight:700;

margin-bottom:.8rem;

}

.book-author{

font-size:.95rem;

color:var(--muted);

margin-bottom:.8rem;

}

.book-description{

font-size:.95rem;

color:var(--muted);

margin-bottom:1rem;

}

.book-price{

font-size:1.35rem;

font-weight:700;

color:var(--primary);

margin-bottom:1rem;

}

/* ==========================================================
   CATEGORY CARDS
========================================================== */

.category-card{

background:#ffffff;

padding:2rem;

border-radius:18px;

text-align:center;

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

transition:var(--transition);

height:100%;

}

.category-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.category-icon{

font-size:3rem;

color:var(--primary);

margin-bottom:1rem;

}

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

.stats-section{

background:#ffffff;

}

.stat-card{

padding:2rem;

text-align:center;

border-radius:18px;

background:#ffffff;

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

height:100%;

transition:var(--transition);

}

.stat-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.stat-number{

font-size:2.8rem;

font-weight:800;

color:var(--primary);

margin-bottom:.4rem;

}

.stat-label{

font-size:1rem;

color:var(--muted);

}

/* ==========================================================
   IMAGE EFFECTS
========================================================== */

.img-hover{

overflow:hidden;

border-radius:18px;

}

.img-hover img{

transition:.45s ease;

}

.img-hover:hover img{

transform:scale(1.08);

}

/* ==========================================================
   PAGE HEADERS
========================================================== */

.page-header{

padding:90px 0;

background:linear-gradient(
135deg,
#198754,
#157347
);

color:#ffffff;

text-align:center;

}

.page-header h1{

color:#ffffff;

font-size:3rem;

font-weight:800;

margin-bottom:1rem;

}

.page-header p{

font-size:1.15rem;

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

max-width:760px;

margin:auto;

}

/* ==========================================================
   FORMS
========================================================== */

.form-control,
.form-select{

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

border-radius:12px;

padding:.85rem 1rem;

transition:var(--transition);

box-shadow:none;

}

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

border-color:var(--primary);

box-shadow:0 0 0 .2rem rgba(25,135,84,.15);

}

textarea.form-control{

min-height:160px;

resize:vertical;

}

.form-label{

font-weight:600;

margin-bottom:.5rem;

}

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

.search-box{

background:#ffffff;

padding:2rem;

border-radius:18px;

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

}

/* ==========================================================
   BLOG CARDS
========================================================== */

.blog-card{

background:#ffffff;

border-radius:18px;

overflow:hidden;

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

transition:var(--transition);

height:100%;

}

.blog-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.blog-card img{

width:100%;

height:240px;

object-fit:cover;

}

.blog-body{

padding:1.5rem;

}

.blog-title{

font-size:1.35rem;

font-weight:700;

margin-bottom:.8rem;

}

.blog-meta{

font-size:.9rem;

color:var(--muted);

margin-bottom:1rem;

}

.blog-excerpt{

color:var(--muted);

}

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

.testimonial-card{

background:#ffffff;

padding:2rem;

border-radius:18px;

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

transition:var(--transition);

height:100%;

}

.testimonial-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.testimonial-avatar{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:1rem;

}

.testimonial-name{

font-size:1.2rem;

font-weight:700;

}

.testimonial-role{

font-size:.9rem;

color:var(--muted);

margin-bottom:1rem;

}

.rating{

color:#ffc107;

font-size:1.1rem;

}

/* ==========================================================
   REVIEW CARDS
========================================================== */

.review-card{

background:#ffffff;

padding:2rem;

border-radius:18px;

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

margin-bottom:2rem;

transition:var(--transition);

}

.review-card:hover{

box-shadow:var(--shadow);

}

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

.accordion-item{

border:none;

border-radius:14px;

margin-bottom:1rem;

overflow:hidden;

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

}

.accordion-button{

font-weight:600;

padding:1rem 1.25rem;

}

.accordion-button:not(.collapsed){

background:rgba(25,135,84,.08);

color:var(--primary);

box-shadow:none;

}

.accordion-button:focus{

box-shadow:none;

}

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

.newsletter-box{

background:linear-gradient(135deg,#198754,#157347);

color:#ffffff;

padding:4rem 2rem;

border-radius:24px;

text-align:center;

}

.newsletter-box h2{

color:#ffffff;

}

.newsletter-box p{

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

}

.newsletter-box .form-control{

border:none;

}

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

.table{

background:#ffffff;

border-radius:12px;

overflow:hidden;

}

.table thead{

background:var(--primary);

color:#ffffff;

}

.table th{

border:none;

font-weight:600;

}

.table td{

vertical-align:middle;

}

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

.alert{

border:none;

border-radius:14px;

padding:1rem 1.25rem;

}

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

.badge{

padding:.55rem .9rem;

font-weight:600;

border-radius:50rem;

}

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

.pagination .page-link{

border:none;

margin:0 .2rem;

border-radius:10px;

color:var(--primary);

}

.pagination .page-link:hover{

background:var(--primary);

color:#ffffff;

}

.pagination .active .page-link{

background:var(--primary);

border-color:var(--primary);

}

/* ==========================================================
   MEMBERSHIP / PRICING
========================================================== */

.pricing-card{

background:#ffffff;

padding:2.5rem;

border-radius:20px;

text-align:center;

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

transition:var(--transition);

height:100%;

}

.pricing-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.pricing-price{

font-size:3rem;

font-weight:800;

color:var(--primary);

margin-bottom:1rem;

}

.pricing-card ul{

list-style:none;

padding:0;

margin:2rem 0;

}

.pricing-card li{

padding:.5rem 0;

border-bottom:1px solid #f1f1f1;

}

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

.icon-box{

display:flex;

align-items:flex-start;

gap:1rem;

margin-bottom:1.5rem;

}

.icon-box i{

font-size:2rem;

color:var(--primary);

min-width:50px;

}

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

footer{

background:#212529;

color:#ffffff;

margin-top:5rem;

padding:4rem 0 2rem;

}

footer h5,
footer h6{

color:#ffffff;

margin-bottom:1.2rem;

}

footer p{

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

}

footer a{

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

transition:var(--transition);

}

footer a:hover{

color:#ffc107;

padding-left:4px;

}

.footer-logo{

max-width:170px;

margin-bottom:1rem;

}

.footer-divider{

border-color:rgba(255,255,255,.12);

margin:2rem 0;

}

.footer-bottom{

font-size:.95rem;

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

}

/* ==========================================================
   SOCIAL MEDIA
========================================================== */

.social-icons{

display:flex;

flex-wrap:wrap;

gap:.75rem;

}

.social-icons a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

font-size:1.2rem;

color:#ffffff;

transition:var(--transition);

}

.social-icons a:hover{

background:var(--primary);

transform:translateY(-4px);

}

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

.timeline{

position:relative;

padding-left:2rem;

}

.timeline::before{

content:"";

position:absolute;

left:14px;

top:0;

bottom:0;

width:3px;

background:var(--primary);

}

.timeline-item{

position:relative;

margin-bottom:2.5rem;

padding-left:2rem;

}

.timeline-item::before{

content:"";

position:absolute;

left:-2px;

top:6px;

width:16px;

height:16px;

border-radius:50%;

background:var(--primary);

border:4px solid #ffffff;

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

}

.timeline-year{

font-weight:700;

color:var(--primary);

margin-bottom:.4rem;

}

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

.gallery-item{

overflow:hidden;

border-radius:18px;

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

}

.gallery-item img{

transition:.4s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

/* ==========================================================
   AUTHOR PROFILE
========================================================== */

.author-card{

background:#ffffff;

padding:2rem;

border-radius:20px;

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

text-align:center;

}

.author-photo{

width:180px;

height:180px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:1.5rem;

border:6px solid #ffffff;

box-shadow:var(--shadow);

}

/* ==========================================================
   QR CODES
========================================================== */

.qr-code{

max-width:180px;

margin:auto;

}

/* ==========================================================
   PARTNERS
========================================================== */

.partner-logo{

height:80px;

object-fit:contain;

filter:grayscale(100%);

opacity:.75;

transition:var(--transition);

}

.partner-logo:hover{

filter:none;

opacity:1;

transform:scale(1.05);

}

/* ==========================================================
   SCROLL TO TOP
========================================================== */

#scrollTop{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:var(--primary);

color:#ffffff;

font-size:1.3rem;

cursor:pointer;

display:none;

box-shadow:var(--shadow);

z-index:9999;

transition:var(--transition);

}

#scrollTop:hover{

background:var(--primary-dark);

transform:translateY(-3px);

}

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

.loading{

display:flex;

align-items:center;

justify-content:center;

padding:4rem;

}

.spinner{

width:50px;

height:50px;

border:5px solid #e9ecef;

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

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}

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

.fade-up{

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

@media (max-width:991px){

.hero{

padding:90px 0;

text-align:center;

}

.hero h1{

font-size:2.6rem;

}

.page-header{

padding:70px 0;

}

.page-header h1{

font-size:2.4rem;

}

.section-title{

font-size:2rem;

}

.book-cover{

height:300px;

}

.navbar-brand{

font-size:1.3rem;

}

}

@media (max-width:768px){

section{

padding:60px 0;

}

.hero h1{

font-size:2.2rem;

}

.hero p{

font-size:1rem;

}

.page-header h1{

font-size:2rem;

}

.book-cover{

height:260px;

}

.author-photo{

width:140px;

height:140px;

}

.timeline{

padding-left:1.5rem;

}

.timeline-item{

padding-left:1.5rem;

}

}

@media (max-width:576px){

.hero{

padding:55px 0;

}

.hero h1{

font-size:1.8rem;

}

.section-title{

font-size:1.7rem;

}

.btn{

width:100%;

margin-bottom:.75rem;

}

.social-icons{

justify-content:center;

}

.partner-logo{

height:60px;

}

}

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

@media print{

.navbar,
footer,
.btn,
#scrollTop{

display:none !important;

}

body{

background:#ffffff;

}

.card{

box-shadow:none;

border:1px solid #cccccc;

}

}

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

.hero-section{

    padding:90px 0;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f8faf9 50%,
        #eef8f1 100%
    );

}

.hero-image{

    width:100%;

    max-width:560px;

    height:520px;

    object-fit:cover;

    border-radius:24px;

    transition:.4s;

}

.hero-image:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.hero-section h1{

    line-height:1.15;

}

.hero-section .btn{

    padding:14px 28px;

    border-radius:50px;

}

/* ==========================================================
   END OF STYLESHEET
========================================================== */