@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Farsan&family=Fugaz+One&family=Michroma&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nabla&family=Red+Rose:wght@300..700&display=swap");

* {
    margin: 0px;
    padding: 0px;
    outline: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
    scroll-padding-top: 8vw;
}

html,
body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow-x: hidden;
    background-color: var(--absolute-white);
    font-family: "Poppins",Arial, Helvetica, sans-serif;
}

:root{
    --primary-bg-900: #161616;
    --primary-gray-500: #808080;
    --primary-gray-300: #f8f8f8;

    --absolute-black: #000;
    --absolute-white: #fff;

    --spacing: 0.25rem;
}

/* ------==== CUSTOM FONT FACE ====------*/

@font-face {
    font-family: custom font;
    src: url('../fonts/custom\ font\ regular.ttf');
    font-weight: normal;
    font-style: normal;
}

/* ------==== ROS DEFAULT STYLING ====------*/

.ros-row-gap{row-gap: var(--bs-gutter-x);}

button{cursor: pointer;}


.ros-p > p{
    margin: 0;
    padding: 0;
    color: var(--absolute-black);
}

.ros-p{
    display: block;
    font-size: 14px;
    color: var(--absolute-black);
    font-weight: normal;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-family: "Poppins",Arial, Helvetica, sans-serif;
}

.ros-p.clamp{
    --ros--max--lines: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ros--max--lines);
    line-clamp: var(--ros--max--lines);
    text-overflow:ellipsis;
    overflow: hidden;
}

.ros_max_container{max-width: 1920px;margin: 0 auto;}

b{font-weight: bold !important;}
strong{font-weight: bolder !important;}


/* ------==== ROS SPACING ====------*/

.ros-spacing-2xl{--ros-amnt: 30;}
.ros-spacing-xl{--ros-amnt: 25;}
.ros-spacing-lg{--ros-amnt: 20;}
.ros-spacing-md{--ros-amnt: 15;}
.ros-spacing-sm{--ros-amnt: 10;}
.ros-spacing-xs{--ros-amnt: 7;}

.ros-spacing-y{
    margin-top: calc( var(--spacing) * var(--ros-amnt) );
    margin-bottom: calc( var(--spacing) * var(--ros-amnt) );
}

.ros-spacing-t{margin-top: calc( var(--spacing) * var(--ros-amnt) );}

.ros-spacing-b{margin-bottom: calc( var(--spacing) * var(--ros-amnt) );}

.ros-spacing-p-y{
    padding-top: calc( var(--spacing) * var(--ros-amnt) );
    padding-bottom: calc( var(--spacing) * var(--ros-amnt) );
}

.ros-spacing-p-t{padding-top: calc( var(--spacing) * var(--ros-amnt) );}
.ros-spacing-p-b{padding-bottom: calc( var(--spacing) * var(--ros-amnt) );}

/* ------==== ROS DEFAULT HEADING ====------*/

.ros_sec_hdng{
    h1,h2,h3,h4,h5,h6{
        display: block;
        margin: 0;
        padding: 0;
        font-family: "Poppins",Arial, Helvetica, sans-serif;
        color: var(--absolute-black);
    }
    h2{
        font-size: clamp( 20px , 2.5vw + 0.5rem , 36px );
        font-weight: 600;
        text-transform: capitalize;
        position: relative;
    }

    h5{
        font-size: clamp( 18px , 2vw , 24px );
        font-weight: 600;
        text-transform: capitalize;
        position: relative;
    }

    p:has(~ a){margin-bottom: 1rem;}
}

.ros_sec_hdng.with_underline{
    h1,h2,h3,h4,h5,h6{position: relative;}
    
    .has_underline{margin: 0 0 0.5rem 0;padding: 0 0 0.5rem 0;display: inline-block;line-height: 1;}
    .has_underline.border_center::before{left: 50% !important;transform: translateX(-50%);}
    .has_underline:has(~ p){margin: 0 0 1rem 0;padding: 0 0 1rem 0;}

    .has_underline::before{
        content: '';
        position: absolute;
        width: 40%;
        height: 4px;
        background: var(--absolute-black);
        bottom: -2px;
        left: 0;
        border-radius: 5px;
    }
}

.ros_sec_hdng.with_underline{
    .has_underline.text-white{color: var(--absolute-white);}
    .has_underline.text-white::before{background-color: var(--absolute-white);}
}

/* ------==== ROS BTN ====------*/

