/*=========================================
        TOP INFO STRIP
=========================================*/

.top-info-strip{

    width:100%;

    background:#b83330;

    margin-top:0;

    margin-bottom:0;

    padding:0;

    position:relative;

    z-index:20;

}


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

.top-info-strip .container{

    max-width:1200px;

    width:100%;

    margin:auto;

    padding:0 20px;

}


/*=========================================
        WRAPPER
=========================================*/

.top-info-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:170px;

}


/*=========================================
        ITEM
=========================================*/

.info-item{

    flex:1;

    display:flex;

    align-items:center;

    gap:28px;

}


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

.info-icon{

    width:70px;

    min-width:70px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.info-icon i{
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    font-size:56px;
    color:#fff;
}


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

.info-content h4{

    color:#ffffff;

    font-size:19px;

    font-weight:700;

    line-height:1.4;

    margin:0 0 8px;

}

.info-content p{

    color:#ffffff;

    font-size:19px;

    font-weight:500;

    line-height:1.5;

    margin:0;

}


/*=========================================
        DIVIDER
=========================================*/

.info-divider{

    width:1px;

    height:120px;

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

    margin:0 35px;

}


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

.info-item{

    transition:.35s;

}

.info-item:hover{

    transform:translateY(-4px);

}

.info-item:hover .info-icon i{

    transform:scale(1.08);

    transition:.35s;

}

/*=========================================================
            TOP INFO STRIP
        RESPONSIVE - PART 1
=========================================================*/

/*==========================
        1400px
==========================*/

@media (max-width:1400px){

    .top-info-strip .container{

        max-width:1140px;

        padding:0 25px;

    }

    .top-info-wrapper{

        min-height:160px;

    }

    .info-item{

        gap:24px;

    }

    .info-icon{

        width:65px;

        min-width:65px;

    }

    .info-icon i{

        font-size:50px;

    }

    .info-content h4{

        font-size:18px;

    }

    .info-content p{

        font-size:17px;

    }

}


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

@media (max-width:1200px){

    .top-info-strip .container{

        padding:0 20px;

    }

    .top-info-wrapper{

        min-height:145px;

    }

    .info-item{

        gap:20px;

    }

    .info-icon{

        width:58px;

        min-width:58px;

    }

    .info-icon i{

        font-size:44px;

    }

    .info-content h4{

        font-size:17px;

    }

    .info-content p{

        font-size:16px;

    }

    .info-divider{

        margin:0 25px;

        height:95px;

    }

}


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

@media (max-width:992px){

    .top-info-wrapper{

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:45px 0;

        min-height:auto;

    }

    .info-item{

        width:100%;

        justify-content:flex-start;

        align-items:center;

        padding:10px 0;

    }

    .info-divider{

        width:100%;

        height:1px;

        margin:28px 0;

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

    }

}

/*=========================================================
            TOP INFO STRIP
        RESPONSIVE - PART 2
        MOBILE OPTIMIZED
=========================================================*/


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

@media (max-width:768px){

    .top-info-strip{

        padding:0;

    }

    .top-info-strip .container{

        padding:0 22px;

    }

    .top-info-wrapper{

        padding:40px 0;

    }

    .info-item{

        flex-direction:row;

        align-items:center;

        gap:18px;

        padding:5px 0;

    }

    .info-icon{

        width:55px;

        min-width:55px;

        height:55px;

    }

    .info-icon i{

        font-size:38px;

    }

    .info-content{

        flex:1;

    }

    .info-content h4{

        font-size:18px;

        margin-bottom:6px;

        line-height:1.4;

    }

    .info-content p{

        font-size:15px;

        line-height:1.6;

    }

    .info-divider{

        margin:24px 0;

    }

}


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

@media (max-width:576px){

    .top-info-strip .container{

        padding:0 20px;

    }

    .top-info-wrapper{

        padding:35px 0;

    }

    .info-item{

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;

        gap:16px;

        padding:8px 0;

    }

    .info-icon{

        width:65px;

        min-width:65px;

        height:65px;

        border-radius:50%;

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

    }

    .info-icon i{

        font-size:34px;

    }

    .info-content h4{

        font-size:18px;

        margin-bottom:8px;

    }

    .info-content p{

        font-size:15px;

        line-height:1.7;

    }

    .info-divider{

        margin:28px 0;

    }

}


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

@media (max-width:480px){

    .top-info-strip .container{

        padding:0 18px;

    }

    .top-info-wrapper{

        padding:30px 0;

    }

    .info-item{

        gap:14px;

    }

    .info-icon{

        width:58px;

        min-width:58px;

        height:58px;

    }

    .info-icon i{

        font-size:30px;

    }

    .info-content h4{

        font-size:17px;

    }

    .info-content p{

        font-size:14px;

        line-height:1.6;

    }

}


/*==========================
        360px
==========================*/

@media (max-width:360px){

    .top-info-strip .container{

        padding:0 15px;

    }

    .top-info-wrapper{

        padding:26px 0;

    }

    .info-item{

        gap:12px;

    }

    .info-icon{

        width:52px;

        min-width:52px;

        height:52px;

    }

    .info-icon i{

        font-size:26px;

    }

    .info-content h4{

        font-size:16px;

        line-height:1.4;

    }

    .info-content p{

        font-size:13px;

        line-height:1.6;

    }

    .info-divider{

        margin:22px 0;

    }

}

/*=========================================================
            TOP INFO STRIP
        RESPONSIVE - PART 3
        FINAL PREMIUM FIX
=========================================================*/


/*=========================================
        REMOVE OVERFLOW
=========================================*/

.top-info-strip{

    overflow:hidden;

}

.top-info-strip *{

    box-sizing:border-box;

}

.top-info-wrapper{

    width:100%;

}

.info-item{

    min-width:0;

}


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

.info-icon{

    flex-shrink:0;

    transition:all .35s ease;

}

.info-icon i{

    transition:all .35s ease;

}


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

.info-content{

    width:100%;

}

.info-content h4{

    word-break:break-word;

}

.info-content p{

    word-break:break-word;

}


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

@media (min-width:992px){

    .info-item{

        transition:all .35s ease;

    }

    .info-item:hover{

        transform:translateY(-6px);

    }

    .info-item:hover .info-icon{

        transform:rotate(8deg);

    }

    .info-item:hover .info-icon i{

        transform:scale(1.08);

    }

}


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

@media (max-width:767px){

    .top-info-strip{

        overflow:hidden;

    }

    .top-info-wrapper{

        gap:0;

    }

    .info-item{

        width:100%;

        max-width:100%;

        margin:0;

    }

    .info-content{

        width:100%;

        max-width:280px;

        margin:auto;

    }

    .info-content h4{

        font-size:17px;

        font-weight:700;

    }

    .info-content p{

        font-size:15px;

        font-weight:400;

    }

}


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

@media (max-width:480px){

    .top-info-strip{

        border-radius:0;

    }

    .top-info-wrapper{

        padding:28px 0;

    }

    .info-item{

        padding:6px 0;

    }

    .info-icon{

        margin-bottom:2px;

    }

    .info-content{

        max-width:240px;

    }

    .info-content h4{

        font-size:16px;

        line-height:1.5;

    }

    .info-content p{

        font-size:14px;

        line-height:1.7;

    }

}


/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:360px){

    .top-info-strip .container{

        padding:0 12px;

    }

    .info-content{

        max-width:210px;

    }

    .info-content h4{

        font-size:15px;

    }

    .info-content p{

        font-size:13px;

    }

    .info-icon{

        width:48px;

        min-width:48px;

        height:48px;

    }

    .info-icon i{

        font-size:24px;

    }

}


