/*==========================================
        PAGE BANNER
==========================================*/

.trx-page-banner{

    position:relative;

    width:100%;

    height:68vh;

    min-height:430px;

    max-height:620px;

    background: url("../../images/Contact-Page_banner.jpg") center center / cover no-repeat;


    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}



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

.trx-banner-overlay{

    position:absolute;

    inset:0;

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

}



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

.trx-page-banner .trx-container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 15px;

    position:relative;

    z-index:2;

}



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

.trx-page-banner-content{

    text-align:center;

    color:#fff;

    margin-top:120px;

}



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

.trx-page-banner-content h1{

    font-size:72px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:18px;

    text-transform:capitalize;

}



/*==========================================
        BREADCRUMB
==========================================*/

.trx-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    font-size:18px;

    font-weight:500;

}



.trx-breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}



.trx-breadcrumb a:hover{

    color:#b83330;

}



.trx-breadcrumb i{

    color:#b83330;

    font-size:14px;

}



.trx-current-page{

    color:#b83330;

}



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

@media(max-width:1200px){

    .trx-page-banner{

        height:60vh;

    }

    .trx-page-banner-content h1{

        font-size:58px;

    }

}



@media(max-width:991px){

    .trx-page-banner{

        height:52vh;

        min-height:380px;

    }

    .trx-page-banner-content{

        margin-top:80px;

    }

    .trx-page-banner-content h1{

        font-size:46px;

    }

}



@media(max-width:768px){

    .trx-page-banner{

        height:46vh;

        min-height:320px;

    }

    .trx-page-banner-content{

        margin-top:60px;

    }

    .trx-page-banner-content h1{

        font-size:36px;

    }

    .trx-breadcrumb{

        font-size:16px;

    }

}



@media(max-width:576px){

    .trx-page-banner{

        height:42vh;

        min-height:280px;

    }

    .trx-page-banner-content h1{

        font-size:30px;

    }

    .trx-breadcrumb{

        gap:8px;

        font-size:15px;

    }

}

















/*==================================================
        TRANZIX LOCATION
            CSS PART - 1
==================================================*/

.trx-location{

    padding:50px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.trx-location .trx-container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 15px;

}


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

.trx-location-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.trx-subtitle{

    display:inline-block;

    color:#b83330;

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;

    margin-bottom:15px;

}

.trx-location-heading h2{

    font-size:52px;

    font-weight:700;

    color:#17171d;

    line-height:1.1;

    margin-bottom:20px;

}

.trx-location-heading p{

    font-size:17px;

    color:#666;

    line-height:1.8;

}




/*=================================
        FLOATING MAP CARD
==================================*/

.trx-map-wrapper{

    position:relative;

}

.trx-map-floating{

    position:absolute;

    top:30px;

    left:30px;

    width:320px;

    background:#fff;

    padding:28px;

    border-radius:14px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.15);

    z-index:20;

}

.trx-map-floating h4{

    font-size:22px;

    color:#17171d;

    margin-bottom:12px;

}

.trx-map-floating p{

    font-size:15px;

    line-height:1.8;

    color:#666;

    margin-bottom:22px;

}

.trx-direction-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    text-decoration:none;

    color:#fff;

    background:#b83330;

    border-radius:6px;

    font-weight:600;

    transition:.35s;

}

.trx-direction-btn:hover{

    background:#17171d;

}

.trx-direction-btn i{

    transition:.35s;

}

.trx-direction-btn:hover i{

    transform:translateX(5px);

}


/*=================================
            MAP
==================================*/

.trx-map-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.10);

    border:8px solid #fff;

    margin-bottom:45px;

    transition:.35s;

}

.trx-map-wrapper:hover{

    transform:translateY(-6px);

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

}

.trx-map-wrapper iframe{

    width:100%;

    height:520px;

    border:0;

    display:block;

}


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

.trx-location-info{

    display:grid;

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

    gap:30px;

}

