/*====================================================
            TRANZIX BLOG SECTION
                CSS PART-1
====================================================*/

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

:root{

    --trx-primary:#b83330;
    --trx-dark:#17181c;
    --trx-text:#6f6f6f;
    --trx-border:#ececec;
    --trx-bg:#ffffff;

}


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

.trx-blog-section{

    width:100%;

    padding:110px 0;

    background:#fff;

    overflow:hidden;

}


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

.trx-container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 15px;

}


/*==============================
        HEADING
==============================*/

.trx-blog-title{

    text-align:center;

    margin-bottom:65px;

}

.trx-blog-title span{

    display:inline-block;

    color:var(--trx-primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.trx-blog-title h2{

    font-size:56px;

    line-height:1.08;

    color:var(--trx-dark);

    font-weight:700;

    letter-spacing:-2px;

}


/*==============================
        GRID
==============================*/

.trx-blog-grid{

    display:grid;

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

    gap:36px;

}


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

.trx-blog-card{

    background:#fff;

    border-radius:4px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:.35s;

}


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

.trx-blog-image{

    position:relative;

    height:250px;

    overflow:hidden;

}

.trx-blog-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.7s;

}


/*==============================
        OVERLAY
==============================*/

.trx-blog-overlay{

    position:absolute;

    inset:0;

    background:#b83330;

    opacity:0;

    transition:.35s;

}


/*==============================
        DATE
==============================*/

.trx-date-box{

    position:absolute;

    left:18px;

    top:18px;

    width:78px;

    height:84px;

    background:#fff;

    border-radius:4px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:5;

}

.trx-date-day{

    font-size:24px;

    font-weight:700;

    color:#17181c;

    line-height:1;

    margin-bottom:6px;

}

.trx-date-month{

    font-size:16px;

    color:#555;

}

/*====================================================
            TRANZIX BLOG SECTION
                CSS PART-2
====================================================*/


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

.trx-blog-content{

    padding:30px 32px 34px;

}


/*==============================
        META
==============================*/

.trx-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:22px;

}

.trx-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#7b7b7b;

    font-weight:500;

}

.trx-meta i{

    color:#b83330;

    font-size:14px;

}


/*==============================
        TITLE
==============================*/

.trx-blog-content h3{

    font-size:26px;

    line-height:1.35;

    font-weight:700;

    color:#17181c;

    margin-bottom:18px;

    transition:.35s;

}


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

.trx-blog-content p{

    font-size:16px;

    line-height:1.9;

    color:#6f6f6f;

    margin-bottom:28px;

}


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

.trx-read-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:150px;

    height:48px;

    border:2px solid #ececec;

    border-radius:4px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    color:#17181c;

    transition:.35s;

}


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

.trx-blog-card:hover{

    box-shadow:0 22px 55px rgba(0,0,0,.12);

}

.trx-blog-card:hover .trx-blog-image img{

    transform:scale(1.08);

}

.trx-blog-card:hover .trx-blog-overlay{

    opacity:.15;

}

.trx-blog-card:hover h3{

    color:#b83330;

}

.trx-read-btn:hover{

    background:#b83330;

    color:#fff;

    border-color:#b83330;

}


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

.trx-blog-image img{

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}

/*====================================================
            TRANZIX BLOG SECTION
                CSS PART-3
====================================================*/


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

.trx-blog-card,
.trx-blog-image img,
.trx-blog-overlay,
.trx-read-btn,
.trx-blog-content h3{

    transition:all .35s ease;

}


/*==============================
        DESKTOP
==============================*/

.trx-blog-card{

    min-height:610px;

}

.trx-blog-content{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:290px;

}

.trx-blog-title h2{

    max-width:720px;

    margin:auto;

}



/*==============================
        LARGE LAPTOP
==============================*/

@media(max-width:1200px){

    .trx-container{

        max-width:1140px;

    }

    .trx-blog-grid{

        gap:28px;

    }

    .trx-blog-image{

        height:290px;

    }

    .trx-blog-content{

        padding:26px;

    }

    .trx-blog-title h2{

        font-size:48px;

    }

    .trx-blog-content h3{

        font-size:22px;

    }

}



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

@media(max-width:992px){

    .trx-blog-section{

        padding:90px 0;

    }

    .trx-blog-grid{

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

        gap:28px;

    }

    .trx-blog-title{

        margin-bottom:50px;

    }

    .trx-blog-title h2{

        font-size:42px;

    }

}



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