/*=========================================
        FINAL SAFETY FIX
=========================================*/

img{

    max-width:100%;

    height:auto;

}

.info-item,
.info-content,
.info-icon{

    overflow-wrap:break-word;

}

.info-divider{

    flex-shrink:0;

}























































/*=====================================================
            WHY CHOOSE BALAJI LOGISTICS
                CSS PART 1A
            MAIN LAYOUT
======================================================*/

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

:root{

    --primary:#b83330;
    --dark:#1f1f1f;
    --white:#ffffff;
    --text:#bdbdbd;

}

.why-tranzix{

    position:relative;

    width:100%;

    background:#ffffff;

    overflow:visible;


    margin:0;

    /* Floating stats ke liye neeche proper space */
    padding:0 0 260px;

}

.why-main{

    width:100%;

    display:flex;

    align-items:stretch;

    justify-content:center;

    min-height:720px;

    position:relative;

}

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

.why-left{

    width:50%;

    position:relative;

    overflow:hidden;

    flex-shrink:0;

}

.why-left img{

    width:100%;

    height:100%;

    min-height:720px;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:7s linear;

}

.why-tranzix:hover .why-left img{

    transform:scale(1.06);

}

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

.why-right{

    width:50%;

    background:#1f1f1f;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    flex-shrink:0;

}

/*====================================
            DOT PATTERN
====================================*/

.dot-pattern{

    position:absolute;

    top:45px;

    right:45px;

    width:125px;

    height:125px;

    background-image:radial-gradient(
        rgba(255,255,255,.18) 2px,
        transparent 2px
    );

    background-size:16px 16px;

    animation:dotsMove 8s linear infinite;

}

@keyframes dotsMove{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.why-content{

    width:100%;

    max-width:560px;

    padding:70px 55px;

    position:relative;

    z-index:5;

    opacity:0;

    transform:translateX(60px);

}

.why-content.active{

    opacity:1;

    transform:translateX(0);

    transition:.9s ease .2s;

}

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

.why-content h2{

    color:#ffffff;

    font-size:66px;

    font-weight:700;

    line-height:1.08;

    letter-spacing:-2px;

    margin-bottom:55px;

}

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

.why-left{

    opacity:0;

    transform:translateX(-70px);

}

.why-left.active{

    opacity:1;

    transform:translateX(0);

    transition:.9s ease;

}

/*=====================================================
            WHY CHOOSE BALAJI LOGISTICS
                CSS PART 1B
            FEATURE GRID
======================================================*/

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

.why-grid{

    display:grid;

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

    gap:42px 28px;

    width:100%;

}

/*====================================
            ITEM
====================================*/

.why-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    transition:.35s ease;

}

.why-item:hover{

    transform:translateX(8px);

}

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

.why-icon{

    width:64px;

    height:64px;

    min-width:64px;

    border-radius:50%;

    background:#313131;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.why-icon i{

    color:var(--primary);

    font-size:24px;

    transition:.35s;

}

.why-item:hover .why-icon{

    background:var(--primary);

    transform:rotate(8deg);

}

.why-item:hover .why-icon i{

    color:#fff;

}

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

.why-item h3{

    color:#fff;

    font-size:20px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:12px;

}