.trx-location-card{

    background:#fff;

    padding:35px 30px;

    border-radius:14px;

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

    display:flex;

    align-items:flex-start;

    gap:18px;

    transition:.35s;

    border-top:4px solid transparent;

}

.trx-location-card:hover{

    transform:translateY(-8px);

    border-color:#b83330;

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

}


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

.trx-location-icon{

    width:65px;

    height:65px;

    min-width:65px;

    border-radius:50%;

    background:#fcf3f2;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.trx-location-icon i{

    color:#b83330;

    font-size:24px;

}

.trx-location-card:hover .trx-location-icon{

    background:#b83330;

}

.trx-location-card:hover .trx-location-icon i{

    color:#fff;

}


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

.trx-location-content h4{

    font-size:22px;

    color:#17171d;

    margin-bottom:10px;

}

.trx-location-content p{

    font-size:16px;

    color:#666;

    line-height:1.8;

}

/*==================================================
        TRANZIX LOCATION
            RESPONSIVE
==================================================*/


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

@media (max-width:1200px){

    .trx-location-heading h2{

        font-size:46px;

    }

    .trx-map-wrapper iframe{

        height:470px;

    }

}


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

@media (max-width:992px){

    .trx-location{

        padding:80px 0;

    }

    .trx-location-heading{

        margin-bottom:45px;

    }

    .trx-location-heading h2{

        font-size:40px;

    }

    .trx-location-info{

        grid-template-columns:1fr;

        gap:20px;

    }

    .trx-map-wrapper iframe{

        height:420px;

    }

}


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

@media (max-width:768px){

    .trx-location{

        padding:70px 0;

    }

    .trx-location .trx-container{

        padding:0 20px;

    }

    .trx-location-heading{

        margin-bottom:35px;

    }

    .trx-location-heading h2{

        font-size:34px;

        line-height:1.2;

    }

    .trx-location-heading p{

        font-size:16px;

    }

    .trx-map-wrapper{

        border-radius:12px;

        margin-bottom:30px;

    }

    .trx-map-wrapper iframe{

        height:360px;

    }

    .trx-location-card{

        padding:28px 24px;

    }

}


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

@media (max-width:480px){

    .trx-location{

        padding:60px 0;

    }

    .trx-location .trx-container{

        padding:0 15px;

    }

    .trx-location-heading h2{

        font-size:28px;

    }

    .trx-location-heading p{

        font-size:15px;

    }

    .trx-map-wrapper iframe{

        height:280px;

    }

    .trx-location-card{

        padding:22px 18px;

        gap:15px;

    }

    .trx-location-icon{

        width:55px;

        height:55px;

        min-width:55px;

    }

    .trx-location-icon i{

        font-size:20px;

    }

    .trx-location-content h4{

        font-size:18px;

    }

    .trx-location-content p{

        font-size:14px;

        line-height:1.7;

    }

}

@media(max-width:768px){

    .trx-map-floating{

        position:static;

        width:100%;

        margin-bottom:20px;

        padding:22px;

    }

}

@media(max-width:480px){

    .trx-map-floating{

        padding:18px;

    }

    .trx-map-floating h4{

        font-size:18px;

    }

    .trx-direction-btn{

        width:100%;

        justify-content:center;

    }

}









































/*=========================================
        TRANZIX CONTACT SECTION
=========================================*/

.trx-contact-section{

    padding:100px 0;

    background:#f8f9fc;

}

.trx-contact-wrapper{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:40px;

    align-items:start;

}

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

.trx-contact-tag{

    display:inline-block;

    color:#b83330;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.trx-contact-left h2{

    font-size:52px;

    line-height:1.15;

    font-weight:700;

    color:#181818;

    margin-bottom:20px;

}

.trx-contact-left h2 span{

    color:#b83330;

}

.trx-contact-left>p{

    color:#666;

    font-size:17px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:35px;

}

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

.trx-service-grid{

    display:grid;

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

    gap:18px;

}

.trx-service-box{

    background:#fff;

    border-radius:14px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:.35s;

    border:1px solid #ececec;

}

.trx-service-box:hover{

    transform:translateY(-6px);

    border-color:#b83330;

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

}