@media(max-width:767px){

    .trx-blog-section{

        padding:70px 0;

    }

    .trx-blog-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .trx-blog-title{

        margin-bottom:40px;

    }

    .trx-blog-title span{

        font-size:12px;

    }

    .trx-blog-title h2{

        font-size:34px;

        letter-spacing:-1px;

        line-height:1.2;

    }

    .trx-blog-image{

        height:250px;

    }

    .trx-blog-content{

        padding:24px;

    }

    .trx-meta{

        gap:15px;

        margin-bottom:18px;

    }

    .trx-meta span{

        font-size:13px;

    }

    .trx-blog-content h3{

        font-size:21px;

        margin-bottom:15px;

    }

    .trx-blog-content p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:22px;

    }

    .trx-read-btn{

        width:145px;

        height:46px;

        font-size:14px;

    }

}



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

@media(max-width:480px){

    .trx-container{

        padding:0 18px;

    }

    .trx-blog-title h2{

        font-size:28px;

    }

    .trx-blog-image{

        height:220px;

    }

    .trx-date-box{

        width:65px;

        height:70px;

        left:15px;

        top:15px;

    }

    .trx-date-day{

        font-size:20px;

    }

    .trx-date-month{

        font-size:14px;

    }

    .trx-blog-content{

        padding:22px 20px;

    }

    .trx-blog-content h3{

        font-size:19px;

    }

    .trx-blog-content p{

        font-size:14px;

    }

}



/*==============================
        PERFORMANCE
==============================*/

.trx-blog-image img,
.trx-blog-card{

    will-change:transform;

}

























































/*==================================================
        TRANZIX TESTIMONIAL
        UPDATED CSS - PART 1
==================================================*/

.trx-testimonial{
    width:100%;
    padding:95px 0 70px;
    background:#fff;
    overflow:hidden;
    margin-top: 90px;
}

.trx-testimonial .trx-container{
    width:100%;
    max-width:1240px;
    margin:auto;
    padding:0 15px;

}


/*==================================
            HEADING
==================================*/

.trx-testimonial-heading{
    text-align:center;
    margin-bottom:48px;
}

.trx-testimonial-heading h2{
    font-size:58px;
    font-weight:800;
    line-height:1.08;
    color:#181818;
    letter-spacing:-1.5px;
}


/*==================================
            SLIDER
==================================*/

.trx-testimonial-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.trx-slider-track{
    display:flex;
    transition:.7s ease;
}

.trx-slide{
    min-width:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:34px;
}



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

.trx-testimonial-card{
    position:relative;
}



/*==================================
        WHITE BOX
==================================*/

.trx-card-content{

    background:#fff;

    position:relative;

    padding:42px 44px;

    min-height:300px;

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

}



/*==================================
        TRIANGLE
==================================*/

.trx-card-content::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-28px;

    width:0;
    height:0;

    border-top:28px solid #fff;

    border-right:28px solid transparent;

}



/*==================================
            STARS
==================================*/

.trx-stars{

    display:flex;

    gap:6px;

    margin-bottom:24px;

}

.trx-stars i{

    color:#ffb400;

    font-size:19px;

}



/*==================================
            TEXT
==================================*/

.trx-card-content p{

    font-size:17px;

    line-height:1.9;

    color:#333;

    font-weight:400;

}

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

.trx-client{

    display:flex;
    align-items:center;

    gap:18px;

    margin-top:26px;

    padding-left:18px;

}


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

.trx-client-img{

    width:72px;
    height:72px;

    min-width:72px;

    border-radius:50%;

    overflow:hidden;

    background:#f3f3f3;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.trx-client-img img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    border-radius:50%;

}


/*==========================================
        CLIENT INFO
==========================================*/

.trx-client-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.trx-client-info h4{

    font-size:19px;

    font-weight:700;

    color:#17181d;

    margin-bottom:3px;

    line-height:1.2;

}

.trx-client-info span{

    font-size:15px;

    color:#8a8a8a;

}



/*==========================================
            DOTS
==========================================*/

.trx-slider-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:34px;

}

.trx-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#d6d6d6;

    cursor:pointer;

    transition:.35s;

}

.trx-dot.active{

    width:34px;

    height:10px;

    border-radius:30px;

    background:#b83330;

}



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

