/* Add custom CSS styles below */ 
@media only screen and (min-width: 1024px) {
  .main-menu{
    justify-content: center;
  }
}
/* 1. Remove the second item in the jose-grid section */
.jose-grid .images-grid__subgrid a.images-grid__item:nth-child(2) {
    display: none !important;
}

/* 2. Make the first item take the full width by changing the grid to 1 column */
.jose-grid .images-grid__subgrid {
    grid-template-columns: 1fr !important;
}

/* Responsive fix for mobile and tablets */
@media (max-width: 1024px) {
    .jose-grid .images-grid__subgrid {
        grid-template-columns: 1fr !important;
    }
}
/* Apply these changes only for screens smaller than 768px (Mobile) */
@media (max-width: 767px) {
    
    /* 1. Remove height restrictions and cropping */
    .jose-grid .images-grid__item {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        margin-bottom: 15px;
    }

    /* 2. Show full images (No zoom/crop) */
    .jose-grid .images-grid__item img {
        position: relative !important;
        object-fit: contain !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* 3. Force single-column full-width layout */
    .jose-grid .images-grid__grid,
    .jose-grid .images-grid__subgrid,
    .jose-grid .images-grid__col {
        display: block !important;
        width: 100% !important;
        grid-template-columns: 1fr !important;
    }
}

/* --- Keep the rest of the previous code (positioning, images, etc.) the same --- */

/* 1. Horizontal Animations */
@keyframes moveLeft {
    0% { transform: translateX(0px); }
    50% { transform: translateX(-12px); }
    100% { transform: translateX(0px); }
}

@keyframes moveRight {
    0% { transform: translateX(0px); }
    50% { transform: translateX(12px); }
    100% { transform: translateX(0px); }
}

/* 2. Target the title inside your custom class container */
.jose-title-animation .custom-products__title {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* 3. Add the images using your specific class */
.jose-title-animation .custom-products__title::before,
.jose-title-animation .custom-products__title::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Left Icon */
.jose-title-animation .custom-products__title::before {
    background-image: url('https://i.ibb.co/Z6yLsyNm/path64-1.png');
    animation: moveLeft 3s ease-in-out infinite !important;
}

/* Right Icon */
.jose-title-animation .custom-products__title::after {
    background-image: url('https://i.ibb.co/wnsw4Fs/path64.png');
    animation: moveRight 3s ease-in-out infinite !important;
}

/* 4. Mobile Responsiveness */
@media (max-width: 768px) {
    .jose-title-animation .custom-products__title {
        gap: 10px;
    }
    .jose-title-animation .custom-products__title::before,
    .jose-title-animation .custom-products__title::after {
        width: 30px;
        height: 30px;
    }
}
/* --- SECTION #ABOUT-6 COMPLETE FIX --- */

/* 1. Layout: Image on Left, Text on Right */
#about-6 .about__row {
    flex-direction: row-reverse !important;
}

/* 2. Title: Color, Left-Aligned, and Animated Icons */
#about-6 .about__title {
    color: #262626 !important;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start !important; /* Title to the left of its container */
    text-align: left !important;
    gap: 20px;
    width: 100%;
}

/* 3. Icon Setup (Before & After) */
#about-6 .about__title::before,
#about-6 .about__title::after {
    content: "";
    display: inline-block;
    width: 45px;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Left Icon */
#about-6 .about__title::before {
    background-image: url('https://i.ibb.co/Z6yLsyNm/path64-1.png');
    animation: moveLeftAbout 3s ease-in-out infinite !important;
}

/* Right Icon */
#about-6 .about__title::after {
    background-image: url('https://i.ibb.co/wnsw4Fs/path64.png');
    animation: moveRightAbout 3s ease-in-out infinite !important;
}

/* 4. Horizontal Animation Keyframes */
@keyframes moveLeftAbout {
    0% { transform: translateX(0px); }
    50% { transform: translateX(-12px); }
    100% { transform: translateX(0px); }
}

@keyframes moveRightAbout {
    0% { transform: translateX(0px); }
    50% { transform: translateX(12px); }
    100% { transform: translateX(0px); }
}

/* 5. Mobile Optimization (Stack elements vertically) */
@media (max-width: 768px) {
    #about-6 .about__row {
        flex-direction: column !important;
    }
    #about-6 .about__title {
        justify-content: center !important; /* Center on mobile for better look */
        text-align: center !important;
        gap: 10px !important;
    }
    #about-6 .about__title::before,
    #about-6 .about__title::after {
        width: 30px;
        height: 30px;
    }
}


/*compare*/
/* --- HORIZONTAL SWAY ANIMATIONS --- */
@keyframes swayLeft {
    0% { transform: translateX(0px); }
    50% { transform: translateX(-12px); }
    100% { transform: translateX(0px); }
}

@keyframes swayRight {
    0% { transform: translateX(0px); }
    50% { transform: translateX(12px); }
    100% { transform: translateX(0px); }
}

/* --- TARGETING WITH CUSTOM CLASS --- */
.jose-compare-animation .compare__title {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* Setup the icons */
.jose-compare-animation .compare__title::before,
.jose-compare-animation .compare__title::after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Left Icon */
.jose-compare-animation .compare__title::before {
    background-image: url('https://i.ibb.co/Z6yLsyNm/path64-1.png');
    animation: swayLeft 3s ease-in-out infinite !important;
}

/* Right Icon */
.jose-compare-animation .compare__title::after {
    background-image: url('https://i.ibb.co/wnsw4Fs/path64.png');
    animation: swayRight 3s ease-in-out infinite !important;
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .jose-compare-animation .compare__title {
        gap: 10px;
        font-size: 1.5rem !important;
    }
    .jose-compare-animation .compare__title::before,
    .jose-compare-animation .compare__title::after {
        width: 30px;
        height: 30px;
    }
}
/* --- TRUST FAQ ICON ANIMATIONS --- */

/* 1. Define the Swaying Animation */
@keyframes joseFaqSwayLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-12px); }
}

@keyframes joseFaqSwayRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

/* 2. Target the icons inside the Shadow DOM using global CSS 
   (Note: This works only if the icons are injected or exposed) */

.jose-icon-left {
    animation: joseFaqSwayLeft 3s ease-in-out infinite !important;
}

.jose-icon-right {
    animation: joseFaqSwayRight 3s ease-in-out infinite !important;
}

/* 3. Ensure the title layout is correct */
h3.s-block-trust-faq-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}
/* Apply fix only for Laptops/Desktops (1024px and up) */
@media (min-width: 1024px) {
  .jose-grid .images-grid__image,
  .jose-grid .images-grid__item img {
    object-fit: contain !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }

  .jose-grid .images-grid__item {
    height: auto !important;
    min-height: unset !important;
  }

  /* Aspect ratios for images in laptop view */
  .jose-grid .images-grid__col:nth-child(1) .images-grid__item,
  .jose-grid .images-grid__col:nth-child(3) .images-grid__item {
    aspect-ratio: 558 / 516 !important;
  }

  .jose-grid .images-grid__col:nth-child(2) .images-grid__item,
  .jose-grid .images-grid__subgrid .images-grid__item {
    aspect-ratio: 558 / 249 !important;
  }
}