.why-item p{

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}

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

.why-item{

    opacity:0;

    transform:translateY(40px);

    animation:whyFade .8s ease forwards;

}

.why-item:nth-child(1){

    animation-delay:.15s;

}

.why-item:nth-child(2){

    animation-delay:.30s;

}

.why-item:nth-child(3){

    animation-delay:.45s;

}

.why-item:nth-child(4){

    animation-delay:.60s;

}

@keyframes whyFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.why-item,
.why-icon,
.why-left img{

    will-change:transform;

}

/*=====================================================
            WHY CHOOSE BALAJI LOGISTICS
                CSS PART 1C
        FLOATING STATS (FIXED VERSION)
======================================================*/

/*====================================
            STATS AREA
====================================*/

.stats-area{

    position:absolute;

    left:50%;

    bottom:-120px;

    transform:translateX(-50%);

    width:92%;

    max-width:1380px;

    z-index:100;

}

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

.stats-card{

    position:relative;

    width:100%;

    display:grid;

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

    align-items:center;

    background:#ffffff;

    border-radius:8px 8px 0 0;

    overflow:hidden;

    padding:50px 30px;

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

    transition:.35s ease;

}

.stats-card:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 70px rgba(0,0,0,.16);

}

/*====================================
            STAT BOX
====================================*/

.stat-box{

    position:relative;

    text-align:center;

    padding:0 20px;

}

/*====================================
            DIVIDER
====================================*/

.stat-box:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:80px;

    background:#ececec;

}

/*====================================
            NUMBER
====================================*/

.stat-box h2{

    font-size:62px;

    font-weight:700;

    color:#111;

    line-height:1;

    margin-bottom:16px;

}

/*====================================
            COUNTER +
====================================*/

.counter{

    display:inline-block;

}

.stat-box h2::after{

    content:"+";

    color:var(--primary);

    font-size:34px;

    margin-left:4px;

}

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

.stat-box p{

    color:#333;

    font-size:17px;

    font-weight:600;

    line-height:1.5;

}

/*====================================
            ORANGE STRIP
====================================*/

.stats-strip{

    width:96%;

    height:22px;

    margin:auto;

    background:var(--primary);

    border-radius:0 0 8px 8px;

    box-shadow:0 12px 28px rgba(184,51,48,.35);

}

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

.stat-box{

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box:hover h2{

    color:var(--primary);

}

.stat-box:hover p{

    color:#111;

}

/*====================================
            FIX
====================================*/

.why-tranzix{

    padding-bottom:50px;

}

.stats-card{

    margin-bottom:0;

}

.stats-strip{

    margin-top:0;

}



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

@media (max-width:1200px){

    .why-main{
        min-height:650px;
    }

    .why-left img{
        min-height:650px;
    }

    .why-content{
        max-width:520px;
        padding:60px 45px;
    }

    .why-content h2{
        font-size:52px;
        margin-bottom:45px;
    }

    .why-grid{
        gap:35px 24px;
    }

    .stats-card{
        padding:45px 25px;
    }

    .stat-box h2{
        font-size:52px;
    }

}


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

@media (max-width:992px){

    .why-main{
        flex-direction:column;
    }

    .why-left,
    .why-right{
        width:100%;
    }

    .why-left{
        height:480px;
    }

    .why-left img{
        min-height:480px;
    }

    .why-content{
        max-width:100%;
        padding:60px 35px 180px;
    }

    .why-content h2{
        font-size:42px;
        margin-bottom:35px;
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px 25px;
    }

    /*=====================
            STATS
    =====================*/

    .stats-area{
        width:92%;
        bottom:-140px;
    }

    .stats-card{
        grid-template-columns:repeat(2,1fr);
        padding:35px 20px;
    }

    .stat-box:nth-child(2)::after{
        display:none;
    }

    .stat-box h2{
        font-size:46px;
    }

}

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

@media (max-width:768px){

    .why-tranzix{
        padding-bottom:420px;
    }

    .why-left{
        height:340px;
    }

    .why-left img{
        min-height:340px;
    }

    .why-content{
        padding:50px 25px 240px;
    }

    .why-content h2{
        font-size:34px;
        line-height:1.2;
        margin-bottom:30px;
    }

    .why-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .why-icon{
        width:55px;
        height:55px;
        min-width:55px;
    }

    .why-icon i{
        font-size:20px;
    }

    .why-item h3{
        font-size:18px;
    }

    .why-item p{
        font-size:15px;
        line-height:1.8;
    }

    /*=====================
            STATS
    =====================*/

    .stats-area{
        width:94%;
        bottom:-240px;
    }

    .stats-card{
        grid-template-columns:1fr;
        padding:30px 20px;
        gap:0;
    }

    .stat-box{
        padding:22px 0;
    }

    .stat-box::after{
        display:none !important;
    }

    .stat-box h2{
        font-size:42px;
    }

    .stat-box p{
        font-size:16px;
    }

}


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

@media (max-width:576px){

    .why-tranzix{
        padding-bottom:400px;
    }

    .why-left{
        height:300px;
    }

    .why-left img{
        min-height:300px;
    }

    .why-content{
        padding:40px 20px 230px;
    }

    .why-content h2{
        font-size:30px;
    }

    .dot-pattern{
        width:90px;
        height:90px;
        top:20px;
        right:20px;
    }

    .stats-area{
        width:95%;
    }

    .stats-card{
        padding:25px 18px;
    }

    .stat-box h2{
        font-size:38px;
    }

}

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

@media (max-width:480px){

    .why-tranzix{
        padding-bottom:380px;
    }

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

    .why-left{
        height:260px;
    }

    .why-left img{
        min-height:260px;
    }

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

    .why-content{
        padding:35px 18px 220px;
    }

    .why-content h2{
        font-size:26px;
        line-height:1.3;
    }

    .why-item{
        gap:12px;
    }

    .why-icon{
        width:48px;
        height:48px;
        min-width:48px;
    }

    .why-icon i{
        font-size:18px;
    }

    .why-item h3{
        font-size:17px;
    }

    .why-item p{
        font-size:14px;
    }

    /*=====================
            STATS
    =====================*/

    .stats-area{
        width:95%;
        bottom:-220px;
    }

    .stats-card{
        padding:22px 15px;
    }

    .stat-box h2{
        font-size:34px;
    }

    .stat-box p{
        font-size:15px;
    }

    .stats-strip{
        height:16px;
    }

}


/*=========================================
            360px
=========================================*/

@media (max-width:360px){

    .why-content{
        padding:30px 15px 210px;
    }

    .why-content h2{
        font-size:23px;
    }

    .why-left{
        height:220px;
    }

    .why-left img{
        min-height:220px;
    }

    .stat-box h2{
        font-size:30px;
    }

}














































/*==========================================
        ABOUT SECTION - PART 1
==========================================*/

.trx-about-section{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    padding:120px 0 110px;

}

.trx-container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 15px;

}