.ros-btn{
    font-size: 14px;
    font-family: "Poppins",Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0.75em 1.5em;
    text-transform: none;
    background-color: var(--absolute-white);
    color: var(--absolute-black);
    display: inline-block;
    width: fit-content;
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

.ros-btn.ros-btn-black{background-color: var(--absolute-black);color: var(--absolute-white);}

.ros-btn:hover{background-color: var(--primary-bg-900) !important;color: var(--absolute-white) !important;}

.ros-btn.ros-btn-lg{font-size: 15px;padding: 0.75em 2em;}
.ros-btn.ros-btn-sm{font-size: 12px;padding: 0.65em 1.5em;}
.ros-btn.ros-btn-xs{font-size: 10px;padding: 0.6em 1.25em;}


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


.ros_hdr_top{background-color: var(--absolute-black);}

.ros_hdr_top .ros-p{color: var(--absolute-white);padding: 15px 0;}

.ros_hdr_top .ros-p a{color: var(--absolute-white);display: inline-block;transition: color 0.25s ease-in-out;text-decoration: underline;text-underline-offset: 2px;padding: 2px;}

.ros_hdr_top .ros-p a:hover{color: var(--primary-gray-500);}

header .ros_hdr_top ul{margin: 0;padding: 0;list-style: none;}

.ros_hdr_srch_form{border: 1px solid var(--primary-gray-500);background-color: var(--absolute-white);}

.ros_hdr_srch_form form{
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    background: transparent;
}

.ros_hdr_srch_form form input,
.ros_hdr_srch_form form button{
    border: 0;
    background-color: transparent;
    font-size: 14px;
    font-weight: normal;
    padding: 0.5em 1em;
    color: var(--absolute-black);
}

.ros_hdr_srch_form form input{flex-grow: 1;}

.ros_hdr_srch_form form button{display: inline-block;width: fit-content;padding-inline: 0.75em ;}

.ros_quote_btn{width: 30px;height: 30px;display: inline-flex;justify-content: center;align-items: center;}

.ros_quote_btn i{font-size: 16px;color: var(--absolute-white);}

/* 
    --==-- BANNER --==--
*/

.ros_main_banr{background-color: var(--absolute-white);padding: 0;padding-top: 1rem;margin: 0 auto;}

.ros_banner_slide{
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    margin: 0;
    padding: 0;
    gap: 1rem;
    position: relative;
    align-items: center;
    background-color: var(--primary-gray-300);
}

.ros_banner_slide .ros_banner_content{margin-inline: 4vw;}

.ros_banner_slide .ros_banner_content h1{
    font-family: "custom font" ,Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0;
    padding: 0;
    line-height: 1.25;
    font-size: clamp( 24px , 4vw + 0.5rem , 60px );
    display: inline-block;
    position: relative;
    color: var(--absolute-black);
}

.ros_banner_slide .ros_banner_content h1::before{
    content: '';
    position: absolute;
    width: 30%;
    height: 6px;
    background-color: var(--primary-bg-900);
    bottom: -3px;
    left: 0%;
    border-radius: 5px;
}

.ros_banner_slide .ros_banner_content .ros-p{margin: 1rem 0;}

.ros_banner_slide .ros_banner_image{
    --border-radius-amnt: 25px;
    border-top-left-radius: var(--border-radius-amnt);
    border-top-right-radius: var(--border-radius-amnt);
    a{
        border-radius: inherit;
        img{border-radius: inherit;}
    }
}

.ros_rotate_text{
    font-size: clamp(24px , 6vw , 60px);
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-weight: 600;
    color: transparent;
    -webkit-text-stroke-color: var(--primary-gray-500) ;
    -webkit-text-stroke-width: 1px;
    line-height: 1;
    display: inline-block;
    user-select: none;
    pointer-events: none;
}


/* main banner controls */
#rosMainBanner {
  .ros_banner_controls {
    --border-radius-amnt: 15px;
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 30px;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    background-color: var(--primary-bg-900);
    width: 40%;
    padding: 1.5rem 2rem;
    overflow-y: hidden;
    border-top-left-radius: var(--border-radius-amnt);
    border-top-right-radius: var(--border-radius-amnt);

    .ros_slide_down_btn {
      font-size: 12px;
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      color: var(--absolute-white);
      font-weight: 600;
      text-transform: uppercase;
      position: relative;
      margin-block-end: auto;

      &::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 100%;
        top: -120%;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--absolute-white);
        border-radius: 5px;
      }
    }

    .rus_banner_buttons {
      display: flex;

      button {
        margin: 0;
        padding: 5px;
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 0;
        background-color: transparent;
        color: var(--absolute-white);
        position: relative;
      }
    }
  }

  .carousel-indicators {
    position: relative !important;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 !important;
    list-style: none;

    [data-bs-target] {
      width: 40px !important;
      height: 40px !important;
      padding: 0 !important;
      margin: 0 !important;
      text-indent: 0 !important;
      background-color: transparent !important;
      border: 0 !important;
      font-size: 16px;
      color: var(--absolute-white);
      font-weight: 600;
      transition: all 0.25s ease-in-out;
      opacity: 0.25;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      line-height: 1 !important;

      &.active {
        font-size: 28px;
        font-weight: 800 !important;
        color: var(--absolute-white) !important;
        opacity: 1;
      }
    }
  }
}
/* main banner controls */

/* 
    --==-- HOT PRODUCTS --==--
*/

.ros_hot_container{
    border: 1px solid var(--primary-gray-500);
    border-right-width: 0;
    container-name: ros_hot_item_container;
    container-type: inline-size;
}

.swiper-slide:has(>.ros_hot_container):last-child{
    .ros_hot_container{border-right-width: 1px ;}
}

.ros_hot_item{display: flex;justify-content: start;align-items: stretch;padding: 0.75rem;gap: 1rem;}

.ros_hot_item .item_img{display: block;max-width: 30%;}

.ros_hot_item .item_disc{display: flex;flex-direction: column;flex-grow: 1;}

.ros_hot_item .item_disc h4{font-size: 18px;font-weight: 500;color: var(--absolute-black);margin: 0;padding: 0;}

.ros_hot_item .item_disc .ros-p{font-size: 12px;margin: 0.5rem 0 ;padding: 0;}

.ros_hot_item .item_disc .ros-p.clamp{--ros--max--lines: 2;}
.ros_hot_item .item_disc a{font-size: 11px;margin-top: auto;}

@container  ros_hot_item_container ( width < 300px ){
    .ros_hot_item{flex-direction: column;padding: 0.5rem;gap: 0.5rem;}
    .ros_hot_item .item_img{width: 100% !important; max-width: 100% !important;}
}

/* 
    --==-- GRAVIX --==--
*/

.kajsdfnahsd::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 60%;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1; 
    background-color: var(--absolute-black);
}

/* 
    --==-- TRENDING PRODUCTS --==--
*/

.ros_trnd_item{position: relative;}

.ros_trnd_item h3{margin: 0;padding: 0;text-align: center;margin-top: clamp(8px , 2vw , 16px);}

.ros_trnd_item h3 a{font-size: clamp(18px , 2vw + 5px , 28px);font-weight: 500;color: var(--primary-bg-900);transition: all 0.25s ease-in-out;text-transform: uppercase;}

.ros_trnd_item h3 a:hover{color: var(--primary-gray-500);}

/* 
    --==-- OUR CATEGORIES --==--
*/

.ros_cat_item{
    position: relative;
    .item_name{
        position: absolute;
        z-index: 2;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5em 1em;
        background-color: var(--primary-bg-900);
        color: var(--absolute-white);
        opacity: 0;visibility: hidden;
        transition: all 0.3s ease-in-out;
        span{font-size: clamp(14px , 2vw , 28px);text-transform: uppercase;white-space: nowrap;}
        &:hover{background-color: var(--absolute-black);}
    }
}

.ros_cat_item:hover .item_name{opacity: 1; visibility: visible;}

/* 
    --==-- SALE --==--
*/


.ros_sale_container{container-name: ros_sale_item_container;container-type: inline-size;}

.ros_sale_item{display: flex;justify-content: start;align-items: stretch;padding: 0;gap: 1rem;}

.ros_sale_item .item_img{display: block;max-width: 30%;}

.ros_sale_item .item_disc{display: flex;flex-direction: column;flex-grow: 1;}

.ros_sale_item .item_disc h4{font-size: 18px;font-weight: 500;color: var(--absolute-black);margin: 0;padding: 0;}

.ros_sale_item .item_disc .ros-p{font-size: 12px;margin: 0.5rem 0 ;padding: 0;}

.ros_sale_item .item_disc .ros-p.clamp{--ros--max--lines: 2;}
.ros_sale_item .item_disc a{font-size: 11px;margin-top: auto;}

