/*==================================================
            BLOG.CSS
            PART 3A
===================================================*/

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

:root {
  --navy:    #0a0e1a;
  --navy2:   #0d1220;
  --navy3:   #111827;
  --card:    #141c2e;
  --card2:   #192236;
  --teal:    #00d4c8;
  --teal2:   #00b8ad;
  --teal-bg: rgba(0,212,200,0.07);
  --teal-border: rgba(0,212,200,0.18);
  --teal-glow: rgba(0,212,200,0.12);
  --white:   #ffffff;
  --text:    #e2e8f4;
  --text2:   #8892a4;
  --text3:   #4a5568;
  --border:  rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.1);
  --mono:    'Geist Mono', monospace;
  --r:       8px;
  --r2:      14px;
}

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

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

html{
    scroll-behavior:smooth;
}

body {
  background: var(--navy);
  color: var(--text);
  font-family: 'Cabinet Grotesk', sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ─── NOISE TEXTURE OVERLAY ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 0;
}


img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:.35s;

}

section{

    position:relative;

}

.container{

    max-width:1240px;

}

/*==================================================
            BACKGROUND
===================================================*/

body::before{

    content:"";

    position:fixed;

    top:-250px;

    left:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:rgba(24,212,194,.08);

    filter:blur(120px);

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    right:-250px;

    bottom:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:rgba(79,70,229,.10);

    filter:blur(120px);

    z-index:-2;

}

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

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  background: rgba(10,14,26,0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.025em;
  text-decoration: none;
  margin-right: 48px;
}

.nav-logo-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--teal);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-logo-icon svg { width: 16px; height: 16px; }

.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  flex: 1;
}

.nav-links a {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.btn-ghost {
  padding: 7px 16px;
  border-radius: var(--r);
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }

.btn-teal {
  padding: 8px 18px;
  border-radius: var(--r);
  background: var(--teal);
  color: #0a0e1a;
}
.btn-teal:hover { background: var(--teal2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,212,200,0.25); }

.btn-teal-lg {
  padding: 13px 28px;
  border-radius: var(--r2);
  background: var(--teal);
  color: #0a0e1a;
  font-size: 15px;
}
.btn-teal-lg:hover { background: var(--teal2); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(0,212,200,0.3); }

.btn-outline-teal {
  padding: 13px 28px;
  border-radius: var(--r2);
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal-border);
  font-size: 15px;
}
.btn-outline-teal:hover { background: var(--teal-bg); transform: translateY(-1px); }


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

.blog-hero{

    padding:120px 0 90px;

    text-align:center;

    overflow:hidden;

}

.blog-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top,
    rgba(24,212,194,.18),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(79,70,229,.18),
    transparent 40%);

    z-index:-1;

}

