@font-face {
    font-family: 'Bricksram Regular';
    src: url("../../assets-home/bricksram_font/Bricksram-Regular.otf");
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url("/assets-home/font/roboto/Roboto-Regular.woff");
    font-display: swap;
}

@font-face {
    font-family: 'Poppins-Regular';
    src: url("/assets-home/font/poppins/Poppins-Regular.ttf");
    font-display: swap;
}

header {
    position: fixed;
    height: auto;
    width: 100%;
    z-index: 100;
}

.logo-new {
    max-width: 50% !important;
    margin-top: -8px;
}

body.offcanvas-active {
    overflow: hidden;
}

.offcanvas-header {
    display: none;
}

.screen-darken.active {
    z-index: 10;
    transition: opacity .3s ease, width 0s;
    opacity: 1;
    width: 100%;
    visibility: visible;
}

.navbar-bg {
    background-color: #ffffff !important;
}
#navbar_main {
    padding-bottom: 1rem;
}
.topNav {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 0;
    justify-content: space-between;
    padding: 0px 4%;
    /* background-color: #0166ff; */
    background-color: #f05343;
    color: #fff;
    font-family: 'Poppins-Regular', sans-serif;
}
.promo-bar__slide-content p {
    margin-bottom: 0;
}
.promo-bar__slide-content p strong {
    color: #fff;
    font-size: .81rem !important;
    /* margin-left: -3px;
    margin-right: -3px; */
    font-weight: 700;
}
.p--small {
    font-size: .81rem;
}
.p--bold {
    font-weight: 700;
}
.promo-bar__slide-content {
    width: 100%;
    padding: 10px 40px;
    line-height: 16px;
    letter-spacing: 0.25px;
}
/* Swiper navigation buttons */
.swiper-button-prev, .swiper-button-next {
    color: #fff !important;
    position: absolute !important;
    top: 88% !important;
    transform: translateY(-50%);
    font-size: 18px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.swiper-button-prev {
    left: 0 !important;
}
.swiper-button-next {
    left: 95% !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: 700 !important;
}
.swiper-button-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.topNav_container {
    /* justify-content: space-between; */
    /* margin: 0 auto; */
    max-width: 1475px;
    min-height: 31px;
    width: 33%;
    margin-right: auto;
    /* align-items: center; */
}
.topNav ul {
    display: flex;
    gap: 2.6em;
    float: right;
    font-family: 'Roboto-Regular';
    font-size: 15px;
    padding: 9px;
}

.topNav ul a li {
    text-decoration: none;
    color: #000;
    text-align: center;
}

.topNav ul a li:hover {
    text-decoration: none !important;
    color: #000;
}

a {
    text-decoration: none !important;
}

.topNav_button {
    background-color: #FFBF00;
    border: 2.5px solid transparent;
    padding: 5px 20px;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.1em;
    text-shadow: 0 0 0 transparent;
    font-size: 14px;
    cursor: pointer;
    font-family: 'Roboto-Regular';
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    border-radius: 44px;
}

/* for wordpress header */
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image:  none !important;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: none !important;
}
/* for wordpress header */

.user_icon {
    color: #000;
    font-size: 23px !important;
    position: relative;
    top: 0px;
}
.user_icon1 {
    color: #000;
    font-size: 23px !important;
    position: relative;
    top: 0px;
}
.bag_icon {
    color: #000;
    font-size: 25px !important;
    position: relative;
    top: 6px;
}
.navbar {
    display: block !important;
    padding-top: 0px !important;
}
.logo-new {
    max-width: 50% !important;
    margin-top: 6px;
}

