/* ==================================================
   1. ROOT VARIABLES
================================================== */

:root {

  /* ---------- BRAND COLORS ---------- */
  --primary-blue: #003366;
  --primary-blue-hover: #01477c;

  --sale-color: #d32f2f;
  --whatsapp-green: #25D366;

  /* ---------- TEXT COLORS ---------- */
  --text-dark: #222222;
  --text-medium: #666666;
  --text-light: #888888;

  /* ---------- BACKGROUND COLORS ---------- */
  --background-main: #ffffff;
  --background-light: #f5f7fa;
  --background-cream: #ECECEC;

  /* ---------- BORDER COLORS ---------- */
  --border-light: #e0e0e0;
  --border-medium: #d5d5d5;

  /* ---------- COMMON COLORS ---------- */
  --white: #ffffff;
  --black: #000000;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);

  /* ---------- BORDER RADIUS ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 40px;

  /* ---------- TRANSITIONS ---------- */
  --transition-fast: .2s ease;
  --transition-normal: .3s ease;

}
/* ==================================================
   2. GLOBAL RESET & BASE STYLES
================================================== */

/* ---------- RESET ---------- */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ---------- HTML ---------- */

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

/* ---------- BODY ---------- */

body{
  font-family:'Poppins',sans-serif;
  background:var(--background-main);
  color:var(--text-dark);
  direction:ltr;
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}

/* ---------- IMAGES ---------- */

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ---------- LINKS ---------- */

a{
  text-decoration:none;
  color:inherit;
}

/* ---------- LISTS ---------- */

ul,
ol{
  list-style:none;
}

/* ---------- BUTTONS ---------- */

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
}

/* ---------- INPUTS ---------- */

input,
select,
textarea{
  font-family:inherit;
}

/* ---------- HEADINGS ---------- */

h1,h2,h3,h4,h5,h6{
  line-height:1.3;
  color:var(--primary-blue);
}

h2{
  font-weight:700;
  font-size:clamp(1.5rem,4vw,2.5rem);
  letter-spacing:-0.5px;
}

/* ==================================================
   3. RTL MODE (Arabic)
================================================== */

body.rtl{
  direction:rtl;
  text-align:right;
}

/* Header */

body.rtl .header{
  direction:rtl;
}

body.rtl .header-right{
  flex-direction:row-reverse;
}

/* Navigation */

body.rtl .nav-links{
  flex-direction:row-reverse;
}

/* Footer */

body.rtl .footer-container{
  direction:rtl;
}

/* Forms */

body.rtl input,
body.rtl textarea,
body.rtl select{
  direction:rtl;
  text-align:right;
}

/* Dropdown */

body.rtl .dropdown-content{
  right:auto;
  left:0;
}

/* Mobile Drawer */

body.rtl .mobile-nav{
  left:auto;
  right:0;
  transform:translateX(100%);
}

body.rtl .mobile-nav.show{
  transform:translateX(0);
}

/* ==================================================
   4. LAYOUT UTILITIES
================================================== */

.page-container{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:0 20px;
}

.center-wrapper{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:0 20px;
}

.section-padding{
    padding:60px 20px;
}

.text-center{
    text-align:center;
}

.hidden{
    display:none !important;
}  
	  
/* ==================================================
   5. NEWS BAR
================================================== */

.news-bar{
  background:var(--primary-blue);
  color:var(--white);
  padding:10px 20px;
  text-align:center;
  font-size:14px;
  position:relative;
}

.news-bar .close-btn{
  position:absolute;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--white);
  font-size:18px;
  cursor:pointer;
}

/* ==================================================
   6. HEADER
================================================== */

.header{
  display:grid;
  grid-template-columns:220px 1fr auto;
  align-items:center;
  gap:25px;

  padding:15px 40px;

  background:var(--white);
  border-bottom:1px solid var(--border-light);

  box-shadow:var(--shadow-sm);

  max-width:1500px;
  margin:0 auto;
}

/* ---------- LOGO ---------- */

.logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.logo img{
  height:55px;
  width:auto;
  display:block;
}

/* ---------- RIGHT SECTION ---------- */

.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  white-space:nowrap;
}
/* ==================================================
   7. HEADER ACTIONS
================================================== */
/* WhatsApp */

.header-whatsapp{
  background:var(--whatsapp-green);
  color:var(--white) !important;

  padding:10px 16px;

  border-radius:var(--radius-pill);

  display:flex;
  align-items:center;
  gap:6px;

  font-weight:600;
}

.header-whatsapp:hover{
  background:#1da851;
}

/* Language */

.lang-toggle{
  border:1px solid var(--primary-blue);

  background:transparent;

  color:var(--primary-blue);

  padding:0 18px;

  height:42px;

  border-radius:var(--radius-pill);

  font-weight:600;
}

/* Account */

.account-icon{
  width:42px;
  height:42px;

  border-radius:50%;

  background:var(--background-light);

  display:flex;
  align-items:center;
  justify-content:center;
}

.account-icon:hover{
  background:#eef3f8;
}	  

/* ==================================================
   8. SEARCH BOX
================================================== */

/* Search Container */

.search-box{
  width:100%;
  max-width:850px;
  justify-self:center;
  position:relative;
}

/* Search Input */

.search-box input,
.nav-search input{
  width:100%;
  height:48px;

  padding:0 20px;

  border:none;
  border-radius:var(--radius-pill);

  background:var(--background-light);

  font-size:14px;

  transition:var(--transition-normal);
}

.search-box input:focus,
.nav-search input:focus{
  outline:none;
  background:var(--white);
  box-shadow:0 0 0 2px var(--primary-blue);
}

/* Search Suggestions */

.brand-preview{
  position:absolute;

  top:100%;
  left:0;

  width:100%;

  margin-top:8px;

  background:var(--white);

  border-radius:var(--radius-md);

  box-shadow:var(--shadow-md);

  display:none;

  z-index:1100;

  padding:12px 10px;
}

.brand-item{
  display:flex;
  align-items:center;
  gap:10px;

  padding:8px;

  border-radius:var(--radius-sm);

  cursor:pointer;
}

.brand-item:hover{
  background:#f4f4f4;
}

.brand-item img{
  height:30px;
}

.brand-item span{
  font-size:14px;
  font-weight:500;
  color:#333;
}
	  
/* ==================================================
   9. NAVIGATION BAR
================================================== */

.nav-bar{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:20px;

  background:var(--white);

  padding:12px 20px;
	
	padding-left:40px;

  border-bottom:1px solid var(--border-light);

  position:sticky;
  top:0;

  z-index:1000;

  max-width:1500px;
  margin:0 auto;
}

/* Menu Container */

.nav-links{

  display:flex;

  align-items:center;

  justify-content:flex-start;

  gap:28px;

  flex-wrap:wrap;
}

/* Menu Links */

.nav-links a{
  text-decoration:none;

  color:var(--primary-blue);

  font-size:16px;
  font-weight:600;

  padding:8px 14px;

  border-radius:var(--radius-sm);

  transition:var(--transition-normal);
}

.nav-links a:hover{
  background:var(--primary-blue);
  color:var(--white);
}
	  .sale-btn{
  background:transparent;

  color:var(--sale-color);

  border:2px solid var(--sale-color);

  padding:8px 18px;

  border-radius:var(--radius-md);

  font-weight:600;
}

.sale-btn:hover{
  background:var(--sale-color);
  color:var(--white);
}
	  
	  /* Right Call Section */

.nav-call{
  margin-left:auto;

  display:flex;
  align-items:center;
}

.nav-call a{
  display:flex;
  align-items:center;
  gap:8px;

  color:var(--primary-blue);

  font-weight:700;

  font-size:15px;

  padding:8px 16px;

  border-radius:30px;

  background:#f5f7fa;

  transition:.3s ease;
}

.nav-call a:hover{
  background:var(--primary-blue);
  color:#fff;
}
	  .nav-call small{
  display:block;
  font-size:11px;
  color:#777;
  line-height:1;
}

.nav-call strong{
  display:block;
  font-size:15px;
  color:inherit;
}
/* ==================================================
   10. DROPDOWNS
================================================== */
	  
	  .dropdown{
  position:relative;
  display:inline-block;
}

/* Main Button */

.pill-dropbtn{
  background:transparent;

  border:2px solid var(--primary-blue);

  color:var(--primary-blue);

  font-weight:600;

  padding:6px 18px;

  border-radius:var(--radius-pill);

  cursor:pointer;

  transition:var(--transition-normal);
}

.pill-dropbtn:hover{
  background:var(--primary-blue);
  color:var(--white);
}

/* Dropdown Menu */

.dropdown-content{
  display:none;

  position:absolute;

  top:110%;
  right:0;

  min-width:220px;

  background:var(--white);

  border-radius:var(--radius-md);

  box-shadow:var(--shadow-md);

  overflow:hidden;

  z-index:2000;
}

.dropdown-content a{
  display:block;

  padding:12px 16px;

  color:#333;

  text-decoration:none;

  font-weight:500;
}

.dropdown-content a:hover{
  background:#f9f9f9;
  color:var(--primary-blue);
}

/* Desktop Hover */

.dropdown:hover .dropdown-content{
  display:block;
}
	  
/* ==================================================
   11. CAROUSEL
================================================== */

.carousel{
  position:relative;

  overflow:hidden;

  margin:40px auto;

  max-width:2400px;

  border-radius:var(--radius-sm);

  box-shadow:var(--shadow-lg);
}

.carousel-slides{
  display:flex;

  width:100%;

  transition:transform .8s ease;
}

.carousel-slide{
  min-width:100%;

  height:50vh;

  background-size:cover;

  background-position:center;

  display:flex;

  align-items:center;

  justify-content:center;
}

/* Overlay */

.carousel-overlay{
  width:100%;
  height:100%;

  padding:20px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
  linear-gradient(
  to right,
  rgba(0,0,0,.60),
  rgba(0,0,0,.25)
  );
}

/* Text */

.carousel-text{

  color:var(--white);

  text-align:center;

  max-width:800px;

  animation:fadeUp 1s ease;

}

.carousel-text h2{

  font-size:42px;

  margin-bottom:15px;

}

.carousel-text p{

  font-size:18px;

  margin-bottom:25px;

}

.carousel-text .btn{

  background:var(--primary-blue);

  color:var(--white);

  padding:12px 30px;

  border-radius:var(--radius-pill);

}

.carousel-text .btn:hover{

  background:var(--primary-blue-hover);

}

/* Controls */

.carousel-prev,
.carousel-next{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:48px;

  height:48px;

  border-radius:50%;

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

  color:#fff;

  font-size:24px;

}

.carousel-prev{
left:20px;
}

.carousel-next{
right:20px;
}

/* Dots */

.carousel-dots{

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:8px;

}

.carousel-dots button{

width:12px;

height:12px;

border-radius:50%;

opacity:.5;

background:#fff;

}

.carousel-dots button.active{

background:var(--primary-blue);

opacity:1;

}

@keyframes fadeUp{

from{
transform:translateY(40px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}
/* ==================================================
   12. BEST SELLERS
================================================== */

.best-seller-tabs{

background:var(--white);

padding:50px 30px;

}

.best-seller-tabs h2{

text-align:center;

margin-bottom:30px;

}

/* Tabs */

.tab-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin-bottom:30px;

}

.tab-btn{

padding:12px 30px;

border:2px solid var(--primary-blue);

background:#fff;

color:var(--primary-blue);

border-radius:var(--radius-pill);

font-weight:600;

}

.tab-btn:hover,
.tab-btn.active{

background:var(--primary-blue);

color:#fff;

}

/* ==========================================
   PRODUCTS / BEST SELLER CARDS
========================================== */

.tab-panel{
  display:none;
}

.tab-panel.active{
  display:block;
}


/* ==================================================
   PRODUCT GRID
================================================== */

.product-grid,
#productsGrid{

  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(260px,1fr));

  gap:20px;

  max-width:1400px;

  margin:0 auto;
}


/* ==================================================
   PRODUCT CARD
================================================== */

