/* ================= navbarCustom================= */


.navbarCustom {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    height: 70px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
}

.navCustom-container {

    max-width: 1400px;
    width: 92%;

    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
}




/* LOGO */

.logo img {

    width: 180px;

    display: block;

}

/* menuCustom */

.dropdown-menuCustom a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
}

.dropdown-menuCustom a i {
    width: 18px;
    text-align: center;
    color: #174b8a;
    font-size: 15px;
    transition: .3s;
}

.dropdown-menuCustom a span {
    flex: 1;
}

.dropdown-menuCustom a:hover i {
    transform: scale(1.15);
}


.menuCustom {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 28px;

}



.menuCustom>a,
.navCustom-dropdown>a {

    color: #333;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 7px;

    transition: .3s;
}


.menuCustom a:hover {

    color: #0066cc;

}

/* DROPDOWN */
.navCustom-dropdown {

    position: relative;

}

.dropdown-menuCustom {

    position: absolute;

    top: 35px;

    left: 0;

    background: white;

    width: 220px;

    padding: 15px 0;

    border-radius: 12px;

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

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .3s;


}

.dropdown-menuCustom a {

    display: block;

    padding: 12px 20px;

    color: #444;

    text-decoration: none;

    font-size: 14px;

}

.dropdown-menuCustom a:hover {

    background: #f1f7ff;

    color: #0066cc;

}




.navCustom-dropdown:hover .dropdown-menuCustom {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* SEARCH */


.search-box {


    display: flex;

    align-items: center;

    gap: 8px;

    border: 1px solid #ddd;

    padding: 8px 14px;

    border-radius: 25px;


}



.search-box input {


    border: 0;

    outline: 0;

    width: 100px;

    font-family: Poppins;


}




/* LANGUAGE */

.language-wrapper {
    position: relative;
}

.language {
    display: flex;
    align-items: center;
    gap: 7px;

    border: none;
    background: transparent;

    color: #174b8a;

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.language i:first-child {
    font-size: 17px;
}

.language i:last-child {
    font-size: 10px;
    margin-left: 2px;
    transition: .3s ease;
}

.language-wrapper.active .language i:last-child {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 170px;

    padding: 8px;

    background: #fff;

    border-radius: 12px;

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition: .25s ease;

    z-index: 9999;
}

.language-wrapper.active .language-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-menu a {
    display: block;

    padding: 11px 13px;

    border-radius: 8px;

    color: #174b8a;

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    transition: .2s ease;
}

.language-menu a:hover {
    background: #eef5fb;
}

.language-menu a.active {
    background: #174b8a;
    color: #fff;
}

.language {


    border: 0;

    background: #174b8a;

    color: white;

    padding: 11px 20px;

    border-radius: 25px;

    display: flex;

    align-items: center;

    gap: 8px;

}





/* MOBILE BUTTON */


.mobile-toggle {


    display: none;

    border: 0;

    background: none;

    font-size: 30px;

}





/* RESPONSIVE */


@media(max-width:1100px) {


    .navCustom-container {

        width: 90%;

    }



    .menuCustom {

        position: absolute;

        top: 85px;

        left: 0;

        width: 100%;

        background: white;

        padding: 25px;

        display: none;

        flex-direction: column;

        align-items: flex-start;

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

    }



    .menuCustom.active {

        display: flex;

    }



    .mobile-toggle {

        display: block;

        margin-left: auto;

    }



    .navCustom-dropdown {

        width: 100%;

    }



    .dropdown-menuCustom {

        position: static;

        display: none;

        box-shadow: none;

        width: 100%;

    }



    .navCustom-dropdown:hover .dropdown-menuCustom {

        display: block;

    }



    .search-box {

        width: 100%;

    }


    .search-box input {

        width: 100%;

    }



}

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


.topbar {

    height: 38px;

    background: #174b8a;

    color: white;

    font-size: 12px;

}



.topbar-container {


    width: 85%;

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;


}



.top-left,
.top-right {


    display: flex;

    align-items: center;

    gap: 15px;


}



.top-left span {


    background: #fdd100;

    padding: 5px 12px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 7px;


}



.top-left a {


    color: white;

    text-decoration: none;

    transition: .3s;


}



.top-left a:hover {

    color: #8de2b1;

}




.top-right span {


    display: flex;

    align-items: center;

    gap: 6px;

    border-right: 1px solid rgba(255, 255, 255, .3);

    padding-right: 15px;


}



.top-right a {


    color: white;

    text-decoration: none;

    background: #fdd100;

    padding: 5px 15px;

    border-radius: 20px;


}

.top-right a:hover {


    background: white;

    color: #174b8a;


}

@media(max-width:1100px) {


    .topbar {

        display: none;

    }


}