body,h1,h2,h3,h4,h5,h6{
    font-family: "Fira Sans", sans-serif;
}

p{
    line-height: 25px;
}

.desktop-nav{
    background:#000 !important;
}

.middle-header.middle-header-style-two {
    background: #000;
}

.header-contact-info-desk a {
    color: white;
    font-size: 14px;
}

.col-lg-4 > div.logo > a > img {
    padding: 20px 0;
}

.middle-header .search-box .form-control {
    background: white;
}

.middle-header .search-box > button {
    background-color: #089ccd !important;
    color: white !important;
}

.middle-header .search-box .search-btn {
    padding: 9px 20px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.mainArea .mobileSearchArea > div.row {
    display: none;
}

.header-buttons > .btn-group-header {
    display: flex;
    justify-content: right;
}

.buttons_area_desk {
    margin-left: 10%;
    padding-top: 6px;
}

.buttons_area_desk a {
    padding: 8px 8px;
    border: 1px #fff solid;
    border-radius: 6px;
}

.buttons_area_desk a i {
    color: white;
    font-size: 20px;
}

/* Ensure all icons are visible */
.buttons_area_desk a i.fa {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.buttons_area_desk a.cart,
.buttons_area_desk a.compare {
    position: relative;
}

.buttons_area_desk a.cart span,
.buttons_area_desk a.compare span {
    position: absolute;
    top: -15px;
    right: 0;
    background: #cb0000;
    border-radius: 20px;
    font-size: 12px;
    padding: 0 4px;
    color: white;
}

/* Base styles for contact info only */
.mobileSearchArea > .row a {
    color: white;
}

.mobileSearchArea a {
    color: white;
}

.mobile-cart {
    margin-bottom: 0;
    padding: 0 16px;
}

i.fa.fa-bolt {
    color: #FCC545FF !important;
}

.pc_build {
    border: 3px solid #0083b2;
    border-radius: 4px;
    color: white;
    font-weight: bold;
}

.fa.fa-bolt {
    animation: blinker 2s linear infinite
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
        color: white !important
    }
}


@media only screen and (min-width: 1200px) {
    .slideimgdesk, .promotion {
        height: 500px;
    }



    .slider {
        padding-right: 4px;
    }

    .promotion {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .promotion a > img {
        height: 247px;
    }
}

@media only screen and (max-width: 1199px) {
    .slider {
        padding-right: 4px;
    }

    .slideimgdesk, .promotion {
        height: 400px;
    }

    .promotion {
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .promotion a > img {
        height: 195px;
    }
}

@media only screen and (max-width: 991px) {

    .promotion{
        height:100%;
    }

    .header-contact-info-desk,
    .header-buttons {
        display: none !important;
    }

    .mobile-responsive-nav {
        margin: 6px 0;
    }

    .slider {
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    .promotion {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-top: 4px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        column-gap:2px;
    }

    .promotion a > img {
        height: 250px;
    }

    .mainArea .mobileSearchArea > div.row {
        display: block;
    }

    .mobileLogoArea {
        margin-top: -10px;
    }

    .mobileLogoArea > a > img {
        height: 50px;
        max-width: max-content;
        margin-left: 10px;
        margin-top: 6px;
    }

    .navbar-area, .navbar-area.is-sticky {
        background-color: #060606 !important;
    }

    .navbar-category button i {
        font-size: 26px;
        color: white;
    }

    .mobileSearchArea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 110px;
        padding-right: 12px;
    }

    .middle-header .search-box .form-control {
        height: 30px;
    }

    .middle-header .search-box .search-btn {
        padding: 6px 20px;
        margin-right: -2px;
    }

    .mobile-cart .btn_area {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        margin-top: 6px;
        z-index: 99999;
    }

    .mobile-cart .btn_area a > i.fa {
        font-size: 20px;
    }

    /* Ensure all mobile icons are visible */
    .mobile-cart .btn_area a i.fa {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-cart .btn_area a, .mobile-cart .btn_area a > i.fa {
        color: white !important;
    }

    .mobile-cart .newMobileCart {
        padding: 2px 6px;
    }

    .mobile-cart a {
        margin-bottom: 0;
    }

    .pc_build {
        padding: 0 6px;
        margin-top: -3px;
        font-size: 14px;
        font-weight: normal;
    }

    .pc_build, .mobile-cart .newMobileCart {
        border: 2px solid #0083b2;
    }

    .middle-header.middle-header-style-two {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px) {
    .promotion a > img {
        height: 200px;
    }



    .mobileSearchArea > .row {
        position: absolute;
        left: 0;
        right: 0;
    }

    .mobileSearchArea > .row > .col-12 {
        margin-top: -30px !important;
        padding: 0;
        padding-right: 12px;
        justify-content: flex-end !important;
    }

    .mobileSearchArea {
        position: relative;
        padding-left: 80px;
        padding-right: 12px;
    }

    .mobileSearchArea a {
        font-size: 10px;
    }

    .middle-header .search-box .form-control {
        padding: 0 10px 0 6px;
        margin-top: 0;
        font-size: 14px;
    }

    .middle-header .search-box .search-btn {
        padding: 6px 10px
    }
}

@media only screen and (max-width: 478px) {
    .mobileLogoArea > a > img {
        height: 40px;
    }

    .promotion {
        height: 125px;
    }

}

@media only screen and (max-width: 425px) {
    /* Make search bar longer on small mobile devices */
    .mobileSearchArea {
        padding-left: 70px !important;
        padding-right: 8px !important;
    }
    
    .mobileLogoArea > a > img {
        height: 38px;
        margin-left: 8px;
    }
    
    /* Extend search box to full available width */
    .middle-header .search-box {
        width: 100%;
    }
    
    .middle-header .search-box .form-control {
        width: 100% !important;
        padding: 0 8px !important;
    }
    
    /* Make contact info more compact */
    .mobileSearchArea > .row a {
        font-size: 7px !important;
        max-width: 48%;
    }
    
    .mobileSearchArea > .row a i {
        font-size: 9px !important;
    }
}

@media only screen and (max-width: 450px) {
    .middle-header.middle-header-style-two {
        padding-bottom: 0;
        margin-bottom: 0;
    }


    .promotion a > img {
        height: 104px;
    }

    .mobileSearchArea {
        /*display: block;*/
        padding-left: 70px;
        padding-right: 10px;
    }

    .mobileSearchArea > .row > .col-12 {
        margin-top: -22px !important;
        padding: 0;
        padding-right: 10px;
        justify-content: flex-end !important;
    }

    .mobileSearchArea a {
        font-size: 8px;
    }

    .mobileLogoArea > a > img {
        height: 34px;
        margin-top: 4px;
        margin-left: 10px;
    }

    .middle-header .search-box .form-control {
        height: 24px;
        margin-top: 0;
        font-size: 14px;
    }

    .middle-header .search-box .search-btn {
        padding: 3px 10px
    }
}

@media only screen and (max-width: 400px) {
    /* Ensure search bar stays large on 400px screens */
    .mobileSearchArea {
        padding-left: 55px !important;
        padding-right: 6px !important;
    }
    
    .mobileLogoArea > a > img {
        height: 36px;
        margin-left: 6px;
    }
    
    .middle-header .search-box {
        width: 100%;
    }
    
    .middle-header .search-box .form-control {
        width: 100% !important;
        padding: 0 6px !important;
        font-size: 13px !important;
    }
    
    /* Extend contact info to start closer to logo */
    .mobileSearchArea > .row {
        left: 50px !important;
        right: 0px !important;
    }
    
    .mobileSearchArea > .row > .col-12 {
        padding-right: 0px !important;
        padding-left: 0px !important;
        justify-content: flex-end !important;
    }
    
    .mobileSearchArea > .row a {
        font-size: 7px !important;
        max-width: none !important;
    }
    
    .mobileSearchArea > .row a i {
        font-size: 9px !important;
    }
}

@media only screen and (max-width: 410px) {
    .mobileSearchArea {
        /*display: block;*/
        padding-left: 50px;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 390px) {
    .mobileSearchArea {
        /*display: block;*/
        padding-left: 30px;
        padding-right: 10px;
    }
}

@media only screen and (max-width: 380px) {
    /* Use same layout as 425px for consistency */
    .mobileSearchArea {
        padding-left: 70px !important;
        padding-right: 8px !important;
    }
    
    .mobileLogoArea > a > img {
        height: 38px;
        margin-left: 8px;
    }
    
    .middle-header .search-box {
        width: 100%;
    }
    
    .middle-header .search-box .form-control {
        width: 100% !important;
        padding: 0 8px !important;
    }
    
    .mobileSearchArea > .row a {
        font-size: 7px !important;
        max-width: 48%;
    }
    
    .mobileSearchArea > .row a i {
        font-size: 9px !important;
    }
    
    /* Keep mobile cart consistent */
    .mobile-cart .btn_area a {
        font-size: 12px;
    }
    
    .mobile-cart .btn_area a > i.fa {
        font-size: 18px;
    }
}

@media only screen and (max-width: 375px) {
    /* Ensure search bar stays large on 375px screens (iPhone SE, etc.) */
    .mobileSearchArea {
        padding-left: 50px !important;
        padding-right: 5px !important;
    }
    
    .mobileLogoArea > a > img {
        height: 34px;
        margin-left: 5px;
    }
    
    .middle-header .search-box {
        width: 100%;
    }
    
    .middle-header .search-box .form-control {
        width: 100% !important;
        padding: 0 5px !important;
        font-size: 12px !important;
    }
    
    .middle-header .search-box .search-btn {
        padding: 6px 8px !important;
    }
    
    /* Extend contact info to start closer to logo */
    .mobileSearchArea > .row {
        left: 45px !important;
        right: 0px !important;
    }
    
    .mobileSearchArea > .row > .col-12 {
        padding-right: 0px !important;
        padding-left: 0px !important;
        justify-content: flex-end !important;
    }
    
    .mobileSearchArea > .row a {
        font-size: 6.5px !important;
        max-width: none !important;
    }
    
    .mobileSearchArea > .row a i {
        font-size: 8.5px !important;
    }
}

@media only screen and (max-width: 360px) {
    /* Extend search area for maximum width */
    .mobileSearchArea {
        padding-left: 55px !important;
        padding-right: 4px !important;
    }
    
    /* Smaller logo to give more space */
    .mobileLogoArea > a > img {
        height: 32px !important;
        margin-left: 4px !important;
        margin-top: 5px !important;
    }
    
    /* Full width search box */
    .middle-header .search-box {
        width: 100%;
    }
    
    .middle-header .search-box .form-control {
        width: 100% !important;
        padding: 0 6px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
    
    /* Align search button properly */
    .middle-header .search-box .search-btn {
        padding: 3px 8px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Contact info - extend left to give more space, prevent wrapping */
    .mobileSearchArea > .row {
        left: 55px !important;
        right: 0 !important;
    }
    
    .mobileSearchArea > .row > .col-12 {
        margin-top: -22px !important;
        padding: 0 4px 0 0 !important;
        justify-content: space-between !important;
        display: flex !important;
        gap: 2px !important;
    }
    
    /* Make contact links not wrap - single line */
    .mobileSearchArea > .row a {
        font-size: 6.5px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    
    .mobileSearchArea > .row a i {
        font-size: 8px !important;
        flex-shrink: 0 !important;
    }
}

@media only screen and (max-width: 320px) {
    /* Maximum optimization for very small screens */
    .mobileSearchArea {
        padding-left: 48px !important;
        padding-right: 2px !important;
    }
    
    /* Even smaller logo */
    .mobileLogoArea > a > img {
        height: 28px !important;
        margin-left: 2px !important;
        margin-top: 6px !important;
    }
    
    /* Full width search */
    .middle-header .search-box .form-control {
        height: 22px !important;
        font-size: 11px !important;
        padding: 0 4px !important;
    }
    
    .middle-header .search-box .search-btn {
        padding: 2px 6px !important;
        height: 22px !important;
        font-size: 11px !important;
    }
    
    /* Contact info - super compact */
    .mobileSearchArea > .row {
        left: 48px !important;
    }
    
    .mobileSearchArea > .row > .col-12 {
        margin-top: -20px !important;
        padding-right: 2px !important;
        gap: 1px !important;
    }
    
    .mobileSearchArea > .row a {
        font-size: 6px !important;
    }
    
    .mobileSearchArea > .row a i {
        font-size: 7px !important;
    }
}


@media only screen and (max-width: 700px) {



    .slideimgh{height: 210px;}
}