/* ==========================================================
   MamaPanda Analytics
   Main Stylesheet
   Part 1 - Global, Navbar, Hero, Buttons
   ========================================================== */

/* ===========================
   Google Font
=========================== */

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

/* ===========================
   Reset
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f5f7fa;

    color:#333;

    line-height:1.7;

    overflow-x:hidden;

}

/* ===========================
   Typography
=========================== */

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

    font-weight:700;

    color:#222;

}

p{

    color:#666;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

    display:block;

}

/* ===========================
   Common Utilities
=========================== */

.section-padding{

    padding:90px 0;

}

.section-title{

    margin-bottom:50px;

    text-align:center;

}

.section-title h2{

    font-size:42px;

    font-weight:700;

}

.section-title p{

    font-size:18px;

    color:#777;

}

/* ===========================
   Navbar
=========================== */

.navbar{

    background:#198754 !important;

    padding:14px 0;

    transition:.3s;

    z-index:999;

}

.navbar-brand{

    display:flex;

    align-items:center;

    font-size:28px;

    font-weight:700;

    color:#fff !important;

}

.navbar-brand img{

    width:45px;

    height:45px;

    object-fit:cover;

    margin-right:10px;

    border-radius:10px;

}

.nav-link{

    color:#fff !important;

    margin-left:18px;

    font-weight:500;

    position:relative;

    transition:.3s;

}

.nav-link:hover{

    color:#ffe082 !important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#fff;

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

/* ===========================
   Hero Section
=========================== */

.hero-section{

    background-image:url("../images/hero.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    min-height:100vh;

    position:relative;

}

.hero-overlay{

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

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero-section h1{

    font-size:64px;

    color:#fff;

    font-weight:700;

    line-height:1.2;

}

.hero-section p{

    color:#f5f5f5;

    font-size:20px;

    max-width:650px;

}

.hero-section .badge{

    font-size:15px;

    padding:10px 18px;

}

.hero-section .btn{

    margin-top:10px;

}

/* ===========================
   Hero Animation
=========================== */

.hero-content{

    animation:slideUp 1s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   Buttons
=========================== */

.btn{

    transition:.35s;

    border-radius:40px;

    font-weight:600;

    padding:12px 30px;

}

.btn-success{

    background:#198754;

    border:none;

}

.btn-success:hover{

    background:#157347;

    transform:translateY(-3px);

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

}

.btn-outline-light:hover{

    transform:translateY(-3px);

}

/* ===========================
   Cards (Common)
=========================== */

.card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

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

}

.card:hover{

    transform:translateY(-8px);

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

}

.card-body{

    padding:35px;

}

/* ===========================
   Icons
=========================== */

.bi{

    transition:.3s;

}

.card:hover .bi{

    transform:scale(1.1);

}

/* ===========================
   Images
=========================== */

.rounded-img{

    border-radius:20px;

    overflow:hidden;

}

/* ===========================
   Shadow Utility
=========================== */

.shadow-lg-custom{

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

}

/* ===========================
   Fade Animation
=========================== */

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   Responsive Hero
=========================== */

@media(max-width:992px){

.hero-overlay{

text-align:center;

padding:60px 20px;

}

.hero-section h1{

font-size:48px;

}

.hero-section p{

font-size:18px;

margin:auto;

}

}

@media(max-width:768px){

.hero-section{

min-height:85vh;

}

.hero-overlay{

padding:40px 20px;

}

.hero-section h1{

font-size:36px;

}

.hero-section p{

font-size:17px;

}

.hero-section .btn{

display:block;

width:100%;

margin-bottom:15px;

}

.navbar-brand{

font-size:22px;

}

.navbar-brand img{

width:38px;

height:38px;

}

}
/* ==========================================================
   MamaPanda Analytics
   Part 2 - About, Statistics, Services, CTA
   ========================================================== */


/* ==========================================
   About Section
========================================== */

#about{

    padding:100px 0;

    background:#ffffff;

}

#about h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:25px;

}

#about h3{

    font-size:30px;

    margin-bottom:20px;

}