.trx-service-box i{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fcf3f2;

    color:#b83330;

    font-size:22px;

}

.trx-service-box h5{

    font-size:18px;

    margin-bottom:6px;

    color:#181818;

}

.trx-service-box p{

    color:#777;

    font-size:14px;

}

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

.trx-contact-support{

    margin-top:30px;

    display:flex;

    align-items:center;

    gap:20px;

    background:#181818;

    border-radius:16px;

    padding:24px 30px;

}

.trx-support-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#b83330;

    color:#fff;

    font-size:24px;

}

.trx-contact-support h4{

    color:#fff;

    margin-bottom:8px;

}

.trx-contact-support p{

    color:#d8d8d8;

    line-height:1.7;

    font-size:15px;

}

/*=========================================
            FORM
=========================================*/

.trx-contact-form{

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.trx-contact-form h3{

    font-size:34px;

    margin-bottom:10px;

    color:#181818;

}

.trx-contact-form>p{

    color:#777;

    margin-bottom:28px;

}

.trx-form-grid{

    display:grid;

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

    gap:16px;

    margin-bottom:16px;

}

/*=========================================
            INPUTS
=========================================*/

.trx-input-group input,

.trx-input-group select,

.trx-input-group textarea{

    width:100%;

    border:1px solid #e8e8e8;

    background:#fafafa;

    border-radius:10px;

    padding:14px 16px;

    font-size:15px;

    outline:none;

    transition:.35s;

    font-family:inherit;

}

.trx-input-group input:focus,

.trx-input-group select:focus,

.trx-input-group textarea:focus{

    border-color:#b83330;

    background:#fff;

}

.trx-input-group textarea{

    height:110px;

    resize:none;

    margin-bottom:20px;

}

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

.trx-submit-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:10px;

    background:#b83330;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    transition:.35s;

}

.trx-submit-btn:hover{

    background:#181818;

}

.trx-submit-btn i{

    transition:.35s;

}

.trx-submit-btn:hover i{

    transform:translateX(6px);

}

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

@media(max-width:1200px){

    .trx-contact-left h2{

        font-size:44px;

    }

}


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

@media(max-width:992px){

    .trx-contact-section{

        padding:80px 0;

    }

    .trx-contact-wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

    .trx-contact-form{

        max-width:700px;

        margin:auto;

        width:100%;

    }

}


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

@media(max-width:768px){

    .trx-contact-left{

        text-align:center;

    }

    .trx-contact-left h2{

        font-size:36px;

    }

    .trx-contact-left>p{

        max-width:100%;

    }

    .trx-service-grid{

        grid-template-columns:1fr;

    }

    .trx-contact-support{

        text-align:left;

    }

    .trx-form-grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:576px){

    .trx-contact-section{

        padding:65px 0;

    }

    .trx-contact-left h2{

        font-size:30px;

    }

    .trx-contact-form{

        padding:25px;

        border-radius:16px;

    }

    .trx-contact-form h3{

        font-size:28px;

    }

    .trx-service-box{

        padding:18px;

    }

    .trx-contact-support{

        padding:20px;

    }

}


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

@media(max-width:480px){

    .trx-contact-left h2{

        font-size:27px;

        line-height:1.3;

    }

    .trx-contact-left>p{

        font-size:15px;

    }

    .trx-service-box{

        gap:15px;

    }

    .trx-service-box i{

        width:50px;

        height:50px;

        font-size:18px;

    }

    .trx-service-box h5{

        font-size:16px;

    }

    .trx-service-box p{

        font-size:13px;

    }

    .trx-support-icon{

        width:55px;

        height:55px;

        font-size:20px;

    }

    .trx-contact-support h4{

        font-size:18px;

    }

    .trx-contact-support p{

        font-size:14px;

    }

    .trx-input-group input,

    .trx-input-group select,

    .trx-input-group textarea{

        padding:13px 14px;

        font-size:14px;

    }

    .trx-submit-btn{

        height:52px;

        font-size:16px;

    }

}