.product-card{

  position:relative;

  display:flex;

  flex-direction:column;

  height:100%;

  min-width:0;

  overflow:hidden;

  background:#fff;

  border:1px solid #e8ebee;

  border-radius:6px;

  box-shadow:0 4px 14px rgba(0,0,0,.055);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


.product-card:hover{

  transform:translateY(-5px);

  border-color:rgba(0,51,102,.25);

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


/* ==================================================
   PRODUCT IMAGE
================================================== */

.product-image{

  height:230px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:20px;

  background:#ffffff;

  position:relative;

  overflow:hidden;

  flex-shrink:0;
}


.product-image img{

  width:auto;

  height:auto;

  max-width:100%;

  max-height:195px;

  object-fit:contain;

  display:block;

  transition:
    transform .5s cubic-bezier(.2,.7,.2,1);
}


.product-card:hover .product-image img{

  transform:scale(1.06);
}


/* ==================================================
   PRODUCT INFORMATION
================================================== */

.product-card > .product-brand,
.product-card > .product-title,
.product-card > .product-arabic,
.product-card > .product-code,
.product-card > .stock-badge,
.product-card > .btn-details{

  margin-left:18px;

  margin-right:18px;
}


/* ==================================================
   BRAND
================================================== */

.product-brand{

  margin-top:18px;

  margin-bottom:7px;

  color:var(--primary-blue);

  font-size:12px;

  font-weight:800;

  letter-spacing:.8px;

  text-transform:uppercase;
}


/* ==================================================
   ENGLISH PRODUCT NAME
================================================== */

.product-title{

  font-size:16px;

  font-weight:700;

  color:#20252b;

  line-height:1.4;

  min-height:44px;

  margin-bottom:7px;
}


/* ==================================================
   ARABIC PRODUCT NAME
================================================== */

.product-arabic{

  color:#737b84;

  font-size:13px;

  line-height:1.5;

  min-height:38px;

  margin-bottom:9px;

  direction:rtl;
}


/* ==================================================
   PRODUCT CODE
================================================== */

.product-code{

  font-size:12px;

  color:#89919a;

  margin-bottom:13px;
}


/* ==================================================
   STOCK STATUS
================================================== */

.stock-status{

  display:flex;

  align-items:center;

  min-height:32px;

  margin:0 18px 16px;

}


/* Stock Badge */

.stock-badge{

  display:flex;

  align-items:center;

  justify-content:flex-start;

  width:auto;

  padding:0;

  margin:0;

  background:transparent;

  border:0;

  line-height:0;
}


/* Stock Icon */

.stock-badge img{

  display:block;

  width:auto;

  height:30px;

  max-width:150px;

  object-fit:contain;
}


/* Available */

.stock-badge.in-stock img{

  height:30px;
}


/* Out of Stock */

.stock-badge.no-stock img{

  height:30px;
}


/* ==================================================
   VIEW DETAILS BUTTON
================================================== */

.btn-details{

  margin-top:auto;

  margin-bottom:16px;

  display:block;

  width:auto;

  padding:10px 12px;

  text-align:center;

  text-decoration:none;

  border:1px solid #d9dfe5;

  border-radius:4px;

  background:#fff;

  color:var(--primary-blue);

  font-size:12px;

  font-weight:700;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


.btn-details:hover{

  background:#f4f7fa;

  border-color:var(--primary-blue);

  color:var(--primary-blue);

  transform:translateY(-1px);
}


/* ==================================================
   PRODUCT ACTION ICONS
================================================== */

.product-actions{

  position:absolute;

  left:12px;

  top:12px;

  display:flex;

  flex-direction:column;

  gap:8px;

  z-index:10;
}


.action-icon{

  width:36px;

  height:36px;

  border-radius:50%;

  background:var(--primary-blue);

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

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

  transition:
    transform .25s ease,
    background .25s ease;
}


.action-icon:hover{

  transform:scale(1.08);

  background:var(--primary-blue-hover);
}


/* ==================================================
   TOOLTIP
================================================== */

.action-icon span{

  position:absolute;

  left:46px;

  top:50%;

  transform:translateY(-50%);

  background:#333;

  color:#fff;

  padding:6px 10px;

  border-radius:5px;

  font-size:11px;

  white-space:nowrap;

  opacity:0;

  visibility:hidden;

  transition:.25s ease;
}


.action-icon:hover span{

  opacity:1;

  visibility:visible;
}


/* ==================================================
   NEW / SALE BADGE
================================================== */

.badge{

  position:absolute;

  top:12px;

  right:12px;

  z-index:5;

  background:var(--sale-color);

  color:#fff;

  padding:5px 10px;

  border-radius:4px;

  font-size:10px;

  font-weight:700;

  letter-spacing:.3px;
}


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

@media (max-width:1100px){

  .product-grid,
  #productsGrid{

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:18px;
  }

}


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

@media (max-width:768px){

  .product-grid,
  #productsGrid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:14px;
  }


  .product-image{

    height:190px;

    padding:14px;
  }


  .product-image img{

    max-height:160px;
  }


  .product-card > .product-brand,
  .product-card > .product-title,
  .product-card > .product-arabic,
  .product-card > .product-code,
  .product-card > .stock-badge,
  .product-card > .btn-details{

    margin-left:13px;

    margin-right:13px;
  }


  .product-brand{

    margin-top:14px;

    font-size:11px;
  }


  .product-title{

    font-size:14px;

    min-height:40px;
  }


  .product-arabic{

    font-size:12px;

    min-height:34px;
  }


  .product-code{

    font-size:11px;
  }


  .btn-details{

    margin-bottom:13px;

    padding:9px;

    font-size:11px;
  }


  .action-icon{

    width:34px;

    height:34px;
  }

}


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

@media (max-width:500px){

  .product-grid,
  #productsGrid{

    gap:10px;
  }


  .product-image{

    height:165px;

    padding:10px;
  }


  .product-image img{

    max-height:140px;
  }


  .product-card > .product-brand,
  .product-card > .product-title,
  .product-card > .product-arabic,
  .product-card > .product-code,
  .product-card > .stock-badge,
  .product-card > .btn-details{

    margin-left:10px;

    margin-right:10px;
  }


  .product-brand{

    margin-top:12px;

    margin-bottom:5px;

    font-size:10px;
  }


  .product-title{

    font-size:13px;

    min-height:36px;
  }


  .product-arabic{

    font-size:11px;

    min-height:31px;
  }


  .product-code{

    font-size:10px;

    margin-bottom:10px;
  }


  .stock-status{

  margin-left:10px;

  margin-right:10px;

  margin-bottom:10px;
}

.stock-badge img{

  height:25px;
}


  .btn-details{

    margin-bottom:10px;

    padding:8px;

    font-size:10px;
  }


  .action-icon{

    width:32px;

    height:32px;
  }


  .badge{

    top:9px;

    right:9px;

    padding:4px 8px;

    font-size:9px;
  }

}

/* ==================================================
   12A. PREMIUM BEST SELLER CARDS
================================================== */


/* --------------------------------------------------
   BEST SELLER GRID
-------------------------------------------------- */

.best-seller-tabs .product-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:20px;

  max-width:1400px;

  margin:0 auto;

}


/* --------------------------------------------------
   PREMIUM CARD
-------------------------------------------------- */

.best-seller-tabs .premium-product-card{

  position:relative;

  display:flex;

  flex-direction:column;

  min-width:0;

  height:100%;

  overflow:hidden;

  background:#fff;

  border:1px solid #e5e9ee;

  border-radius:12px;

  box-shadow:
    0 5px 18px rgba(0,0,0,.055);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.best-seller-tabs .premium-product-card:hover{

  transform:translateY(-6px);

  border-color:
    rgba(0,51,102,.20);

  box-shadow:
    0 16px 35px rgba(0,0,0,.12);

}


/* --------------------------------------------------
   PRODUCT IMAGE
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.product-image{

  position:relative;

  height:270px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:22px;

  background:#ffffff;

  overflow:hidden;
}


.best-seller-tabs .premium-product-card
.product-image::after{

  content:"";

  position:absolute;

  left:12%;

  right:12%;

  bottom:12px;

  height:18px;

  background:
    radial-gradient(
      ellipse,
      rgba(0,0,0,.10),
      transparent 70%
    );

  opacity:.35;

  pointer-events:none;

}


.best-seller-tabs .premium-product-card
.product-image img{

  position:relative;

  z-index:1;

  display:block;

  width:auto;

  height:auto;

  max-width:100%;

  max-height:230px;

  object-fit:contain;

  transition:
    transform .5s cubic-bezier(.2,.7,.2,1);

}


.best-seller-tabs .premium-product-card:hover
.product-image img{

  transform:scale(1.055);

}


/* --------------------------------------------------
   PRODUCT CONTENT
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.product-content{

  display:flex;

  flex-direction:column;

  flex:1;

  padding:18px 18px 16px;

  background:#ffffff;
}


/* --------------------------------------------------
   PRODUCT TITLE
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.product-title{

  margin:0;

  min-height:46px;

  color:#082f5f;

  font-size:16px;

  font-weight:700;

  line-height:1.4;

}


/* --------------------------------------------------
   ARABIC
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.product-arabic{

  margin:5px 0 0;

  min-height:28px;

  color:#777f88;

  font-size:12px;

  line-height:1.5;

  direction:rtl;

}


/* --------------------------------------------------
   PRODUCT CODE
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.product-code{

  margin-top:7px;

  color:#8a929b;

  font-size:11px;

  line-height:1.4;

}


.best-seller-tabs .premium-product-card
.product-code strong{

  color:#626b75;

  font-weight:600;

}


/* --------------------------------------------------
   STOCK
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.stock-status{

  display:flex;

  align-items:center;

  min-height:34px;

  margin-top:13px;

  padding:7px 11px;

  background:#f8f6f2;

  border-radius:10px;

}


/* --------------------------------------------------
   STOCK STATUS
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.stock-status{

  display:flex;

  align-items:center;

  min-height:34px;

  margin-top:13px;

  padding:7px 11px;

  background:#f8f6f2;

  border-radius:10px;
}


.best-seller-tabs .premium-product-card
.stock-badge{

  display:flex;

  align-items:center;

  gap:8px;

  margin:0;

  padding:0;

  background:transparent;

  border:0;

  line-height:1;
}


/* Stock Icon */

.best-seller-tabs .premium-product-card
.stock-badge img{

  display:block;

  width:auto;

  height:27px;

  max-width:140px;

  object-fit:contain;

}


/* Stock Text */

.best-seller-tabs .premium-product-card
.stock-text{

  color:#218739;

  font-size:12px;

  font-weight:700;

  line-height:1.2;

  white-space:nowrap;
}


/* Out of Stock Text */

.best-seller-tabs .premium-product-card
.stock-badge.no-stock .stock-text{

  color:#c92f3d;
}


/* --------------------------------------------------
   BOTTOM ACTIONS
-------------------------------------------------- */

.best-seller-tabs .premium-product-actions{

  display:flex;

  align-items:center;

  gap:10px;

  margin-top:14px;

}


/* --------------------------------------------------
   WHATSAPP
-------------------------------------------------- */

.best-seller-tabs .premium-whatsapp{

  width:48px;

  height:44px;

  flex-shrink:0;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--primary-blue);

  border-radius:8px;

  box-shadow:
    0 4px 10px rgba(0,51,102,.14);

  transition:
    transform .25s ease,
    background .25s ease;

}


.best-seller-tabs .premium-whatsapp img{

  width:24px;

  height:24px;

  object-fit:contain;

}


.best-seller-tabs .premium-whatsapp:hover{

  background:var(--primary-blue-hover);

  transform:translateY(-2px);

}


/* --------------------------------------------------
   VIEW DETAILS
-------------------------------------------------- */

.best-seller-tabs .premium-details{

  flex:1;

  min-height:44px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:9px 13px;

  background:#fff;

  border:1px solid var(--primary-blue);

  border-radius:8px;

  color:var(--primary-blue) !important;

  font-size:12px;

  font-weight:700;

  text-decoration:none;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.best-seller-tabs .premium-details:hover{

  background:var(--primary-blue);

  color:#fff !important;

  transform:translateY(-2px);

}


.best-seller-tabs .details-arrow{

  font-size:18px;

  line-height:1;

  transition:
    transform .25s ease;

}


.best-seller-tabs .premium-details:hover
.details-arrow{

  transform:translateX(4px);

}


/* --------------------------------------------------
   TOP ACTION ICONS
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.product-actions{

  position:absolute;

  top:16px;

  left:16px;

  z-index:10;

  display:flex;

  flex-direction:column;

  gap:8px;

}


.best-seller-tabs .premium-product-card
.action-icon{

  width:38px;

  height:38px;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  background:var(--primary-blue);

  border-radius:50%;

  color:#fff !important;

  font-size:15px;

  text-decoration:none;

  box-shadow:
    0 5px 12px rgba(0,0,0,.13);

  transition:
    transform .25s ease,
    background .25s ease;

}


.best-seller-tabs .premium-product-card
.action-icon:hover{

  background:var(--primary-blue-hover);

  transform:scale(1.08);

}


/* --------------------------------------------------
   TOOLTIP
-------------------------------------------------- */

.best-seller-tabs .premium-product-card
.action-icon span{

  position:absolute;

  left:47px;

  top:50%;

  transform:
    translateY(-50%);

  padding:6px 9px;

  background:#1d2733;

  color:#fff;

  border-radius:5px;

  font-size:11px;

  white-space:nowrap;

  opacity:0;

  visibility:hidden;

  transition:.2s ease;

}


.best-seller-tabs .premium-product-card
.action-icon:hover span{

  opacity:1;

  visibility:visible;

}


/* --------------------------------------------------
   PREMIUM BADGES
-------------------------------------------------- */

.best-seller-tabs .premium-product-badge{

  position:absolute;

  top:16px;

  right:16px;

  z-index:8;

  padding:6px 10px;

  border-radius:6px;

  color:#fff;

  font-size:10px;

  font-weight:800;

  letter-spacing:.4px;

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

}


.best-seller-tabs .deal-badge{

  background:#e53935;

}


.best-seller-tabs .new-badge{

  background:var(--primary-blue);

}


.best-seller-tabs .featured-badge{

  background:#60758a;

}


/* --------------------------------------------------
   TABLET
-------------------------------------------------- */

@media (max-width:1100px){

  .best-seller-tabs .product-grid{

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:18px;

  }

}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width:768px){

  .best-seller-tabs .product-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:14px;

  }


  .best-seller-tabs .premium-product-card
  .product-image{

    height:210px;

    padding:15px;

  }


  .best-seller-tabs .premium-product-card
  .product-image img{

    max-height:175px;

  }


  .best-seller-tabs .premium-product-card
  .product-content{

    padding:14px 13px 13px;

  }


  .best-seller-tabs .premium-product-card
  .product-title{

    font-size:14px;

    min-height:40px;

  }


  .best-seller-tabs .premium-product-card
  .product-code{

    font-size:10px;

  }


  .best-seller-tabs .premium-product-card
  .stock-status{

    margin-top:10px;

    padding:6px 9px;

  }


  .best-seller-tabs .premium-product-card
  .stock-badge img{

    height:24px;

  }
.best-seller-tabs .premium-product-card
.stock-text{

  font-size:11px;
}

  .best-seller-tabs .premium-product-card
  .product-actions{

    top:12px;

    left:12px;

  }


  .best-seller-tabs .premium-product-card
  .action-icon{

    width:34px;

    height:34px;

    font-size:13px;

  }


  .best-seller-tabs .premium-product-badge{

    top:12px;

    right:12px;

    padding:5px 8px;

    font-size:9px;

  }


  .best-seller-tabs .premium-whatsapp{

    width:42px;

    height:40px;

  }


  .best-seller-tabs .premium-details{

    min-height:40px;

    font-size:11px;

  }

}


/* --------------------------------------------------
   SMALL MOBILE
-------------------------------------------------- */

@media (max-width:500px){

  .best-seller-tabs .product-grid{

    gap:10px;

  }


  .best-seller-tabs .premium-product-card
  .product-image{

    height:175px;

    padding:10px;

  }


  .best-seller-tabs .premium-product-card
  .product-image img{

    max-height:145px;

  }


  .best-seller-tabs .premium-product-card
  .product-content{

    padding:11px 10px 10px;

  }


  .best-seller-tabs .premium-product-card
  .product-title{

    font-size:13px;

    min-height:36px;

  }


  .best-seller-tabs .premium-product-card
  .product-arabic{

    font-size:10px;

    min-height:25px;

  }


  .best-seller-tabs .premium-product-card
  .product-code{

    font-size:9px;

    margin-top:5px;

  }


  .best-seller-tabs .premium-product-card
  .stock-status{

    min-height:29px;

    margin-top:8px;

    padding:5px 7px;

  }


  .best-seller-tabs .premium-product-card
  .stock-badge img{

    height:21px;

  }
.best-seller-tabs .premium-product-card
.stock-text{

  font-size:10px;
}

  .best-seller-tabs .premium-product-actions{

    gap:7px;

    margin-top:10px;

  }


  .best-seller-tabs .premium-whatsapp{

    width:38px;

    height:37px;

  }


  .best-seller-tabs .premium-whatsapp img{

    width:20px;

    height:20px;

  }


  .best-seller-tabs .premium-details{

    min-height:37px;

    padding:7px 8px;

    font-size:10px;

    gap:7px;

  }


  .best-seller-tabs .details-arrow{

    font-size:15px;

  }


  .best-seller-tabs .premium-product-card
  .product-actions{

    top:9px;

    left:9px;

    gap:6px;

  }


  .best-seller-tabs .premium-product-card
  .action-icon{


    width:31px;

    height:31px;

    font-size:12px;

  }


  .best-seller-tabs .premium-product-badge{

    top:9px;

    right:9px;

    padding:4px 7px;

    font-size:8px;

  }

}
/* ==================================================
   13. PREMIUM PRODUCT CATEGORY SHOWCASE
================================================== */

.category-section{
  background:#f7f8fa;
  padding:70px 40px 75px;
  position:relative;
}


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

.category-section-header{
  max-width:1400px;
  margin:0 auto 35px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:30px;
}

.category-heading{
  max-width:720px;
}

.category-eyebrow{
  display:block;

  margin-bottom:8px;

  color:var(--primary-blue);

  font-size:12px;
  font-weight:800;

  letter-spacing:2px;
  text-transform:uppercase;
}