#about p{

    font-size:17px;

    color:#666;

    margin-bottom:18px;

}

#about img{

    border-radius:20px;

    transition:.4s;

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

}

#about img:hover{

    transform:scale(1.03);

}


/* ==========================================
   Statistics
========================================== */

.stats-section{

    background:#198754;

    color:#fff;

    padding:90px 0;

}

.stats-section h1{

    color:#fff;

    font-size:58px;

    font-weight:700;

}

.stats-section p{

    color:#fff;

    font-size:18px;

    margin-top:10px;

}

.bg-success h1{

    color:#fff;

}

.bg-success p{

    color:#fff;

}


/* ==========================================
   Services
========================================== */

#services{

    padding:100px 0;

    background:#f8f9fa;

}

#services h2{

    font-size:42px;

    margin-bottom:15px;

}

#services .text-muted{

    margin-bottom:50px;

}

#services .card{

    border-radius:18px;

    transition:.35s;

}

#services .card:hover{

    transform:translateY(-10px);

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

}

#services .card-body{

    padding:40px 25px;

}

#services .card i{

    font-size:60px;

    color:#198754;

    margin-bottom:20px;

}

#services h4{

    margin-bottom:18px;

    font-size:24px;

}

#services p{

    color:#666;

    font-size:16px;

}


/* ==========================================
   Feature Cards
========================================== */

.feature-card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    transition:.35s;

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

}

.feature-card:hover{

    transform:translateY(-8px);

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

}

.feature-card i{

    font-size:65px;

    color:#198754;

    margin-bottom:25px;

}

.feature-card h4{

    margin-bottom:20px;

}

.feature-card p{

    color:#777;

}


/* ==========================================
   Why Choose Us
========================================== */

.why-us{

    padding:100px 0;

    background:#ffffff;

}

.why-us-box{

    text-align:center;

    padding:35px;

    transition:.3s;

}

.why-us-box:hover{

    transform:translateY(-6px);

}

.why-us-box i{

    font-size:60px;

    color:#198754;

    margin-bottom:20px;

}

.why-us-box h5{

    margin-bottom:15px;

    font-size:22px;

}


/* ==========================================
   CTA Section
========================================== */

.cta{

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

    color:#fff;

    padding:90px 0;

    text-align:center;

}

.cta h2{

    color:#fff;

    font-size:42px;

    margin-bottom:20px;

}

.cta p{

    color:#fff;

    font-size:20px;

    margin-bottom:35px;

}

.cta .btn{

    padding:15px 40px;

    font-size:18px;

}


/* ==========================================
   Contact Preview Boxes
========================================== */

.info-box{

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

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

    transition:.35s;

}

.info-box:hover{

    transform:translateY(-8px);

}

.info-box i{

    font-size:45px;

    color:#198754;

    margin-bottom:20px;

}


/* ==========================================
   Section Divider
========================================== */

.section-divider{

    width:90px;

    height:5px;

    background:#198754;

    margin:20px auto 40px;

    border-radius:30px;

}


/* ==========================================
   Animations
========================================== */

.zoom-in{

    animation:zoomIn .8s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.slide-left{

    animation:slideLeft .9s ease;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-right{

    animation:slideRight .9s ease;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* ==========================================
   Responsive
========================================== */

@media(max-width:992px){

#about{

text-align:center;

}

#about img{

margin-top:40px;

}

#services .card{

margin-bottom:30px;

}

.stats-section h1{

font-size:44px;

}

}

@media(max-width:768px){

#about h2{

font-size:34px;

}

#services h2{

font-size:34px;

}

.cta h2{

font-size:30px;

}

.feature-card{

padding:30px;

}

.stats-section{

text-align:center;

}

.stats-section .col-md-3{

margin-bottom:30px;

}

}
/* ==========================================================
   MamaPanda Analytics
   Part 3A - Contact, Footer, Forms, Login,
              Dashboard, Tables
   ========================================================== */


/* ==========================================
   Contact Section
========================================== */

#contact{

    background:#ffffff;

    padding:100px 0;

}

#contact h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:15px;

}