.hero-badge{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    border:1px solid rgba(24,212,194,.25);

    background:rgba(24,212,194,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.blog-hero h1{

    font-size:58px;

    line-height:1.15;

    font-weight:800;

    color:#fff;

    margin-top:30px;

}

.blog-hero .lead{

    max-width:780px;

    margin:auto;

    color:var(--text-light);

    font-size:20px;

}

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

.blog-search{

    margin:auto;

    max-width:720px;

    position:relative;

}

.blog-search input{

    height:66px;

    border:none;

    outline:none;

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

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

    border-radius:60px;

    color:#fff;

    padding:0 30px;

    font-size:16px;

    transition:.35s;

}

.blog-search input::placeholder{

    color:#8ea2b4;

}

.blog-search input:focus{

    border-color:var(--primary);

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

    box-shadow:0 0 0 4px rgba(24,212,194,.08);

}

/*==================================================
        FEATURED BLOG
===================================================*/

.featured-blog{

    padding:90px 0;

}

.featured-blog .row{

    background:linear-gradient(
    135deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.02));

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

    border-radius:26px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

.featured-blog img{

    width:100%;

    height:100%;

    min-height:460px;

    object-fit:cover;

}

.featured-blog .badge{

    font-size:13px;

    letter-spacing:.5px;

    padding:12px 20px;

    background:rgba(24,212,194,.14)!important;

    color:var(--primary);

}

.featured-blog h2{

    color:#fff;

    font-size:42px;

    line-height:1.2;

    font-weight:800;

}

.blog-meta{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    color:#8ea2b4;

    font-size:14px;

    margin-bottom:25px;

}

.featured-blog p{

    color:var(--text-light);

    font-size:17px;

    margin-bottom:30px;

}

/*==================================================
            LATEST BLOGS
===================================================*/

.latest-blogs{
    padding:90px 0;
    background:transparent;
}

.latest-blogs h2{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin-bottom:0;
}

.latest-blogs .text-decoration-none{
    color:var(--primary);
    font-weight:600;
}

.latest-blogs .text-decoration-none:hover{
    color:#fff;
}

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

.blog-card{

    background:linear-gradient(
    180deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.02));

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

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    height:100%;

    position:relative;

}

.blog-card:hover{

    transform:translateY(-10px);

    border-color:rgba(24,212,194,.25);

    box-shadow:
    0 20px 45px rgba(0,0,0,.35),
    0 0 40px rgba(24,212,194,.10);

}

.blog-image{

    position:relative;

    overflow:hidden;

}

.blog-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

.blog-category{

    position:absolute;

    top:18px;

    left:18px;

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(24,212,194,.90);

    color:#00191a;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.blog-body{

    padding:28px;

}

.blog-date{

    color:#8ea2b4;

    font-size:14px;

    margin-bottom:14px;

}

.blog-body h3{

    color:#fff;

    font-size:24px;

    font-weight:700;

    line-height:1.35;

    margin-bottom:18px;

    transition:.3s;

}

.blog-card:hover h3{

    color:var(--primary);

}

.blog-body p{

    color:var(--text-light);

    margin-bottom:24px;

}

.read-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:700;

}

.read-btn:hover{

    color:#fff;

    transform:translateX(6px);

}

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

.blog-cta{

    padding:90px 0;

}

.cta-box{

    background:
    linear-gradient(
    135deg,
    rgba(24,212,194,.10),
    rgba(79,70,229,.10));

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

    border-radius:28px;

    padding:70px 60px;

    box-shadow:var(--shadow);

}

.cta-box h2{

    color:#fff;

    font-size:42px;

    font-weight:800;

}

.cta-box p{

    color:var(--text-light);

    max-width:700px;

    margin:auto;

}

.cta-box .input-group{

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

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

    border-radius:60px;

    overflow:hidden;

}

.cta-box input{

    height:62px;

    background:transparent;

    border:none;

    color:#fff;

    padding-left:25px;

}

.cta-box input::placeholder{

    color:#8ea2b4;

}

.cta-box input:focus{

    outline:none;

    box-shadow:none;

    background:transparent;

    color:#fff;

}

.cta-box .btn{

    padding:0 32px;

    font-weight:700;

    border-radius:50px;

}

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

/* ─── FOOTER ─── */
footer {
  background: var(--navy);
  border-top: 1px solid var(--border);
  padding: 64px 40px 40px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.footer-brand-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--teal);
}

.footer-brand-desc {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.7;
  max-width: 240px;
  margin-bottom: 20px;
}

.footer-contact {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
}

.footer-col-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-col a {
  font-size: 14px;
  color: var(--text2);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--teal); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p { font-size: 13px; color: var(--text3); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 13px; color: var(--text3); text-decoration: none; transition: color 0.15s; }
.footer-legal a:hover { color: var(--text2); }
/*==================================================
        SECTION ANIMATION
===================================================*/

.blog-card,
.featured-blog .row,
.cta-box{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s ease forwards;

}

.blog-card:nth-child(2){
    animation-delay:.15s;
}

.blog-card:nth-child(3){
    animation-delay:.30s;
}

.blog-card:nth-child(4){
    animation-delay:.45s;
}

.blog-card:nth-child(5){
    animation-delay:.60s;
}

