/*=========================================================
DEORIA POLICE
Vehicle Verification Portal
Developer : Websofy Software Pvt. Ltd.
=========================================================*/


/*=========================================================
GOOGLE FONT
=========================================================*/

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


/*=========================================================
ROOT COLORS
=========================================================*/

:root{

    --primary:#003366;

    --secondary:#0056b3;

    --danger:#d32f2f;

    --success:#198754;

    --warning:#ffc107;

    --dark:#1f2937;

    --light:#f5f7fa;

    --white:#ffffff;

    --border:#e8ecf1;

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

    --radius:18px;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:#f4f7fb;

    color:#333;

    font-size:15px;

    overflow-x:hidden;

}


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

a{

    text-decoration:none;

    transition:.30s;

}

a:hover{

    text-decoration:none;

}


/*=========================================================
HEADINGS
=========================================================*/

h1{

    font-size:48px;

    font-weight:700;

}

h2{

    font-size:36px;

    font-weight:700;

}

h3{

    font-size:28px;

    font-weight:600;

}

h4{

    font-size:22px;

    font-weight:600;

}

h5{

    font-size:18px;

    font-weight:600;

}

h6{

    font-size:16px;

    font-weight:600;

}


/*=========================================================
PARAGRAPH
=========================================================*/

p{

    line-height:30px;

    color:#555;

}


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

section{

    position:relative;

    padding:70px 0;

}


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

.container{

    max-width:1250px;

}


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

img{

    max-width:100%;

    transition:.40s;

}


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

.btn{

    border-radius:50px;

    padding:13px 28px;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:#002244;

    transform:translateY(-3px);

}

.btn-warning{

    color:#000;

    font-weight:600;

}

.btn-warning:hover{

    transform:translateY(-3px);

}

.btn-light:hover{

    transform:translateY(-3px);

}


/*=========================================================
BADGE
=========================================================*/

.badge{

    border-radius:30px;

    padding:10px 18px;

    font-weight:500;

}


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

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}


/*=========================================================
TABLE
=========================================================*/

.table{

    margin-bottom:0;

}

.table thead{

    background:var(--primary);

    color:#fff;

}

.table th{

    padding:15px;

}

.table td{

    padding:15px;

    vertical-align:middle;

}

.table tbody tr:hover{

    background:#eef5ff;

}


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

.form-control{

    border-radius:12px;

    min-height:48px;

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

    box-shadow:none;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

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

.topbar{

    background:#002244;

    color:#fff;

    padding:8px 0;

    font-size:14px;

}

.topbar a{

    color:#fff;

    margin-right:18px;

}

.topbar a:hover{

    color:#ffc107;

}

.topbar i{

    margin-right:6px;

}

.topbar .fab{

    width:34px;

    height:34px;

    line-height:34px;

    text-align:center;

    border-radius:50%;

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

    margin-left:8px;

    transition:.35s;

}

.topbar .fab:hover{

    background:#ffc107;

    color:#000;

}



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

.main-header{

    background:#fff;

    padding:20px 0;

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

}

.logo{

    max-height:150px;

}

.site-title{

    font-weight:600;

    margin-bottom:5px;

}

.site-title .red{

    color:#c62828;

}

.site-title .blue{

    color:#003366;

}

.portal-title{

    color:#003366;

    font-weight:700;

    margin-bottom:5px;

}

.portal-subtitle{

    margin:0;

    color:#777;

}



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

.navbar{

    background:#003366 !important;

    padding:0;
    

}

.navbar-nav .nav-link{

    color:#fff !important;

    padding:18px 18px;

    font-weight:500;

    transition:.35s;

}

.navbar-nav .nav-link:hover{

    background:#0056b3;

}

.navbar-nav .nav-link.active{

    background:#ffc107;

    color:#000 !important;

}



/*=========================================================
NOTICE BAR
=========================================================*/

.bg-warning marquee{

    font-weight:600;

    color:#333;

}



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

.hero-section{

    background:linear-gradient(135deg,#003366,#0056b3);

    color:#fff;

    padding:90px 0;

    overflow:hidden;

}

.hero-section h1{

    color:#fff;

    line-height:65px;

}

.hero-section p{

    color:#eef5ff;

    line-height:34px;

}

.hero-section img{

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

}

@keyframes floatImage{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}



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

.dashboard-card{

    background:#fff;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

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

    transition:.35s;

}

.dashboard-card:hover{

    transform:translateY(-10px);

}

.dashboard-card .icon{

    width:80px;

    height:80px;

    line-height:80px;

    border-radius:50%;

    margin:auto;

    margin-bottom:20px;

    background:#eef5ff;

}

.dashboard-card .icon i{

    font-size:36px;

    color:#003366;

}

.dashboard-card h2{

    font-size:34px;

    color:#003366;

    margin-bottom:10px;

}

.dashboard-card p{

    margin:0;

    font-weight:600;

    color:#666;

}



/*=========================================================
PROCESS BOX
=========================================================*/

.process-box{

    background:#fff;

    border-radius:18px;

    padding:35px;

    box-shadow:var(--shadow);

    transition:.35s;

    height:100%;

}

.process-box:hover{

    transform:translateY(-10px);

}

.process-box i{

    margin-bottom:20px;

}

.process-box h4{

    color:#003366;

}
/*=========================================================
FEATURE CARD
=========================================================*/

.feature-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    height:100%;

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

    transition:.35s;

    overflow:hidden;

    position:relative;

}

.feature-card:before{

    content:'';

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#003366,#0d6efd);

}

.feature-card:hover{

    transform:translateY(-10px);

}

.feature-card i{

    margin-bottom:20px;

}

.feature-card h4{

    color:#003366;

    margin-bottom:15px;

}

.feature-card p{

    margin:0;

}



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

.benefit-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    height:100%;

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

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

}