.trx-about-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}



/*==================================
            LEFT SIDE
==================================*/

.trx-about-left{

    position:relative;

    width:50%;

    min-height:550px;

}



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

.trx-about-image{

    position:absolute;

    left:20px;

    bottom:0;

    z-index:5;

    opacity:0;

    transform:translateY(120px);

    transition:1s cubic-bezier(.22,.61,.36,1);

    height: 600px;

}

.trx-about-image.trx-show{

    opacity:1;

    transform:translateY(0);

}

.trx-about-image img{

    width:370px;

    max-width:none;

    display:block;

}



/*==================================
        ORANGE RING
==================================*/

.trx-orange-ring{

    position:absolute;

    left:-25px;

    top:55px;

    width:190px;

    height:190px;

    border:42px solid #b83330;

    border-radius:50%;

    z-index:1;

}



/*==================================
        TOP DOT SHAPE
==================================*/

.trx-dot-shape{

    position:absolute;

    left:245px;

    top:35px;

    width:285px;

    height:285px;

    border-radius:50%;

    background-image:radial-gradient(#cfcfcf 2px,transparent 2px);

    background-size:20px 20px;

    z-index:1;

}



/*==================================
      BOTTOM DOT SHAPE
==================================*/

.trx-dot-shape-two{

    position:absolute;

    left:10px;

    bottom:120px;

    width:150px;

    height:150px;

    background-image:radial-gradient(#d3d3d3 2px,transparent 2px);

    background-size:20px 20px;

    opacity:.9;

    z-index:1;

}



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

.trx-exp-card{

    position:absolute;

    right:-10px;

    bottom:18px;

    width:375px;

    height:225px;

    z-index:20;

}

.trx-exp-bg{

    position:absolute;

    right:0;

    bottom:0;

    width:92%;

    height:90%;

    background:#b83330;

    border-radius:8px;

}

.trx-exp-content{

    position:absolute;

    left:0;

    top:0;

    width:255px;

    height:195px;

    background:#ffffff;

    border-radius:8px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

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

}

.trx-exp-content h2{

    margin:0;

    font-size:68px;

    line-height:1;

    font-weight:700;

    color:#b83330;

}

.trx-exp-content span{

    margin-top:12px;

    font-size:18px;

    font-weight:700;

    color:#222;

}

/*==========================================
        ABOUT SECTION - PART 2
==========================================*/


/*==================================
            RIGHT SIDE
==================================*/

.trx-about-right{

    width:50%;

    position:relative;

    z-index:10;

}



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

.trx-subtitle{

    display:inline-block;

    margin-bottom:22px;

    color:#b83330;

    font-size:16px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}



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

.trx-about-right h2{

    margin:0;

    color:#16171b;

    font-size:45px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1px;

    margin-bottom:10px;

}



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

.trx-about-right p{

    margin:0 0 18px;

    color:#7b7b7b;

    font-size:17px;

    line-height:2;

    font-weight:400;

}



/*==================================
        FEATURE LIST
==================================*/

.trx-feature-list{

    margin-top:50px;

    display:flex;

    flex-direction:column;

    gap:28px;

}



/*==================================
        FEATURE ITEM
==================================*/

.trx-feature-item{

    display:flex;

    align-items:center;

    gap:22px;

}

.trx-check{

    width:34px;

    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#111;

    font-size:26px;

    flex-shrink:0;

}

.trx-feature-item h5{

    margin:0;

    font-size:18px;

    color:#151515;

    font-weight:600;

}



/*==================================
        AUTHOR AREA
==================================*/

.trx-about-bottom{

    margin-top:65px;

    display:flex;

    align-items:center;

    gap:28px;

}

.trx-signature img{

    display:block;

    max-width:180px;

}

.trx-author h4{

    margin:0;

    color:#16171b;

    font-size:24px;

    font-weight:700;

}

.trx-author span{

    display:block;

    margin-top:6px;

    color:#7d7d7d;

    font-size:16px;

    font-weight:500;

}

/*==========================================
        ABOUT SECTION - PART 3
==========================================*/


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

.trx-about-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s cubic-bezier(.22,.61,.36,1);

}

.trx-about-right.trx-show{

    opacity:1;

    transform:translateX(0);

}

.trx-exp-card{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

    transition-delay:.35s;

}

.trx-exp-card.trx-show{

    opacity:1;

    transform:translateY(0);

}



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

.trx-about-image img{

    transition:transform .45s ease;

}

.trx-about-left:hover .trx-about-image img{

    transform:scale(1.02);

}

.trx-exp-content{

    transition:.35s ease;

}

.trx-about-left:hover .trx-exp-content{

    transform:translateY(-6px);

}




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

@media (max-width:1200px){

    .trx-about-wrapper{
        gap:50px;
    }

    .trx-about-left,
    .trx-about-right{
        width:50%;
    }

    .trx-about-left{
        min-height:520px;
    }

    .trx-about-image{
        height:540px;
        left:10px;
    }

    .trx-orange-ring{
        width:160px;
        height:160px;
        border-width:32px;
    }

    .trx-dot-shape{
        width:220px;
        height:220px;
        left:190px;
    }

    .trx-exp-card{
        width:320px;
        height:190px;
        right:0;
    }

    .trx-about-right h2{
        font-size:38px;
    }

}

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

@media (max-width:992px){

    .trx-about-section{
        padding:90px 0;
    }

    .trx-about-wrapper{
        flex-direction:column;
        gap:70px;
    }

    .trx-about-left,
    .trx-about-right{
        width:100%;
    }

    .trx-about-left{
        max-width:600px;
        min-height:580px;
        margin:auto;
    }

    /* Image */

    .trx-about-image{
        left:50%;
        transform:translateX(-50%) translateY(100px);
        height:560px;
    }

    .trx-about-image.trx-show{
        transform:translateX(-50%) translateY(0);
    }

    /* Ring */

    .trx-orange-ring{
        left:calc(50% - 175px);
        top:35px;

        width:150px;
        height:150px;
        border-width:30px;
    }

    /* Dots */

    .trx-dot-shape{
        left:calc(50% + 35px);
        top:20px;
        width:170px;
        height:170px;
    }

    .trx-dot-shape-two{
        left:calc(50% - 180px);
        bottom:90px;
    }

    /* Experience Card */

    .trx-exp-card{
        right:20px;
        bottom:0;
        width:300px;
        height:180px;
    }

    .trx-exp-content{
        width:210px;
        height:155px;
    }

    /* Content */

    .trx-about-right h2{
        font-size:38px;
    }

    .trx-about-right p{
        font-size:16px;
    }

}

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

@media (max-width:768px){

    .trx-about-section{
        padding:80px 0;
    }

    .trx-container{
        padding:0 20px;
    }

    .trx-about-wrapper{
        gap:60px;
    }

    .trx-about-left{
        max-width:500px;
        min-height:520px;
    }

    /* Image */

    .trx-about-image{
        left:50%;
        height:500px;
        transform:translateX(-50%) translateY(100px);
    }

    .trx-about-image.trx-show{
        transform:translateX(-50%) translateY(0);
    }

    /* Ring */

    .trx-orange-ring{
        left:calc(50% - 150px);
        top:20px;
        width:120px;
        height:120px;
        border-width:24px;
    }

    /* Dots */

    .trx-dot-shape{
        width:130px;
        height:130px;
        left:calc(50% + 35px);
    }

    .trx-dot-shape-two{
        width:70px;
        height:70px;
        left:calc(50% - 150px);
    }

    /* Card */

    .trx-exp-card{
        width:250px;
        height:150px;
        right:10px;
    }

    .trx-exp-content{
        width:175px;
        height:130px;
    }

    .trx-exp-content h2{
        font-size:42px;
    }

    .trx-about-right h2{
        font-size:34px;
    }

}


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

@media (max-width:576px){

    .trx-container{
        padding:0 16px;
    }

    .trx-about-left{
        max-width:380px;
        min-height:460px;
        
    }

    /* Image */

    .trx-about-image{
        height:440px;
    }

    /* Ring */

    .trx-orange-ring{
        left:calc(50% - 125px);
        width:95px;
        height:95px;
        border-width:18px;
    }

    /* Hide dots */

    .trx-dot-shape,
    .trx-dot-shape-two{
        display:none;
    }

    /* Card */

    .trx-exp-card{
        width:210px;
        height:125px;
        right:0;
    }

    .trx-exp-content{
        width:150px;
        height:108px;
    }

    .trx-exp-content h2{
        font-size:34px;
        
        
    }

    .trx-exp-content span{
        font-size:12px;
        
    }

    /* Content */

    .trx-about-right h2{
        font-size:34px;
    }

    .trx-subtitle{
        margin-top: 170px;
    }

    .trx-about-right p{
        font-size:15px;
        line-height:1.8;
        color:#555;

    }

    .trx-about-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

}

/*=========================================
        FINAL MOBILE
        480px to 320px
=========================================*/

@media (max-width:480px){

    .trx-about-section{
        padding:60px 0;
    }

    .trx-container{
        padding:0 15px;
    }

    .trx-about-wrapper{
        gap:45px;
    }

    .trx-about-left{
        max-width:330px;
        min-height:420px;
    }

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

    .trx-about-image{
        left:50%;
        height:400px;
        transform:translateX(-50%) translateY(80px);
    }

    .trx-about-image.trx-show{
        transform:translateX(-50%) translateY(0);
    }

    /*==============================
            RING
    ==============================*/

    .trx-orange-ring{
        left:calc(50% - 110px);
        top:12px;
        width:85px;
        height:85px;
        border-width:16px;
    }

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

    .trx-exp-card{
        width:180px;
        height:110px;
        right:0;
        bottom:0;
    }

    .trx-exp-content{
        width:130px;
        height:95px;
    }

    .trx-exp-content h2{
        font-size:30px;
    }

    .trx-exp-content span{
        font-size:11px;
        margin-top:5px;
    }

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

    .trx-subtitle{
        font-size:12px;
    }

    .trx-about-right h2{
        font-size:26px;
        line-height:1.3;
    }

    .trx-about-right p{
        font-size:14px;
        line-height:1.7;
    }

    .trx-feature-list{
        gap:18px;
        margin-top:25px;
    }

    .trx-feature-item{
        gap:12px;
    }

    .trx-check{
        width:24px;
        height:24px;
        font-size:18px;
    }

    .trx-feature-item h5{
        font-size:15px;
    }

}


/*=========================================
            EXTRA SMALL
            360px
=========================================*/

@media (max-width:360px){

    .trx-about-left{
        max-width:290px;
        min-height:380px;
    }

    .trx-about-image{
        height:360px;
    }

    .trx-orange-ring{
        left:calc(50% - 95px);
        width:72px;
        height:72px;
        border-width:14px;
    }

    .trx-exp-card{
        width:160px;
        height:98px;
    }

    .trx-exp-content{
        width:115px;
        height:82px;
    }

    .trx-exp-content h2{
        font-size:24px;
    }

    .trx-about-right h2{
        font-size:22px;
    }

}



























































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

.trx-services{

    padding:105px 0 110px;

    background:#f7f5f2;

    overflow:hidden;

}

.trx-container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 15px;

}



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