@container  ros_sale_item_container ( width < 300px ){
    .ros_sale_item{flex-direction: column;padding: 0.5rem;gap: 0.5rem;}
    .ros_sale_item .item_img{width: 100% !important;max-width: 100% !important;}
}

/* 
    --==-- SOCIAL --==--
*/

.ros-social-items{position: relative;background-color: var(--absolute-white);}

.ros-social-items a:has(> i){
    background-color: #ffffffa8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.ros-social-items:hover a:has(> i){opacity: 1;visibility: visible;}
/* clamp(18px , 2.5vw , 28px) */
.ros-social-items a i{font-size: 175% ;color: var(--absolute-black);}

/* 
    --==-- FOOTER --==--
*/

footer{background-image: linear-gradient(to right,var(--primary-bg-900) 35%,var(--absolute-black) 35% 65%);}

.ros_ftr_itm{margin: 0;padding: 0;}

.ros_ftr_itm ul{margin: 0;padding: 0;list-style: none;}

.ros_ftr_itm h3{
    font-family: "Poppins",Arial, Helvetica, sans-serif;
    color: var(--absolute-white);
    font-size: clamp(20px , 2vw , 24px);
    letter-spacing: 1px;
    font-weight: 500px;
    margin-bottom: clamp( 10px , 2vw , 20px );
}

.ros_ftr_itm h2{
    font-family: "Poppins",Arial, Helvetica, sans-serif;
    color: var(--absolute-white);
    font-size: clamp(22px , 3vw , 34px);
    letter-spacing: 1px;
    font-weight: 500px;
    margin-bottom: clamp( 10px , 2vw , 20px );
}

.ros_ftr_itm h2:has(~h6){margin-bottom: 10px;}

.ros_ftr_itm > h6{
    font-family: "Poppins",Arial, Helvetica, sans-serif;
    font-size: clamp(14px , 1.5vw , 16px);
    font-weight: 500px;
    color: var(--absolute-white);
    letter-spacing: 1px;
    margin-bottom: clamp( 10px , 2vw , 20px );
}

.ros_ftr_itm p{font-size: 14px;color: var(--absolute-white);}

.ros_ftr_itm .ros_ftr_cnt li{display: flex;justify-content: start;align-items: center;margin-bottom: 10px;}

.ros_ftr_itm .ros_ftr_cnt li:last-of-type{margin-bottom: 0;}

.ros_ftr_itm .ros_ftr_cnt li i{
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--absolute-white);
    font-size: 14px;
}

.ros_ftr_itm .ros_ftr_cnt li a{display: inline-block;margin-inline-start: 5px;}

.ros_ftr_itm .ros_ftr_cnt li a span{font-size: 14px;line-height: 1.25;display: block;color: var(--absolute-white);}

.ros_ftr_itm .ros_ftr_cnt li a:hover span{text-decoration: underline;text-underline-offset: 2px;}

.ros_ftr_itm .ros_news_events_item{font-family: "Poppins",Arial, Helvetica, sans-serif;margin-bottom: 2rem;}

.ros_ftr_itm .ros_news_events_item h5{font-size: 16px;color: var(--absolute-white);margin-bottom: 0.5rem;}

.ros_ftr_itm .ros_news_events_item p{font-size: 12px;}

.ros_ftr_itm .ros_ftr_scil{display: flex; justify-content: center; align-items: center; gap: 8px;flex-wrap: wrap;}

.ros_ftr_itm .ros_ftr_scil li a i{
    --icon-size: 36px;
    border-radius: 50px;
    color: var(--absolute-white);
    font-size: 16px;
    height: var(--icon-size);
    width: var(--icon-size);
    aspect-ratio: 1/1;
    background-color: var(--absolute-black);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease-in-out;
}

.ros_ftr_itm .ros_ftr_scil li a i:hover{background-color: var(--absolute-white);color: var(--absolute-black);}

.ros_ftr_itm .ros_linked_list{margin: 0 0 0 1rem;}

.ros_ftr_itm .ros_linked_list li{margin: 0 0 10px 0;position: relative;}

.ros_ftr_itm .ros_linked_list li::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--primary-gray-300);
    right: calc( 100% + 5px );
    bottom: 28%;
    transition: all 0.25s ease-in-out;
    border-radius: 50px;
}
 /* header */
 .ros_dsk_hdr{background-color: #000;
color: white;}
.ros_ftr_itm .ros_linked_list li:has(>a:hover)::before{background-color: var(--primary-gray-500);}

.ros_ftr_itm .ros_linked_list li:last-child{margin: 0;}

.ros_ftr_itm .ros_linked_list li a{display: inline-block}

.ros_ftr_itm .ros_linked_list li a span{
    display: block;
    font-size: 14px;
    font-family: "Poppins",Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: var(--primary-gray-300);
    transition: all 0.25s ease-in-out;
}

.ros_ftr_itm .ros_linked_list li a:hover span{color: var(--primary-gray-500);}

.ros_ftr_itm .ros_ftr_form form{background-color: var(--absolute-white);display: flex;justify-content: center;align-items: center;}

.ros_ftr_itm .ros_ftr_form input,
.ros_ftr_itm .ros_ftr_form button{
    border: 0;
    background-color: transparent;
    padding: 0.75em 1.25em;
    border-radius: 00px;
    color: var(--absolute-black);
    font-size: 14px;
    font-weight: 500;
    font-family: "Poppins",Arial, Helvetica, sans-serif;
    transition: all 0.25s ease-in-out;
}

.ros_ftr_itm .ros_ftr_form button{
    display: inline-block;
    width: fit-content;
    background-color: inherit;
    text-transform: uppercase;
    color: var(--absolute-black);
    border-left: 1px solid var(--primary-gray-500);
}

.ros_ftr_itm .ros_ftr_form button:hover{background-color: var(--absolute-black);color: var(--absolute-white);}



footer .ros_copy_sec{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding: 3rem 0 0 0;text-align: center;gap: 0 3rem;}

footer .ros_copy_sec p{color: var(--absolute-white);}

footer .ros_copy_sec a{color: var(--primary-gray-300);text-decoration: underline;text-underline-offset: 2px;}

footer .ros_copy_sec a:hover{color: var(--primary-gray-500);}

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

@media screen and ( max-width : 1320px ) {
    .ros_hdnv .tus_hdmenus ul li{padding: 5px 0 !important;}
    .ros_hdnv .tus_hdmenus ul li > a {font-weight: 500 !important;}
}