.category-heading h2{
  margin:0;

  font-size:clamp(2rem,4vw,3rem);

  line-height:1.1;
  letter-spacing:-1px;
}

.category-heading p{
  margin:12px 0 0;

  color:#68727d;

  font-size:15px;
  line-height:1.6;
}


/* ==================================================
   VIEW ALL CATEGORIES
================================================== */

.category-view-all{
  flex-shrink:0;

  display:inline-flex;
  align-items:center;

  gap:12px;

  padding:12px 20px;

  background:var(--primary-blue);

  color:#fff !important;

  border-radius:4px;

  font-size:14px;
  font-weight:700;

  text-decoration:none;

  transition:
    background .25s ease,
    transform .25s ease;
}

.category-view-all span{
  font-size:20px;
  line-height:1;

  transition:transform .25s ease;
}

.category-view-all:hover{
  background:var(--primary-blue-hover);

  transform:translateY(-2px);
}

.category-view-all:hover span{
  transform:translateX(4px);
}


/* ==================================================
   CATEGORY SHOWCASE
================================================== */

.category-showcase{
  max-width:1400px;

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(12,1fr);

  grid-template-rows:repeat(2,250px);

  gap:12px;
}


/* ==================================================
   CATEGORY TILE
================================================== */

.category-tile{
  position:relative;

  overflow:hidden;

  min-width:0;

  cursor:pointer;

  background:#ddd;

  border-radius:6px;

  isolation:isolate;

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

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


/* Featured Kitchenware */

.category-featured{
  grid-column:span 4;
  grid-row:span 2;
}


/* Other Categories */

.category-tile:not(.category-featured){
  grid-column:span 2;
  grid-row:span 1;
}


/* ==================================================
   CATEGORY IMAGE
================================================== */

.category-tile > img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .6s cubic-bezier(.2,.7,.2,1);
}


/* ==================================================
   IMAGE OVERLAY
================================================== */

.category-overlay{
  position:absolute;

  inset:0;

  z-index:1;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03) 15%,
      rgba(0,0,0,.15) 42%,
      rgba(0,0,0,.82) 100%
    );

  transition:background .35s ease;
}


/* Featured tile */

.category-featured .category-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 20%,
      rgba(0,0,0,.12) 45%,
      rgba(0,0,0,.88) 100%
    );
}


/* ==================================================
   TILE CONTENT
================================================== */

.category-tile-content{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:2;

  padding:18px;

  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:10px;

  color:#fff;
}

.category-featured .category-tile-content{
  padding:28px;
}

.category-tile-content > div{
  min-width:0;
}


/* ==================================================
   CATEGORY NUMBER
================================================== */

.category-number{
  position:absolute;

  top:16px;
  left:18px;

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

  font-size:11px;
  font-weight:700;

  letter-spacing:1px;
}

.category-featured .category-number{
  top:24px;
  left:28px;
}


/* ==================================================
   CATEGORY TITLE
================================================== */

.category-tile h3{
  margin:0;

  color:#fff;

  font-size:17px;
  line-height:1.2;

  font-weight:700;

  letter-spacing:-.2px;
}

.category-featured h3{
  font-size:30px;
  line-height:1.1;
}


/* Description */

.category-tile p{
  margin:7px 0 0;

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

  font-size:12px;
  line-height:1.4;
}


/* ==================================================
   ARROW
================================================== */

.category-tile-arrow{
  width:34px;
  height:34px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

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

  border-radius:50%;

  color:#fff;

  font-size:17px;

  opacity:.9;

  transition:
    background .3s ease,
    border-color .3s ease,
    color .3s ease,
    transform .3s ease;
}


/* ==================================================
   HOVER EFFECT
================================================== */

.category-tile:hover{
  transform:translateY(-4px);

  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.category-tile:hover > img{
  transform:scale(1.07);
}

.category-tile:hover .category-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.04) 10%,
      rgba(0,0,0,.18) 40%,
      rgba(0,0,0,.90) 100%
    );
}

.category-tile:hover .category-tile-arrow{
  background:#fff;

  border-color:#fff;

  color:var(--primary-blue);

  transform:translateX(3px);
}


/* ==================================================
   KEYBOARD FOCUS
================================================== */

.category-tile:focus-visible{
  outline:3px solid rgba(0,51,102,.35);

  outline-offset:3px;
}


/* ==================================================
   RTL
================================================== */

body.rtl .category-section-header{
  flex-direction:row-reverse;
}

body.rtl .category-number{
  left:auto;
  right:18px;
}

body.rtl .category-featured .category-number{
  left:auto;
  right:28px;
}

body.rtl .category-tile-arrow{
  transform:scaleX(-1);
}

body.rtl .category-tile:hover .category-tile-arrow{
  transform:
    scaleX(-1)
    translateX(3px);
}


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

@media (max-width:1100px){

  .category-section{
    padding:55px 25px 60px;
  }

  .category-showcase{
    grid-template-rows:repeat(2,210px);
  }

  .category-featured{
    grid-column:span 4;
  }

  .category-tile:not(.category-featured){
    grid-column:span 2;
  }

  .category-tile h3{
    font-size:15px;
  }

  .category-featured h3{
    font-size:25px;
  }

}


/* ==================================================
   TABLET / LARGE MOBILE
================================================== */

@media (max-width:768px){

  .category-section{
    padding:50px 18px 55px;
  }

  .category-section-header{
    align-items:flex-start;

    margin-bottom:25px;

    gap:20px;
  }

  .category-heading p{
    font-size:14px;
  }

  .category-view-all{
    padding:10px 14px;

    font-size:12px;
  }

  .category-showcase{
    grid-template-columns:repeat(2,1fr);

    grid-template-rows:auto;

    gap:10px;
  }

  .category-featured{
    grid-column:span 2;

    grid-row:span 1;

    min-height:260px;
  }

  .category-tile:not(.category-featured){
    grid-column:span 1;

    min-height:180px;
  }

  .category-featured h3{
    font-size:26px;
  }

}


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

@media (max-width:500px){

  .category-section{
    padding:40px 12px 45px;
  }

  .category-section-header{
    display:block;

    margin-bottom:22px;
  }

  .category-eyebrow{
    font-size:10px;

    letter-spacing:1.6px;
  }

  .category-heading h2{
    font-size:25px;
  }

  .category-heading p{
    margin-top:8px;

    font-size:13px;
  }

  .category-view-all{
    margin-top:16px;

    width:fit-content;
  }

  .category-showcase{
    grid-template-columns:repeat(2,1fr);

    gap:8px;
  }

  .category-featured{
    min-height:230px;
  }

  .category-tile:not(.category-featured){
    min-height:155px;
  }

  .category-featured .category-tile-content{
    padding:20px;
  }

  .category-tile-content{
    padding:13px;
  }

  .category-featured h3{
    font-size:23px;
  }

  .category-tile h3{
    font-size:14px;
  }

  .category-tile p{
    font-size:10px;
  }

  .category-number{
    top:12px;
    left:13px;

    font-size:9px;
  }

  .category-featured .category-number{
    top:18px;
    left:20px;
  }

  .category-tile-arrow{
    width:29px;
    height:29px;

    font-size:14px;
  }

}


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

@media (max-width:380px){

  .category-featured{
    min-height:210px;
  }

  .category-tile:not(.category-featured){
    min-height:140px;
  }

  .category-featured h3{
    font-size:21px;
  }

  .category-tile h3{
    font-size:13px;
  }

}
/* ==================================================
   14. SERVICES
================================================== */

.services{

display:flex;

justify-content:space-around;

gap:30px;

padding:45px 20px;

background:var(--white);

text-align:center;

flex-wrap:wrap;

}

.service-item{

max-width:140px;

}

.service-item span{

display:block;

font-size:48px;

color:var(--primary-blue);

margin-bottom:12px;

}

.service-item p{

font-size:15px;

font-weight:600;

color:var(--text-dark);

}

.service-desc{

font-size:12px;

color:var(--text-medium);

margin-top:4px;

}
/* ==================================================
   15. FOOTER
================================================== */

.footer{

background:var(--background-cream);

padding:60px 30px 30px;

color:var(--text-dark);

}

.footer-container{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:40px;

}

.footer-column{

flex:1;

min-width:250px;

}

.footer-column h4{

margin-bottom:15px;

font-size:18px;

font-weight:700;

color:var(--primary-blue);

}

.footer-column p,
.footer-column ul{

font-size:14px;

line-height:1.6;

}

.footer-column ul{

padding:0;

list-style:none;

}

.footer-column ul li{

margin-bottom:8px;

}

/* Logos */

.logo-grid{

display:flex;

flex-wrap:wrap;

gap:15px;

align-items:center;

margin-top:10px;

}

.logo-grid img{

height:40px;

opacity:.7;

filter:grayscale(100%) brightness(.7);

transition:var(--transition-normal);

}

.logo-grid img:hover{

opacity:1;

filter:none;

transform:scale(1.05);

}

/* Newsletter */

.newsletter-form{

display:flex;

gap:10px;

margin-top:10px;

}

.newsletter-form input[type="email"]{

flex:1;

padding:12px;

border:1px solid #ccc;

border-radius:var(--radius-sm);

}

.newsletter-form button{

background:var(--primary-blue);

color:#fff;

padding:12px 18px;

border-radius:var(--radius-sm);

font-weight:700;

}

.newsletter-form button:hover{

background:var(--primary-blue-hover);

}

/* Footer Bottom */

.footer-bottom{

margin-top:40px;

text-align:center;

font-size:13px;

color:var(--text-light);

}
/* ==================================================
   16. FLOATING BUTTONS
================================================== */
	  
	  /* Scroll Top */

#scrollTopBtn{

position:fixed;

bottom:30px;

right:30px;

z-index:100;

width:50px;

height:50px;

border-radius:50%;

background:var(--primary-blue);

color:#fff;

font-size:20px;

display:none;

box-shadow:var(--shadow-md);

}

#scrollTopBtn:hover{

background:var(--primary-blue-hover);

}

/* WhatsApp */

/*=========================================
FLOATING WHATSAPP
=========================================*/

.floating-whatsapp{

    position:fixed;

    left:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    z-index:9999;

    transition:.3s;

}

.floating-whatsapp:hover{

    transform:translateY(-5px) scale(1.08);

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

}

.floating-whatsapp img{

    width:32px;

    height:32px;

    object-fit:contain;

}
	 /* ==================================================
   21. HERO BANNER
================================================== */
	  .hero-banner{

position:relative;

height:600px;

overflow:hidden;

border-radius:16px;

margin:30px auto;

background-size:cover;

background-position:center;

background-repeat:no-repeat;
}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,51,102,.88),
rgba(0,51,102,.55)
);

display:flex;

align-items:center;
}

.hero-content{

max-width:1400px;

margin:auto;

padding:0 60px;

color:#fff;
}

.hero-content h1{

font-size:56px;

font-weight:700;

line-height:1.15;

max-width:700px;

margin-bottom:20px;
}

.hero-content p{

font-size:20px;

max-width:650px;

margin-bottom:30px;

opacity:.95;
}
	  .hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;
}

.hero-btn-primary{

background:#fff;

color:var(--primary-blue);

padding:14px 30px;

border-radius:50px;

font-weight:600;

text-decoration:none;
}

.hero-btn-primary:hover{

transform:translateY(-2px);
}

.hero-btn-secondary{

background:transparent;

border:2px solid #fff;

color:#fff;

padding:14px 30px;

border-radius:50px;

font-weight:600;

text-decoration:none;
}
	  .hero-stats{

display:flex;

gap:50px;

flex-wrap:wrap;
}

.hero-stat{

display:flex;

flex-direction:column;
}

.hero-stat-number{

font-size:32px;

font-weight:700;
}

.hero-stat-label{

font-size:14px;

opacity:.85;
}
	  @media(max-width:768px){

.hero-banner{

height:500px;
}

.hero-content{

padding:0 25px;
}

.hero-content h1{

font-size:34px;
}

.hero-content p{

font-size:16px;
}

.hero-stats{

gap:20px;
}

.hero-stat-number{

font-size:24px;
}

}
/* ==================================================
   21. TRUST STATISTICS
================================================== */
	  
.trust-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:20px;

  max-width:1400px;

  margin:40px auto;

  padding:0 20px;
}

.trust-card{
  background:#fff;

  text-align:center;

  padding:30px 20px;

  border-radius:16px;

  box-shadow:var(--shadow-sm);

  transition:.3s ease;
}

.trust-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
}

.trust-card h3{
  font-size:40px;
  color:var(--primary-blue);
  margin-bottom:8px;
}

.trust-card p{
  color:#666;
  font-weight:500;
}
	  
/* ==================================================
   22. WHY CHOOSE US
================================================== */

.why-choose-us{
  padding:60px 20px;
  background:#f8fafc;
  text-align:center;
}

.why-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:20px;

}

.why-card{
  background:#fff;
  padding:30px;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
}

.why-card h4{
  margin:15px 0;
}

.why-card p{
  color:#666;
}
	  
/* ==================================================
   23. FEATURED BRANDS SLIDER
================================================== */
	  .featured-brands{
  padding:60px 20px;
  background:#fff;
  overflow:hidden;
}

.section-title{
  text-align:center;
  margin-bottom:40px;
}

.section-title p{
  color:var(--text-medium);
  margin-top:10px;
}

.brands-slider{
  position:relative;
  overflow:hidden;
  width:100%;
}

.brands-track{
  display:flex;
  align-items:center;
  gap:60px;

  width:max-content;

  animation:brandScroll 30s linear infinite;
}

.brands-track img{
  height:70px;
  width:auto;

  filter:grayscale(100%);
  opacity:.7;

  transition:.3s ease;
}

.brands-track img:hover{
  filter:none;
  opacity:1;
  transform:scale(1.08);
}

@keyframes brandScroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}
/* ==================================================
   25. WHOLESALE INQUIRY BANNER
================================================== */
	  .wholesale-banner{

  margin:60px auto;

  max-width:1400px;

  padding:60px;

  border-radius:24px;

  background:
  linear-gradient(
  135deg,
  var(--primary-blue),
  #00509e
  );

  color:#fff;

  position:relative;

  overflow:hidden;
}

.wholesale-banner::before{

  content:'';

  position:absolute;

  top:-80px;
  right:-80px;

  width:250px;
  height:250px;

  border-radius:50%;

  background:rgba(255,255,255,.08);
}

.wholesale-content{

  position:relative;

  z-index:2;
}

.wholesale-text h2{

  color:#fff;

  font-size:42px;

  margin-bottom:20px;
}

.wholesale-text p{

  max-width:800px;

  font-size:18px;

  line-height:1.8;

  margin-bottom:30px;

  opacity:.95;
}
	  .wholesale-buttons{

  display:flex;

  gap:15px;

  flex-wrap:wrap;
}

.wholesale-btn-primary{

  background:#fff;

  color:var(--primary-blue);

  padding:14px 30px;

  border-radius:50px;

  font-weight:600;

  text-decoration:none;

  transition:.3s ease;
}

.wholesale-btn-primary:hover{

  transform:translateY(-3px);
}