.only-mob-tab {
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        display: contents;
    }
}
.navbar-dark .navbar-nav .nav-link {
    font-family: 'Roboto-Regular';
    font-size: 13px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 400;
    color: rgb(40, 40, 40) !important;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(40, 40, 40) !important;
}
.navbar-dark .navbar-nav .nav-link {
    position: relative;
    top: 9px; /*added on 19/05/2025*/
}
.navbar-dark .navbar-nav .nav-link::after  {
    /* content: ''; */
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0.1rem;
    background-color: rgb(40 40 40/ 9%);
    transition: width 0.25s ease;
}
.navbar-dark .navbar-nav .nav-link:hover::after {
    width: 100%;
}
.dropdown-menu li.listborder {
    border-bottom: 1px solid transparent; 
    transition: border-color 0.25s ease; 
}
.dropdown-menu li.listborder:hover {
    border-bottom-color: rgb(40 40 40/ 9%); 
}
li.listborder.nav-link {
    line-height: 4px;
}
li.listborder.nav-link a.dropdown-item {
    letter-spacing: 0;
}
.dropdown-menu {
    margin-top: 0; 
}
.dropdown-menu.show {
    display: block;
}
.navbar-expand-lg .navbar-nav .dropdown:hover .dropdown-menu {
    display: block; 
}





.navbar-dark .navbar-brand {
    color: #000000 !important;
}

.badge {
    padding: 0.2rem !important;
    position: absolute;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    border: none;
    left: 0;
    right: auto;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: .4rem 0rem !important;
    clear: both;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #000000;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-family: 'Roboto-Regular' !important;
}
.dropdown-item.active,
.dropdown-item:hover {
    color: rgb(40, 40, 40);
    text-decoration: none;
    background-color: transparent !important;
}


.btn-close {
    color: #ffffff;
    margin-top: 7px;
    font-size: 12px;
    position: relative;
    right: 7px;
}

.badge {
    transform: translateY(-10px);
}

.only-mob-tab {
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
}

#logo-blk {
    text-align: center;
    margin-top: 6px;
}

.logo-new2 {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 12px;
    width: 54%;
    height: auto;
}

@media (max-width: 767px) {
    .topNav_container {
        width: 100%;
    }
    .promo-bar__slide-content {
        padding: 10px 40px;
    }
    .logo-new {
        display: none;
    }
    .hideonmobile {
        display: none !important;
    }

    .hideondesktop {
        display: block !important;
    }
    .act_btn {
        position: relative;
        top: 2px;
        left: 22px;
    }
    .user_icon {
        color: #000;
        font-size: 20px !important;
        position: relative;
        top: 3px;/*2*/
        left: 29px;
    }
    .user_icon1 {
        color: #000;
        font-size: 20px !important;
        position: relative;
        top: 2px;
        left: 29px;
        display: none !important;
    }
    .bag_icon {
        color: #000;
        font-size: 20px !important;
        position: relative;
        top: 1px;
        left: 46px;
    }
    li.nav-item {
        border-bottom: 0.01rem solid rgb(210, 213, 217);
    }
    .navbar-dark .navbar-nav .nav-link { 
        color: rgb(86, 127, 136);
        font-size: 16px;
        letter-spacing: .05em;
        text-transform: initial;
    }
    .arrow_prod {
        height: 0.94rem;
        width: 0.94rem;
        margin-inline-end: -13rem;
        float: right;
        color: rgb(86, 127, 136) !important;
        position: relative;
        top: 20px;
    }
    .arrow_plat {
        height: 0.94rem;
        width: 0.94rem;
        margin-inline-end: -9rem;
        float: right;
        color: rgb(86, 127, 136) !important;
        position: relative;
        top: 20px;
    }
    .arrow_faq {
        height: 0.94rem;
        width: 0.94rem;
        margin-inline-end: -16rem;
        float: right;
        color: rgb(86, 127, 136) !important;
        position: relative;
        top: 20px; 
    }
    .arrow_qsg {
        height: 0.94rem;
        width: 0.94rem;
        margin-inline-end: -16rem;
        float: right;
        color: rgb(86, 127, 136) !important;
        position: relative;
        top: 20px; 
    }
    .navbar-dark .navbar-nav .nav-link {
        display: contents;
        line-height: 61px;
    }
    .listborder { 
        border: none !important;
    }
    #product_main, #platform_main, #faq_main, #qsg_main {
        margin-top: 75px;
        width: 100%;
    }
    .mobile-item {
        color: rgb(86, 127, 136) !important;
        border-left: 1px solid rgb(210, 213, 217);
        font-size: 16px;
        padding-left: 19px;
        margin-left: 41px;
        font-family: 'Roboto-Regular';
    }
    .back_arrow {
        float: left;
    }
    .product_arrow, .platform_arrow, .faq_arrow, .qsg_arrow {
        float: left;
        height: 2.5rem;
        width: 1.5rem;
        transform: rotate(180deg);
    }
    li.listborder.nav-link a.dropdown-item {
        letter-spacing: 0;
        border-bottom: 1px solid rgb(210, 213, 217);
        color: rgb(86, 127, 136) !important;
        font-size: 14px !important;
        line-height: 37px;
    }
    .header__icon  {
        height: 1.25rem;
        width: 1.25rem;
        fill: none;
        vertical-align: middle;
        transition: transform .25s ease;
        will-change: transform;
        margin-left: 7px;
        position: absolute;
        margin-top: 2px;/*7*/
    }
    .icon-close {
        position: relative;
        width: 1.75em;
        height: 1.75em;
    }
    .icon-hamburger {
        display: block;
        position: absolute;
        opacity: 1;
        transform: scale(1);
        transition-property: transform,opacity;
        transition-timing-function: ease;
        transition-duration: var(--duration-default);
        stroke-width: calc(calc(1.5px * 2) - 0.4px);
    }
    .offcanvas-header {
        color: rgb(86, 127, 136);
        position: relative;
        transform: translate(-100%);
        /* visibility: hidden; */
        z-index: 100;
        left: 59px;
        top: 15px;
        width: calc(100% - 4rem);
        padding: 0;
        background-color: rgb(238 238 238);
        border-radius: 50px;
        height: 33px;
        width: 33px;
        overflow-x: hidden;
    }
    .togglemargin {
        line-height: 52px !important;
        font-family: 'Roboto-Regular';
    }
}