@media screen and ( max-width : 1200px ) {
    .ros_hdnv .tus_hdmenus ul li > a {font-size: 14px !important;}
}

@media screen and ( max-width : 992px ) {
    /* kajsdfnahsd */
    .kajsdfnahsd::before{height: 100%;}
    /* lmdodr6 */
    .lmdodr6{order: 6;}
    /* ros-spacing */
    .ros-spacing-2xl{--ros-amnt: 25;}
    .ros-spacing-xl{--ros-amnt: 20;}
    .ros-spacing-lg{--ros-amnt: 15;}
    .ros-spacing-md{--ros-amnt: 10;}
    .ros-spacing-sm{--ros-amnt: 7;}
    .ros-spacing-xs{--ros-amnt: 5;}
    /* ros default btn */
    .ros-btn{font-size: 12px;}
    /* p */
    .ros-p{font-size: 14px;}
    /* header */
    .ros_dsk_hdr{display: none;}
    /* banner */
    #rosMainBanner .ros_banner_controls{width: 100%;position: static;--border-radius-amnt:0;padding: 1.5rem;}
    /* footer */
    footer .ros_copy_sec{justify-content: center;}
}

@media screen and ( max-width : 768px ) {
    /* * */
    *{scroll-padding: 0;}
    /* ros-spacing */
    .ros-spacing-2xl{--ros-amnt: 20;}
    .ros-spacing-xl{--ros-amnt: 15;}
    .ros-spacing-lg{--ros-amnt: 10;}
    .ros-spacing-md{--ros-amnt: 7;}
    .ros-spacing-xs{--ros-amnt: 4;}
    /* ros dflt btn */
    .ros-btn{font-size: 10px;}
    /* banner */
    .ros_banner_slide{gap: 0;}
    .ros_banner_slide .ros_banner_image{--border-radius-amnt:"0";}
    .ros_main_banr{padding: 0;}
    .ros_banner_slide .ros_banner_content .ros-p{margin: 0.75rem 0;font-size: 13px;}
    #rosMainBanner .ros_banner_controls{padding: 0.5rem;justify-content: center;}
    #rosMainBanner .ros_banner_controls .ros_slide_down_btn,
    #rosMainBanner .ros_banner_controls .carousel-indicators{display: none;}
    .ros_banner_slide .ros_banner_content h1::before{display: none;}
    /* categories */
    .ros_cat_item .item_name{
        position: static;
        display: block;
        transform: none;
        text-align: center;
        opacity: 1;
        visibility: visible;
    }
    /* footer */
    .ros_ftr_itm .ros_news_events_item h5{font-size: 14px;}
    footer{background-color: var(--absolute-black);background-image: unset;}
    
}

@media screen and ( max-width : 576px ) {
    /* ros-spacing */
    .ros-spacing-2xl{--ros-amnt: 15;}
    .ros-spacing-xl{--ros-amnt: 10;}
    .ros-spacing-lg{--ros-amnt: 8;}
    .ros-spacing-md{--ros-amnt: 5;}
    /* p */
    .ros-p{font-size: 13px;}
    /* banner */
    .ros_banner_slide{grid-template-columns: 1fr;}
    .ros_banner_slide .ros_banner_content,.ros_banner_image{grid-column: 1 / span 1;grid-row: 1 / span 1;}
    #rosMainBanner .ros_banner_controls{display: none;}
    .ros_banner_slide .ros_banner_content{z-index: 2;text-align: center;margin: 0 1rem;}
    .ros_banner_slide .ros_banner_content .ros-p{margin: 0.5rem 0 0.75rem 0;font-size: 12px;color: var(--absolute-white);}
    /* hot products */
    .ros_hot_item .item_disc {text-align: center;}
    .ros_hot_item .item_disc h4{font-size: 16px;}
    .ros_hot_item .item_disc .ros-p{display: none;}
    .ros_hot_item .item_disc a{display: none;}
}

@media screen and ( max-width : 370px ) {
    .ros_banner_slide .ros_banner_content h1{font-size: 20px;}
    .ros_banner_slide .ros_banner_content .ros-p{font-size: 10px;margin: 0.25rem 0;}
    .ros_banner_slide .ros_banner_content a{font-size: 8px;}
    /* footer */
    footer p {font-size: 12px !important;}
    footer span {font-size: 12px !important;}
}

/* 
    --==-- NEXT PAGE CSS --==--
*/


#sticky{
	position:fixed; width:100%; top:0; margin:0px; padding:15px 0; background:black;  display:none; z-index:99999; animation:sticky 1s; box-shadow:2px 2px 10px rgb(0,0,0,0.2)}
#sticky:before,#fixedbar:after{
	display:block;}
