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

:root{

    --trx-primary:#b83330;
    --trx-dark:#222222;
    --trx-white:#ffffff;
    --trx-border:rgba(255,255,255,.08);

}

/*==================================
        HEADER
==================================*/

.trx-header{

    width:100%;

    position:absolute;

    left:0;

    top:0;

    z-index:9999;

}

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

.trx-topbar{

    width:100%;

    height:56px;

    background:rgba(22,22,22,.88);

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

}

.trx-topbar .trx-container{

    max-width:1320px;

    margin:auto;

    height:100%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding:0 15px;

}

.trx-topbar-right{

    display:flex;

    align-items:center;

}

.trx-top-item{

    height:56px;

    padding:0 34px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:17px;

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

    transition:.35s;

}

.trx-top-item span{

    color:var(--trx-primary);

    font-weight:600;

}

.trx-top-item:hover{

    color:var(--trx-primary);

}

/*==================================
        NAVBAR
==================================*/

.trx-navbar{

    width:100%;

    height:92px;

    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 100%);

    backdrop-filter:blur(4px);

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


    overflow:visible;

}

.trx-navbar .trx-container{

    max-width:1320px;

    margin:auto;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 15px;

}

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

.trx-logo{

    display:flex;

    align-items:center;

}

.trx-logo img{

    height:54px;

    width:auto;

    display:block;

}

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

.trx-nav-menu{

    list-style:none;

    display:flex;

    align-items:center;

    gap:58px;

    margin:0;

    padding:0;

}

.trx-nav-menu>li{

    position:relative;

}

.trx-nav-menu>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#fff;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}

.trx-nav-menu>li>a i{

    font-size:13px;

}

.trx-nav-menu>li:hover>a{

    color:var(--trx-primary);

}

.trx-nav-menu>li.active>a{

    color:var(--trx-primary);

}

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

.trx-sign-btn{

    width:115px;

    height:50px;

    border-radius:6px;

    background:var(--trx-primary);

    color:#fff;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.trx-sign-btn:hover{

    background:#ffffff;
    

}

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

.trx-mobile-toggle{

    width:48px;

    height:48px;

    border:none;

    background:none;

    display:none;

    cursor:pointer;

}

.trx-mobile-toggle span{

    display:block;

    width:28px;

    height:3px;

    margin:5px auto;

    background:#fff;

    border-radius:30px;

}

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


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

.trx-dropdown{

    position:relative;

}

.trx-dropdown-box{

    position:absolute;

    left:0;

    top:160%;

    width:270px;

    background:#fff;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

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

    z-index:999;

}