.wholesale-btn-secondary{

  border:2px solid #fff;

  color:#fff;

  padding:14px 30px;

  border-radius:50px;

  font-weight:600;

  text-decoration:none;

  transition:.3s ease;
}

.wholesale-btn-secondary:hover{

  background:rgba(255,255,255,.15);
}

/* ==================================================
   26. ALL CATEGORIES PAGE
================================================== */

.all-categories-page{

  padding:40px 0 80px;
}

.all-categories-page .category-card{
    display:block;
    text-decoration:none;
    color:inherit;
}
/* ---------- PAGE TITLE ---------- */

.all-categories-page .page-title{

  text-align:center;

  margin-bottom:50px;
}

.all-categories-page .page-title h1{

  font-size:42px;

  color:var(--primary-blue);

  margin-bottom:10px;
}

.all-categories-page .page-title p{

  color:#666;

  font-size:16px;
}


/* ==================================================
   CATEGORY BLOCK
================================================== */

.all-categories-page .category-block{

  background:#fff;

  border:1px solid #e7eaee;

  border-radius:16px;

  padding:30px;

  margin-bottom:35px;

  position:relative;

  overflow:hidden;

  box-shadow:
    0 4px 16px rgba(0,0,0,.04);
}


/* ==================================================
   CATEGORY TITLE
================================================== */

.all-categories-page .category-block h2{

  position:relative;

  margin:0 0 25px;

  padding-left:15px;

  font-size:26px;

  color:var(--primary-blue);

  font-weight:700;

  line-height:1.3;

  z-index:1;
}


.all-categories-page .category-block h2::before{

  content:"";

  position:absolute;

  left:0;

  top:3px;

  width:4px;

  height:28px;

  border-radius:4px;

  background:var(--primary-blue);
}


/* ==================================================
   SUBTLE BACKGROUND DECORATION
================================================== */

.all-categories-page .category-block::after{

  content:"";

  position:absolute;

  right:-90px;

  top:50%;

  transform:translateY(-50%);

  width:260px;

  height:260px;

  border-radius:50%;

  background:rgba(0,63,115,.025);

  pointer-events:none;
}


/* ==================================================
   CATEGORY GRID
================================================== */

.all-categories-page .category-block .category-grid{

  position:relative;

  z-index:1;

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:20px;
}


/* ==================================================
   PREMIUM CATEGORY CARD
================================================== */

.all-categories-page .category-card{

  position:relative;

  width:100%;

  min-height:270px;

  overflow:hidden;

  background:#fff;

  border:1px solid #e5e9ee;

  border-radius:14px;

  box-shadow:
    0 4px 14px rgba(0,0,0,.05);

  cursor:pointer;

  text-align:left;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}


/* ---------- CARD HOVER ---------- */

.all-categories-page .category-card:hover{

  transform:translateY(-6px);

  border-color:
    rgba(0,63,115,.25);

  box-shadow:
    0 14px 30px rgba(0,0,0,.11);
}


/* ==================================================
   CATEGORY IMAGE
================================================== */

.all-categories-page .category-image{

  width:100%;

  height:205px;

  margin:0;

  overflow:hidden;

  background:#f7f8fa;

  border-radius:0;
}


.all-categories-page .category-image img{

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  transition:
    transform .5s ease;
}


/* ---------- IMAGE HOVER ---------- */

.all-categories-page
.category-card:hover
.category-image img{

  transform:scale(1.06);
}


/* ==================================================
   CATEGORY NAME
================================================== */

.all-categories-page .category-card p{

  min-height:64px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin:0;

  padding:14px 17px;

  background:#fff;

  color:#20252b;

  font-size:16px;

  font-weight:700;

  line-height:1.3;
}


/* ==================================================
   ARROW
================================================== */

.all-categories-page .category-card p::after{

  content:"→";

  width:30px;

  height:30px;

  flex-shrink:0;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:#f1f4f7;

  color:var(--primary-blue);

  font-size:17px;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}


/* ---------- ARROW HOVER ---------- */

.all-categories-page
.category-card:hover
p::after{

  background:var(--primary-blue);

  color:#fff;

  transform:translateX(3px);
}


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

@media(max-width:1100px){

  .all-categories-page
  .category-block
  .category-grid{

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:18px;

  }

}


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

@media(max-width:768px){

  .all-categories-page{

    padding:30px 0 60px;

  }


  .all-categories-page .page-title{

    margin-bottom:35px;

  }


  .all-categories-page .page-title h1{

    font-size:32px;

  }


  .all-categories-page .category-block{

    padding:20px;

    margin-bottom:25px;

    border-radius:14px;

  }


  .all-categories-page .category-block h2{

    font-size:22px;

    margin-bottom:20px;

  }


  .all-categories-page
  .category-block
  .category-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:14px;

  }


  .all-categories-page .category-card{

    min-height:220px;

    border-radius:12px;

  }


  .all-categories-page .category-image{

    height:160px;

  }


  .all-categories-page .category-card p{

    min-height:58px;

    padding:11px 12px;

    font-size:14px;

  }


  .all-categories-page .category-card p::after{

    width:27px;

    height:27px;

    font-size:15px;

  }

}


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

@media(max-width:430px){

  .all-categories-page .category-block{

    padding:16px;

  }


  .all-categories-page
  .category-block
  .category-grid{

    gap:10px;

  }


  .all-categories-page .category-image{

    height:140px;

  }


  .all-categories-page .category-card p{

    padding:9px 10px;

    font-size:13px;

  }

}
/* ==================================================
   27. PRODUCTS PAGE
================================================== */

/* ==========================
   Breadcrumb
========================== */

.breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    padding:20px 0;
    font-size:14px;
    color:#666;
}

.breadcrumb a{
    color:var(--primary-blue);
    text-decoration:none;
    font-weight:500;
}

.breadcrumb a:hover{
    text-decoration:underline;
}

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

.products-page-header{

    text-align:center;

    padding:40px 20px 30px;
}

.products-page-header h1{

    font-size:42px;

    color:var(--primary-blue);

    margin-bottom:10px;

    font-weight:700;
}

.products-page-header p{

    max-width:700px;

    margin:0 auto;

    color:#666;

    font-size:16px;

    line-height:1.7;
}

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

.products-results{

    padding-bottom:60px;
}

/* ==================================================
   MAIN LAYOUT
================================================== */

.products-layout{

    display:grid;

    grid-template-columns:280px minmax(0,1fr);

    gap:25px;

    align-items:start;

    width:100%;
}

/* ==================================================
   SIDEBAR
================================================== */

.products-sidebar{

    position:sticky;

    top:120px;

    width:100%;
}

.filter-card{

    background:#fff;

    border:1px solid #e5e5e5;

    border-radius:14px;

    padding:18px;

    margin-bottom:18px;

    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.filter-card h4{

    color:var(--primary-blue);

    margin-bottom:12px;

    font-size:16px;
}

.filter-header{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.filter-header h3{

    color:var(--primary-blue);
}

#resetFiltersBtn{

    border:none;

    background:none;

    color:#d32f2f;

    cursor:pointer;

    font-weight:600;
}

.filter-option{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    cursor:pointer;
}

.filter-option input{

    margin-right:8px;
}

/* ==================================================
   SEARCH
================================================== */

#productSearch{

    width:100%;

    height:46px;

    border:1px solid #ddd;

    border-radius:50px;

    padding:0 18px;

    font-size:14px;
}

#productSearch:focus{

    outline:none;

    border-color:var(--primary-blue);

    box-shadow:0 0 0 2px rgba(0,51,102,.15);
}

/* ==================================================
   PRODUCTS CONTENT
================================================== */

.products-content{

    width:100%;

    min-width:0;
}

/* ==================================================
   TOOLBAR
================================================== */

.products-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:30px;
}

.products-count{

    color:#666;

    font-size:15px;

    font-weight:500;
}

/* Search */

.products-toolbar input{

    width:100%;

    max-width:500px;

    height:46px;

    padding:0 18px;

    border:1px solid #ddd;

    border-radius:50px;

    font-size:14px;

    transition:.25s;
}

.products-toolbar input:focus{

    outline:none;

    border-color:var(--primary-blue);

    box-shadow:0 0 0 2px rgba(0,51,102,.15);
}

/* Sort */

.products-sort select{

    height:44px;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:10px;

    background:#fff;

    cursor:pointer;

    font-size:14px;

    transition:.25s;
}

.products-sort select:focus{

    outline:none;

    border-color:var(--primary-blue);

    box-shadow:0 0 0 2px rgba(0,51,102,.15);
}

/* ==================================================
   PRODUCTS GRID
================================================== */

.products-grid{

    display:grid;

    width:100%;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

    align-items:stretch;
}

/* ==================================================
   PRODUCT CARD
================================================== */

.products-grid .product-card{

    background:#fff;

    border:1px solid #e6e6e6;

    border-radius:16px;

    overflow:hidden;

    transition:.30s;

    box-shadow:0 3px 12px rgba(0,0,0,.04);

    width:100%;

    min-width:0;

    max-width:none;

    height:100%;

    display:flex;

    flex-direction:column;
}

.products-grid .product-card:hover{

    transform:translateY(-5px);

    box-shadow:0 8px 25px rgba(0,0,0,.08);
}


/* ==================================================
   INFO
================================================== */

.product-info{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:18px;
}

.product-brand{

    font-size:13px;

    color:#888;

    margin-bottom:6px;
}

.product-info h3{

    font-size:15px;

    line-height:1.45;

    color:#222;

    margin-bottom:12px;

    min-height:46px;
}

.product-code,
.product-country,
.product-stock{

    font-size:13px;

    color:#666;

    margin-bottom:6px;
}

/* Button always stays at bottom */

.product-btn{

    display:block;

    margin-top:auto;

    padding:11px;

    text-align:center;

    text-decoration:none;

    background:var(--primary-blue);

    color:#fff;

    border-radius:10px;

    font-weight:600;

    transition:.25s;
}

.product-btn:hover{

    background:#01477c;
}

/* ==================================================
   EMPTY
================================================== */

.no-products{

    text-align:center;

    padding:60px 20px;
}

.no-products h3{

    color:var(--primary-blue);

    margin-bottom:10px;
}

.no-products p{

    color:#666;
}

/* ===================================
   ABOUT HERO
=================================== */

.about-hero{

    background:url("../img/about/banner.jpg") center center/cover no-repeat;

    min-height:500px;

    position:relative;

    display:flex;

    align-items:center;

}

.about-hero-overlay{

    width:100%;

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

    padding:90px 8%;

}

.about-hero-content{

    max-width:700px;

    color:#fff;

}

.hero-subtitle{

    display:inline-block;

    background:#f7941d;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

}

.about-hero h1{

    font-size:54px;

    margin-bottom:20px;

    line-height:1.1;

    font-weight:800;

    background:linear-gradient(
        180deg,
        #ffb347,
        #f7941d,
        #e67e00
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    text-shadow:0 4px 20px rgba(247,148,29,.25);

}

.about-hero p{

    font-size:18px;

    line-height:1.9;

    opacity:.95;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-outline{

    display:inline-block;

    padding:14px 30px;

    border:2px solid #fff;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.btn-outline:hover{

    background:#fff;

    color:#222;

}
/*=========================================
ABOUT COMPANY
=========================================*/

.about-company{

    padding:90px 8%;

    background:#fff;

}

.about-company-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-company-image{

    position:relative;

}

.about-company-image img{

    width:100%;

    border-radius:18px;

    display:block;

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

}

.experience-badge{

    position:absolute;

    bottom:-25px;

    right:-20px;

    width:160px;

    height:160px;

    background:#f7941d;

    color:#fff;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 12px 35px rgba(0,0,0,.2);

}

.experience-badge h2{

    font-size:46px;

    margin:0;

    line-height:1;

}

.experience-badge span{

    font-size:15px;

    text-align:center;

    font-weight:600;

    margin-top:8px;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    background:#eef6ff;

    color:#0b63ce;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.about-company-content h2{

    font-size:38px;

    margin-bottom:25px;

    color:#222;

}

.about-company-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.about-highlights{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:35px;

}

.highlight-item{

    background:#f8f8f8;

    padding:18px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.highlight-item:hover{

    background:#f7941d;

    color:#fff;

}
/*=========================================
OUR JOURNEY
=========================================*/

.company-timeline{

    padding:90px 8%;

    background:#f8f9fb;

}

.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.section-heading h2{

    font-size:42px;

    margin:18px 0;

    color:#222;

}

.section-heading p{

    color:#666;

    line-height:1.8;

}

.timeline{

    position:relative;

    max-width:1000px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:120px;

    top:0;

    bottom:0;

    width:4px;

    background:#f7941d;

}

.timeline-item{

    display:flex;

    gap:45px;

    margin-bottom:60px;

    position:relative;

}

.timeline-year{

    min-width:120px;

    height:70px;

    background:#f7941d;

    color:#fff;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

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

    z-index:2;

}

.timeline-content{

    background:#fff;

    padding:30px;

    border-radius:16px;

    flex:1;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.timeline-content:hover{

    transform:translateY(-5px);

}

.timeline-content h3{

    margin-bottom:15px;

    color:#222;

}

.timeline-content p{

    color:#666;

    line-height:1.8;

}
/*=========================================
OUR ACHIEVEMENTS
=========================================*/

.company-achievements{

    padding:90px 8%;

    background:#ffffff;

}

.achievement-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;

}

.achievement-card{

    background:#fff;

    padding:40px 25px;

    border-radius:18px;

    text-align:center;

    border:1px solid #ececec;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.achievement-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    border-color:#f7941d;

}

.achievement-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#fff4e8;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}

.achievement-card h3{

    font-size:42px;

    color:#f7941d;

    margin-bottom:12px;

    font-weight:700;

}

.achievement-card p{

    color:#666;

    font-size:16px;

    line-height:1.7;

}
/*=========================================
MISSION | VISION | VALUES
=========================================*/

.mission-section{

    padding:90px 8%;

    background:#f8f9fb;

}

.mission-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:60px;

}

.mission-card{

    background:#fff;

    padding:45px 35px;

    border-radius:18px;

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

    transition:.35s;

    border-top:5px solid transparent;

}

.mission-card:hover{

    transform:translateY(-8px);

    border-top:5px solid #f7941d;

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

}

.mission-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#fff4e8;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    margin-bottom:25px;

}

.mission-card h3{

    margin-bottom:18px;

    font-size:28px;

    color:#222;

}

.mission-card p{

    color:#666;

    line-height:1.9;

}

.values-list{

    margin-top:15px;

    padding-left:20px;

}

.values-list li{

    margin-bottom:14px;

    color:#555;

    line-height:1.8;

}
/*=========================================
WHY CHOOSE RICH WORLD
=========================================*/

.why-rich-world{

    padding:90px 8%;

    background:#ffffff;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

    margin-top:60px;

}

.why-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:40px 30px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.why-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#f7941d;

    transform:scaleY(0);

    transition:.35s;

    transform-origin:top;

}

.why-card:hover{

    transform:translateY(-8px);

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

}

.why-card:hover::before{

    transform:scaleY(1);

}

.why-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff4e8;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

}

.why-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:#222;

}

.why-card p{

    color:#666;

    line-height:1.8;

}
/*=========================================
BUSINESS SOLUTIONS
=========================================*/