/* ============ mobile view ============ */

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 0;
        padding-right: 0;
    }

    .only-mob-tab {
        display: none;
        visibility: hidden;
        opacity: 0;
    }

    .dropdown-menu {
        padding: 10px 18px !important;
    }
}

@media all and (max-width: 991px) {
    .badge {
        top: 20px;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        text-align: center;
        max-width: 220px;
        margin: auto;
    }

    .listborder {
        border: solid 1px #ccc;
    }

    .offcanvas-header {
        display: block;
    }

    .mobile-offcanvas {
        visibility: hidden;
        transform: translateX(-100%);
        border-radius: 0;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1200;
        width: 90%;
        overflow-y: scroll;
        overflow-x: hidden;
        transition: visibility .3s ease-in-out, transform .3s ease-in-out;
    }

    .mobile-offcanvas.show {
        visibility: visible;
        transform: translateX(0);
        background-color: #fff !important;
    }

    .mobile-offcanvas .container,
    .mobile-offcanvas .container-fluid {
        display: block;
    }

    .vertical-center-container {
        /* height: 100%; */
        display: -webkit-box !important;
        text-align: center;
    }

    .vertical-center-sec {
        vertical-align: middle;
        margin: auto;
        text-align: center;
        width: 100%;

        vertical-align: middle;
        margin: auto;
        text-align: left;
        width: 100%;
        padding: 0 0 0 20px;/*8*/
        line-height: 42px;
        border-top: 1px solid rgb(210, 213, 217);
        margin-top: 60px;/*60*/
    }

    .only-desk {
        display: none;
        visibility: hidden;
        opacity: 0;
    }

    .loginbtn {
        background-color: #fece00 !important;
        border-color: #fece00 !important;
        padding: 4px 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        font-family: 'Roboto-Regular';
    }

    .activateNowbtn {
        background-color: #0b5dc1 !important;
        border-color: #0b5dc1 !important;
        padding: 4px 4px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        font-family: 'Roboto-Regular';
    }
}

@media all and (min-width: 350px) and (max-width: 1024px) {
    .togglemargin {
        font-family: 'Roboto-Regular';
        /* color: rgb(86, 127, 136); */
        font-size: 16px;
        letter-spacing: .05em;
        text-transform: initial;
        line-height: 52px !important;
    }
}