.trx-testimonial-card{

    transition:.35s;

}

.trx-testimonial-card:hover{

    transform:translateY(-4px);

}

.trx-testimonial-card:hover .trx-card-content{

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

}

.trx-client-img img{

    transition:.4s;

}

.trx-testimonial-card:hover .trx-client-img img{

    transform:scale(1.06);

}



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

.trx-slider-track,
.trx-dot,
.trx-card-content,
.trx-client,
.trx-client-img img{

    transition:all .35s ease;

}




/*=========================================
            1200px
=========================================*/

@media (max-width:1200px){

    .trx-testimonial .trx-container{

        max-width:1100px;

    }

    .trx-testimonial-heading h2{

        font-size:48px;

    }

    .trx-slide{

        gap:25px;

    }

    .trx-card-content{

        padding:35px;

    }

}


/*=========================================
            992px
=========================================*/

@media (max-width:992px){

    .trx-testimonial{

        padding:90px 0 70px;

        /* margin-top:90px same rahega */
    }

    .trx-testimonial-heading{

        margin-bottom:40px;

    }

    .trx-testimonial-heading h2{

        font-size:40px;

        line-height:1.2;

    }

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

    .trx-slide{

        grid-template-columns:1fr;

        gap:25px;

    }

    .trx-card-content{

        padding:35px 30px;

        min-height:auto;

    }

    .trx-card-content p{

        font-size:16px;

    }

}

/*=========================================
            768px
=========================================*/

@media (max-width:768px){

    .trx-testimonial{

        padding:80px 0 60px;

        margin-top:220px;

        /* margin-top:90px same rahega */

    }

    .trx-testimonial .trx-container{

        padding:0 20px;

    }

    .trx-testimonial-heading{

        margin-bottom:35px;

    }

    .trx-testimonial-heading h2{

        font-size:34px;

        line-height:1.25;

    }

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

    .trx-slide{

        grid-template-columns:1fr;

        gap:0;

    }

    .trx-testimonial-card{

        width:100%;

    }

    .trx-card-content{

        padding:30px 25px;

    }

    .trx-stars{

        margin-bottom:18px;

    }

    .trx-stars i{

        font-size:17px;

    }

    .trx-card-content p{

        font-size:15px;

        line-height:1.8;

    }

    .trx-client{

        gap:15px;

        padding-left:10px;

    }

    .trx-client-img{

        width:65px;

        height:65px;

        min-width:65px;

    }

    .trx-client-info h4{

        font-size:18px;

    }

    .trx-client-info span{

        font-size:14px;

    }

}


/*=========================================
            576px
=========================================*/

@media (max-width:576px){

    .trx-testimonial{

        padding:70px 0 55px;

        margin-top:260px;

    }

    .trx-testimonial .trx-container{

        padding:0 16px;

    }

    .trx-testimonial-heading h2{

        font-size:30px;

    }

    .trx-card-content{

        padding:25px 20px;

    }

    .trx-card-content p{

        font-size:15px;

    }

    .trx-client{

        padding-left:0;

    }

    .trx-client-img{

        width:60px;

        height:60px;

        min-width:60px;

    }

    .trx-slider-dots{

        margin-top:30px;

    }

}

/*=========================================
            480px
=========================================*/

@media (max-width:480px){

    .trx-testimonial{

        padding:60px 0 50px;

        margin-top:300px;

    }

    .trx-testimonial-heading{

        margin-bottom:28px;

    }

    .trx-testimonial-heading h2{

        font-size:26px;

        line-height:1.3;

    }

    .trx-card-content{

        padding:22px 18px;

    }

    .trx-stars{

        gap:4px;

        margin-bottom:15px;

    }

    .trx-stars i{

        font-size:15px;

    }

    .trx-card-content p{

        font-size:14px;

        line-height:1.8;

    }

    .trx-client{

        gap:10px;

        margin-top:18px;

    }

    .trx-client-img{

        width:55px;

        height:55px;

        min-width:55px;

    }

    .trx-client-info h4{

        font-size:16px;

    }

    .trx-client-info span{

        font-size:13px;

    }

    .trx-slider-dots{

        margin-top:25px;

    }

    .trx-dot{

        width:9px;
        height:9px;

    }

    .trx-dot.active{

        width:30px;

    }

}