.trx-services-title{

    text-align:center;

    margin-bottom:60px;

}

.trx-services-title span{

    display:inline-block;

    color:#b83330;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:16px;

}

.trx-services-title h2{

    margin:0;

    font-size:50px;

    line-height:1.15;

    color:#17181c;

    font-weight:700;

}



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

.trx-services-grid{

    display:grid;

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

    gap:34px;

}



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

.trx-card{

    position:relative;

    background:#fff;

    border-radius:6px;

    overflow:hidden;

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

    display:block;

    text-decoration:none;

}



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

.trx-img{

    position:relative;

    height:260px;

    overflow:hidden;

}

.trx-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s;

}



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

.trx-overlay{

    position:absolute;

    inset:0;

    background:#b83330;

    opacity:0;

    transition:.45s;

}



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

.trx-icon{

    position:absolute;

    left:40px;

    top:215px;

    width:92px;

    height:92px;

    background:#b83330;

    border-radius:6px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    z-index:5;

    transition:.35s;

}

.trx-icon i{

    font-size:42px;

}



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

.trx-content{

    padding:65px 40px 42px;

}

.trx-content h3{

    margin:0 0 22px;

    font-size:20px;

    line-height:1.45;

    color:#181818;

    font-weight:700;

    transition:.35s;

}

