/*==================================================
                TRZ FOOTER
                CSS PART - 1
==================================================*/

.trzf-footer{

    position:relative;

    overflow:hidden;

    background:#252528;

    color:#ffffff;

}

.trzf-container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 15px;

    position:relative;

    z-index:10;

}



/*====================================
            TOP BAR
====================================*/

.trzf-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 30px;

    margin:30px 0;

    background:#ffffff;

    border-radius:12px;

}



/*====================================
            LOGO
====================================*/

.trzf-logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.trzf-logo img{

    width:130px;

    display:block;

}



/*====================================
            SOCIAL
====================================*/

.trzf-social{

    display:flex;

    align-items:center;

    gap:22px;

}

.trzf-social a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#252528;

    background:rgba(37,37,40,.08);

    border-radius:6px;

    font-size:22px;

    transition:.35s;

}

.trzf-social a:hover{

    color:#ffffff;

    background:#b83330;

}



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

.trzf-divider{

    width:100%;

    height:1px;

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

}



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

.trzf-body{

    display:grid;

    grid-template-columns:

        2fr

        1fr

        1fr

        1fr;

    column-gap:70px;

    padding:80px 0 75px;

}



/*====================================
            COLUMN
====================================*/

.trzf-column{

    position:relative;

}

.trzf-column h3{

    margin:0 0 45px;

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

    font-size:25px;

    font-weight:600;

    color:#ffffff;

}

/*==================================================
                TRZ FOOTER
                CSS PART - 2
==================================================*/


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

.trzf-about p{

    margin:0;

    max-width:470px;

    font-size:15px;

    line-height:2;

    color:#d4d4d4;

    font-weight:400;

}



/*====================================
        NEWSLETTER
====================================*/

.trzf-newsletter{

    margin-top:48px;

    width:100%;

    max-width:560px;

    height:76px;

    background:#343434;

    border-radius:6px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.trzf-newsletter input{

    flex:1;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    padding:0 30px;

    color:#ffffff;

    font-size:18px;

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

}

.trzf-newsletter input::placeholder{

    color:#9f9f9f;

}

.trzf-newsletter button{

    width:82px;

    height:100%;

    border:none;

    background:transparent;

    color:#bdbdbd;

    cursor:pointer;

    font-size:28px;

    transition:.35s;

}

.trzf-newsletter button:hover{

    color:#b83330;

}



/*====================================
            MENU
====================================*/

.trzf-column ul{

    margin:0;

    padding:0;

    list-style:none;

}

.trzf-column ul li{

    margin-bottom:24px;

}

.trzf-column ul li:last-child{

    margin-bottom:0;

}

.trzf-column ul li a{

    text-decoration:none;

    color:#f1f1f1;

    font-size:18px;

    font-weight:400;

    transition:.35s;

}

.trzf-column ul li a:hover{

    color:#b83330;

    padding-left:8px;

}



/*====================================
            CONTACT
====================================*/

.trzf-contact p{

    margin:0 0 34px;

    color:#9f9f9f;

    font-size:15px;

    line-height:1.9;

}

.trzf-phone{

    display:block;

    margin-bottom:34px;

    text-decoration:none;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

    transition:.35s;

}

.trzf-mail{

    display:block;

    text-decoration:none;

    color:#ffffff;

    font-size:18px;

    transition:.35s;

}

.trzf-phone:hover,

.trzf-mail:hover{

    color:#b83330;

}

/*==================================================
                TRZ FOOTER
                CSS PART - 3
==================================================*/


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

.trzf-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 0;

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

}

.trzf-copy{

    color:#9b9b9b;

    font-size:16px;

    line-height:1.7;

}

.trzf-policy{

    display:flex;

    align-items:center;

    gap:18px;

}

.trzf-policy span{

    color:#5d5d5d;

}

.trzf-policy a{

    text-decoration:none;

    color:#9b9b9b;

    font-size:16px;

    transition:.35s;

}

.trzf-policy a:hover{

    color:#b83330;

}



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

.trzf-shape-left,

.trzf-shape-right{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.trzf-shape-left{

    width:460px;

    height:460px;

    left:-240px;

    bottom:-220px;

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

}

.trzf-shape-right{

    width:340px;

    height:340px;

    right:-170px;

    top:80px;

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

}



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

.trzf-social a{

    position:relative;

    overflow:hidden;

}

.trzf-social a::before{

    content:"";

    position:absolute;

    inset:0;

    background:#b83330;

    transform:scale(0);

    transition:.35s;

    border-radius:6px;

}

.trzf-social a i{

    position:relative;

    z-index:2;

}

.trzf-social a:hover::before{

    transform:scale(1);

}



/*====================================
        NEWSLETTER
====================================*/

.trzf-newsletter{

    transition:.35s;

}

.trzf-newsletter:focus-within{

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

}



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

@media(max-width:991px){

    .trzf-body{

        grid-template-columns:1fr 1fr;

        gap:50px 40px;

    }

    .trzf-top{

        flex-direction:column;

        gap:30px;

    }

    .trzf-bottom{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

}

@media(max-width:767px){

    .trzf-body{

        grid-template-columns:1fr;

    }

    .trzf-social{

        gap:12px;

    }

    .trzf-social a{

        width:50px;

        height:50px;

        font-size:18px;

    }

    .trzf-column h3{

        margin-bottom:25px;

        font-size:24px;

    }

    .trzf-newsletter{

        height:60px;

    }

    .trzf-newsletter input{

        padding:0 18px;

        font-size:16px;

    }

    .trzf-newsletter button{

        width:65px;

        font-size:22px;

    }

    .trzf-policy{

        flex-wrap:wrap;

        justify-content:center;

    }

    .trzf-shape-left,

    .trzf-shape-right{

        display:none;

    }

}

/*==================================================
            TRZ FOOTER
            CSS PART - 4 (FINAL)
==================================================*/


/*------------------------------------
        Smooth Animation
------------------------------------*/

.trzf-column,
.trzf-top,
.trzf-bottom{

    transition:all .4s ease;

}


/*------------------------------------
        Heading Decoration
------------------------------------*/

.trzf-column h3{

    position:relative;

    display:inline-block;

    padding-bottom:14px;

}

.trzf-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:48px;

    height:3px;

    background:#b83330;

    border-radius:30px;

}


/*------------------------------------
        Link Hover
------------------------------------*/

.trzf-column ul li{

    transition:transform .3s ease;

}

.trzf-column ul li:hover{

    transform:translateX(6px);

}


/*------------------------------------
        Newsletter Button
------------------------------------*/

.trzf-newsletter button{

    position:relative;

    overflow:hidden;

}

.trzf-newsletter button::before{

    content:"";

    position:absolute;

    inset:0;

    background:#b83330;

    transform:translateY(100%);

    transition:.35s;

}

.trzf-newsletter button i{

    position:relative;

    z-index:2;

}

.trzf-newsletter button:hover::before{

    transform:translateY(0);

}

.trzf-newsletter button:hover{

    color:#fff;

}


/*------------------------------------
        Logo Animation
------------------------------------*/

.trzf-logo img{

    transition:transform .35s ease;

}

.trzf-logo:hover img{

    transform:scale(1.04);

}


/*------------------------------------
        Bottom Alignment
------------------------------------*/

.trzf-copy,

.trzf-policy{

    display:flex;

    align-items:center;

}


/*------------------------------------
        Better Readability
------------------------------------*/

.trzf-footer{

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

}

.trzf-footer *{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*------------------------------------
        Selection Color
------------------------------------*/

.trzf-footer ::selection{

    background:#b83330;

    color:#fff;

}