.business-solutions{

    padding:90px 8%;

    background:#f8f9fb;

}

.solutions-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:60px;

}

.solution-card{

    background:#fff;

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

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

    transition:.35s;

}

.solution-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.solution-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    background:#fff4e8;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:40px;

}

.solution-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:#222;

}

.solution-card p{

    color:#666;

    line-height:1.8;

}
/*=========================================
OUR MARKETS
=========================================*/

.our-markets{

    padding:90px 8%;

    background:#fff;

}

.markets-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

    gap:40px;

    margin-top:60px;

}

.market-card{

    background:#fff;

    padding:45px;

    border-radius:18px;

    border:1px solid #ececec;

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

    transition:.35s;

}

.market-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.market-flag{

    font-size:60px;

    margin-bottom:20px;

}

.market-card h3{

    font-size:30px;

    margin-bottom:18px;

    color:#222;

}

.market-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.market-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.market-card li{

    padding:12px 0;

    border-bottom:1px solid #eee;

    color:#555;

}

.market-card li:last-child{

    border-bottom:none;

}
/*=========================================
OUR BRAND PARTNERS
=========================================*/

.brand-partners{

    padding:90px 8%;

    background:#f8f9fb;

}

.brand-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:25px;

}

.brand-logo{

    background:#fff;

    height:140px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    border:1px solid #ececec;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.brand-logo:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.brand-logo img{

    max-width:100%;

    max-height:70px;

    object-fit:contain;

    transition:.35s;

}

.brand-logo:hover img{

    transform:scale(1.08);

}
/*=========================================
TRUSTED CUSTOMERS
=========================================*/

.trusted-customers{

    padding:90px 8%;

    background:#ffffff;

}

.customer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:25px;

    margin-top:60px;

}

.customer-logo{

    height:130px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.customer-logo:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.customer-logo img{

    max-width:100%;

    max-height:75px;

    object-fit:contain;

    transition:.35s;

}

.customer-logo:hover img{

    transform:scale(1.08);

}
/*=========================================
CALL TO ACTION
=========================================*/

.about-cta{

    padding:100px 8%;

    background:
        linear-gradient(rgba(11,99,206,.85), rgba(15,76,129,.90)),
        url("../img/about/cta-bg.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#fff;

    text-align:center;

}

.about-cta-content{

    max-width:900px;

    margin:auto;

}

.about-cta .section-tag{

    background:rgba(255,255,255,.15);

    color:#fff;

}

.about-cta h2{

    font-size:46px;

    margin:25px 0;

    line-height:1.3;

}

.about-cta p{

    font-size:18px;

    line-height:1.9;

    opacity:.95;

    margin-bottom:45px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-primary,
.cta-secondary,
.cta-whatsapp{

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    display:inline-block;

}

.cta-primary{

    background:#f7941d;

    color:#fff;

}

.cta-primary:hover{

    background:#ff8700;

    transform:translateY(-3px);

}

.cta-secondary{

    border:2px solid #fff;

    color:#fff;

}

.cta-secondary:hover{

    background:#fff;

    color:#0b63ce;

}

.cta-whatsapp{

    background:#25D366;

    color:#fff;

}

.cta-whatsapp:hover{

    background:#1eb85b;

    transform:translateY(-3px);

}
/*=========================================
CONTACT HERO
=========================================*/

.contact-hero{

    min-height:500px;

    display:flex;

    align-items:center;

    position:relative;

    background:
        linear-gradient(rgba(8,38,67,.78),rgba(8,38,67,.78)),
        url("../img/contact/contact-banner.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.contact-hero-overlay{

    width:100%;

    padding:90px 8%;

}

.contact-hero-content{

    max-width:700px;

    color:#fff;

}

.contact-hero-content h1{

    font-size:56px;

    margin:20px 0;

    line-height:1.15;

    font-weight:800;

    background:linear-gradient(180deg,#ffb347,#f7941d,#e67e00);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    text-shadow:0 4px 20px rgba(247,148,29,.25);

}

.contact-hero-content p{

    font-size:18px;

    line-height:1.9;

    opacity:.95;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-outline{

    display:inline-block;

    padding:14px 32px;

    border:2px solid #fff;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#0b63ce;

}
/*=========================================
QUICK CONTACT
=========================================*/

.quick-contact{

    padding:90px 8%;

    background:#f8f9fb;

}

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:60px;

}

.contact-card{

    background:#fff;

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

    border:1px solid #ececec;

    transition:.35s;

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

}

.contact-card:hover{

    transform:translateY(-8px);

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

    border-color:#f7941d;

}

.contact-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#fff4e8;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

}

.contact-card h3{

    margin-bottom:15px;

    color:#222;

    font-size:24px;

}

.contact-card p{

    color:#666;

    line-height:1.7;

    margin-bottom:20px;

}

.contact-card a{

    color:#0b63ce;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    word-break:break-word;

}

.contact-card a:hover{

    color:#f7941d;

}
/*=========================================
CONTACT FORM
=========================================*/

.contact-section{

    padding:90px 8%;

    background:#fff;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:45px;

    margin-top:60px;

}

.contact-form-box{

    background:#fff;

    padding:45px;

    border-radius:18px;

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

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;

    transition:.3s;

    outline:none;

    box-sizing:border-box;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#f7941d;

    box-shadow:0 0 0 3px rgba(247,148,29,.15);

}

.form-group textarea{

    resize:vertical;

}

.contact-btn{

    background:#f7941d;

    color:#fff;

    border:none;

    padding:15px 35px;

    border-radius:50px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.contact-btn:hover{

    background:#e57d00;

}

.company-info{

    background:#0b63ce;

    color:#fff;

    padding:45px;

    border-radius:18px;

}

.company-info h3{

    margin-bottom:15px;

    font-size:30px;

}

.company-info p{

    line-height:1.8;

}

.info-item{

    display:flex;

    gap:18px;

    margin-top:30px;

    align-items:flex-start;

}

.info-item span{

    font-size:28px;

    width:40px;

}

.info-item strong{

    display:block;

    margin-bottom:6px;

}
/*=========================================
OFFICE LOCATION
=========================================*/

.office-location{

    padding:90px 8%;

    background:#fff;

}

.map-container{

    margin-top:60px;

    border-radius:18px;

    overflow:hidden;

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

}

.map-container iframe{

    width:100%;

    height:500px;

    display:block;

    border:0;

}
/*=========================================
BUSINESS HOURS
=========================================*/

.business-hours{

    padding:90px 8%;

    background:#ffffff;

}

.hours-wrapper{

    display:grid;

    grid-template-columns:1.3fr 1fr;

    gap:35px;

    margin-top:60px;

}

.hours-card,
.support-card{

    background:#fff;

    border-radius:18px;

    padding:40px;

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

}

.status-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#e8fff0;

    color:#169c47;

    padding:10px 18px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:30px;

}

.status-dot{

    width:10px;

    height:10px;

    background:#18c55a;

    border-radius:50%;

}

.hours-table{

    width:100%;

    border-collapse:collapse;

}

.hours-table td{

    padding:18px 0;

    border-bottom:1px solid #ececec;

}

.hours-table td:last-child{

    text-align:right;

    font-weight:600;

}

.closed td{

    color:#d62828;

    font-weight:600;

}

.support-card{

    text-align:center;

}

.support-icon{

    width:90px;

    height:90px;

    background:#fff4e8;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    margin:auto;

    margin-bottom:25px;

}

.support-card h3{

    margin-bottom:18px;

    color:#222;

}

.support-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

.support-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.support-btn{

    background:#f7941d;

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    transition:.3s;

    font-weight:600;

}

.support-btn:hover{

    background:#e57d00;

}

.support-btn.whatsapp{

    background:#25D366;

}

.support-btn.whatsapp:hover{

    background:#1ea851;

}
/*=========================================
FAQ
=========================================*/

.faq-section{

    padding:90px 8%;

    background:#f8f9fb;

}

.faq-container{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

    background:#fff;

    border-radius:16px;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    border:1px solid #ececec;

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:24px 30px;

    text-align:left;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:18px;

    font-weight:600;

    color:#222;

}

.faq-question span{

    font-size:28px;

    color:#f7941d;

    transition:.3s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    padding:0 30px 25px;

    color:#666;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    max-height:220px;

}

.faq-item.active .faq-question span{

    transform:rotate(45deg);

}
/*=========================================
CONTACT CTA
=========================================*/

.contact-cta{

    background:
        linear-gradient(rgba(11,99,206,.88),
        rgba(8,38,67,.88)),
        url("../img/contact/contact-cta.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    padding:100px 8%;

    text-align:center;

    color:#fff;

}

.contact-cta-content{

    max-width:850px;

    margin:auto;

}

.contact-cta h2{

    font-size:46px;

    margin:20px 0;

    line-height:1.3;

}

.contact-cta p{

    font-size:18px;

    line-height:1.9;

    margin-bottom:45px;

    opacity:.95;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-btn{

    text-decoration:none;

    padding:16px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    display:inline-block;

}

.call-btn{

    background:#f7941d;

    color:#fff;

}

.call-btn:hover{

    background:#e67e00;

    transform:translateY(-4px);

}

.whatsapp-btn{

    background:#25D366;

    color:#fff;

}

.whatsapp-btn:hover{

    background:#1ea851;

    transform:translateY(-4px);

}

.email-btn{

    border:2px solid #fff;

    color:#fff;

}

.email-btn:hover{

    background:#fff;

    color:#0b63ce;

}
/*=========================================
CAREER HERO
=========================================*/

.career-hero{

    min-height:500px;

    display:flex;

    align-items:center;

    background:
        linear-gradient(rgba(8,38,67,.80),
        rgba(8,38,67,.80)),
        url("../img/career/career-banner.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.career-hero-overlay{

    width:100%;

    padding:90px 8%;

}

.career-hero-content{

    max-width:720px;

    color:#fff;

}

.career-hero h1{

    font-size:56px;

    margin:20px 0;

    line-height:1.15;

    font-weight:800;

    background:linear-gradient(
        180deg,
        #ffb347,
        #f7941d,
        #e67e00
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    text-shadow:0 4px 20px rgba(247,148,29,.25);

}

.career-hero p{

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

}
/*=========================================
WHY JOIN RICH WORLD
=========================================*/

.why-join{

    padding:90px 8%;

    background:#f8f9fb;

}

.join-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:60px;

}

.join-card{

    background:#fff;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    border:1px solid #ececec;

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

    transition:.35s;

}

.join-card:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.join-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    background:#fff4e8;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

}

.join-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:#222;

}

.join-card p{

    color:#666;

    line-height:1.8;

}
/*=========================================
LIFE AT RICH WORLD
=========================================*/

.life-richworld{

    padding:90px 8%;

    background:#ffffff;

}

.life-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.life-image{

    position:relative;

}

.life-image img{

    width:100%;

    border-radius:20px;

    display:block;

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

}

.life-content h2{

    font-size:42px;

    margin:20px 0;

    color:#222;

}

.life-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:22px;

}

.culture-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:35px;

}

.culture-item{

    background:#f8f9fb;

    padding:18px 20px;

    border-radius:12px;

    font-weight:600;

    color:#444;

    transition:.3s;

}

.culture-item:hover{

    background:#f7941d;

    color:#fff;

    transform:translateY(-3px);

}
/*=========================================
EMPLOYEE BENEFITS
=========================================*/

.employee-benefits{

    padding:90px 8%;

    background:#f8f9fb;

}

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:60px;

}

.benefit-card{

    background:#fff;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    border:1px solid #ececec;

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

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.benefit-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    background:#fff4e8;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:40px;

}

.benefit-card h3{

    margin-bottom:18px;

    font-size:24px;

    color:#222;

}

.benefit-card p{

    color:#666;

    line-height:1.8;

}
/*=========================================
CURRENT OPENINGS
=========================================*/

.career-openings{

    padding:90px 8%;

    background:#ffffff;

}

.jobs-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

    margin-top:60px;

}

.job-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:35px;

    transition:.35s;

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

    display:flex;

    flex-direction:column;

}

.job-card:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.job-type{

    display:inline-block;

    background:#eaf7ef;

    color:#1f8f45;

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

    width:fit-content;

}

.job-card h3{

    font-size:28px;

    color:#222;

    margin-bottom:20px;

}

.job-meta{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:22px;

    color:#666;

}

.job-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.job-card p{

    color:#666;

    line-height:1.8;

    flex-grow:1;

    margin-bottom:30px;

}

.job-footer{

    margin-top:auto;

}

.apply-btn{

    display:inline-block;

    background:#f7941d;

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.apply-btn:hover{

    background:#e67e00;

}
/*=========================================
HIRING PROCESS
=========================================*/

.hiring-process{

    padding:90px 8%;

    background:#f8f9fb;

}

.process-timeline{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:18px;

    margin-top:70px;

    flex-wrap:wrap;

}

.process-step{

    flex:1;

    min-width:180px;

    max-width:220px;

    background:#fff;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

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

    transition:.35s;

}

.process-step:hover{

    transform:translateY(-8px);

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

}

.step-number{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    background:#f7941d;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

}

.process-step h3{

    margin-bottom:15px;

    color:#222;

    font-size:22px;

}

.process-step p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}

.process-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#f7941d;

    font-weight:bold;

    margin-top:60px;

}
/*=========================================
CAREER APPLICATION
=========================================*/

.career-apply{

    padding:90px 8%;

    background:#ffffff;

}

.career-form-wrapper{

    max-width:900px;

    margin:60px auto 0;

    background:#fff;

    padding:50px;

    border-radius:20px;

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

}

.career-form .form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}

.career-form .form-group{

    margin-bottom:25px;

}

.career-form label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#333;

}

.career-form input,
.career-form select,
.career-form textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid #ddd;

    border-radius:12px;

    font-size:15px;

    transition:.3s;

    box-sizing:border-box;

    outline:none;

}

.career-form input:focus,
.career-form select:focus,
.career-form textarea:focus{

    border-color:#f7941d;

    box-shadow:0 0 0 3px rgba(247,148,29,.15);

}

.career-form textarea{

    resize:vertical;

}