.trx-content p{

    margin:0;

    font-size:16px;

    line-height:1.9;

    color:#777;

}

/*====================================================
            TRANZIX SERVICES
                CSS PART - 2
====================================================*/


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

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

    transform:scale(1.08);

}

.trx-card:hover .trx-overlay{

    opacity:.82;

}

.trx-card:hover .trx-icon{

    background:#1d1d1d;

}

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

    color:#b83330;

}



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

.trx-btn-area{

    text-align:center;

    margin-top:65px;

}

.trx-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:190px;

    height:58px;

    background:#b83330;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    border-radius:5px;

    transition:.35s;

}

.trx-btn:hover{

    background:#1d1d1d;

}



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

.trx-img img{

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transform:translateZ(0);

}



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

.trx-card,
.trx-img img,
.trx-overlay,
.trx-icon,
.trx-content h3,
.trx-btn{

    transition:all .35s ease;

}



/*=========================
        ICON CENTER
=========================*/

.trx-icon{

    display:flex;

    align-items:center;

    justify-content:center;

}

.trx-icon i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

}



/*=========================
        POINTER
=========================*/

.trx-card{

    cursor:pointer;

}

/*====================================================
            TRANZIX SERVICES
                CSS PART - 3
====================================================*/


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

.trx-card{

    min-height:470px;

}

.trx-content{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:210px;

}

.trx-services-title h2{

    max-width:700px;

    margin:auto;

}


/*=====================================================
        SERVICES SECTION
        RESPONSIVE PART - 1
        DESKTOP & LAPTOP
======================================================*/


/*==============================
            1600px
==============================*/

@media (max-width:1600px){

    .trx-container{

        max-width:1320px;

        padding:0 30px;

    }

    .trx-services{

        padding:110px 0;

    }

    .trx-services-grid{

        gap:30px;

    }

    .trx-services-title{

        margin-bottom:65px;

    }

    .trx-services-title h2{

        font-size:48px;

        max-width:720px;

    }

    .trx-img{

        height:255px;

    }

    .trx-icon{

        width:88px;

        height:88px;

        left:35px;

        top:212px;

    }

    .trx-icon i{

        font-size:40px;

    }

    .trx-content{

        padding:62px 35px 36px;

    }

}