#contact h4{

    margin-bottom:25px;

    font-weight:600;

}

#contact p{

    font-size:17px;

    margin-bottom:18px;

}

#contact i{

    color:#198754;

    margin-right:10px;

    font-size:20px;

}


/* Contact Form */

#contact form{

    background:#ffffff;

    padding:35px;

    border-radius:20px;

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

}

#contact .form-control{

    border-radius:12px;

    border:1px solid #dee2e6;

    padding:14px 16px;

    font-size:16px;

    transition:.3s;

}

#contact .form-control:focus{

    border-color:#198754;

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

}

#contact textarea{

    resize:none;

}

#contact button{

    width:100%;

    padding:14px;

}


/* ==========================================
   Footer
========================================== */

footer{

    background:#212529;

    color:#ffffff;

}

footer h3,
footer h4,
footer h5{

    color:#ffffff;

    margin-bottom:20px;

}

footer p{

    color:#cccccc;

}

footer a{

    color:#cccccc;

    transition:.3s;

}

footer a:hover{

    color:#20c997;

    padding-left:6px;

}

footer ul{

    list-style:none;

    padding-left:0;

}

footer li{

    margin-bottom:10px;

}

footer i{

    transition:.3s;

    cursor:pointer;

}

footer i:hover{

    color:#20c997;

    transform:translateY(-3px);

}

footer hr{

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

}


/* ==========================================
   Login Page
========================================== */

.login-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

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

    padding:60px 20px;

}

.login-box{

    width:420px;

    background:#ffffff;

    border-radius:20px;

    padding:40px;

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

}

.login-box h2{

    text-align:center;

    margin-bottom:30px;

    font-weight:700;

}

.login-box .form-control{

    padding:14px;

    border-radius:12px;

}

.login-box .btn{

    width:100%;

    padding:14px;

}

.login-logo{

    width:90px;

    margin:0 auto 20px;

}


/* ==========================================
   Dashboard Cards
========================================== */

.dashboard-card{

    border:none;

    border-radius:20px;

    color:#ffffff;

    transition:.35s;

    overflow:hidden;

}

.dashboard-card:hover{

    transform:translateY(-8px);

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

}

.dashboard-card .card-body{

    padding:35px;

}

.dashboard-card h5{

    font-size:18px;

    opacity:.9;

}

.dashboard-card h2{

    font-size:42px;

    font-weight:700;

    margin-top:15px;

}

.dashboard-card i{

    font-size:50px;

    opacity:.85;

}

.bg-gradient-green{

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

}

.bg-gradient-blue{

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

}