@media (min-width : 768px) and (max-width:1024px) {
    .hideonipad {
        display: none;
    }

    .hideonipadpro {
        display: none !important;
    }

    .hideonmobile {
        display: block;
    }

    .side-btn span {
        font-size: 40px;
    }

    .approved_img {
        width: 100%;
    }

    .footer_topimg {
        float: right;
        width: 100%;
    }

    .footer_address p {
        font-size: 11px;
    }

    .mobile-img {
        max-width: 23% !important;
        margin-top: -50px !important;
    }
}

@media (max-width:767px) {
    .hideonmobile {
        display: none;
    }

    .hideonipad {
        display: block;
    }

    .hideonipadpro {
        display: block;
    }

    .hideondesktop {
        display: block;
    }
}

/* ============ mobile view .end// ============ */

.cookie-banner {
    position: fixed;
    bottom: 40px;
    left: 10%;
    right: 10%;
    width: 80%;
    padding: 5px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eee;
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.close {
    height: 20px;
    background-color: #777;
    border: none;
    color: white;
    border-radius: 2px;
    cursor: pointer;
}

@media all and (min-width: 350px) and (max-width: 768px) {
    /* .vertical-center-container {
        height: 100% !important;
    } */
}

@media all and (max-width: 991px) {
    .vertical-center-container {
        /* height: 100% !important; */
        width: 120%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        right: 14px;
    }
}

/****Footer style**/
.site-footer {
    background-color: #292929 !important;
}

.footer-head {
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    font-family: 'Roboto-Regular';
    font-size: 16px;
    font-weight: 700;
    padding: 7px 0;
}

.logo-new {
    max-width: 80%;
}

.logo-new1 {
    max-width: 100%;
}

.footer-subhead {
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    font-family: 'Roboto-Regular';
    font-size: 16px;
    font-weight: 700;
    padding: 8px 0 2px 0;
    margin: 0 0;
}

.footer-subhead a,
.footer-subhead a:hover {
    color: #000033;
    text-align: left;
    font-family: 'Roboto-Regular';
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 0 2px 0;
    margin: 0 0;
    text-decoration: none;
}

.footer-desc {
    text-decoration: none;
    text-align: left;
    font-family: 'Roboto-Regular';
    font-size: 15px;
    font-weight: 500;
}

.footer-desc a,
.footer-desc a:hover {
    text-align: left;
    font-family: 'Roboto-Regular';
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.grey-text {
    color: #555555;
    text-decoration: none;
}

ul.footer-desc {
    list-style-type: none;
    padding-left: 0
}

.align-social-icons {
    margin: 10px auto auto 20px;
    text-align: left;
}

.company-show.show3 {
    display: block;
}

.company-show.hide {
    display: none;
}

.company-show {
    display: none;
}

.product-show.show4 {
    display: block;
}

.product-show {
    display: none;
}

.account-show.show5 {
    display: block;
}

.account-show {
    display: none;
}

.policy-show.show6 {
    display: block;
}

.policy-show {
    display: none;
}

.shop-show.show7 {
    display: block;
}

.shop-show {
    display: none;
}

.product-show li a {
    font-size: 15px !important;
}

.address-show li a {
    font-size: 15px !important;
}

.contact-show li a {
    font-size: 15px !important;
}

.footer-col span.rotate {
    transform: translateY(3%) rotate(-180deg);
}

.footer_address h6 {
    color: #fff;
    font-size: 18px;
    font-family: 'Roboto-Regular';
}

.footer_address p {
    font-family: 'Roboto-Regular';
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 0;
    text-align: initial;
}

.footer_address p a {
    color: #fff !important;
}

.footer-desc-img {
    display: flex;
}

footer .container {
    max-width: 1242px;/*1351*/
    margin: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

ul {
    list-style: none;
}

.footer {
    padding: 60px 0 1px;
    display: block;
}

.footer-col {
    width: 16% !important;
    padding: 0 15px;
}

.footer-col a {
    text-decoration: none !important;
}

.footer a {
    text-decoration: none !important;
}

.footer-col h4 {
    font-size: 14px;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 600;
    position: relative;
    font-family: 'Roboto-Regular';
    margin-top: 10px;
}

.footer-col h4::before {
    /* content: ''; */
    position: absolute;
    left: 0;
    bottom: -10px;
    background: linear-gradient(#f9f7f5, #f9f7f5) padding-box, linear-gradient(45deg, #04a7cc, #7b8bc6) border-box;
    border: 1px solid transparent;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}

.footer-col ul li:not(:last-child) {
    margin-bottom: 10px;
}

.footer-col ul li a {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    transition: all 0s ease;
}

.footer-col .social-links a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0s ease;
}

.footer-col .social-links a:hover {
    color: #24262b;
    background-color: #ffffff;
}

.logo-new1 {
    margin: 0 13px;
}

.footer_container {
    max-width: 1512px !important;
}

.rated_text {
    font-family: 'Roboto-Regular';
    background: white;
    color: black;
    width: auto;
    text-align: center;
    width: 41%;
    margin: 14px 0;
    padding: 2px;
    border: 2px solid #555;
    border-radius: 3px;
    font-weight: 700;
    box-shadow: -2px 6px 5px 1px rgba(0, 0, 0, 0.1);
}

.footer_thintext {
    color: #fff;
    font-size: 10px !important;
    margin-top: 8px;
    font-family: 'Roboto-Regular';
    text-align: center;
    position: relative;
    left: 66px;
}

.last_footer {
    color: #fff;
    font-size: 10px !important;
    font-family: 'Roboto-Regular';
    float: right;
}

.footer_topimg {
    float: right;
}

.logo_img {
    margin: 0 2px;
}

.footer-desc a,
.footer-desc a:hover {
    line-height: 22px;
    font-weight: 300;
    transition: color 0s ease;
}

.footer-desc {
    color: #bbbbbb !important;
}

.site-footer {
    background-color: #000 !important;
}

footer {
    background-color: #000 !important;
}

hr {
    height: 1px !important;
    color: #fff !important;
    margin-bottom: 7px !important;
}

.hr1 {
    height: 1px;
    color: #fff;
    margin-top: -9px;
}

.copyright_text p {
    color: #fff;
    text-decoration: none;
    font-family: 'Roboto-Regular';
    font-size: 13px;
    font-weight: normal;
}

.social-med-footer {
    max-width: 40px;
    margin: 0 13px;
}


/***responsive for footer***/
@media(max-width: 767px) {
    .footer-col {
        width: 50%;
        margin-bottom: 30px;
    }

    .footer-col {
        width: 20%;
        padding: 0 16px 0 54px !important;
        /* padding: 0 40px 0 94px !important; */
    }

    .copyright_text {
        margin: 0 25px;
    }

    .rated_text {
        width: 90% !important;
    }

    .footer_thintext {
        margin-top: 0 !important;
        text-align: left !important;
        left: 0px !important;
        width: 48%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .footer_address {
        padding: 0 23px;
    }

    .footer_address p {
        margin-bottom: 17px;
        margin-top: -2px;
    }

    .footer-col h4 {
        margin-top: -17px;
        margin-bottom: 9px;
    }

    hr {
        margin-bottom: 36px !important;
    }

    .approved_img {
        width: 68%;
        margin-bottom: 25px;
    }

    .logo-new1 {
        margin: 5px 85px !important;
        width: 43% !important;
        margin-bottom: 9px;
    }

    .logo_img {
        margin: 0 2px;
        width: 13% !important;
    }

    .last_footer {
        float: none !important;
        text-align: center;
    }

    ul.footer-desc {
        display: none;
    }

    .footer-col h4::before {
        height: 0;
        background: transparent;
    }

    .sidebar ul li {
        line-height: 43px !important;
    }
}

@media(max-width: 574px) {
    .footer-col {
        width: 100% !important;
        /* width: 46% !important; */
    }
}

/***Footer style end***/

.hideondesktop {
    display: none;
}