html {
  zoom: 0.9; /* 90% size — you can use 0.85 or 0.8 for smaller */
}

html, body, .site-wrapper, .page-wrapper, .main-wrapper {
    background-color: #F3F5F7 !important;
}

/* CSS for whatsApp */

#whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#whatsapp-button img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

#whatsapp-button img:hover {
    transform: scale(1.1);
}



/* If the utility classes are adding space too */
.py-20 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pb-20 {
    padding-bottom: 0 !important;
}


/* ============ COLLECTION GRID STYLE ============ */

/* Parent grid (use the wrapper that contains the 4 items) */
/* ===========================
   Seedra slider — fixed height
   =========================== */

/* ONE place to control desktop height */
:root {
  --heroH-desktop: 55vh;   /* change to 35–50vh as you like */
  --heroH-tablet: 36vh;
  --heroH-mobile: 30vh;
}

/* Slide container: kill theme min-height and set your height */
.tp-slider-area .tp-slider-item-3.tp-slider-height-3 {
  position: relative;
  height: var(--heroH-desktop) !important;
  min-height: 0 !important;      /*  .tp-slider-thumb-3 {
  position: absolute;
  inset: 0;                      /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0;
}

/* Hide heading/text block so it doesn't add height */
.tp-slider-area .tp-slider-content-3 {
  display: none !important;
}

/* Make Owl wrappers follow the slide height (no extra space) */
.tp-slider-area .owl-stage-outer,
.tp-slider-area .owl-stage,
.tp-slider-area .owl-item {
  height: var(--heroH-desktop) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Center arrows vertically (optional) */
.tp-slider-area .owl-nav .owl-prev,
.tp-slider-area .owl-nav .owl-next {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5;
}

/* Responsive */
@media (max-width: 992px) {
  .tp-slider-area .tp-slider-item-3.tp-slider-height-3,
  .tp-slider-area .owl-stage-outer,
  .tp-slider-area .owl-stage,
  .tp-slider-area .owl-item {
    height: var(--heroH-tablet) !important;
  }
}

@media (max-width: 576px) {
  .tp-slider-area .tp-slider-item-3.tp-slider-height-3,
  .tp-slider-area .owl-stage-outer,
  .tp-slider-area .owl-stage,
  .tp-slider-area .owl-item {
    height: var(--heroH-mobile) !important;
  }
}

/* ---------- Responsive ---------- */

/* Tablet: 3 columns */
@media (max-width: 992px) {
  .tp-category-grid,
  .tp-category-wrapper,
  .tp-collections-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
  .tp-category-grid,
  .tp-category-wrapper,
  .tp-collections-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Small phones: 1 column */
@media (max-width: 480px) {
  .tp-category-grid,
  .tp-category-wrapper,
  .tp-collections-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Center menu and section titles */

/* Main menu alignment */
.main-menu.menu-style-3.menu-style-4.p-relative {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  text-align: center;

}

/* Section title container */
.section-title.tp-section-title-4 {
  text-align: center !important;
  margin: 40px auto 30px auto; /* top 40px, bottom 30px */
  display: block;
}

/* Subtitle or pre-title text */
.tp-section-title-pre-4 {
  display: block;
  text-align: center !important;
  margin: 20px auto 15px auto; /* top 20px, bottom 15px */
}


/* Optional: center logo or any inline list inside menu */
.main-menu.menu-style-3.menu-style-4.p-relative ul {
  justify-content: center !important;
  text-align: center;
}

/* Optional spacing adjustments */
.section-title.tp-section-title-4 h2,
.tp-section-title-pre-4 {
  margin: 0.5rem 0;
}

/* ............................................... */


.tp-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.category-card {
    display: flex;
    flex-direction: column;
}

.tp-category-main-box {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.tp-category-main-thumb {
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.category-card:hover .tp-category-main-thumb {
    transform: scale(1.05);
}


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

.tp-category-main-title {
    font-size: 18px;
    margin-bottom: 8px;
}

.tp-category-main-item {
    font-size: 14px;
    color: #666;
}

/* Tablet - 2 columns */
@media (max-width: 991px) {
    .tp-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile - 1 column */
@media (max-width: 575px) {
    .tp-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .tp-category-main-title {
        font-size: 16px;
    }
    
    .tp-category-main-thumb {
        background-size: contain !important;
    }
}



/*------------------------------------------------------*/



.features-section {
    background-color: #3d5a5a;
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.feature-item {
    text-align: center;
    color: #ffffff;
}

.feature-title {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.feature-description {
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
    opacity: 0.95;
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .features-section {
        padding: 60px 0;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .feature-title {
        font-size: 28px;
    }
    
    .feature-description {
        font-size: 15px;
    }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
    .features-section {
        padding: 50px 20px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .feature-title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .feature-description {
        font-size: 14px;
        line-height: 1.7;
    }
}


.tp-category-area {
  padding-bottom: 40px; /* ensures visual breathing room before the next section */
}


/* *************** */

.promise-section {
    background-color: #ffffff;
    padding: 80px 0;
}

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

.promise-item {
    display: flex;
    flex-direction: column;
}

.promise-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
}

.promise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.promise-item:hover .promise-image img {
    transform: scale(1.05);
}

.promise-content {
    text-align: center;
    padding: 0 20px;
}

.promise-title {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #000000;
    line-height: 1.3;
}

.promise-description {
    font-size: 16px;
    line-height: 1.8;
    color: #666666;
    max-width: 600px;
    margin: 0 auto;
}

/* Tablet */
@media (max-width: 991px) {
    .promise-section {
        padding: 60px 0;
    }
    
    .promise-image {
        height: 350px;
        margin-bottom: 25px;
    }
    
    .promise-title {
        font-size: 28px;
    }
    
    .promise-description {
        font-size: 15px;
    }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
    .promise-section {
        padding: 50px 20px;
    }
    
    .promise-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .promise-image {
        height: 300px;
        margin-bottom: 20px;
    }
    
    .promise-title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .promise-description {
        font-size: 14px;
        line-height: 1.7;
    }
}

/*--------------procut name and price---- /*


/* Wrapper controlling spacing */
.product-info-rows {
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

/* Arabic-Friendly Product Name */
.product-name-fancy a {
    font-family: 'Tajawal', sans-serif;   /* Elegant Arabic font */
    font-size: 15px;                      /* Smaller and cleaner */
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 0;
}

/* Fancy Product Price */
/* Base style for product name */
.product-name-fancy a {
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 0;
    white-space: nowrap;       /* Prevent line break */
    overflow: hidden;          /* Hide overflow */
    text-overflow: ellipsis;   /* Show ... */
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .product-name-fancy a {
        font-size: 13px;       /* smaller on mobile */
    }
}




/* ---------- */