.trx-dropdown:hover .trx-dropdown-box{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.trx-dropdown-box ul{

    margin:0;

    padding:18px 0;

    list-style:none;

}

.trx-dropdown-box li{

    border-bottom:1px solid #f2f2f2;

}

.trx-dropdown-box li:last-child{

    border-bottom:none;

}

.trx-dropdown-box a{

    display:block;

    padding:15px 28px;

    color:#222;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.trx-dropdown-box a:hover{

    color:#b83330;

    padding-left:38px;

}



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

.trx-mobile-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.trx-mobile-overlay.active{

    opacity:1;

    visibility:visible;

}



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

.trx-mobile-menu{

    position:fixed;

    top:0;

    left:-340px;

    width:320px;

    height:100vh;

    background:#222;

    overflow:auto;

    transition:.35s;

    z-index:9999;

    padding:25px;

}

.trx-mobile-menu.active{

    left:0;

}



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

.trx-mobile-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.trx-mobile-top img{

    height:38px;

    display:block;

}

.trx-mobile-top a{

    display:flex;

    align-items:center;

    background:#ffffff;

    padding:8px 14px;

    border-radius:8px;

}

.trx-close-menu{

    width:42px;

    height:42px;

    border:none;

    background:#b83330;

    color:#fff;

    border-radius:5px;

    cursor:pointer;

}



/*==================================
        MOBILE MENU LIST
==================================*/

.trx-mobile-nav{

    margin:0;

    padding:0;

    list-style:none;

}

.trx-mobile-nav>li{

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

}

.trx-mobile-nav a,

.trx-mobile-link{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:17px 0;

    color:#fff;

    text-decoration:none;

    background:none;

    border:none;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

}



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

.trx-mobile-sub{

    display:none;

    list-style:none;

    padding:0 0 10px 18px;

}

.trx-mobile-sub li{

    margin:10px 0;

}

.trx-mobile-sub a{

    color:#d7d7d7;

    font-size:15px;

    padding:6px 0;

}

.trx-mobile-sub a:hover{

    color:#b83330;

}



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

.trx-mobile-btn{

    width:100%;

    height:54px;

    margin-top:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#b83330;

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    border-radius:6px;

}

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


/*==============================
        STICKY NAVBAR
==============================*/

.trx-header.sticky{

    position:fixed;

    top:0;
    left:0;
    width:100%;

    animation:trxSticky .4s ease;

}

.trx-header.sticky .trx-topbar{

    display:none;

}

.trx-header.sticky .trx-navbar{

    background:#ffffff;

    height:82px;

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

}

.trx-header.sticky .trx-nav-menu>li>a{

    color:#1a1a1a;

}

.trx-header.sticky .trx-nav-menu>li:hover>a,
.trx-header.sticky .trx-nav-menu>li.active>a{

    color:var(--trx-primary);

}

.trx-header.sticky .trx-mobile-toggle span{

    background:#1a1a1a;

}

@keyframes trxSticky{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}



/*==============================
        LARGE SCREEN
==============================*/

@media(max-width:1400px){

    .trx-topbar .trx-container,
    .trx-navbar .trx-container{

        max-width:1180px;

    }

    .trx-nav-menu{

        gap:42px;

    }

}



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

@media(max-width:1200px){

    .trx-nav-menu{

        gap:28px;

    }

    .trx-nav-menu a{

        font-size:16px;

    }

    .trx-sign-btn{

        width:125px;

        height:58px;

        font-size:16px;

    }

}



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

@media(max-width:992px){

    .trx-topbar{

        display:none;

    }

    .trx-navbar{

        height:80px;

    }

    .trx-navbar .trx-container{

        justify-content:space-between;

    }

    .trx-logo img{

        height:46px;

    }

    .trx-nav-menu{

        display:none;

    }

    .trx-sign-btn{

        display:none;

    }

    .trx-mobile-toggle{

        display:block;

    }

}



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

@media(max-width:768px){

    .trx-navbar{

        height:72px;

    }

    .trx-navbar .trx-container{

        padding:0 18px;

    }

    .trx-logo img{

        height:40px;

    }

    .trx-mobile-menu{

        width:300px;

    }

}



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

@media(max-width:480px){

    .trx-navbar{

        height:68px;

    }

    .trx-logo img{

        height:36px;

    }

    .trx-mobile-menu{

        width:280px;

        padding:20px;

    }

}



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

.trx-header *,
.trx-navbar *,
.trx-topbar *{

    box-sizing:border-box;

}

.trx-navbar ul,
.trx-mobile-nav{

    margin:0;

    padding:0;

}

.trx-navbar li,
.trx-mobile-nav li{

    list-style:none;

}

.trx-navbar a{

    text-decoration:none;

}




































































/*=========================================
        PAGE LOADER
=========================================*/

.page-loader-mg{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    background:#b83330;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    z-index:999999999;

    transition:opacity .8s ease,
               visibility .8s ease;

}


/*=================================
        HIDE
==================================*/

.page-loader-mg.loader-hide-mg{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


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

.loader-wrapper-mg{

    position:relative;

    text-align:center;

}


/*=================================
        CIRCLE
==================================*/

.loader-circle-mg{

    width:170px;

    height:170px;

    margin:0 auto 45px;

}

.loader-circle-mg svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}


/*=================================
        CIRCLE BG
==================================*/

.loader-circle-bg-mg{

    fill:none;

    stroke:rgba(255,255,255,.20);

    stroke-width:2;

}


/*=================================
        CIRCLE PROGRESS
==================================*/

.loader-circle-progress-mg{

    fill:none;

    stroke:#fff;

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:327;

    stroke-dashoffset:327;

}


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

.loader-logo-mg{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}


/*=================================
        LETTER
==================================*/

.loader-letter-mg{

    font-size:92px;

    font-weight:300;

    color:#fff;

    letter-spacing:8px;

    opacity:0;

    transform:translateY(40px);

    font-family:Arial,Helvetica,sans-serif;

}


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

.loader-text-mg{

    color:rgba(255,255,255,.85);

    font-size:18px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:500;

}


/*=================================
        CLOSE
==================================*/
.loader-close-mg{

    position:absolute;

    top:30px;

    right:30px;

    width:50px;

    height:50px;

    display:flex;          /* display:none hatao */

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#5f1a19;

    font-size:24px;

    cursor:pointer;

    z-index:9999999;

    transition:all .35s ease;

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

}

.loader-close-mg:hover{

    background:#5f1a19;

    color:#ffffff;

    /* transform:rotate(90deg); */

}



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

@media(max-width:768px){

    .loader-circle-mg{

        width:130px;

        height:130px;

        margin-bottom:35px;

    }

    .loader-letter-mg{

        font-size:56px;

        letter-spacing:4px;

    }

    .loader-text-mg{

        font-size:14px;

    }

}

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

.loader-circle-progress-mg{

    animation:

    loader-circle-draw-mg 1.4s ease forwards,

    loader-circle-rotate-mg 2.5s linear infinite;

}


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

.loader-letter-mg:nth-child(1){

    animation:

    loader-letter-mg .5s ease forwards .35s;

}

.loader-letter-mg:nth-child(2){

    animation:

    loader-letter-mg .5s ease forwards .55s;

}

.loader-letter-mg:nth-child(3){

    animation:

    loader-letter-mg .5s ease forwards .75s;

}


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

.loader-text-mg{

    opacity:0;

    animation:

    loader-text-mg .7s ease forwards 1s;

}


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

.loader-wrapper-mg{

    animation:

    loader-float-mg 3s ease-in-out infinite;

}


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

.page-loader-mg::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

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

    border-radius:50%;

    animation:

    loader-bg1-mg 7s linear infinite;

}

.page-loader-mg::after{

    content:"";

    position:absolute;

    width:780px;

    height:780px;

    border:1px solid rgba(255,255,255,.05);

    border-radius:50%;

    animation:

    loader-bg2-mg 10s linear infinite reverse;

}


/*=================================
        KEYFRAMES
==================================*/

@keyframes loader-circle-draw-mg{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes loader-circle-rotate-mg{

    from{

        transform:rotate(0deg);

        transform-origin:center;

    }

    to{

        transform:rotate(360deg);

        transform-origin:center;

    }

}

@keyframes loader-letter-mg{

    from{

        opacity:0;

        transform:

        translateY(35px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}

@keyframes loader-text-mg{

    from{

        opacity:0;

        letter-spacing:10px;

    }

    to{

        opacity:1;

        letter-spacing:3px;

    }

}

@keyframes loader-float-mg{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes loader-bg1-mg{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes loader-bg2-mg{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(-360deg);

    }

}