.career-submit-btn{

    background:#f7941d;

    color:#fff;

    border:none;

    padding:16px 40px;

    border-radius:50px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.career-submit-btn:hover{

    background:#e67e00;

    transform:translateY(-2px);

}
/*=========================================
CAREER FAQ
=========================================*/

.career-faq{

    padding:90px 8%;

    background:#f8f9fb;

}

.career-faq-container{

    max-width:950px;

    margin:60px auto 0;

}

.career-faq-item{

    background:#fff;

    border-radius:16px;

    margin-bottom:18px;

    overflow:hidden;

    border:1px solid #ececec;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.career-faq-question{

    width:100%;

    background:none;

    border:none;

    padding:24px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    text-align:left;

    font-size:18px;

    font-weight:600;

    color:#222;

}

.career-faq-question span{

    font-size:28px;

    color:#f7941d;

    transition:.3s;

}

.career-faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.career-faq-answer p{

    padding:0 30px 25px;

    color:#666;

    line-height:1.8;

}

.career-faq-item.active .career-faq-answer{

    max-height:250px;

}

.career-faq-item.active .career-faq-question span{

    transform:rotate(45deg);

}
/*=========================================
CAREER CTA
=========================================*/

.career-cta{

    background:
    linear-gradient(rgba(11,99,206,.88),
    rgba(8,38,67,.90)),
    url("../img/career/career-cta.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    padding:110px 8%;

    text-align:center;

    color:#fff;

}

.career-cta-content{

    max-width:850px;

    margin:auto;

}

.career-cta h2{

    font-size:48px;

    margin:22px 0;

    line-height:1.3;

}

.career-cta p{

    font-size:18px;

    line-height:1.9;

    margin-bottom:45px;

    opacity:.95;

}

.career-cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.career-btn{

    display:inline-block;

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.career-btn.primary{

    background:#f7941d;

    color:#fff;

}

.career-btn.primary:hover{

    background:#e67e00;

    transform:translateY(-4px);

}

.career-btn.secondary{

    background:#25D366;

    color:#fff;

}

.career-btn.secondary:hover{

    background:#1ea851;

    transform:translateY(-4px);

}

.career-btn.outline{

    border:2px solid #fff;

    color:#fff;

}

.career-btn.outline:hover{

    background:#fff;

    color:#0b63ce;

}
/*=========================================
SALE HERO
=========================================*/

.sale-hero{

    min-height:560px;

    display:flex;

    align-items:center;

    background:
    linear-gradient(rgba(170,25,25,.72),
    rgba(10,50,120,.82)),
    url("../img/sale/sale-banner.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.sale-hero-overlay{

    width:100%;

    padding:90px 8%;

}

.sale-hero-content{

    max-width:760px;

    color:#fff;

}

.sale-tag{

    display:inline-block;

    background:#ff5722;

    color:#fff;

    padding:10px 20px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:25px;

}

.sale-hero h1{

    font-size:62px;

    line-height:1.1;

    margin-bottom:25px;

}

.sale-hero p{

    font-size:19px;

    line-height:1.9;

    opacity:.95;

    margin-bottom:45px;

}

.sale-highlights{

    display:flex;

    gap:30px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.highlight-item{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(8px);

    padding:18px 30px;

    border-radius:16px;

    text-align:center;

}

.highlight-item strong{

    display:block;

    font-size:28px;

    margin-bottom:5px;

}

.highlight-item span{

    font-size:15px;

    opacity:.9;

}
/*=========================================
FEATURED PROMOTIONS
=========================================*/

.featured-promotions{

    padding:90px 8%;

    background:#fff;

}

.promotion-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.promotion-card{

    position:relative;

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    border:1px solid #ececec;

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

    transition:.35s;

    overflow:hidden;

}

.promotion-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    border-color:#f7941d;

}

.promo-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    background:#fff4e8;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

}

.promotion-card h3{

    font-size:28px;

    margin-bottom:18px;

    color:#222;

}

.promotion-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.promotion-card a{

    text-decoration:none;

    color:#0b63ce;

    font-weight:600;

}

.promotion-card a:hover{

    color:#f7941d;

}

.promo-badge{

    position:absolute;

    top:20px;

    right:-40px;

    width:140px;

    background:#e53935;

    color:#fff;

    padding:8px;

    text-align:center;

    transform:rotate(45deg);

    font-size:13px;

    font-weight:700;

}

.hot{

    border:2px solid #e53935;

}
/*=========================================
SHOP BY SALE CATEGORY
=========================================*/

.sale-categories{

    padding:90px 8%;

    background:#f8f9fb;

}

.sale-category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-top:60px;

}

.sale-category-card{

    background:#fff;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    text-decoration:none;

    border:1px solid #ececec;

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

    transition:.35s;

    color:#222;

}

.sale-category-card:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.sale-icon{

    width:90px;

    height:90px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#fff4e8;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    font-weight:700;

    color:#f7941d;

}

.sale-category-card h3{

    margin-bottom:10px;

    font-size:24px;

}

.sale-category-card p{

    color:#666;

    font-size:15px;

    line-height:1.6;

}
/*=========================================
FLASH SALE
=========================================*/

.flash-sale{

    padding:100px 8%;

    background:
    linear-gradient(rgba(200,30,30,.80),
    rgba(15,40,90,.82)),
    url("../img/sale/flash-sale.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#fff;

    text-align:center;

}

.flash-content{

    max-width:900px;

    margin:auto;

}

.flash-sale h2{

    font-size:50px;

    margin:20px 0;

}

.flash-sale p{

    font-size:18px;

    line-height:1.9;

    margin-bottom:50px;

}

.countdown{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-bottom:50px;

}

.count-box{

    width:120px;

    height:120px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.count-box h3{

    font-size:42px;

    margin-bottom:8px;

}

.count-box span{

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.flash-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}
/*=========================================
FEATURED SALE PRODUCTS
=========================================*/

.featured-sale-products{

    padding:90px 8%;

    background:#fff;

}



.sale-product-card:hover{

    transform:translateY(-8px);

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

}

.discount-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#e53935;

    color:#fff;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    z-index:2;

}

/* Square Product Image */

.sale-product-card img{

    width:100%;

    height:170px;

    object-fit:contain;

    background:#f8f8f8;

    padding:12px;

}

.sale-product-info{

    padding:15px;

    text-align:center;

}

.sale-category{

    display:inline-block;

    color:#f7941d;

    font-size:13px;

    font-weight:600;

    margin-bottom:10px;

}

.sale-product-info h3{

    font-size:15px;

    line-height:1.4;

    height:42px;

    overflow:hidden;

    margin-bottom:12px;

}

.price-area{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-bottom:10px;

}

.old-price{

    font-size:13px;

}

.new-price{

    font-size:20px;

}

.old-price{

    text-decoration:line-through;

    color:#999;

    font-size:15px;

}

.new-price{

    color:#e53935;

    font-size:24px;

    font-weight:700;

}

.save-price{

    display:block;

    color:#1f8f45;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.sale-actions{

    display:flex;

    justify-content:center;

}

.shop-btn{

    display:block;

    width:100%;

    padding:10px;

    font-size:14px;

    border-radius:30px;

}
.shop-btn:hover{

    background:#e67e00;

}

.sale-view-all{

    text-align:center;

    margin-top:60px;

}


/*=========================================
CLEARANCE SALE
=========================================*/

.clearance-sale{

    padding:90px 8%;

    background:#f8f9fb;

}

.clearance-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:60px;

}

.clearance-card{

    position:relative;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.clearance-card:hover{

    transform:translateY(-10px);

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

}

.clearance-label{

    position:absolute;

    top:20px;

    left:20px;

    background:#d32f2f;

    color:#fff;

    padding:10px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    z-index:2;

}

.clearance-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.clearance-content{

    padding:28px;

}

.product-category{

    color:#f7941d;

    font-size:14px;

    font-weight:600;

}

.clearance-content h3{

    margin:12px 0 18px;

    font-size:24px;

    color:#222;

}

.clearance-price{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}

.old-price{

    color:#999;

    text-decoration:line-through;

}

.new-price{

    color:#d32f2f;

    font-size:30px;

    font-weight:700;

}

.stock-status{

    display:inline-block;

    background:#fff4e8;

    color:#d35400;

    padding:10px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:25px;

}

.clearance-btn{

    display:block;

    text-align:center;

    background:#f7941d;

    color:#fff;

    text-decoration:none;

    padding:15px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.clearance-btn:hover{

    background:#e67e00;

}
/*=========================================
BUY MORE SAVE MORE
=========================================*/

.bulk-offers{

    padding:90px 8%;

    background:#ffffff;

}

.bulk-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.bulk-card{

    background:#fff;

    border:1px solid #eee;

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.3s;

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

}

.bulk-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.bulk-icon{

    font-size:48px;

    margin-bottom:20px;

}

.bulk-card h3{

    margin-bottom:15px;

}

.bulk-card p{

    color:#666;

    line-height:1.8;

}

.bulk-action{

    margin-top:50px;

    text-align:center;

}
/*=========================================
ANNUAL PROMOTION CALENDAR
=========================================*/

.promotion-calendar{

    padding:90px 8%;

    background:#f8f9fb;

}

.calendar-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.calendar-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

    border:1px solid #ececec;

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

    transition:.35s;

    text-align:center;

}

.calendar-card:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.calendar-month{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    background:#f7941d;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.calendar-card h3{

    font-size:24px;

    margin-bottom:15px;

    color:#222;

}

.calendar-card p{

    color:#666;

    line-height:1.8;

}
/*=========================================
PROMOTION TERMS
=========================================*/

.promotion-terms{

    padding:90px 8%;

    background:#ffffff;

}

.terms-container{

    max-width:950px;

    margin:60px auto 0;

}

.term-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    border:1px solid #ececec;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.term-question{

    width:100%;

    background:none;

    border:none;

    padding:24px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    color:#222;

    text-align:left;

}

.term-question span{

    font-size:30px;

    color:#f7941d;

    transition:.3s;

}

.term-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.term-answer p{

    padding:0 30px 25px;

    color:#666;

    line-height:1.8;

}

.term-item.active .term-answer{

    max-height:220px;

}

.term-item.active .term-question span{

    transform:rotate(45deg);

}
/*=========================================
SALE COUNTDOWN
=========================================*/

.sale-countdown{

    padding:90px 8%;

    background:#f8f9fb;

    text-align:center;

}

.countdown-wrapper{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-top:50px;

}

.count-box{

    width:120px;

    height:120px;

    background:#fff;

    border-radius:20px;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.count-box h3{

    font-size:42px;

    color:#f7941d;

    margin-bottom:8px;

}

.count-box span{

    color:#666;

    font-weight:600;

}
/*=========================================
CURRENT PROMOTION
=========================================*/

.current-promotion{

    padding:90px 8%;

    background:#f8f9fb;

}

.promotion-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}

.promotion-badge{

    display:inline-block;

    background:#f7941d;

    color:#fff;

    padding:10px 25px;

    border-radius:50px;

    font-weight:600;

    margin-bottom:25px;

}

.promotion-content h2{

    font-size:42px;

    margin-bottom:20px;

}

.promotion-content p{

    color:#666;

    line-height:1.8;

}

.promotion-info{

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

    margin:45px 0;

}

.promotion-item{

    min-width:220px;

    background:#fff;

    padding:25px;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.promotion-item h4{

    margin-bottom:10px;

    color:#333;

}

.promotion-item p{

    font-size:22px;

    font-weight:700;

    color:#f7941d;

}
/*=========================================
TERMS & CONDITIONS
=========================================*/

.sale-terms{

    padding:90px 8%;

    background:#ffffff;

}

.terms-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.term-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:35px;

    text-align:center;

    transition:.3s;

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

}

.term-card:hover{

    transform:translateY(-8px);

    border-color:#f7941d;

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

}

.term-icon{

    font-size:42px;

    margin-bottom:20px;

}

.term-card h3{

    margin-bottom:15px;

    color:#222;

}

.term-card p{

    color:#666;

    line-height:1.8;

}

/*==================================================
  LOGIN SELECTION MODAL
==================================================*/

.login-modal{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);

    z-index:99999;

    animation:fadeIn .25s ease;
}

/* Show */

.login-modal.show{

    display:flex;

}

/* Card */

.login-card{

    width:min(900px,92%);
    background:#fff;

    border-radius:22px;

    overflow:hidden;

    padding:45px;

    position:relative;

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

    animation:popup .35s ease;
}

/* Close Button */

.login-close{

    position:absolute;

    top:18px;
    right:20px;

    width:40px;
    height:40px;

    border-radius:50%;

    background:#f4f4f4;

    font-size:18px;

    transition:.3s;
}

.login-close:hover{

    background:#d32f2f;
    color:#fff;

}

/* Heading */

.login-card h2{

    text-align:center;

    color:var(--primary-blue);

    font-size:32px;

    margin-bottom:8px;

}

.login-card>p{

    text-align:center;

    color:#666;

    margin-bottom:35px;

}

/* Options */

.login-options{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

/* Individual Card */

.login-option{

    border:1px solid #e5e5e5;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

    background:#fff;

}

.login-option:hover{

    transform:translateY(-8px);

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

    border-color:var(--primary-blue);

}

/* Icon */

.login-icon{

    width:90px;
    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary-blue),
        #0d6efd
    );

    color:#fff;

    font-size:42px;

    margin-bottom:20px;

}

/* Title */

.login-option h3{

    color:var(--primary-blue);

    margin-bottom:12px;

    font-size:24px;

}

/* Description */

.login-option p{

    color:#666;

    font-size:15px;

    line-height:1.7;

    min-height:70px;

    margin-bottom:25px;

}

/* Button */

.login-option button{

    width:100%;

    height:48px;

    border:none;

    border-radius:40px;

    background:var(--primary-blue);

    color:#fff;

    font-weight:600;

    font-size:15px;

    transition:.3s;

}

.login-option button:hover{

    background:#01477c;

    transform:translateY(-2px);

}

/* Animations */

