/* ==========================================================
   Animal Bite Monitoring System
   Homepage V2
   ========================================================== */


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

:root{

    --primary:#0B4EA2;
    --primary-dark:#083A79;
    --primary-light:#3C82E6;

    --secondary:#11A8FD;

    --danger:#E63946;
    --success:#2ECC71;
    --warning:#F4A261;

    --dark:#16213E;

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-400:#9CA3AF;
    --gray-500:#6B7280;
    --gray-600:#4B5563;
    --gray-700:#374151;
    --gray-800:#1F2937;
    --gray-900:#111827;

    --radius-sm:10px;
    --radius:18px;
    --radius-lg:28px;

    --shadow-sm:0 5px 18px rgba(0,0,0,.06);

    --shadow:

        0 15px 40px rgba(16,24,40,.08);

    --shadow-lg:

        0 25px 60px rgba(16,24,40,.15);

}


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

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--gray-800);

    background:#F5F7FB;

    overflow-x:hidden;

    line-height:1.65;

}


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

a{

    text-decoration:none;

    transition:.3s;

}

img{

    display:block;

    max-width:100%;

}


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

.container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding-left:25px;

    padding-right:25px;

}


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

section{

    position:relative;

}

.section-padding{

    padding:100px 0;

}

.section-title{

    font-size:48px;

    font-weight:800;

    color:var(--dark);

    line-height:1.2;

}

.section-subtitle{

    margin-top:18px;

    color:var(--gray-500);

    font-size:18px;

    max-width:700px;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border:none;

    cursor:pointer;

    font-weight:700;

    padding:18px 34px;

    border-radius:15px;

    transition:.35s;

}

.btn-primary{

    color:#fff;

    background:

    linear-gradient(

        135deg,

        var(--danger),

        #ff6b6b

    );

    box-shadow:

    0 15px 35px rgba(230,57,70,.25);

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

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

}

.btn-secondary:hover{

    background:var(--primary);

    color:#fff;

}


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

.glass{

    backdrop-filter:blur(18px);

    background:

    rgba(255,255,255,.12);

    border:

    1px solid rgba(255,255,255,.18);

}


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

.card{

    background:#fff;

    border-radius:24px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-5px);

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

}


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

.text-center{

    text-align:center;

}

.mb-2{

    margin-bottom:10px;

}

.mb-3{

    margin-bottom:18px;

}

.mb-4{

    margin-bottom:25px;

}

.mb-5{

    margin-bottom:40px;

}

.mt-5{

    margin-top:40px;

}

.py-100{

    padding-top:100px;

    padding-bottom:100px;

}


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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#EAEAEA;

}

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

.site-header{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #0b4ea2 0%,
        #0f62c9 45%,
        #2196f3 100%
    );

}

.site-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(255,255,255,.12),
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(255,255,255,.08),
        transparent 45%);

}

.navbar{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 50px);

    max-width:1320px;

    z-index:999;

    padding:18px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-radius:22px;

    backdrop-filter:blur(22px);

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

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

    transition:.35s;

}

.navbar.scrolled{

    top:10px;

    background:#ffffff;

    border:none;

    box-shadow:var(--shadow);

}

.navbar.scrolled .nav-link{

    color:var(--gray-700);

}

.navbar.scrolled .logo-title{

    color:var(--primary);

}

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo img{

    width:58px;

}

.logo-title{

    color:#fff;

    font-size:22px;

    font-weight:800;

}

.logo-subtitle{

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

    font-size:13px;

}

.nav-links{

    display:flex;

    gap:36px;

}

.nav-link{

    color:white;

    font-weight:600;

    position:relative;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#fff;

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

.nav-actions{

    display:flex;

    gap:12px;

}

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

.hero{

    padding-top:170px;

    padding-bottom:130px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

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

    color:white;

    padding:12px 18px;

    border-radius:50px;

    margin-bottom:35px;

}

.hero-title{

    color:white;

    font-size:68px;

    line-height:1.08;

    font-weight:900;

    letter-spacing:-2px;

}

.hero-title span{

    color:#8ED7FF;

}

.hero-description{

    margin-top:32px;

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

    font-size:20px;

    max-width:620px;

    line-height:1.8;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:42px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:200px;

}

.hero-buttons .btn-secondary{

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

    color:white;

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

}

.hero-buttons .btn-secondary:hover{

    background:white;

    color:var(--primary);

}

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

.hero-map{

    position:relative;

}

.hero-map-card{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    background:white;

    box-shadow:

    0 35px 80px rgba(0,0,0,.22);
    
    z-index: 1;

}

.hero-map-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 30px;

    border-bottom:1px solid #ECECEC;

}