@keyframes sticky{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}
.gCdMUP{display:none !important;}
img[alt]{color:#000; font-size:12px; text-align:center; font-weight:550;}
.tus_rlogo img{margin:0px; height:70px;}
[title=""]{margin:0px; padding:7px; background-color:#000; color:#fff; font-size:7px !important;}
.tus_fixm{margin:0px; padding:0px; float:right}
.tus_success{
	margin:0px; padding:8px 10px; background-color:#d4edda; position:absolute; z-index:99999; width:23%; bottom:-15px; 
	right:2%; color:#000; display:none; font-size:14px; text-align:center; font-weight:bold;}
#message{margin:0px; padding:0px; font-size:14px; text-transform:capitalize; color:#fff;}
.tus_minslde{
	margin:0px; padding:0px; position:relative;}
.tus_itemslde{
	margin:0px; padding:0px; position:relative;}
.tus_itemslde img{
	margin:0 auto; padding:0px; width:100%; height:auto;}
.tus_srcbxs{
    margin:0px auto; padding:0px; position:relative; width:50%;min-width: calc( 250px + 8vw );}
.tus_srcbxs form{
    display: flex;justify-content: start;align-items: center;
}
.tus_inpsrch{
	margin:0px; padding:10px 15px; background:#fff; border:solid 1px #ccc; width:100%; color:#000; font-size:13px;}
.sbmsrh{
	margin:0; padding: 5px 15px;position:absolute; background-color:transparent; color:#000; border:none;top: 50%;right: 0;transform: translateY(-50%);width: fit-content;}
.tus_hdnv{
	margin:0px; padding:0px;}
/* .site_logo img{height:80px; margin:10px 0;} */

.offcanvas-top{min-height: 140px;}


.about_txt{
	margin:0px 0 30px 0; padding:0px;}
.about_txt p{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:14px;}
.tus_nheading{
	margin:15px 0 15px 0; padding:10px 15px; position:relative; background-color:var(--primary-bg-900); border-bottom:solid 3px var(--primary-gray-500)}
.tus_nheading a{
	margin:0px; padding:0px; color:#fff; font-size:15px; text-transform:capitalize; transition:0.8s}
.tus_nheading span{
	color:#fff; margin:0 5px}
.tus_nheading a:hover{
	color:var(--primary-gray-500); text-decoration:none;}
.wa-chat-box-poweredby{display:none !important;}
.tus_nxtheading{
	margin:20px 0 30px 0; padding:0px; position:relative}
.tus_nxtheading h1{
	margin:0px; padding:0px;  font-size:25px; color:#000; text-transform:uppercase; text-align:center; font-weight:bold}
.tus_nxtheading:before{
	content:''; position:absolute; background-color:var(--primary-gray-500); width:70px; bottom:-10px; left:50%; height:2px; transform:translate(-50%,-50%);}
.tus_lefth h4{
	margin:15px 0 10px 0; padding:8px 10px; color:#000;  font-size:22px; text-transform:uppercase; border-bottom:solid 1px var(--primary-gray-500);
	background-color:#fff; border-top:solid 1px var(--primary-gray-500);}
.tus_nextmenu{
	margin:14px 0 15px 0; padding:10px 10px; background-color:#fff; border-bottom:solid 1px var(--primary-gray-500); border-top:solid 1px var(--primary-gray-500);}
.tus_nextmenu a{
	margin:0px; padding:0px;  font-size:15px; text-transform:capitalize; color:#000; width:100%; letter-spacing:1px}
.tus_nextmenu span{
	margin:0px 3px; font-size:15px}
.tus_nextmenu a:hover{
	color:var(--primary-gray-500); text-decoration:none;}
.tus_conactf{
	margin:0px 0 20px 0; padding:0px;}
.tus_conactf h4{
	margin:0px 0 10px 0; padding:0px 0 10px 0; font-size:16px; color:#fff; text-transform:uppercase; border-bottom:solid 1px #ccc;
	font-weight:600; letter-spacing:2px}
.tus_conactf p{
	margin:0px 0 10px 0; padding:0px; font-size:16px; color:var(--primary-gray-500);}
.tus_continp{
	margin:0px 0 15px 0; padding:10px 15px; border:1px solid #ccc; width:100%; color:var(--primary-gray-500);  font-size:14px; background-color:transparent;
	transition:0.8s}
.tus_qcontinp{
	margin:0px 0 15px 0; padding:10px 15px; border:none; border-bottom: 1px solid #ccc; width:100%; color:var(--primary-gray-500);  
	font-size:14px; background-color:transparent; transition:0.8s}
.cartSend > a,
.tus_contsbmt{
	margin:10px 0 0 0; padding:10px 16px; background-color:var(--primary-bg-900) !important; color:var(--absolute-white) !important; text-align:center; text-transform:uppercase;  font-size:13px;
	border:none; transition:0.8s; position:relative; z-index:1;display: inline-block !important;width: fit-content;font-family: "Poppins",Arial, Helvetica, sans-serif;border-radius: 3px;}
.cartSend > a:hover,
.tus_contsbmt:hover{
	background-color:var(--primary-gray-500) !important; color:var(--absolute-white) !important; text-decoration:none;}
.tus_continp:focus{
	border:solid 1px var(--primary-gray-500)}
.tus_abanner{
	margin:0px; padding:0px; position:relative; z-index:1}
.tus_abanner img{
	margin:0 auto; padding:0px;}
select{background-color: #fff;border: 1px solid var(--primary-gray-500);padding: 0 5px;display: block;border-radius: 3px; color: var(--absolute-black);
    font-family: "poppins",Arial, Helvetica, sans-serif; font-size: 14px; cursor: pointer;}
#qty{font-family: "Poppins",Arial, Helvetica, sans-serif; background: #fff;border: 1px solid var(--primary-gray-500) !important;border-radius: 3px;}
.tus_abtxt{
	margin:0px auto; padding:0px; position:absolute; bottom:30%; left:0; right:0; text-align:center; width:50%}
.tus_abtxt h4{
	margin:0px 0 10px 0; padding:0px; color:#fff; font-size:35px; text-transform:uppercase; text-shadow: 1px 2px #353535; font-weight:bold; letter-spacing:1px}
.tus_abtxt h5{
	margin:0px 0 10px 0; padding:0px; color:#fff; font-size:15px; text-transform:uppercase; font-weight:400}
.tus_abtxt p{
	margin:0px 0 10px 0; padding:0px; color:#fff; font-size:14px; font-weight:400}
.tus_abtxt:before{
	content:''; position:absolute; border:solid 1px var(--primary-gray-500); width:10%; height:7%; bottom:-20px; left:50%; transform:translate(-50%,-50%);}
.tus_abtxt:after{
	content:''; position:absolute; background-color:var(--primary-gray-500); width:5%; height:7%; bottom:-20px; left:47%; transform:translate(-50%,-50%);}
.tus_leftct{
	margin:15px 0 15px 0; padding:8px 15px; color:#fff; font-size:18px; text-transform:uppercase;  background-color:#000;
	border-bottom:solid 3px #fff}
.tus_cdetail{
	margin:0px; padding:0px;}
.tus_cdetail h4{
	margin:0px 0 15px 0; padding:0px 0 10px 0; color:var(--absolute-black); font-size:18px; border-bottom:solid 1px var(--primary-gray-800); font-weight:600}
.tus_cdetail p{
	margin:0px; padding:0px; color:var(--absolute-black); font-size:16px; font-weight:400}
.tus_cdetail a{color: var(--absolute-black);text-decoration: underline;transition: color 0.25s ease-in-out;}
.tus_cdetail a:hover{color: var(--primary-gray-500);}
.tus_prodetail{
	margin:0px; padding:0px;font-family: "Poppins",Arial, Helvetica, sans-serif;}
.tus_prodetail h1{
	margin:0px 0 15px 0; padding:0px 0 10px 0; color:var(--absolute-black); font-size:18px; text-transform:capitalize;  border-bottom:solid 1px var(--primary-gray-500);}
.tus_prodetail h2{
	margin:0px 0 15px 0; padding:0px 0 10px 0; color:var(--absolute-black); font-size:15px; text-transform:capitalize;  border-bottom:solid 1px var(--primary-gray-500);
	text-align:left}
.tus_prodetail p{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:14px;}
.tus_prodetail p span{
	color:var(--absolute-black); font-size:14px; font-weight:600}
.modal-title{font-size:16px !important; }
.tus_whatsup{
	margin:0px; padding:7px 15px; color:#000; font-size:12px; text-transform:capitalize; text-align:center; border:solid 1px var(--primary-gray-500);
	transition:0.8s}
.tus_whatsup:hover{
	background-color:#343434; color:#fff;}
.tus_whatsup i{
	font-size:14px;}
.tus_pdnav{
	margin:0px 0 20px 0; padding:5px 0; background-color:rgba(206, 206, 206, 1); position:relative}
.tus_admre{
	margin:2px 0 0 0; padding:0px; color:#000; font-size:14px; float:right; font-weight:450; transition:0.8s}
.tus_admre:hover{
	color:var(--primary-gray-500);}
.tus_mineets{
	margin:0px 0 15px 0; padding:0px; border:solid 1px #ccc;}
.tus_mineets img{
	margin:0 auto; padding:0px; width:100%; height:auto;}
.tus_mineets h4{
	margin:15px 0 10px 0; padding:0px; color:var(--primary-gray-500); font-size:26px; text-transform:capitalize; font-weight:500; text-align:center}
.tus_mineets p{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:16px; text-align:center}
.tus_inpfrm{
	margin:0px 0 15px 0; padding:7px 10px; width:100%; border:solid 1px #eee; font-size:14px; color:var(--primary-gray-500);}
.tus_cdetail label{
	font-size:14px; color:#3f3f3f}
.tus_cdetail label span{
	color:#ff0000;}
.tus_sbmfrm{
	margin:0px; padding:10px 20px; background-color:var(--primary-gray-500); color:#fff; font-size:14px; border:none; transition:0.8s}
.tus_sbmfrm:hover{
	background-color:#000; border-radius:2em}
/*----- Basket ------*/
.tus_mincart{
	margin:0px; padding:0px; position:relative; display:flex;}
.tus_mncrimg{
	margin:0px; padding:0px; position:relative; width:30%;}
.tus_mncrimg img{
	margin:0px auto; padding:0px;}
.tus_mncrtxt{
	margin:0px; padding:0px;}
.cartRemove{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:18px; position:absolute; top:0; right:4px; transition:0.8s}
.cartRemove:hover{
	color:#000;}
.tus_mincart h3{
	margin:13px 0 3px 0; padding:0px; color:#000; font-size:14px; text-transform:capitalize;}
.tus_mncrtxt h4{
	margin:0px 0 3px 0; padding:0px; color:#000; font-size:14px; text-transform:capitalize;}
.tus_mincart p{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:14px; text-transform:capitalize;}
.tus_mincart h2{
	margin:0px; padding:0px; color:#fff; font-size:10px; text-transform:uppercase; background-color:rgb(0,0,0,0.8); width:20px; height:20px; 
	text-align:center; position:absolute; top:5px; left:10px; border-radius:100%; line-height:20px}
.tus_qtys{
	margin:8px 0 4px 0; padding:3px 4px; width:100%; font-size:13px; border:solid 1px #ccc}
.tus_updte{
	margin:0px; padding:0px; background-color:transparent; color:#000; font-size:13px; text-transform:uppercase; border:none;
	font-weight:500}
.tus_totlas{
	margin:5px 0 15px 0; padding:0px; background-color:#ccc;}
.tus_totlas h5{
	margin:0px; padding:15px 10px; color:#000; font-size:14px; text-transform:capitalize; text-align:center}
.tus_bskempt{
	margin:20px auto 40px auto; padding:0px; text-align:center}
.tus_bskempt h6{
	margin:0px 0 10px 0; padding:15px 10px; color:var(--primary-gray-500); font-size:20px; text-align:center; text-transform:capitalize}
.tus_bskempt a{
	margin:0px; padding:10px 20px; background-color:#ccc; font-size:16px; text-transform:capitalize; color:#000; border-radius:2em; transition:0.8s;display: inline-block;}
.tus_bskempt a:hover{
	background-color: var(--primary-gray-500); color:#fff;}
.tus_cartfrm{
	margin:0px 0 15px 0; padding:20px 25px; background-color:#fff; border:solid 1px #eee;}
.tus_cartfrm h4{
	margin:0px 0 5px 0; padding:0px; color:#000; font-size:18px; text-transform:capitalize; font-weight:550}
.yourCart{
    width:100%; text-align:left; text-transform:uppercase; padding:15px; background:#ccc; font-weight:500; font-size:15px;
	margin-bottom:5px}
.cartProduct{
	margin:0px; padding:10px 10px; background-color:#fff; border-bottom:solid 1px #ccc; position:relative}
.cartProduct:last-child{
	margin-bottom:5px; margin-top:5px;}
.cartPdctImage{
    position:relative; margin:0px; padding:0px;}
.cartPdctImage img{
	margin:0px; padding:0px; height:110px; border:solid 1px #ccc}
.cartPdctName{
     padding:0px; color:var(--absolute-black) !important; font-size:15px; text-transform:capitalize; font-weight:bold}
.cartPdctArt{
	 padding:0px; color:var(--primary-gray-500) !important; font-size:15px; font-weight:450}
.cartPdctSize{
	 padding:5px 0 10px; color:var(--absolute-black) !important}
.cartQuantity{
	font-weight:400; color:var(--absolute-black); width:50%; border:solid 1px var(--primary-gray-500); padding:6px 5px; text-align:center; font-size:15px;background-color: #fff;border-radius: 3px;
	margin-top:15px}
.cartSubmit{
	margin:10px 0; background:#000;  border:none; padding:7px 20px; font-size:14px; color:#fff}
.cartRemove{
	margin:10px 0;  font-size:14px; color:#000; text-transform:uppercase;}
.cartRemove:hover{
	color:#fff; text-decoration:none; background-color:#000}
.cartPdctPrice{
	 padding:20px; text-align:right ; color:#fa5400}
.summery{
	background:#eee; margin-bottom:40px;}
.summeryTxt{
	 padding:20px; color:#000; font-size:15px; border-bottom:#000 1px solid;}
.summeryTotal{
	 padding:10px 25px; color:#000; font-size:15px; border-bottom:#000 1px solid; text-transform:uppercase; font-weight:500}
.summeryTotal > span{
	float:right}
.summeryOr{
	 color:#ffffff; font-size:16px;text-align:center}
.cartSend{
	padding:15px 0; text-align:center}
.cartSend > a{
	 padding:8px 10px; color:#ffffff; font-size:14px; text-transform:capitalize; background:var(--primary-gray-500); display:inline-block; border-radius:3px; 
	 font-weight:400; text-decoration:none; transition:0.8s}
.cartSend > a:hover{
	background:#000; text-decoration:none; color:#fff}
.cartAddMore{
	padding:15px 30px; border-top:var(--primary-gray-500) 1px solid; text-align:center}
.cartAddMore > a{
    padding:10px; color:#ffffff; font-size:14px; text-transform:uppercase; background:var(--primary-gray-500); display:block; border-radius:3px;  font-weight:bold; text-decoration:none}
.cartAddMore > a:hover{
	background:#fff; text-decoration:none; color:#000}
.cartBasketEmpty{
	 padding:60px 20px ; color:#fff; font-size:25px; background:var(--primary-gray-800); text-align:center; margin:20px 0 40px; width:100%}
.tus_minbskt{
	margin:0px 0 5px 0; padding:0px; background-color:#ccc;}
.tus_minbskt h3{
	margin:0px; padding:13px 0; color:#000; font-size:15px; text-transform:uppercase;}
.cartRemoveupd{
 	transition: 0.8s; margin:10px auto 0 auto; padding:5px 10px; background-color:transparent; border:1px solid var(--primary-gray-500); color:#000; font-size:15px; text-transform:capitalize;width: fit-content; background-color: #fff;border-radius: 3px;}
.cartRemoveupd:hover{background-color: var(--absolute-black); color: var(--absolute-white);}
.cartRemovebsk{
	margin:0px 0 0px 18px; padding:0px; color:#000; font-size:25px; text-align:center; position:relative; top:25px; transition:0.8s}
.cartRemovebsk:hover{
	color:var(--primary-gray-500);}
.cartQuantitymb{
	margin:0px 0 10px 0; padding:0px 6px; width:25%; border:solid 1px var(--primary-gray-500);background-color: #fff;border-radius: 3px;color: var(--absolute-black);}
.cartRemovemb{
	margin:0px; padding:5px 10px; background-color:#fff; color:var(--absolute-black); font-size:13px; text-transform:capitalize; text-align:center; border:1px solid var(--primary-gray-500); width: fit-content;
	transition:0.8s;font-weight: 500;border-radius: 3px;}
.cartRemovemb:hover{
	background-color:var(--absolute-black); color:var(--absolute-white);}
.sitemap_cate{
	margin:0px 0 20px 0; padding:0px;}
.sitemap_cate h4{
	margin:0px 0 10px 0; padding:0px 0 5px 0;  font-size:18px; color:var(--primary-bg-900); text-transform:uppercase; font-weight:500; 
	border-bottom:solid 1px var(--primary-gray-500);}
.sitemap_cate p{
	margin:0px 0 0px 0; padding:0px 0 0px 0;  font-size:16px; color:var(--absolute-black); font-weight:600;}
.sitemap_cate p:hover{
	color: var(--primary-bg-900); text-decoration:none;}
.sitem_menu{
	margin:0px 0 15px 0; padding:0px; text-align:center}
.sitem_menu ul{
	margin:0px; padding:0px;}
.sitem_menu ul li{
	margin:0px 10px; padding:0px; list-style:none; display:inline-block;}
.sitem_menu ul li a{
	margin:0px; padding:0px;  font-size:16px; color:var(--absolute-black); text-transform:capitalize; font-weight:600;}
.sitem_menu ul li a:hover{
	color:var(--absolute-black); text-decoration:none;}
#tus_margin{
	margin:0px; padding:0px;}
.tus_mobile{
	margin:0px; padding:10px 15px; position:relative; display:flex; justify-content:space-between; align-items:center; background-color:Black;column-gap: 1rem;border-bottom: 1px solid var(--primary-gray-500);}
.tus_mblogo{
	margin:0px; padding:0px 5px;}
.tus_mblinks{
	margin:0px; padding:0px; position:relative}
.tus_mblinks a{
	margin:0px 0px; padding:7px 9px 5px 9px; color:white; font-size:16px; border:solid 1px white;}
.tus_mbnav{
	margin:0px; padding:10px; width:80%; position:fixed; background-color:#fff; z-index:1; top:0; left:0; height:100%; z-index:3434349; overflow-y: scroll;}
.tus_mbnav a{
	margin:0px; padding: 10px; display:block; color:var(--absolute-black); font-size:16px; text-transform:capitalize; transition:0.8s; border-bottom: solid 1px var(--primary-gray-500);
	font-weight:400}
.tus_mbnav a:hover{
	color:var(--primary-gray-500);}
.tus_mbnav a i{
	margin:5px 15px 0 0; padding:0px; font-size:12px; float:right;}
.tus_close{
	margin:0px; padding:0px; position:absolute; top:10px; right:25px}
.tus_close a{
	margin:0px; padding:0px 6px; background-color:#000; color:#fff; font-size:16px;}
.tus_close2{
	margin:0px; padding:0px; position:absolute; top:10px; right:25px}
.tus_close2 a{
	margin:0px; padding:0px 6px; background-color:#000; color:#fff; font-size:16px;}
.tus_popsearch{
	margin:0px; padding:60px 20px 20px 20px; background-color:#fff; position:absolute; top:0; left:0; width:100%; z-index:34343499}
.tus_mbsrch{
	margin:0px; padding:8px 10px; width:100%; background-color:#000; color:#fff; font-size:14px; border:none}
.tus_mbsbmsrch{
	margin:-38px 0 0 0; padding:8.5px 12px; background-color:var(--primary-gray-500); color:#fff; font-size:14px; text-transform:uppercase; text-align:center; float:right; position:relative;
	border:none;}
.tus_close3{
	margin:0px; padding:0px; position:absolute; top:10px; right:25px}
.tus_close3 a{
	margin:0px; padding:5px 12px; background-color:#000; color:#fff; font-size:16px; border-radius:100%}
.tus_close4{
	margin:0px; padding:0px; position:absolute; top:5px; right:10px}
.tus_close4 a{
	margin:0px; padding:0px; color:#000 !important; font-size:22px !important; border:none !important}
.tus_mblogo img{
	margin:0px 0 5px 0; padding:0px; height:55px}
.tus_gallery{
	margin:0px 0 15px 0; padding:0px; position:relative; overflow:hidden}
.tus_gallery img{
	margin:0 auto; padding:0px; width:100%; height:auto;}
.tus_gallery h4{
	margin:0px; padding:8px 0; color:#fff; font-size:17px; text-transform:capitalize; border-bottom:solid 1px #ccc; font-weight:600}
.tus_gallery:before{
	content:''; position:absolute; background-color:rgb(0,0,0,0.6); width:100%; height:100%; top:0; left:0; transition:0.8s; opacity:0}
.tus_gallery:after{
	content:''; position:absolute;  width: 0; height: 0; border-bottom: 100px solid var(--primary-gray-500); border-left: 120px solid transparent; 
	bottom:0; right:-100%; transition:0.8s;}
.tus_gallery i{
	margin:0px; padding:0px; color:#fff; font-size:25px; position:absolute; bottom:5%; right:4%; z-index:1; transition:0.8s; opacity:0; transition-delay:0.2s}
.tus_gallery:hover:before{
	opacity:1;}
.tus_gallery:hover:after{
	right:0;}
.tus_gallery:hover i{
	opacity:1;}
.cate{
	margin:0px; padding:0px; position:relative;}
.swiper-next{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:20px; position:absolute; top:45%; right:-105%; z-index:-1}
.swiper-prev{
	margin:0px; padding:0px; color:var(--primary-gray-500); font-size:20px; position:absolute; top:45%; left:-7%; z-index:-1}


/* top-srch-frm  */

.top-srch-frm{
    border: 1px solid var(--primary-bg-900);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-gray-500);
    border-radius: 8px;
    overflow: hidden;
    font-family: "Poppins",Arial, Helvetica, sans-serif;

    input,button{
        margin: 0;
        padding: 1em;
        background-color: var(--absolute-white);
        border: 0;
        font-size: 14px;
        color: var(--primary-bg-900);
    }

    button{
        width: fit-content;
        padding-inline: 2em ;
        background-color: var(--primary-bg-900);
        color: var(--absolute-white);
        transition: all 0.25s ease-in-out;
        &:hover{background-color: var(--primary-bg-900);}
    }
}

/* 
 */

.ros-fprod-item{
    position: relative;
    background-color: var(--absolute-white);
    transition: all 0.25s ease-in-out;
}

.ros-fprod-item.ros-next-pg .item-cap{text-align: center;margin-top: 1rem;}

.ros-fprod-item.ros-next-pg .item-cap h4{font-size: 20px;margin: 0;padding: 0;}
.ros-fprod-item.ros-next-pg .item-cap h6{margin: 0.5rem 0;font-size: 13px;}
.ros-fprod-item.ros-next-pg .item-cap a{bottom: auto;margin:0 0 0.75rem 0;}

.ros-fprod-item:hover{border-color: var(--primary-orange-500);}

.ros-fprod-item .item-img{display: block;width: 100%;height: auto;}

.ros-fprod-item .item-cap{text-align: center;}

.ros-fprod-item .item-cap h4{
    font-size: 20px;
    font-weight: 500;
    margin: 0 ;
    color: var(--primary-blue-950);
}

.ros-fprod-item .item-cap h6{
    font-size: 14px;
    font-weight: 500;
    margin: 0.5rem 0 0 0;
    color: var(--primary-blue-950);
}

.ros-fprod-item .item-cap a{position: relative;bottom: -0.85rem;}
/*contact form contact us page*/

.contact--form {
    form {
        --col-size: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(var(--col-size), 100%), 1fr));
        gap: 1rem 0.75rem;
 
        h4 {
            font-size: 24px;
            text-transform: uppercase;
            font-weight: bolder;
            font-family: "Poppins",Arial, Helvetica, sans-serif;
            text-align: left;
            color: var(--absolute-black);
            margin:0px;
            padding:0px;
        }
 
        button,
        h4,
        .span-two {
            grid-column: 1 / -1;
        }
 
        .input-group {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: start;
            label {
                font-size: 14px;
                font-weight: 500;
                text-transform: capitalize;
                margin-bottom: 5px;
                color: var(--absolute-black);
            }
            input,
            textarea {
                border: 0;
                border: 1px solid rgba(112, 112, 112, 0.5);
                border-radius: 3px !important;
                background-color: rgba(255, 255, 255, 0.808);
                padding: 0.75em 1em;
                font-size: 14px;
                flex-grow: 1;
                color: var(--absolute-black) !important;
            }
        }
 
        button {
            --sizeii: 20px;
            padding: 0.75em 1em;
            font-size: 16px;
            text-transform: uppercase;
            border: 0;
            position: relative;
            z-index: 1;
            overflow: hidden;
            background-color: var(--absolute-black);
            &::before {
                content: "";
                position: absolute;
                width: var(--sizeii);
                height: var(--sizeii);
                background-color: var(--primary-bg);
                bottom: calc((var(--sizeii) / 2) * -1);
                right: calc((var(--sizeii) / 2) * -1);
                transform: rotate(45deg);
                z-index: 2;
                transition: all 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
            }
            &:hover {--sizeii: 25px;}
        }
    }
}
/*contact form contact us page end*/
.ros-contact-bar {
    background: #000; /* White background as requested */
  padding: 10px 0;
}

.ros-contact-info {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px; /* Space between columns */
  font-weight: 600;
  margin: 0px 0 10px 0px
}

.contact-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-column span {
  font-weight: bold;
  color: #000; /* Black for labels to contrast with white background */
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 5px;
  margin-left: 34px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
}

.contact-item i {
  color: #fff; /* White icons as requested */
  font-size: 20px;
  margin-right: 11px;
  margin-top: 10px;
}

.contact-details {
  display: flex;
  flex-direction: column;
}
#WA{
        margin-top: 0px;
}
.contact-details a {
  color: #fff; /* White links as requested */
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

.contact-details a:hover {
  text-decoration: underline;
}
/* products page */
/* CONTAINER */
.container-sidebar {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 20px;
  }
  
  /* SIDEBAR */
  .sidebar {
    width: 250px;
    background: #f5f5f5;
    padding: 10px;
  }
  
  .sidebar h3 {
    background: black;
    color: white;
    padding: 10px;
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: bold;
  }
  
  /* CATEGORY */
  .cat-title {
    background: #ddd;
    padding: 10px;
    cursor: pointer;
    margin-top: 5px;
    font-weight: bold;
  }
  
  .cat-title:hover {
    background: black;
    color: white;
  }
  
  .cat-items {
    display: none;
    background: #eee;
  }
  
  .cat-items p {
    margin: 0;
    padding: 8px 10px;
    cursor: pointer;
  }
  
  .cat-items p:hover {
    background: #ccc;
  }
  
  /* PRODUCTS */
  .products {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
  }
  
  .product {
    width: calc(33.33% - 14px); /* 3 per row */
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px;
    background: white;
  }
  
  .product img {
    width: 100%;
  }
  
  /* RESPONSIVE */
  @media (max-width: 768px) {
    .container-sidebar {
      flex-direction: column;
    }
  
    .sidebar {
      width: 100%;
    }
  
    .product {
      width: 100%;
    }
  }