.blog-card:nth-child(6){
    animation-delay:.75s;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            BLOG.CSS
            PART 3C
            RESPONSIVE + UTILITIES
===================================================*/

/*==============================
        LARGE DEVICES
===============================*/

@media (max-width:1200px){

    .container{
        max-width:1140px;
    }

    .blog-hero h1{
        font-size:52px;
    }

    .featured-blog h2{
        font-size:38px;
    }

    .latest-blogs h2{
        font-size:36px;
    }

}

/*==============================
        TABLET
===============================*/

@media (max-width:991px){

    /* Navbar */

    .navbar{
        padding:15px 0;
    }

    .navbar-collapse{

        margin-top:20px;

        padding:25px;

        border-radius:20px;

        background:rgba(13,29,44,.98);

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

    }

    .navbar-nav{

        gap:5px;

        align-items:flex-start !important;

    }

    .nav-link{

        width:100%;

        padding:12px 16px !important;

    }

    .navbar .btn{

        width:100%;

        margin-top:15px;

    }

    /* Hero */

    .blog-hero{

        padding:90px 0 70px;

    }

    .blog-hero h1{

        font-size:42px;

    }

    .blog-hero .lead{

        font-size:18px;

    }

    .blog-search{

        max-width:100%;

    }

    /* Featured */

    .featured-blog{

        padding:70px 0;

    }

    .featured-blog .row{

        padding:0;

    }

    .featured-blog img{

        min-height:320px;

    }

    .featured-blog .col-lg-6:last-child{

        padding:40px !important;

    }

    .featured-blog h2{

        font-size:34px;

    }

    /* CTA */

    .cta-box{

        padding:50px 35px;

    }

    .cta-box h2{

        font-size:34px;

    }

}

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

@media (max-width:768px){

    .blog-hero{

        padding:70px 0 50px;

    }

    .blog-hero h1{

        font-size:34px;

        line-height:1.25;

    }

    .hero-badge{

        font-size:12px;

        padding:10px 18px;

    }

    .blog-hero .lead{

        font-size:16px;

    }

    .blog-search input{

        height:58px;

        font-size:15px;

    }

    .latest-blogs{

        padding:60px 0;

    }

    .latest-blogs h2{

        font-size:30px;

    }

    .featured-blog h2{

        font-size:30px;

    }

    .blog-body{

        padding:22px;

    }

    .blog-body h3{

        font-size:21px;

    }

    .blog-image img{

        height:220px;

    }

    .blog-category{

        font-size:11px;

        padding:7px 14px;

    }

    .blog-date{

        font-size:13px;

    }

    .cta-box{

        padding:40px 25px;

    }

    .cta-box h2{

        font-size:28px;

    }

    .cta-box .input-group{

        display:block;

        background:transparent;

        border:none;

    }

    .cta-box input{

        width:100%;

        border-radius:50px !important;

        margin-bottom:15px;

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

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

    }

    .cta-box .btn{

        width:100%;

        border-radius:50px;

        height:58px;

    }

}

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

@media (max-width:576px){

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    .blog-hero h1{

        font-size:30px;

    }

    .featured-blog h2{

        font-size:26px;

    }

    .latest-blogs h2{

        font-size:26px;

    }

    .blog-body h3{

        font-size:20px;

    }

    .featured-blog .col-lg-6:last-child{

        padding:30px 25px !important;

    }

    .featured-blog img{

        min-height:260px;

    }

}

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

.text-primary{

    color:var(--primary)!important;

}

.bg-dark-card{

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

}

.rounded-xl{

    border-radius:24px;

}

.shadow-soft{

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

}

.border-soft{

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

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08131d;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    var(--primary),
    var(--primary-dark));

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#20f0da;

}

/*==================================================
            SELECTION
===================================================*/

::selection{

    background:var(--primary);

    color:#00191a;

}

/*==================================================
            SMOOTH HOVER
===================================================*/

img,
a,
button,
input,
.blog-card,
.btn,
.nav-link{

    transition:all .35s ease;

}

/*==================================================
            OPTIONAL LOADING EFFECT
===================================================*/

body{

    animation:pageFade .5s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}