/*==============================
            1400px
==============================*/

@media (max-width:1400px){

    .trx-container{

        padding:0 25px;

    }

    .trx-services{

        padding:105px 0;

    }

    .trx-services-grid{

        gap:28px;

    }

    .trx-services-title{

        margin-bottom:55px;

    }

    .trx-services-title h2{

        font-size:44px;

    }

    .trx-img{

        height:245px;

    }

    .trx-icon{

        width:84px;

        height:84px;

        top:205px;

        left:30px;

    }

    .trx-icon i{

        font-size:36px;

    }

    .trx-content{

        padding:60px 30px 34px;

    }

    .trx-content h3{

        font-size:19px;

    }

    .trx-content p{

        font-size:15px;

        line-height:1.8;

    }

}


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

@media (max-width:1200px){

    .trx-services{

        padding:95px 0;

    }

    .trx-container{

        padding:0 20px;

    }

    .trx-services-title{

        margin-bottom:50px;

    }

    .trx-services-title span{

        font-size:12px;

    }

    .trx-services-title h2{

        font-size:40px;

    }

    .trx-services-grid{

        gap:24px;

    }

    .trx-card{

        min-height:445px;

    }

    .trx-img{

        height:225px;

    }

    .trx-icon{

        width:78px;

        height:78px;

        top:188px;

        left:25px;

    }

    .trx-icon i{

        font-size:34px;

    }

    .trx-content{

        padding:55px 26px 30px;

        min-height:195px;

    }

    .trx-content h3{

        font-size:18px;

    }

    .trx-content p{

        font-size:15px;

        line-height:1.75;

    }

}

/*=====================================================
        SERVICES SECTION
        RESPONSIVE PART - 2
        TABLET RESPONSIVE
======================================================*/


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

@media (max-width:992px){

    .trx-services{

        padding:85px 0;

    }

    .trx-container{

        padding:0 28px;

    }

    .trx-services-title{

        margin-bottom:50px;

    }

    .trx-services-title span{

        font-size:13px;

        margin-bottom:14px;

    }

    .trx-services-title h2{

        font-size:38px;

        line-height:1.2;

        max-width:620px;

    }

    .trx-services-grid{

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

        gap:26px;

    }

    .trx-card{

        min-height:430px;

    }

    .trx-img{

        height:220px;

    }

    .trx-icon{

        width:74px;

        height:74px;

        left:24px;

        top:185px;

    }

    .trx-icon i{

        font-size:30px;

    }

    .trx-content{

        padding:52px 24px 28px;

        min-height:185px;

    }

    .trx-content h3{

        font-size:18px;

        line-height:1.45;

        margin-bottom:16px;

    }

    .trx-content p{

        font-size:15px;

        line-height:1.8;

    }

    .trx-btn-area{

        margin-top:50px;

    }

}


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

@media (max-width:768px){

    .trx-services{

        padding:75px 0;

    }

    .trx-container{

        padding:0 22px;

    }

    .trx-services-title{

        margin-bottom:42px;

    }

    .trx-services-title span{

        font-size:12px;

        letter-spacing:1.5px;

    }

    .trx-services-title h2{

        font-size:34px;

        line-height:1.25;

        max-width:100%;

    }

    .trx-services-grid{

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

        gap:22px;

    }

    .trx-card{

        min-height:400px;

        border-radius:8px;

    }

    .trx-img{

        height:200px;

    }

    .trx-icon{

        width:68px;

        height:68px;

        left:20px;

        top:168px;

    }

    .trx-icon i{

        font-size:28px;

    }

    .trx-content{

        padding:48px 20px 26px;

        min-height:175px;

    }

    .trx-content h3{

        font-size:17px;

        margin-bottom:14px;

    }

    .trx-content p{

        font-size:14px;

        line-height:1.75;

    }

    .trx-btn-area{

        margin-top:45px;

    }

    .trx-btn{

        width:175px;

        height:54px;

        font-size:16px;

    }

}



/*=========================================
        480px / SMALL MOBILE
        (fix: services grid was stuck at
        2 columns all the way to 320px)
=========================================*/

@media (max-width:576px){

    .trx-services-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .trx-card{

        min-height:auto;

    }

    .trx-img{

        height:220px;

    }

    .trx-content{

        min-height:auto;

    }

}

































/*=========================================================
            PROJECT SHOWCASE
                CSS PART - 1
=========================================================*/

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

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

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

.project-showcase{
    width:100%;
    background:#ffffff;
    padding:110px 0 120px;
    overflow:hidden;
}

.project-showcase .container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 15px;
}

/*==========================
        FILTER
==========================*/

.project-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:55px;
    margin-bottom:65px;
    flex-wrap:wrap;
}

.filter-btn{
    position:relative;
    border:none;
    background:none;
    cursor:pointer;

    font-family:'Barlow',sans-serif;
    font-size:20px;
    font-weight:600;
    color:#161616;

    transition:.35s;
}

.filter-btn::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:0;
    height:2px;

    background:#b83330;

    transform:translateX(-50%);

    transition:.35s;

}

.filter-btn.active{

    color:#b83330;

}

.filter-btn.active::after{

    width:100%;

}

.filter-btn:hover{

    color:#b83330;

}

.filter-btn:hover::after{

    width:100%;

}

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

.project-grid{

    display:grid;

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

    gap:38px;

}

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