.hero-map-title{

    font-size:24px;

    font-weight:700;

    color:var(--gray-800);

}

.hero-map-subtitle{

    color:var(--gray-500);

    margin-top:4px;

}

.live-badge{

    background:#DFF8EA;

    color:#129C52;

    font-weight:700;

    padding:10px 16px;

    border-radius:50px;

}

#heroMap{

    height:540px;

    width:100%;

}

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

.hero-card{

    position:absolute;

    background:white;

    border-radius:22px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

    padding:22px;

    z-index:10;

    min-width:220px;

}

.hero-card h4{

    color:var(--gray-500);

    font-size:15px;

    margin-bottom:12px;

}

.hero-card strong{

    display:block;

    font-size:42px;

    color:var(--primary);

    font-weight:800;

}

.hero-card small{

    display:block;

    margin-top:6px;

    color:var(--gray-500);

}

.hero-card.card-left{

    left:-40px;

    bottom:45px;

}

.hero-card.card-right{

    right:-35px;

    top:55px;

}

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

.hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

}

.hero-circle.one{

    width:420px;

    height:420px;

    background:#54C7FF;

    left:-140px;

    top:-140px;

}

.hero-circle.two{

    width:340px;

    height:340px;

    background:#0FD3FF;

    right:-100px;

    bottom:-100px;

}

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

@media(max-width:1200px){

.hero-title{

font-size:56px;

}

}

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-map{

margin-top:40px;

}

.hero-card{

display:none;

}

.nav-links{

display:none;

}

.hero{

padding-top:140px;

}

}

@media(max-width:768px){

.hero-title{

font-size:42px;

}

.hero-description{

font-size:17px;

}

.navbar{

padding:16px 20px;

width:calc(100% - 20px);

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

#heroMap{

height:420px;

}

}

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

.mobile-toggle{

display:none;

width:52px;

height:52px;

border:none;

border-radius:14px;

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

color:white;

font-size:24px;

cursor:pointer;

}

.mobile-menu{

position:fixed;

top:95px;

left:20px;

right:20px;

background:white;

border-radius:24px;

box-shadow:0 30px 60px rgba(0,0,0,.15);

padding:20px;

display:none;

flex-direction:column;

gap:15px;

z-index:998;

}

.mobile-menu.active{

display:flex;

animation:fadeUp .35s;

}

.mobile-menu a{

color:var(--gray-700);

font-weight:600;

padding:14px;

border-radius:12px;

}

.mobile-menu a:hover{

background:#F5F7FB;

}

.mobile-report{

background:var(--danger);

color:white !important;

text-align:center;

}

.mobile-register{

background:var(--primary);

color:white !important;

text-align:center;

}

.mobile-login{

background:#EEF5FF;

color:var(--primary) !important;

text-align:center;

}

@media(max-width:992px){

.mobile-toggle{

display:flex;

align-items:center;

justify-content:center;

}

.nav-actions{

display:none;

}

}

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

.hero-stat-grid{

display:grid;

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

gap:20px;

margin-top:60px;

}

.hero-stat{

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

backdrop-filter:blur(18px);

padding:24px;

border-radius:20px;

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

text-align:center;

}

.hero-stat h3{

font-size:38px;

font-weight:800;

color:white;

}

.hero-stat p{

margin-top:8px;

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

}

@media(max-width:768px){

.hero-stat-grid{

grid-template-columns:1fr;

}

}

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

.statistics-section{

    padding:110px 0 0 0;

    background:#F7F9FC;

}

.section-heading{

    max-width:760px;

    margin:auto;

    margin-bottom:70px;
    
    text-align: center;

}

.section-badge{

    display:inline-block;

    background:#E8F2FF;

    color:var(--primary);

    font-weight:700;

    padding:12px 20px;

    border-radius:50px;

    margin-bottom:20px;

}

.stats-grid{

    display:grid;

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

    gap:28px;

}

.stats-card{

    background:white;

    border-radius:24px;

    padding:34px;

    display:flex;

    align-items:center;

    gap:22px;

    box-shadow:0 15px 40px rgba(15,23,42,.08);

    transition:.35s;

}

.stats-card:hover{

    transform:translateY(-8px);

}

.stats-icon{

    width:78px;

    height:78px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    color:white;

}