.bg-gradient-orange{

    background:linear-gradient(135deg,#fd7e14,#ffc107);

}

.bg-gradient-red{

    background:linear-gradient(135deg,#dc3545,#ff6b6b);

}


/* ==========================================
   Dashboard Widgets
========================================== */

.widget{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

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

    margin-bottom:30px;

}

.widget-title{

    font-size:22px;

    margin-bottom:25px;

    font-weight:600;

}


/* ==========================================
   Tables
========================================== */

.table-responsive{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

}

.table{

    margin-bottom:0;

}

.table thead{

    background:#198754;

}

.table thead th{

    color:#ffffff;

    border:none;

    padding:18px;

    font-weight:600;

}

.table tbody td{

    padding:16px;

    vertical-align:middle;

}

.table tbody tr{

    transition:.2s;

}

.table tbody tr:hover{

    background:#f8f9fa;

}


/* ==========================================
   Forms
========================================== */

.form-control{

    border-radius:12px;

    padding:12px 16px;

    border:1px solid #ced4da;

    transition:.3s;

}

.form-control:focus{

    border-color:#198754;

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

}

.form-select{

    border-radius:12px;

    padding:12px;

}

.form-label{

    font-weight:600;

}

.btn-success{

    background:#198754;

    border:none;

}

.btn-success:hover{

    background:#157347;

}


/* ==========================================
   Badges
========================================== */

.badge{

    padding:8px 15px;

    border-radius:30px;

    font-weight:500;

}


/* ==========================================
   Pagination
========================================== */

.pagination .page-link{

    color:#198754;

    border-radius:8px;

    margin:0 3px;

}

.pagination .active .page-link{

    background:#198754;

    border-color:#198754;

}
/* ==========================================================
   MamaPanda Analytics
   Part 3B - Alerts, Utilities, Loader, Animations,
              Scroll Top, Responsive
   ========================================================== */


/* ==========================================
   Flash Messages
========================================== */

.alert{

    border:none;

    border-radius:12px;

    padding:15px 20px;

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

}

.alert-success{

    background:#d1e7dd;

    color:#0f5132;

}

.alert-danger{

    background:#f8d7da;

    color:#842029;

}

.alert-warning{

    background:#fff3cd;

    color:#664d03;

}

.alert-info{

    background:#cff4fc;

    color:#055160;

}


/* ==========================================
   Scroll To Top Button
========================================== */

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    background:#198754;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    cursor:pointer;

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

    transition:.3s;

    z-index:999;

}

.scroll-top:hover{

    background:#157347;

    transform:translateY(-4px);

}


/* ==========================================
   Loading Spinner
========================================== */

.loader{

    width:60px;

    height:60px;

    border:6px solid #e9ecef;

    border-top:6px solid #198754;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}

@keyframes spin{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}


/* ==========================================
   Utility Classes
========================================== */

.rounded-20{

    border-radius:20px;

}

.shadow-soft{

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

}

.text-success-dark{

    color:#157347;

}

.bg-light-green{

    background:#f2fbf6;

}

.cursor-pointer{

    cursor:pointer;

}

.w-80{

    width:80%;

}

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}


/* ==========================================
   Hover Effects
========================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.03);

}


/* ==========================================
   Animations
========================================== */

.fade-in{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.slide-up{

    animation:slideUp .8s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.zoom-in{

    animation:zoomIn .7s ease;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/* ==========================================
   Image Hover
========================================== */

img{

    transition:.35s;

}

img:hover{

    transform:scale(1.02);

}


/* ==========================================
   Progress Bars
========================================== */

.progress{

    height:10px;

    border-radius:20px;

    overflow:hidden;

}

.progress-bar{

    background:#198754;

}


/* ==========================================
   Breadcrumb
========================================== */

.breadcrumb{

    background:transparent;

    margin-bottom:20px;

}

.breadcrumb-item a{

    color:#198754;

}


/* ==========================================
   Responsive
========================================== */

@media (max-width:1200px){

.hero-section h1{

font-size:54px;

}

}

@media (max-width:992px){

.section-padding{

padding:70px 0;

}

.hero-section{

text-align:center;

}

.hero-section h1{

font-size:46px;

}

.hero-section p{

font-size:18px;

margin:auto;

}

.dashboard-card{

margin-bottom:25px;

}

.widget{

margin-bottom:25px;

}

}

@media (max-width:768px){

.section-title h2{

font-size:34px;

}

.hero-section{

min-height:85vh;

}

.hero-section h1{

font-size:36px;

}

.hero-section p{

font-size:17px;

}

.hero-section .btn{

display:block;

width:100%;

margin-bottom:15px;

}

.navbar-brand{

font-size:22px;

}

.nav-link{

margin-left:0;

padding:10px 0;

}

.card-body{

padding:25px;

}

.login-box{

width:100%;

padding:30px;

}

.table-responsive{

font-size:14px;

}

footer{

text-align:center;

}

footer .col-lg-4{

margin-bottom:30px;

}

}

@media (max-width:576px){

.hero-section h1{

font-size:30px;

}

.section-title h2{

font-size:28px;

}

.dashboard-card h2{

font-size:32px;

}

.stats-section h1{

font-size:38px;

}

.btn{

padding:10px 22px;

font-size:15px;

}

}


/* ==========================================
   Print Styles
========================================== */

@media print{

.navbar,
footer,
.btn,
.scroll-top{

display:none !important;

}

body{

background:#fff;

color:#000;

}

.card{

box-shadow:none;

border:1px solid #ddd;

}

}