/* =========================================================
   VIDEO HERO SECTION
   Component ID: 1967678391
   ========================================================= */


/* =========================================================
   1. HERO CONTENT - DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    [component-id="1967678391"] .home-slider__content {
        left: auto !important;
        right: 0 !important;

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

        padding-inline-end: 5% !important;

        transform: translateY(-50%) !important;

        justify-content: flex-end !important;
        align-items: center !important;
    }


    /* Content alignment */

    [component-id="1967678391"] .md\:justify-between {
        justify-content: flex-end !important;
    }


    [component-id="1967678391"] .md\:items-start {
        align-items: center !important;
    }


    /* Text alignment */

    [component-id="1967678391"] .md\:rtl\:text-right:where(
        [dir="rtl"],
        [dir="rtl"] *
    ) {
        text-align: center !important;
    }


    [component-id="1967678391"] .hero-slider-title,
    [component-id="1967678391"] .hero-slider-subtitle {
        text-align: right !important;
        width: 100%;
    }

}


/* =========================================================
   2. HERO TITLE
   ========================================================= */

[component-id="1967678391"] .hero-slider-title h2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}


/* Second line + paw icon */

[component-id="1967678391"] .hero-title-line2 {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Paw beside title */

[component-id="1967678391"] .hero-title-icon {
    width: 32px;
    height: 32px;

    object-fit: contain;
}


/* =========================================================
   3. HERO SUBTITLE
   ========================================================= */

[component-id="1967678391"] .hero-slider-subtitle .description {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    font-size: 1.35rem !important;
    line-height: 1.7;
}


/* Center "الأليف" */

[component-id="1967678391"] .hero-slider-subtitle .description span:last-child {
    align-self: center;

    width: 100%;

    text-align: center;
}


/* =========================================================
   4. HERO BUTTON
   ========================================================= */

[component-id="1967678391"] .hero-slider-btn a {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 125px;
    height: 45px;

    padding: 0 20px !important;

    gap: 0 !important;

    overflow: hidden;

    transition:
        padding 0.4s ease,
        transform 0.4s ease;
}


/* Hide original rocket icon */

[component-id="1967678391"] .hero-slider-btn .sicon-rocket {
    display: none !important;
}


/* =========================================================
   5. REMOVE HOVER IMAGE
   ========================================================= */

/* Prevent any extra image from appearing on hover */

[component-id="1967678391"] .hero-slider-btn a::after {
    display: none !important;
    content: none !important;
}


/* Keep button size unchanged on hover */

[component-id="1967678391"] .hero-slider-btn a:hover {
    padding-right: 20px !important;
    padding-left: 20px !important;
}


/* =========================================================
   6. HERO ANIMATION
   ========================================================= */

[component-id="1967678391"] .hero-slider__content {
    animation:
        heroContentSmooth 1.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


/* Title */

[component-id="1967678391"] .hero-slider-title {
    animation:
        heroTextSmooth 1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        both;
}


/* Subtitle */

[component-id="1967678391"] .hero-slider-subtitle {
    animation:
        heroTextSmooth 1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.3s
        both;
}


/* Button */

[component-id="1967678391"] .hero-slider-btn {
    animation:
        heroButtonSmooth 1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.45s
        both;
}


/* =========================================================
   7. KEYFRAMES
   ========================================================= */

@keyframes heroContentSmooth {

    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translateX(35px);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            translateX(0);
    }

}


@keyframes heroTextSmooth {

    from {
        opacity: 0;

        transform: translateX(25px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}


@keyframes heroButtonSmooth {

    from {
        opacity: 0;

        transform:
            translateX(25px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


/* =========================================================
   8. MOBILE
   Content at bottom
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       Hero Content
       ----------------------------------------------------- */

    [component-id="1967678391"] .home-slider__content {
        width: 100% !important;

        padding: 20px !important;

        top: auto !important;
        bottom: 0 !important;

        left: 50% !important;

        transform: translateX(-50%) !important;

        justify-content: flex-end !important;
        align-items: center !important;
    }


    /* -----------------------------------------------------
       Content Wrapper
       ----------------------------------------------------- */

    [component-id="1967678391"] .home-slider__content > div {
        align-items: center !important;
    }


    /* -----------------------------------------------------
       ALL TEXT - WHITE
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-slider-title,
    [component-id="1967678391"] .hero-slider-title h2,
    [component-id="1967678391"] .hero-slider-title h2 span,
    [component-id="1967678391"] .hero-slider-subtitle,
    [component-id="1967678391"] .hero-slider-subtitle .description,
    [component-id="1967678391"] .hero-slider-subtitle .description span {
        color: #ffffff !important;
    }


    /* -----------------------------------------------------
       Title
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-slider-title,
    [component-id="1967678391"] .hero-slider-title h2 {
        text-align: center !important;

        align-items: center !important;
    }


    [component-id="1967678391"] .hero-slider-title h2 {
        font-size: 22px !important;

        line-height: 1.35 !important;
    }


    /* -----------------------------------------------------
       Second Title Line
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-title-line2 {
        display: inline-flex;

        align-items: center;

        gap: 4px;
    }


    /* -----------------------------------------------------
       Title Paw - MOBILE
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-title-icon {
        content: url("https://i.ibb.co/5h99Q638/paw-Light-Angel.png");

        width: 24px !important;
        height: 24px !important;

        object-fit: contain;
    }


    /* -----------------------------------------------------
       Subtitle
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-slider-subtitle,
    [component-id="1967678391"] .hero-slider-subtitle .description {
        align-items: center !important;

        text-align: center !important;

        font-size: 13px !important;

        line-height: 1.6 !important;
    }


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

    [component-id="1967678391"] .hero-slider-btn a {
        background-color: #ffffff !important;

        border-color: #ffffff !important;

        color: #2C2D42 !important;

        font-size: 13px !important;

        padding: 8px 16px !important;

        gap: 5px !important;
    }


    /* Button text */

    [component-id="1967678391"] .hero-slider-btn a,
    [component-id="1967678391"] .hero-slider-btn a span {
        color: #2C2D42 !important;
    }


    /* -----------------------------------------------------
       BUTTON IMAGE - MOBILE
       Replace existing image
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-slider-btn .btn-paw-icon {
        content: url("https://i.ibb.co/j9mKh34m/paw-Dark.png");

        width: 18px !important;
        height: 18px !important;

        object-fit: contain;
    }


    /* -----------------------------------------------------
       Make sure NO hover image appears
       ----------------------------------------------------- */

    [component-id="1967678391"] .hero-slider-btn a::after {
        display: none !important;
        content: none !important;
    }

}










/* ==========================================================================
   Header - Add top spacing on mobile
   ========================================================================== */
@media (max-width: 768px) {
  .s-block--full-bg:first-of-type {
    margin-top: 9rem;
  }
}








/* ==========================================================================
   Features Block
   ========================================================================== */

.angel-features .grid {
  align-items: stretch;
}

.angel-feature.flex-center.flex-col {
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  height: 100%;
}

/* Desktop */
@media (min-width: 768px) {
  .angel-features .grid {
    grid-auto-rows: 1fr;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .angel-features .grid {
    align-items: stretch !important;
  }

  .angel-feature.flex-center.flex-col {
    width: 100%;
  }
}









/* ==========================================================================
   Footer
   ========================================================================== */
.store-footer *,
.store-footer .da-tm {
  color: #fff !important;
}

.store-footer .s-social-link a,
.store-footer .s-contacts-item {
  background-color: transparent !important;
}

.store-footer .footer-container .logo-footer .foo {
  content: url(https://i.ibb.co/FbJDRSBd/image.png);
}

/* ==========================================================================
   Product Card - Add to cart button
   ========================================================================== */

/* Hide the default cart icon */
.s-product-card-content-footer .sicon-cart2 {
  display: none !important;
}

/* Button text container */
.s-product-card-content-footer .s-button-text {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

/* Add a paw icon before the text */
.s-product-card-content-footer .s-button-text::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("https://i.ibb.co/fYQzdWPb/paw-8277625-1-1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.3s ease;
}

/* Show the paw icon on hover */
.s-product-card-content-footer:hover .s-button-text::before {
  opacity: 1;
  transform: scale(1);
}











/* ==========================================================================
   Banner Square - Image swap on hover (cat / dog / bird)
   ========================================================================== */
[component-id="1883218966"] .banner-square .box-img {
  position: relative !important;
  overflow: hidden !important;
}

/* Original image */
[component-id="1883218966"] .banner-square .box-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* New image (shown on top of the original) */
[component-id="1883218966"] .banner-square .box-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* First banner: cat image */
[component-id="1883218966"] .banner-square:nth-child(1) .box-img::after {
  background-image: url("https://i.ibb.co/jvTSvjJw/long-Cat-After.webp");
}

/* Second banner: dog image */
[component-id="1883218966"] .banner-square:nth-child(2) .box-img::after {
  background-image: url("https://i.ibb.co/jvysd15K/long-Dog-After.webp");
}

/* Third banner: bird image */
[component-id="1883218966"] .banner-square:nth-child(3) .box-img::after {
  background-image: url("https://i.ibb.co/0y6SMHwd/long-Bird-After.webp");
}

/* On hover: fade out the original image and fade in the new one */
[component-id="1883218966"] .banner-square:hover .box-img img {
  opacity: 0;
}

[component-id="1883218966"] .banner-square:hover .box-img::after {
  opacity: 1;
}

/* Edit Header Color */
.s-block__title h2 {
  color: #109bc6;
}

.faqs-list__item {
    border: 1px solid #109bc6;
    border-radius: 9px;
}


.faqs-list__item label {
  color: #109bc6;
}

.faq-item.open-badge.sicon-add {
  background: #109bc6;
}
.sicon-add::before {
  color: #fff;
}




















/* =========================
   Desktop فقط
   Section الأول
========================= */

@media (max-width: 767px) {
    .s-block--bundle-expanding-gallery {
        display: none !important;
    }
}


/* =========================
   Mobile فقط
   Section الثاني
========================= */

@media (min-width: 768px) {
    [component-id="2067433973"] {
        display: none !important;
    }
}




















/* =========================================================
   VIDEO PERFORMANCE
   Component ID: 1967678391
   ========================================================= */


/* =========================================================
   VIDEO SLIDE
   ========================================================= */

[component-id="1967678391"] .video-swiper {
    position: relative !important;
    overflow: hidden !important;

    /* Desktop placeholder */
    background-image: url("https://i.ibb.co/MkQ3W6k8/vid-Hero.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* =========================================================
   VIDEO
   ========================================================= */

[component-id="1967678391"] .video-swiper video {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    opacity: 0;

    transition: opacity 0.8s ease;
}


/* =========================================================
   VIDEO READY
   ========================================================= */

[component-id="1967678391"] .video-swiper.video-ready video {
    opacity: 1 !important;
}


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

@media (max-width: 767px) {

    [component-id="1967678391"] .video-swiper {
        background-image: url("https://i.ibb.co/CK8Mpdrk/vid-Hero-Mob.webp") !important;

        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

}