.project-card{

    position:relative;

    height:250px;

    overflow:hidden;

    border-radius:8px;

    cursor:pointer;

    background:#eee;

}

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

.project-card img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:1s cubic-bezier(.22,.61,.36,1);

}

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

.project-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0);

    transition:.45s;

    z-index:1;

}

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

.project-content{

    position:absolute;

    left:28px;
    right:28px;
    bottom:28px;

    display:flex;
    align-items:stretch;

    z-index:5;

    pointer-events:none;

}

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

.project-text{

    flex:1;

}

/*==========================
        ARROW
==========================*/

.project-arrow{

    flex-shrink:0;

}

/*=========================================================
            PROJECT SHOWCASE
                CSS PART - 2
=========================================================*/


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

.project-card:hover .project-overlay{

    background:linear-gradient(
        180deg,
        rgba(0,0,0,0) 15%,
        rgba(0,0,0,.15) 45%,
        rgba(0,0,0,.65) 100%
    );

}


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

.project-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:#ffffff;

    min-height:84px;

    padding:18px 24px;

    border-radius:6px 0 0 6px;

    transform:translateY(0);

    transition:.55s cubic-bezier(.22,.61,.36,1);

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

}


/*==========================
        CATEGORY
==========================*/

.project-text span{

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

    font-size:13px;

    font-weight:500;

    color:#8d8d8d;

    margin-bottom:1px;

}


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

.project-text h3{

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

    font-size:21px;

    line-height:1.2;

    font-weight:700;

    color:#111111;

}


/*==========================
        ARROW BOX
==========================*/

.project-arrow{

    width:84px;

    min-width:84px;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:0 6px 6px 0;

    /* transform:translateY(140px); */
        transform:translateY(0);


    transition:.55s cubic-bezier(.22,.61,.36,1);

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

    pointer-events:auto;

}


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

.project-arrow i{

    font-size:22px;

    color:#111111;

    transition:.35s ease;

}


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

.project-card:hover img{

    transform:scale(1.08);

}


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

.project-card:hover .project-text{

    transform:translateY(0);

}

.project-card:hover .project-arrow{

    transform:translateY(0);

}

.project-card:hover .project-arrow i{

    transform:translateX(7px);

}


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

.project-card{

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

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

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.18);

}

.project-content{

    position:absolute;

    left:24px;

    right:24px;

    bottom:24px;

    display:flex;

    align-items:stretch;

    z-index:5;

}

/*=========================================================
            PROJECT SHOWCASE
                CSS PART - 3
=========================================================*/


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

.project-card,
.project-card img,
.project-overlay,
.project-text,
.project-arrow,
.filter-btn{

    will-change:transform;

}



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

.filter-btn{

    transition:
        color .35s ease,
        transform .35s ease;

}

.filter-btn:hover{

    transform:translateY(-2px);

}

.filter-btn.active{

    transform:translateY(-2px);

}



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

.project-card{

    opacity:1;

    transform:translateY(0);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        opacity .45s ease;

}

.project-card.hide{

    opacity:0;

    transform:scale(.92);

    pointer-events:none;

}



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

@media(max-width:1200px){

    .project-grid{

        gap:30px;

    }

}



@media(max-width:991px){

    .project-grid{

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

    }

    .project-card{

        height:360px;

    }

}



@media(max-width:767px){

    .project-showcase{

        padding:80px 0;

    }

    .project-filter{

        gap:20px;

        margin-bottom:40px;

    }

    .filter-btn{

        font-size:17px;

    }

    .project-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .project-card{

        height:340px;

    }

    .project-content{

        left:18px;

        right:18px;

        bottom:18px;

    }

    .project-text{

        min-height:74px;

        padding:16px 18px;

    }

    .project-text h3{

        font-size:18px;

    }

    .project-arrow{

        width:70px;

        min-width:70px;

    }

}



@media(max-width:480px){

    .project-card{

        height:300px;

    }

    .project-text{

        padding:14px 16px;

    }

    .project-text span{

        font-size:12px;

    }

    .project-text h3{

        font-size:17px;

    }

    .project-arrow{

        width:62px;

        min-width:62px;

    }

    .project-arrow i{

        font-size:18px;

    }

}





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

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-subtitle{

    display:inline-block;

    position:relative;

    font-size:16px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#b83330;

    margin-bottom:18px;

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

}

.section-subtitle::before{

    content:"";

    position:absolute;

    left:-55px;

    top:50%;

    width:40px;

    height:2px;

    background:#b83330;

    transform:translateY(-50%);

}

.section-subtitle::after{

    content:"";

    position:absolute;

    right:-55px;

    top:50%;

    width:40px;

    height:2px;

    background:#b83330;

    transform:translateY(-50%);

}

.section-heading{

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

    font-size:46px;

    font-weight:600;

    line-height:1.15;

    color:#111111;

    letter-spacing:-1px;

    margin:0;

}

/*==========================
      Responsive
==========================*/

@media(max-width:991px){

    .section-heading{

        font-size:40px;

    }

}

@media(max-width:767px){

    .section-title{

        margin-bottom:50px;

    }

    .section-heading{

        font-size:32px;

        line-height:1.25;

    }

    .section-subtitle{

        font-size:14px;

        letter-spacing:1.5px;

    }

    .section-subtitle::before,
    .section-subtitle::after{

        width:30px;

    }

    .section-subtitle::before{

        left:-42px;

    }

    .section-subtitle::after{

        right:-42px;

    }

}