/* blog section  */

/* .blog{
  background: #f9f9f9;
} */
.blog .boxs{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
/* ==========================
   BLOG CARD - FOZAN PLUS AI
========================== */

.blog .boxs .box{

    width:31%;

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(26,35,56,.96) 0%,
        rgba(15,23,42,.98) 100%
    );

    backdrop-filter:blur(18px);

    border:1px solid rgba(96,165,250,.10);

    box-shadow:
    0 15px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);

    transition:.45s ease !important;

    margin-bottom:30px;
}

/* Glow */
.blog .boxs .box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(96,165,250,.8),
        transparent
    );

    z-index:2;
}

/* AI Glow */
.blog .boxs .box::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    top:-130px;
    right:-130px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(59,130,246,.14),
        transparent 70%
    );

    pointer-events:none;
}

/* Hover */
.blog .boxs .box:hover{

    transform:
    translateY(-12px);

    border-color:
    rgba(96,165,250,.35);

    box-shadow:
    0 25px 60px rgba(59,130,246,.20);
}

/* ==========================
   LINK
========================== */

.blog .boxs .box > a{

    display:flex;
    flex-direction:column;

    height:100%;

    text-decoration:none;

    position:relative;
    z-index:3;
}

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

.blog .box .div_img{

    height:260px;

    overflow:hidden;

    position:relative;
}

.blog .box .img_serv{

    width:100%;
    height:100%;
}

.blog .box .img_serv img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.9s ease;
}

.blog .box:hover .img_serv img{

    transform:scale(1.08);
}

/* Overlay */
.blog .box .div_img::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(10,10,20,.75),
        transparent 55%
    );
}

/* ==========================
   CONTENT
========================== */

.blog .box .content{

    padding:26px;
}

.blog .box .content h2{

    color:#fff;

    font-size:22px;

    font-weight:800;

    line-height:1.6;

    margin-bottom:14px;

    transition:.3s;
}

.blog .box:hover .content h2{

    color:#60A5FA;
}

.blog .box .content p{

    color:#94A3B8;

    font-size:15px;

    line-height:1.9;

    margin-bottom:24px;
}

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

.blog .box .btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#60A5FA;

    font-weight:700;

    font-size:15px;

    transition:.3s;

    padding:0;

    background:none;

    border:none;
}

.blog .box .btn::after{

    content:"→";

    transition:.3s;
}

.blog .box:hover .btn{

    color:#22D3EE;
}

.blog .box:hover .btn::after{

    transform:translateX(-8px);
}

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

@media(max-width:1200px){

    .blog .boxs .box{

        width:48%;
    }
}

@media(max-width:768px){

    .blog .boxs .box{

        width:100%;
    }

    .blog .box .div_img{

        height:220px;
    }

    .blog .box .content{

        padding:22px;
    }

    .blog .box .content h2{

        font-size:20px;
    }
}