@keyframes popup{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* Responsive */

@media(max-width:768px){

.login-card{

    padding:30px 20px;

}

.login-options{

    grid-template-columns:1fr;

}

.login-card h2{

    font-size:26px;

}

.login-option{

    padding:25px 20px;

}

.login-icon{

    width:75px;
    height:75px;

    font-size:34px;

}

}
/*==================================================
PREMIUM PAGINATION
==================================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:50px 0;

}

.pagination button{

    min-width:46px;

    height:46px;

    padding:0 18px;

    border:none;

    border-radius:50px;

    background:#ffffff;

    color:var(--primary-blue);

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.pagination button:hover{

    background:var(--primary-blue);

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(0,51,102,.25);

}

.pagination button.active{

    background:var(--primary-blue);

    color:#fff;

    box-shadow:0 8px 20px rgba(0,51,102,.35);

}

.pagination button.disabled{

    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;

}

.pagination .dots{

    padding:0 6px;

    font-weight:bold;

    color:#777;

}

/* Mobile */

@media(max-width:768px){

.pagination{

    gap:8px;

}

.pagination button{

    min-width:40px;

    height:40px;

    font-size:14px;

    padding:0 12px;

}

}
/*==================================
BULK INQUIRY CARD
==================================*/

.bulk-inquiry-card{

    margin-top:20px;
	margin-bottom:25px;
    padding:20px;

    background:#fff;

    border:1px solid #e8edf3;
    border-radius:12px;

    box-shadow:0 3px 10px rgba(0,0,0,.05);

    text-align:center;

    transition:.3s ease;

}

.bulk-inquiry-card:hover{

    box-shadow:0 8px 22px rgba(0,0,0,.08);

}

.bulk-icon{

    width:65px;
    height:65px;

    margin:0 auto 15px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f5f9ff;

    border-radius:50%;

    font-size:30px;

}

.bulk-inquiry-card h3{

    color:#003366;

    font-size:22px;

    margin-bottom:8px;

}

.bulk-inquiry-card p{

    font-size:14px;

    color:#666;

    line-height:1.6;

    margin-bottom:18px;

}

.bulk-inquiry-card ul{

    list-style:none;

    padding:0;

    margin:0 0 20px;

    text-align:left;

}

.bulk-inquiry-card li{

    display:flex;

    align-items:center;

    gap:8px;

    padding:7px 0;

    font-size:14px;

    color:#444;

}

.bulk-btn{

    width:100%;

    height:48px;

    background:#003366;

    color:#fff;

    border:none;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.bulk-btn:hover{

    background:#00509e;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,51,102,.25);

}
/*==================================
POPUP
==================================*/

.bulk-modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

z-index:99999;

justify-content:center;

align-items:center;

padding:20px;

}

.bulk-modal.show{

display:flex;

}

.bulk-modal-content{

background:#fff;

width:700px;

max-width:100%;

border-radius:15px;

padding:35px;

position:relative;

animation:popup .3s;

}

@keyframes popup{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.bulk-close{

position:absolute;

right:20px;

top:15px;

font-size:28px;

background:none;

cursor:pointer;

}

.bulk-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin-top:20px;

}

.bulk-grid input,

.bulk-modal textarea{

width:100%;

padding:13px;

border:1px solid #ddd;

border-radius:8px;

font-size:14px;

}

.bulk-modal textarea{

margin-top:15px;

resize:vertical;

}

.upload-label{

display:block;

margin:20px 0;

font-weight:600;

}

.upload-label input{

display:block;

margin-top:10px;

}

.submit-bulk{

width:100%;

padding:15px;

background:#003366;

color:#fff;

border:none;

border-radius:8px;

font-size:16px;

font-weight:600;

cursor:pointer;

}
/*==================================================
CONTACT TEAM
==================================================*/

.contact-team-section{

    padding:70px 0;

    background:#f8fafc;

}

.contact-team{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:40px;

}

.team-card{

    position:relative;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:35px 28px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    transition:.3s;

}

.team-card:hover{

    transform:translateY(-6px);

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

}

.team-card h3{

    color:var(--primary-blue);

    margin-bottom:8px;

}

.team-card h4{

    color:#333;

    margin-bottom:6px;

}

.team-card p{

    color:#777;

    margin-bottom:18px;

}

.team-card a{

    display:block;

    color:#444;

    margin-bottom:10px;

    text-decoration:none;

}

.team-card a:hover{

    color:var(--primary-blue);

}

.save-contact{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

}

.save-contact:hover{

    transform:translateY(-3px);

}

.save-contact img{

    width:22px;

    height:22px;

}

@media(max-width:992px){

.contact-team{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.contact-team{

grid-template-columns:1fr;

}

}
/* ==================================================
   17. RESPONSIVE MEDIA QUERIES
================================================== */

/* ==========================================
   SMALL MOBILE (<= 1024px)
========================================== */
@media (min-width:768px) and (max-width:1199px){

  .category-grid{
    grid-template-columns:repeat(4,1fr);
  }

}
  
	  
/* ==========================================
   TABLET (<= 900px)
========================================== */

@media (max-width: 900px) {

  .services{
    gap:30px;
  }

  .category-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .product-card{
    width:140px;
  }

  .best-seller-tabs{
    padding:30px 15px;
  }

  .tab-buttons{
    gap:15px;
  }

  .tab-btn{
    padding:10px 18px;
    font-size:14px;
  }

  .nav-links{
    gap:15px;
    flex-wrap:wrap;
  }
	.trust-stats{
  grid-template-columns:repeat(2,1fr);
}

}

/* ==========================================
   SMALL TABLET (<= 834px)
========================================== */

@media (max-width: 834px) {

  .footer-container{
    flex-direction:column;
    align-items:center;
  }

}

/* ==========================================
   MOBILE (<= 600px)
========================================== */

@media (max-width: 600px) {

  /* Navigation */

  .nav-links{
    display:none !important;
  }

  .nav-links.show{
    display:flex !important;
    flex-direction:column;
    max-height:500px;
    opacity:1;
  }

  /* Header */

  .header-right .dropdown{
    display:none !important;
  }

  .lang-toggle{
    display:none !important;
  }

  .news-bar{
    display:none !important;
  }

  /* Category Header */

  .category-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:10px;
}
	.nav-call{
  display:none;
}
	

}

	  
/* ==========================================
   MOBILE LARGE (<= 500px)
========================================== */

@media (max-width: 500px) {

  /* Products */

  .product-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
  }

  .product-card{
    width:100% !important;
  }

  /* Buttons */

  .tab-btn,
  .sale-btn,
  .btn{
    padding:10px 16px;
    font-size:14px;
  }

  /* Footer */

  .footer-column{
    padding:10px 0;
  }

  .footer-column p{
    word-wrap:break-word;
    white-space:normal;
  }

  /* Newsletter */

  .newsletter-form{
    flex-direction:column;
    align-items:stretch;
  }

  .newsletter-form button{
    width:100%;
  }

  /* Logo Grid */

  .logo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }
	.trust-stats{
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}
	.brands-track{
  gap:30px;
}

.brands-track img{
  height:45px;
}

}

/* ==========================================
   SMALL MOBILE (<= 480px)
========================================== */

@media (max-width: 480px) {

  .search-box input{
    font-size:15px;
  }

  .services{
    padding:30px 10px;
  }


}

/* ==========================================
   EXTRA SMALL MOBILE (<= 430px)
========================================== */

@media (max-width: 430px) {

  .services,
  .category-grid,
  .product-grid{
    justify-content:center;
    text-align:center;
  }

  .product-card{
    width:100%;
  }

}
/* ==================================================
   18. MOBILE NAVIGATION
================================================== */

/* Overlay */

.mobile-nav-overlay{
  position:fixed;
  inset:0;

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

  z-index:2000;

  display:none;
}

/* Drawer */

.mobile-nav{

  position:fixed;

  top:0;
  left:0;

  width:85%;
  max-width:340px;

  height:100vh;

  background:#ffffff;

  padding:0;

  display:flex;
  flex-direction:column;

  overflow-y:auto;

  transform:translateX(-100%);

  transition:.35s ease;

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

  z-index:2100;
}

/* Open State */

.mobile-nav.show{
  transform:translateX(0);
}

/* Close Button */

.mobile-nav-close{

  margin-left:auto;

  border:none;

  background:none;

  font-size:22px;

  color:var(--primary-blue);

  cursor:pointer;

  padding:5px;
}

/* Menu Links */

.mobile-nav a{

  display:flex;

  align-items:center;

  padding:14px 20px;

  font-size:15px;

  font-weight:600;

  color:var(--primary-blue);

  border-bottom:1px solid var(--border-light);

  text-decoration:none;

  transition:.25s ease;
}

.mobile-nav a:hover{

  background:#f5f7fa;

  padding-left:28px;
}

/* Sale Link */

.mobile-nav .sale-btn{

  background:none;

  border:none;

  color:var(--sale-color);

  font-weight:700;
}
	  .mobile-account-link{

  display:flex;

  align-items:center;

  gap:10px;

  padding:14px 20px;

  color:var(--primary-blue);

  font-weight:600;

  border-bottom:1px solid var(--border-light);

  text-decoration:none;
}
	  
/* ==========================================
   MOBILE DRAWER HEADER
========================================== */

.mobile-nav-header{

  display:flex;

  align-items:center;

  gap:12px;

  padding:18px;

  background:#f5f7fa;

  border-bottom:1px solid #e5e5e5;
}

.mobile-nav-header img{

  height:42px;

  width:auto;
}

.mobile-nav-company h3{

  margin:0;

  font-size:16px;

  color:var(--primary-blue);
}

.mobile-nav-company p{

  margin:0;

  font-size:12px;

  color:#777;
}

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

.mobile-drawer-search{

  padding:15px;
}

.mobile-drawer-search input{

  width:100%;

  height:44px;

  border:none;

  border-radius:25px;

  padding:0 15px;

  background:#f5f7fa;

  font-size:14px;
}

.mobile-drawer-search input:focus{

  outline:none;

  box-shadow:0 0 0 2px var(--primary-blue);
}

/* ==========================================
   MOBILE CONTACT BOX
========================================== */

.mobile-contact-box{

  margin:20px;

  padding:15px;

  background:#f5f7fa;

  border-radius:12px;

  text-align:center;
}

.mobile-contact-title{

  display:block;

  margin-bottom:8px;

  color:var(--primary-blue);

  font-weight:600;
}

.mobile-contact-box a{

  display:block;

  border:none;

  padding:0;

  font-size:18px;

  font-weight:700;

  color:var(--primary-blue);

  text-decoration:none;
}

/* ==========================================
   MOBILE DROPDOWN IMPROVEMENT
========================================== */

.mobile-dropdown{

  border-bottom:1px solid var(--border-light);
}

.mobile-dropbtn{

  width:100%;

  padding:14px 20px;

  background:none;

  border:none;

  text-align:left;

  font-size:15px;

  font-weight:600;

  color:var(--primary-blue);

  cursor:pointer;
}

.mobile-dropdown-content{

  background:#fafafa;
}

.mobile-dropdown-content a{

  padding-left:35px;
}
/* ==========================================
   MOBILE DROPDOWN
========================================== */

.mobile-dropdown{

  border-bottom:1px solid var(--border-light);
}

/* Dropdown Button */

.mobile-dropbtn{

  width:100%;

  background:none;

  border:none;

  padding:14px 0;

  text-align:left;

  color:var(--primary-blue);

  font-size:16px;

  font-weight:600;

  cursor:pointer;
}

.mobile-dropbtn::after{

  content:"▾";

  float:right;
}

/* Dropdown Content */

.mobile-dropdown-content{

  display:none;

  flex-direction:column;

  padding-left:15px;

  background:#f9f9f9;
}

.mobile-dropdown-content a{

  padding:10px;

  font-size:15px;

  color:#333;

  border:none;
}

.mobile-dropdown-content a:hover{

  background:#eee;

  color:var(--primary-blue);
}

/* Open State */

.mobile-dropdown.open .mobile-dropdown-content{

  display:flex;
}

/* ==========================================
   BODY OVERLAY WHEN MENU OPEN
========================================== */

body.menu-open::before{

  content:'';

  position:fixed;

  inset:0;

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

  z-index:1999;
}
/* ==================================================
   19. MOBILE HEADER
================================================== */


/* Hamburger Menu */

.menu-toggle{

  display:block;

  font-size:26px;

  color:var(--primary-blue);

  background:none;

  border:none;

  padding:8px 12px;

  cursor:pointer;
}

/* Search Icon */

.search-icon{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;
}

.search-icon img{

  width:auto;

  height:25px;

  display:block;
}

/* Account Icon */

.account-icon{

  display:inline-flex;

  align-items:center;

  justify-content:center;
}

/* Mobile Search Open */

.nav-search.active{

  display:block;
}

/* ==========================================
   MOBILE LANGUAGE SWITCHER
========================================== */

.mobile-lang-toggle{

  padding:15px;

  text-align:center;

  border-top:1px solid var(--border-light);
}

.mobile-lang-toggle button{

  padding:8px 15px;

  background:#222;

  color:#fff;

  border:none;

  border-radius:5px;

  cursor:pointer;
}

/* ==========================================
   DESKTOP BEHAVIOUR
========================================== */

@media (min-width:601px){

  .menu-toggle,
  .search-icon,
  .mobile-lang-toggle{

    display:none !important;
  }

}

/* ==========================================
   MOBILE HEADER LAYOUT
========================================== */

@media (max-width:600px){

  /* Fixed Header */

  .header,
  .nav-bar{

    position:fixed;

    left:0;

    width:100%;

    background:var(--white);

    z-index:2000;
  }

  /* Header */

  .header{

    top:0;

    border-bottom:1px solid var(--border-light);
  }

  /* Navigation */

  .nav-bar{

    top:60px;

    border-bottom:1px solid var(--border-light);
  }
	.nav-bar{

    height:0;

    min-height:0;

    padding:0;

    border:none;

    overflow:hidden;
}

  /* Push Content Down */

  body{
  padding-top:70px;
}

  /* Mobile Header Layout */

   .header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 15px;
  }

  /* Logo */

  .logo{

    margin-right:auto;
  }

  /* Search */

  .search-icon{

    order:1;
  }
	 .search-icon{
    display:none !important;
  }

  /* Right Side */

  .header-right{

    order:3;
  }

  /* Menu */

  .menu-toggle{

    order:4;

    margin-left:0;
  }

  /* Search Box */

  /* Hide Search Box on Mobile */

.search-icon,
.account-icon,
.search-box,
.header-search,
.nav-search{
    display:none !important;
}

  /* Hide Desktop Controls */

  .lang-toggle{

    display:none !important;
  }

  .header-right .dropdown{

    display:none !important;
  }

  /* WhatsApp Hidden */

  .header-whatsapp{

    display:none;
  }
	
	.account-icon{
    display:none !important;
  }
	
}

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

@media (max-width:500px){

  .header-right{

    gap:10px;
  }

}
/* ==========================================
   WHY CHOOSE US - MOBILE
========================================== */

@media (max-width: 600px) {

  .why-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

  }

  .why-card {

    padding: 18px 12px;

    text-align: center;

  }

  .why-card h4 {

    font-size: 14px;

  }

  .why-card p {

    font-size: 12px;

  }

}
/* ==================================================
   PRODUCTS PAGE RESPONSIVE
================================================== */

/* ==========================
   TABLETS (Samsung / iPad)
========================== */