.stats-content h3{

    font-size:42px;

    color:var(--dark);

    font-weight:800;

}

.stats-content p{

    margin-top:6px;

    color:#64748B;

    font-size:17px;

}

/* Colors */

.bg-blue{

background:#2563EB;

}

.bg-green{

background:#16A34A;

}

.bg-orange{

background:#F97316;

}

.bg-red{

background:#DC2626;

}

.bg-purple{

background:#7C3AED;

}

.bg-cyan{

background:#0891B2;

}

@media(max-width:1100px){

.stats-grid{

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

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

}

.stats-card{

padding:28px;

}

.stats-content h3{

font-size:34px;

}

}

/* ==========================================================
   HEATMAP
========================================================== */

.heatmap-section{
    padding:120px 0;
    background:#f8fafc;
}

.heatmap-dashboard{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(15,23,42,.08);
}

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

.heatmap-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
    padding:35px;
    border-bottom:1px solid #edf2f7;
}

.heatmap-header h2{
    margin:0 0 10px;
    font-size:34px;
}

.heatmap-header p{
    margin:0;
    color:#64748b;
    max-width:650px;
}

.heatmap-filters{
    display:flex;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
}

.heatmap-filters select{
    height:48px;
    min-width:180px;
    border:1px solid #d9e1ec;
    border-radius:12px;
    padding:0 15px;
    background:#fff;
    font-size:15px;
}

.refresh-btn{
    height:48px;
    padding:0 24px;
    border:none;
    border-radius:12px;
    background:#0f62fe;
    color:#fff;
    cursor:pointer;
    font-weight:600;
    transition:.25s;
}

.refresh-btn:hover{
    background:#0a53d9;
}

/* =============================
   BODY
============================= */

.heatmap-body{
    display:grid;
    grid-template-columns:240px 1fr;
}

/* =============================
   SIDEBAR
============================= */

.heatmap-tabs{
    background:#f8fafc;
    padding:25px;
    border-right:1px solid #edf2f7;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.map-tab{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    border:none;
    background:#fff;
    padding:11px 18px;
    border-radius:12px;
    text-align:left;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.map-tab:hover{
    background:#eef4ff;
}

.map-tab.active{
    background:#0f62fe;
    color:#fff;
}

/* =============================
   MAP
============================= */

.map-wrapper{
    padding:20px;
}

#mainHeatmap{
    width:100%;
    height:650px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e2e8f0;
}

/* =============================
   ANIMAL ICONS
============================= */

.animal-marker{
    background:none;
    border:none;
}

.animal-marker div{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

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

@media(max-width:1100px){

    .heatmap-header{
        flex-direction:column;
    }

    .heatmap-body{
        grid-template-columns:1fr;
    }

    .heatmap-tabs{
        flex-direction:row;
        overflow-x:auto;
        border-right:none;
        border-bottom:1px solid #edf2f7;
    }

    .map-tab{
        min-width:170px;
        white-space:nowrap;
    }

}

@media(max-width:768px){

    .heatmap-section{
        padding:80px 0;
    }

    #mainHeatmap{
        height:500px;
    }

    .heatmap-header{
        padding:25px;
    }

    .heatmap-header h2{
        font-size:28px;
    }

}

/* ==========================================================
   REPORT BENEFITS
========================================================== */

.process-section{

    padding:0;

    background:#F7F9FC;

}

.report-benefits{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    display:grid;

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

    box-shadow:0 15px 45px rgba(15,23,42,.08);

}

.benefit-main{

    padding:45px;

    border-right:1px solid #EEF2F7;

}

.benefit-main h2{

    margin:20px 0;

    font-size:36px;

}

.benefit-main p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:30px;

}

.learn-more{

    color:#0B4EA2;

    font-weight:700;

    text-decoration:none;

}

.learn-more:hover{

    text-decoration:underline;

}

/* ========================= */

.benefit-card{

    padding:35px 25px;

    text-align:center;

    border-right:1px solid #EEF2F7;

    transition:.3s;

}

.benefit-card:last-child{

    border-right:none;

}

.benefit-card:hover{

    background:#F8FBFF;

}

.benefit-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    font-weight:bold;

}

.blue{

    background:#EAF3FF;

    color:#1565C0;

}

.green{

    background:#EAFBF0;

    color:#1B9E4B;

}

.orange{

    background:#FFF2E5;

    color:#EF6C00;

}

.purple{

    background:#F2ECFF;

    color:#6A1B9A;

}