.benefit-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    color:#fff;

    font-size:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:25px;

}

.benefit-card h3{

    text-align:center;

    color:#003366;

    margin-bottom:25px;

}

.benefit-card ul{

    padding-left:18px;

}

.benefit-card ul li{

    margin-bottom:12px;

    line-height:28px;

}



/*=========================================================
INSTRUCTIONS
=========================================================*/

.list-group-item{

    border:none;

    border-bottom:1px solid #ececec;

    padding:16px 20px;

}

.list-group-item:last-child{

    border-bottom:none;

}

.list-group-item i{

    margin-right:10px;

}



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

.accordion-item{

    border:none;

    border-radius:18px !important;

    overflow:hidden;

    margin-bottom:15px;

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

}

.accordion-button{

    font-weight:600;

    padding:20px;

}

.accordion-button:not(.collapsed){

    background:#003366;

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}



/*=========================================================
OFFICER TABLE
=========================================================*/

.officer-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    color:#003366;

    flex-shrink:0;

}

#officerTable tbody tr{

    transition:.30s;

}

#officerTable tbody tr:hover{

    background:#f8fbff;

}



/*=========================================================
POLICE STATION TABLE
=========================================================*/

.station-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

#thanaTable tbody tr{

    transition:.30s;

}

#thanaTable tbody tr:hover{

    background:#f7fbff;

}



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

.download-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

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

    transition:.35s;

}

.download-card:hover{

    transform:translateY(-8px);

}



/*=========================================================
SOCIAL ICON
=========================================================*/

.social-icon{

    display:inline-flex;

    width:42px;

    height:42px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    margin-right:8px;

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

    color:#fff;

    transition:.30s;

}

.social-icon:hover{

    background:#ffc107;

    color:#000;

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

.footer-area{

    background:#002244;

    color:#fff;

    padding:70px 0 25px;

}

.footer-title{

    color:#fff;

    margin-bottom:25px;

    font-weight:700;

}

.footer-area p{

    color:#d9d9d9;

    line-height:28px;

}

.footer-links{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links li a{

    color:#d9d9d9;

    transition:.3s;

}

.footer-links li a:hover{

    color:#ffc107;

    padding-left:8px;

}

.footer-line{

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

    margin:35px 0 20px;

}

.copyright{

    color:#cfcfcf;

    font-size:14px;

}

.developer-link{

    color:#ffc107;

    font-weight:600;

}

.developer-link:hover{

    color:#fff;

}



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

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    z-index:9999;

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

    transition:.35s;

}

.floating-whatsapp:hover{

    transform:scale(1.08);

    color:#fff;

}



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

.scroll-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#003366;

    color:#fff;

    display:none;

    cursor:pointer;

    z-index:9998;

    transition:.35s;

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

}

.scroll-top:hover{

    background:#0056b3;

}



/*=========================================================
PAGE LOADER
=========================================================*/

#pageLoader{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:#fff;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

}

.loader-spinner{

    width:65px;

    height:65px;

    border:6px solid #e5e5e5;

    border-top:6px solid #003366;

    border-radius:50%;

    animation:loaderSpin .9s linear infinite;

}

@keyframes loaderSpin{

    100%{

        transform:rotate(360deg);

    }

}



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

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.shadow-lg{

    box-shadow:0 15px 35px rgba(0,0,0,.08)!important;

}

.rounded-20{

    border-radius:20px;

}

.text-primary{

    color:#003366!important;

}

.bg-primary{

    background:#003366!important;

}

.bg-light{

    background:#f5f7fa!important;

}



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

@media(max-width:991px){

.logo{

    max-height:70px;

}

.site-title{

    font-size:28px;

}

.portal-title{

    font-size:18px;

}

.hero-section{

    text-align:center;

    padding:60px 0;

}

.hero-section h1{

    font-size:36px;

    line-height:48px;

}

.dashboard-card{

    margin-bottom:25px;

}

.footer-area{

    text-align:center;

}

.footer-links{

    margin-bottom:25px;

}

}



@media(max-width:767px){

.topbar{

    text-align:center;

}

.topbar .text-end{

    text-align:center!important;

    margin-top:10px;

}

.hero-section h1{

    font-size:30px;

    line-height:42px;

}

.btn{

    width:100%;

    margin-bottom:10px;

}

.navbar-nav .nav-link{

    padding:12px 18px;
   

}

.table{

    font-size:13px;

}

.floating-whatsapp{

    width:55px;

    height:55px;

    font-size:24px;

}

.scroll-top{

    width:45px;

    height:45px;

    bottom:90px;

}

}