@media (min-width:768px) and (max-width:1199px){

    /* Full-width layout (filter drawer instead of fixed sidebar) */

    .products-layout{
        display:block;
    }

    .products-content{
        width:100%;
        min-width:0;
    }

    /* Slightly larger cards for tablets */

    .product-image{
        height:190px;
    }

    .product-info{
        padding:15px;
    }

    .product-info h3{
        font-size:14px;
        min-height:42px;
    }

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

@media (max-width:768px){

  .products-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .products-sidebar{
    position:static;
    width:100%;
  }

  .products-content{
    width:100%;
    min-width:0;
  }

  .products-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .products-sort select{
    width:100%;
  }

  .products-grid{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
  }

  .products-grid .product-card{
    width:100%;
    min-width:0;
    height:100%;
  }

  .product-image{
    height:150px;
    padding:12px;
  }

  .product-image img{
    max-height:130px;
  }

  .product-info{
    padding:12px;
  }

  .product-info h3{
    font-size:13px;
    min-height:auto;
  }

  .product-btn{
    font-size:13px;
    padding:8px;
    margin-top:auto;
  }

}

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

@media (max-width:480px){

  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .product-image{
    height:130px;
  }

  .product-image img{
    max-height:110px;
  }

  .product-info{
    padding:10px;
  }

  .product-info h3{
    font-size:12px;
  }

}

@media(max-width:768px){

.timeline::before{

    left:35px;

}

.timeline-item{

    flex-direction:column;

    padding-left:70px;

}

.timeline-year{

    position:absolute;

    left:0;

    width:70px;

    min-width:70px;

    height:70px;

    font-size:16px;

}

.timeline-content{

    margin-top:10px;

}

.section-heading h2{

    font-size:32px;

}

}
@media (max-width:768px){

.about-cta{

    padding:70px 25px;

}

.about-cta h2{

    font-size:32px;

}

.about-cta p{

    font-size:16px;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.cta-primary,
.cta-secondary,
.cta-whatsapp{

    width:100%;
    max-width:320px;

}

}
@media(max-width:768px){

.contact-hero{

    min-height:420px;

}

.contact-hero-content h1{

    font-size:38px;

}

.contact-hero-content p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    align-items:flex-start;

}

}
@media(max-width:768px){

.contact-grid{

    grid-template-columns:1fr;

}

.contact-card{

    padding:35px 25px;

}

}
@media(max-width:768px){

.contact-wrapper{

    grid-template-columns:1fr;

}

.form-row{

    grid-template-columns:1fr;

}

.contact-form-box,
.company-info{

    padding:30px;

}

}
@media(max-width:768px){

.map-container iframe{

    height:350px;

}

}
@media(max-width:768px){

.hours-wrapper{

    grid-template-columns:1fr;

}

.hours-card,
.support-card{

    padding:30px;

}

.hours-table td{

    font-size:14px;

}

}
@media(max-width:768px){

.contact-cta{

    padding:70px 25px;

}

.contact-cta h2{

    font-size:32px;

}

.contact-cta p{

    font-size:16px;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.cta-btn{

    width:100%;

    max-width:320px;

}

}
@media(max-width:768px){

.life-grid{

    grid-template-columns:1fr;

}

.life-content{

    text-align:center;

}

.life-content h2{

    font-size:32px;

}

.culture-list{

    grid-template-columns:1fr;

}

}
@media(max-width:768px){

.benefits-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:768px){

.jobs-grid{

    grid-template-columns:1fr;

}

.job-card{

    padding:28px;

}

}
@media(max-width:768px){

.process-timeline{

    flex-direction:column;

    align-items:center;

}

.process-step{

    width:100%;

    max-width:420px;

}

.process-arrow{

    transform:rotate(90deg);

    margin:10px 0;

}

}
@media(max-width:768px){

.career-form-wrapper{

    padding:30px 25px;

}

.career-form .form-row{

    grid-template-columns:1fr;

}

.career-submit-btn{

    width:100%;

}

}
@media(max-width:768px){

.career-cta{

    padding:70px 25px;

}

.career-cta h2{

    font-size:34px;

}

.career-cta p{

    font-size:16px;

}

.career-cta-buttons{

    flex-direction:column;

    align-items:center;

}

.career-btn{

    width:100%;
    max-width:320px;

}

}
@media(max-width:768px){

.sale-hero{

    min-height:460px;

}

.sale-hero h1{

    font-size:40px;

}

.sale-hero p{

    font-size:16px;

}

.sale-highlights{

    gap:15px;

}

.highlight-item{

    flex:1 1 45%;

    padding:15px;

}

}
@media(max-width:768px){

.promotion-grid{

    grid-template-columns:1fr;

}

}
@media(max-width:768px){

.sale-category-grid{

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.sale-category-card{

    padding:25px 18px;

}

.sale-icon{

    width:70px;

    height:70px;

    font-size:24px;

}

.sale-category-card h3{

    font-size:18px;

}

.sale-category-card p{

    font-size:13px;

}

}
@media(max-width:768px){

.flash-sale{

    padding:70px 25px;

}

.flash-sale h2{

    font-size:34px;

}

.flash-sale p{

    font-size:16px;

}

.count-box{

    width:90px;

    height:90px;

}

.count-box h3{

    font-size:30px;

}

}

@media(max-width:768px){

.clearance-grid{

    grid-template-columns:1fr;

}

.clearance-card img{

    height:220px;

}

}
@media(max-width:768px){

.bulk-grid{

    grid-template-columns:1fr;

}

.bulk-card{

    padding:35px 25px;

}

}
@media(max-width:768px){

.calendar-grid{

    grid-template-columns:1fr;

}

.calendar-card{

    padding:30px 25px;

}

}
@media(max-width:768px){


.login-modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: none;

    justify-content: center;
    align-items: center;

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

    z-index: 999999;
}

.login-modal.show{

    display: flex;

}


/* CLOSE MOBILE LOGIN MEDIA QUERY */
}


/*==================================================
Mobile Pagination
==================================================*/

.mobile-page-info{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:150px;

    height:46px;

    padding:0 18px;

    background:#fff;

    border-radius:50px;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

    color:var(--primary-blue);

    font-weight:600;

}

.mobile-page-info strong{

    font-size:17px;

    color:var(--primary-blue);

}

.mobile-page-info span{

    color:#666;

}

@media (max-width:768px){

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:30px 0;

}

.pagination button{

    min-width:46px;

    height:46px;

    padding:0 16px;

    font-size:15px;

}

.pagination .dots{

    display:none;

}

}
/*==================================
Mobile Filter Button
==================================*/

.mobile-filter-btn{

    display:none;

    width:100%;

    height:52px;

    padding:0 16px;

    background:var(--primary-blue);

    color:#fff;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}

.filter-btn-icon{

    width:20px;

    height:20px;

    object-fit:contain;

    flex-shrink:0;

}

.filter-text{

    flex:1;

    text-align:left;

}

.filter-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    font-size:13px;

    font-weight:700;

    transition:.3s ease;

    flex-shrink:0;

}
.mobile-filter-btn.active .filter-arrow{

    transform:rotate(180deg);

}

/* ==========================================
   MOBILE & TABLET FILTER
========================================== */

@media (max-width:1199px){

    .mobile-filter-btn{

        display:flex;

        justify-content:center;

        align-items:center;

    }

    .products-sidebar{

        display:none;

        margin-bottom:20px;

        background:#fff;

        border-radius:12px;

        padding:18px;

        box-shadow:0 4px 18px rgba(0,0,0,.08);

    }

    .products-sidebar.show{

        display:block;

        animation:slideDown .3s ease;

    }

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================
   MOBILE CAROUSEL
   Keep Desktop Horizontal Layout
========================================== */

@media (max-width:600px){

    .carousel{
        margin:15px auto;
        border-radius:10px;
    }

    .carousel-slides{
        display:flex;
        flex-wrap:nowrap;
    }

    .carousel-slide{
        min-width:100%;
        width:100%;
        aspect-ratio:16/9;
		height:auto;
		min-height:220px;
        background-size:cover;
        background-position:center;
        flex-shrink:0;
    }

    .carousel-overlay{
        padding:20px;
    }

    .carousel-text{
        max-width:90%;
    }

    .carousel-text h2{
        font-size:24px;
        line-height:1.3;
        margin-bottom:10px;
    }

    .carousel-text p{
        font-size:14px;
        margin-bottom:18px;
        line-height:1.5;
    }

    .carousel-text .btn{
        padding:10px 22px;
        font-size:14px;
    }

    .carousel-prev,
    .carousel-next{
        width:36px;
        height:36px;
        font-size:18px;
    }

    .carousel-prev{
        left:10px;
    }

    .carousel-next{
        right:10px;
    }

    .carousel-dots{
        bottom:12px;
    }

    .carousel-dots button{
        width:10px;
        height:10px;
    }

}
/*==================================
Bulk Inquiry
==================================*/

@media(max-width:768px){

.bulk-grid{

grid-template-columns:1fr;

}

.bulk-modal-content{

padding:20px;

}

.bulk-inquiry-card{

margin-top:20px;

}

.bulk-btn{

font-size:15px;

}

}

/* ==========================================
   SMALL TABLETS
   iPad Mini
   Galaxy Tab A
========================================== */

@media (min-width:768px) and (max-width:799px){

    /* Small tablet styles */

}


/* ==========================================
   STANDARD TABLETS
   iPad 10.2 / 10.9
   iPad Air
   Galaxy Tab S6 Lite
   Galaxy Tab S8
   Galaxy Tab S9
========================================== */

@media (min-width:800px) and (max-width:899px){

    /* Standard tablet styles */

}


/* ==========================================
   LARGE TABLETS
   Galaxy Tab S8+
   Galaxy Tab S9+
========================================== */

@media (min-width:900px) and (max-width:959px){

    /* Large tablet styles */

}


/* ==========================================
   XL TABLETS
   Galaxy Tab S8 Ultra
   Galaxy Tab S9 Ultra
========================================== */

@media (min-width:960px) and (max-width:1023px){

    /* XL tablet styles */

}


/* ==========================================
   iPad Pro 12.9 / 13"
========================================== */

@media (min-width:1024px) and (max-width:1199px){

    /* iPad Pro styles */

}
/* Phones */

@media (max-width:767px){

}


/* Tablets */

@media (min-width:768px) and (max-width:1199px){

}


/* Desktop */

@media (min-width:1200px){

}

/* ==================================================
   PRODUCTS PAGE - FINAL CARD FIX
================================================== */


/* Pure white product image area */

.products-grid .product-card .product-image{

  background:#ffffff;

}


/* Product page stock badge */

.products-grid .product-card .stock-badge{

  display:inline-flex;

  align-items:center;

  width:max-content;

  padding:6px 12px;

  margin:0 0 16px 0;

  border-radius:20px;

  font-size:12px;

  font-weight:700;

  line-height:1.2;

  white-space:nowrap;

}


/* In Stock */

.products-grid .product-card .stock-badge.in-stock{

  background:#eaf7ee;

  color:#218739;

}


/* No Stock */

.products-grid .product-card .stock-badge.no-stock{

  background:#fcebec;

  color:#c92f3d;

}


/* Keep product information clean */

.products-grid .product-card .product-info{

  background:#ffffff;

}


/* Make View Details stay below stock */

.products-grid .product-card .btn-details{

  margin-top:auto;

  margin-bottom:16px;

}
/* ==================================================
   SALE BOOKING MODAL
================================================== */

body.sale-booking-open {
    overflow: hidden;
}


/* ==================================================
   MODAL
================================================== */

.sale-booking-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

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

}


.sale-booking-modal.show {

    opacity: 1;

    visibility: visible;

}


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

.sale-booking-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(7, 24, 42, .58);

    backdrop-filter:
        blur(4px);

}


/* ==================================================
   DIALOG
================================================== */

.sale-booking-dialog {

    position: relative;

    z-index: 2;

    width: min(
        720px,
        100%
    );

    max-height: 92vh;

    overflow-y: auto;

    background: #ffffff;

    border-radius: 16px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.22);

    transform:
        translateY(15px)
        scale(.98);

    transition:
        transform .2s ease;

}


.sale-booking-modal.show
.sale-booking-dialog {

    transform:
        translateY(0)
        scale(1);

}


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

.sale-booking-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding: 24px 26px 20px;

    border-bottom:
        1px solid #edf0f3;

}


.sale-booking-eyebrow {

    display: block;

    margin-bottom: 5px;

    color: #d92f2f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.sale-booking-header h2 {

    margin: 0 0 5px;

    color: var(--primary-blue);

    font-size: 25px;

    font-weight: 800;

}


.sale-booking-header p {

    margin: 0;

    color: #77808a;

    font-size: 12px;

}


.sale-booking-close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f4f6f8;

    color: #4c5661;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

}


.sale-booking-close:hover {

    background: #e9edf1;

}


/* ==================================================
   PRODUCT
================================================== */

.sale-booking-product {

    display: flex;

    align-items: center;

    gap: 16px;

    margin: 20px 26px;

    padding: 12px;

    background: #ffffff;

    border: 1px solid #e8edf1;

    border-radius: 10px;

}


.sale-booking-product img {

    width: 90px;

    height: 90px;

    flex: 0 0 90px;

    object-fit: contain;

    background: #ffffff;

    border-radius: 7px;

}


.sale-booking-product-info {

    min-width: 0;

}


.sale-booking-product-label {

    margin-bottom: 4px;

    color: #9199a2;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;

}


.sale-booking-product-info strong {

    display: block;

    color: var(--primary-blue);

    font-size: 13px;

    line-height: 1.4;

}


.sale-booking-product-info > span {

    display: block;

    margin-top: 3px;

    color: #7d858e;

    font-size: 10px;

}


.sale-booking-product-price {

    display: flex;

    align-items: baseline;

    gap: 8px;

    margin-top: 6px;

}


.sale-booking-old-price {

    color: #9aa1a9;

    font-size: 10px;

    text-decoration: line-through;

}


.sale-booking-product-price strong {

    display: inline;

    color: #d92f2f;

    font-size: 16px;

}


/* ==================================================
   FORM
================================================== */

.sale-booking-form {

    padding: 0 26px 24px;

}


.sale-booking-section-title {

    margin:
        20px 0 12px;

    padding-bottom: 7px;

    color: var(--primary-blue);

    border-bottom:
        1px solid #edf0f3;

    font-size: 12px;

    font-weight: 800;

}


.sale-booking-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

}


.sale-booking-field {

    min-width: 0;

}


.sale-booking-full {

    grid-column: 1 / -1;

}


.sale-booking-field label {

    display: block;

    margin-bottom: 6px;

    color: #3f4852;

    font-size: 11px;

    font-weight: 700;

}


.sale-booking-field label span {

    color: #d92f2f;

}


.sale-booking-field input,
.sale-booking-field textarea {

    box-sizing: border-box;

    width: 100%;

    padding: 10px 11px;

    border: 1px solid #dce2e7;

    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: #29323b;

    font-family: inherit;

    font-size: 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.sale-booking-field textarea {

    min-height: 78px;

    resize: vertical;

}


.sale-booking-field input:focus,
.sale-booking-field textarea:focus {

    border-color:
        var(--primary-blue);

    box-shadow:
        0 0 0 3px
        rgba(0,61,112,.08);

}


.sale-booking-field input[readonly] {

    background: #f7f8fa;

    color: #66707a;

}


/* ==================================================
   REQUIRED NOTE
================================================== */

.sale-booking-required-note {

    margin-top: 14px;

    color: #7a838c;

    font-size: 10px;

}


.sale-booking-required-note span {

    color: #d92f2f;

    font-weight: 800;

}


/* ==================================================
   ACTIONS
================================================== */

.sale-booking-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 20px;

}


.sale-booking-cancel,
.sale-booking-submit {

    min-width: 110px;

    padding: 11px 18px;

    border-radius: 7px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

}


.sale-booking-cancel {

    background: #ffffff;

    border: 1px solid #dce2e7;

    color: #4d5761;

}


.sale-booking-cancel:hover {

    background: #f5f7f9;

}


.sale-booking-submit {

    border: 1px solid #d92f2f;

    background: #d92f2f;

    color: #ffffff;

    box-shadow:
        0 5px 15px
        rgba(217,47,47,.18);

}


.sale-booking-submit:hover {

    background: #c92828;

    transform: translateY(-1px);

}


/* ==================================================
   WHATSAPP NOTE
================================================== */

.sale-booking-whatsapp-note {

    margin: 12px 0 0;

    color: #89919a;

    text-align: center;

    font-size: 10px;

}


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

@media (max-width: 600px) {

    .sale-booking-modal {

        align-items: flex-end;

        padding: 0;

    }


    .sale-booking-dialog {

        width: 100%;

        max-height: 94vh;

        border-radius:
            16px 16px 0 0;

    }


    .sale-booking-header {

        padding:
            20px 18px 16px;

    }


    .sale-booking-product {

        margin:
            15px 18px;

    }


    .sale-booking-form {

        padding:
            0 18px 20px;

    }


    .sale-booking-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .sale-booking-full {

        grid-column: auto;

    }


    .sale-booking-actions {

        flex-direction: column-reverse;

    }


    .sale-booking-cancel,
    .sale-booking-submit {

        width: 100%;

    }

}