.red{

    background:#FFECEC;

    color:#D32F2F;

}

.benefit-card h3{

    font-size:20px;

    margin-bottom:15px;

}

.benefit-card p{

    color:#64748B;

    font-size:15px;

    line-height:1.7;
    

}

/* ========================= */

@media(max-width:1300px){

    .report-benefits{

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

    }

    .benefit-main{

        grid-column:1/-1;

        border-right:none;

        border-bottom:1px solid #EEF2F7;

    }

}

@media(max-width:768px){

    .report-benefits{

        grid-template-columns:1fr;

    }

    .benefit-card{

        border-right:none;

        border-top:1px solid #EEF2F7;

    }

}
/* ==========================================================
   CLINIC
========================================================== */

.clinic-section{

padding:120px 0;

background:white;

}

.clinic-grid{

display:grid;

grid-template-columns:420px 1fr;

gap:40px;

margin-top:60px;

}

.clinic-info{

display:flex;

flex-direction:column;

gap:20px;

}

.info-card{

display:flex;

gap:20px;

padding:28px;

background:#F8FAFC;

border-radius:22px;

align-items:flex-start;

transition:.3s;

}

.info-card:hover{

transform:translateY(-5px);

}

.info-icon{

width:65px;

height:65px;

display:flex;

justify-content:center;

align-items:center;

border-radius:18px;

background:#E8F2FF;

font-size:28px;

}

.info-card h3{

margin-bottom:8px;

font-size:20px;

}

.info-card p{

color:#64748B;

line-height:1.8;

}

.clinic-map{

overflow:hidden;

border-radius:28px;

box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.clinic-map iframe{

width:100%;

height:100%;

min-height:520px;

border:none;

}

.services-grid{

display:grid;

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

gap:28px;

margin-top:70px;

}

.service-card{

padding:35px;

background:#F8FAFC;

border-radius:24px;

text-align:center;

font-size:44px;

transition:.3s;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card h3{

margin-top:18px;

margin-bottom:12px;

font-size:22px;

}

.service-card p{

color:#64748B;

font-size: 15px;

line-height:1.7;

}

@media(max-width:1200px){

.clinic-grid{

grid-template-columns:1fr;

}

.services-grid{

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

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

}

}

/* ==========================================================
   FIRST AID
========================================================== */

.resources-section{

padding:120px 0;

background:#F7F9FC;

}

.resources-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.resource-card{

background:white;

padding:40px;

border-radius:24px;

box-shadow:0 20px 45px rgba(15,23,42,.08);

transition:.35s;

}

.resource-card:hover{

transform:translateY(-8px);

}

.resource-number{

width:60px;

height:60px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

font-weight:700;

margin-bottom:25px;

}

.resource-card h3{

margin-bottom:15px;

font-size:24px;

}

.resource-card p{

color:#64748B;

line-height:1.8;

}

.warning-box{

margin-top:70px;

display:flex;

gap:25px;

align-items:flex-start;

background:#FFF8E6;

padding:35px;

border-left:6px solid #F59E0B;

border-radius:24px;

}

.warning-icon{

font-size:42px;

}

.warning-box h3{

margin-bottom:10px;

font-size:28px;

}

.warning-box p{

line-height:1.8;

color:#64748B;

}

@media(max-width:1200px){

.resources-grid{

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

}

}

@media(max-width:768px){

.resources-grid{

grid-template-columns:1fr;

}

.warning-box{

flex-direction:column;

}

}

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

.footer{

background:#0B2240;

color:white;

padding-top:90px;

position:relative;

}

.footer-grid{

display:grid;

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

gap:50px;

padding-bottom:60px;

}

.footer-logo{

width:70px;

margin-bottom:20px;

}

.footer h3{

margin-bottom:18px;

font-size:28px;

}

.footer h4{

margin-bottom:20px;

font-size:22px;

}

.footer p{

line-height:1.8;

opacity:.85;

}

.footer ul{

list-style:none;

padding:0;

margin:0;

}

.footer li{

margin-bottom:14px;

opacity:.9;

}

.footer a{

color:white;

opacity:.85;

}

.footer a:hover{

opacity:1;

color:#8ED7FF;

}

.footer-bottom{

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

padding:30px 0;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

font-size:15px;

opacity:.75;

}

.back-top{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

cursor:pointer;

display:none;

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

z-index:999;

transition:.3s;

}

.back-top:hover{

transform:translateY(-5px);

}

.back-top.show{

display:block;

}

@media(max-width:1100px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}