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


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

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --secondary:#0f172a;

    --light:#f5f6fa;
    --light-grey:#f3f4f6;

    --white:#ffffff;

    --text:#475569;
    --heading:#111827;

    --border:#e5e7eb;

    --success:#22c55e;

    --danger:#ef4444;

    --warning:#f59e0b;

    --radius:16px;
    --radius-sm:10px;

    --transition:.3s;

    --shadow-sm:
        0 4px 14px rgba(15,23,42,.06);

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

    --shadow-lg:
        0 30px 70px rgba(15,23,42,.12);

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--light);

    color:var(--text);

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/* =====================================
        BLOG HERO + DECORATIVE DOTS
===================================== */

.blog-section{

    position:relative;

    padding:60px 0 80px;

    overflow:hidden;

}

.blog-section::after{

    content:"";

    position:absolute;

    top:0;

    right:-60px;

    width:280px;

    height:100%;

    background-image:radial-gradient(circle,#c7cedb 1.6px,transparent 1.6px);

    background-size:24px 24px;

    opacity:.65;

    pointer-events:none;

}

.blog-section .container{

    position:relative;

    z-index:1;

}

.section-header{

    max-width:640px;

    margin:0 auto 50px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#dbeafe;

    color:var(--primary-dark);

    padding:8px 18px;

    border-radius:50px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.3px;

}

.section-header h1{

    margin-top:20px;

    font-size:2.3rem;

    font-weight:800;

    color:var(--heading);

    letter-spacing:-.5px;

}

.section-header p{

    margin-top:14px;

    color:#64748b;

    font-size:.98rem;

    line-height:1.7;

}

.section-header p .highlight{

    color:var(--primary);

    font-weight:600;

}


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

.blog-card {

    background:var(--white);

    border-radius:var(--radius);

    overflow:hidden;

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

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

    transition:
    transform .4s ease,
    box-shadow .4s ease;

    animation:fadeUp .6s ease forwards;

    opacity:0;

}

.blog-card:hover {

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

@keyframes fadeUp {

    from { opacity:0; transform:translateY(30px); }

    to   { opacity:1; transform:translateY(0); }

}

.blog-card:nth-child(1){ animation-delay:.05s; }
.blog-card:nth-child(2){ animation-delay:.1s; }
.blog-card:nth-child(3){ animation-delay:.15s; }
.blog-card:nth-child(4){ animation-delay:.2s; }
.blog-card:nth-child(5){ animation-delay:.25s; }
.blog-card:nth-child(6){ animation-delay:.3s; }


/* Image + badge */

.blog-image-wrapper {

    position:relative;

    height:170px;

    overflow:hidden;

    cursor:pointer;

    background:linear-gradient(135deg,#eff6ff,#dbeafe);

}

.blog-image {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.blog-card:hover .blog-image {

    transform:scale(1.07);

}

.blog-image-placeholder{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:1.8rem;

}

.blog-badge{

    position:absolute;

    top:12px;

    left:12px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(4px);

    color:var(--white);

    font-size:.68rem;

    font-weight:600;

    letter-spacing:.3px;

    padding:5px 11px;

    border-radius:6px;

    text-transform:capitalize;

}

.blog-image-wrapper::before{

    content:"\f30d";

    font-family:"bootstrap-icons";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    color:var(--white);

    background:rgba(15,23,42,0);

    opacity:0;

    transition:var(--transition);

    pointer-events:none;

}

.blog-image-wrapper:hover::before{

    background:rgba(15,23,42,.25);

    opacity:1;

}


/* Body */

.blog-body {

    padding:20px 22px 22px;

}

.blog-title {

    font-size:1.02rem;

    line-height:1.4;

    font-weight:700;

    color:var(--heading);

    margin-bottom:8px;

    transition:var(--transition);

}

.blog-card:hover .blog-title{

    color:var(--primary);

}

.blog-excerpt{

    font-size:.85rem;

    color:#64748b;

    line-height:1.65;

    margin-bottom:18px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


/* Footer row */

.blog-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}

.blog-author{

    display:flex;

    align-items:center;

    gap:9px;

}

.blog-avatar{

    width:32px;

    height:32px;

    border-radius:50%;

    object-fit:cover;

    background:var(--light-grey);

}

.blog-author-name{

    font-size:.78rem;

    font-weight:700;

    color:var(--heading);

    line-height:1.3;

}

.blog-date{

    font-size:.7rem;

    color:#94a3b8;

    line-height:1.3;

}

.blog-arrow{

    width:34px;

    height:34px;

    min-width:34px;

    border-radius:50%;

    background:#eff6ff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.95rem;

    border:none;

    cursor:pointer;

    transition:var(--transition);

}

.blog-arrow:hover{

    background:var(--primary);

    color:var(--white);

}


/* =====================================
        BLOG MODAL
===================================== */

.blog-modal .modal-content{

    border:none;

    border-radius:var(--radius);

    overflow:hidden;

}

.blog-modal .modal-header{

    position:absolute;

    top:14px;

    right:14px;

    z-index:2;

    border:none;

    padding:0;

}

.blog-modal .btn-close{

    background:var(--white);

    border-radius:50%;

    opacity:1;

    width:34px;

    height:34px;

    padding:0;

    background-size:14px;

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

}

.blog-modal-image{

    width:100%;

    height:320px;

    object-fit:cover;

}

.blog-modal .modal-body{

    padding:32px 34px 36px;

}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: var(--fs-label-md);
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: var(--secondary);
  color: var(--on-secondary);
  padding: 1.25rem 2.5rem;
  font-size: var(--fs-label-md);
  border-radius: 0.5rem;
}
.blog-modal-category{

    display:inline-flex;

    background:#eff6ff;

    color:var(--primary);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.3px;

    text-transform:capitalize;

    padding:5px 13px;

    border-radius:6px;

    margin-bottom:14px;

}

.blog-modal-title{

    font-size:1.55rem;

    font-weight:800;

    color:var(--heading);

    line-height:1.3;

    margin-bottom:14px;

}

.blog-modal-meta{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    padding-bottom:20px;

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

}

.blog-modal-meta img{

    width:38px;

    height:38px;

    border-radius:50%;

    object-fit:cover;

}

.blog-modal-meta-name{

    font-size:.88rem;

    font-weight:700;

    color:var(--heading);

}

.blog-modal-meta-date{

    font-size:.76rem;

    color:#94a3b8;

}

.blog-modal-content{

    font-size:.95rem;

    line-height:1.9;

    color:var(--text);

}


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

.cta {
    padding: 40px 0 90px;
}

.cta-banner {
    background: #003461;
    border-radius: 26px;

    padding: 64px 24px;

    text-align: center;
}

.cta-banner-inner {
    max-width: 640px;
    margin: 0 auto;
}

.cta-banner h2 {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.cta-banner p {
    color: rgba(255,255,255,.75);
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.btn-cta-primary,
.btn-cta-secondary {
    padding: 13px 28px;
    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;

    transition: .3s;
}

.btn-cta-primary {
    background: #006782;
    color: #ffffff;
}

.btn-cta-primary:hover {
    box-shadow: 0 10px 25px rgba(0,103,130,.35);
    color: #ffffff;
}

.btn-cta-secondary {
    background: rgba(255,255,255,.1);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
}

.btn-cta-secondary:hover {
    background: rgba(255,255,255,.2);
    color: #ffffff;
}


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

@media(max-width:992px){

    .blog-section::after{

        display:none;

    }

}

@media(max-width:768px){

    .blog-body{

        padding:18px 20px 20px;

    }

    .blog-modal-image{

        height:220px;

    }

    .blog-modal .modal-body{

        padding:24px 22px 28px;

    }

}

@media(max-width:576px){

    .section-header h1{

        font-size:1.8rem;

    }

}