.home .splide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(50%);
}


.splide__pagination__page {
    width: 2rem;
    height: .2rem;
    border-radius: 0;
    background: #000;

}
.splide__pagination__page.is-active {
    background: #000;
    opacity: .5;
    transform: scale(1,1);
}
.splide__text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    color: var(--white);
    z-index: 1;
}
.splide__text h3 {
    font-size: 6rem;
}
.splide__text p {
    font-size: 2rem;
}


/* start category  */
.category__item{
cursor: pointer;
text-align: center;
}
.category__item:hover.category__item img {
    transform: scale(1.2,1.2);
}
.category_image {
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    margin-bottom: 2rem;
}
.category_image img {
    transition: .4s;
    height: 100%;
}



/* start best saler  */
.bestsaler_item {
    border: .01rem solid var(--gray);
    padding: .5rem;
    gap: .5rem;
}
.bestsaler_img {
    width: 100px;
    height: 100px;
}
.bestsaler_img img {
    object-fit: cover;
    object-position: center;
}

/* start ads  */

.ads_item {
    overflow: hidden;
}

.ads_item:hover img {
    transform: scale(1.1,1.1);
    height: 100%;
}
.ads_item img {
    filter: brightness(60%);
    transition: .4s;

}

.ads_item_text {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
.ads_item_text h4 {
    font-size: 2rem;

}


/* start brands  */
.brand_img {
    padding: .5rem;
        border: .01rem solid var(--gray);

}

.splide__arrow {
    background: var(--white);
}
/* start ads banner  */
.ads__banner {
    background: url(https://vogal-demo.myshopify.com/cdn/shop/files/smartwatch16_2000x.jpg?v=1678523756);
    min-height: 60vh;
    background-size: cover;
    color: var(--white);
}
.ads__banner__text {
    position: absolute;
    bottom: 5rem;
    left: 10rem;
}
.ads__banner__text h2 {
    font-size: 4rem;
}
.ads__banner__text p {
    font-size: 2rem;
}
.ads__banner .form__submit button {
    border-color: var(--white);
    background: transparent;
}
.ads__banner .form__submit button:hover {
    background: var(--white);
    color: var(--black);
}

/* start service  */
.service__item {
    gap: 1rem;
}

/* start contact section  */
.contact_section {
    background:#dfeaef;
}
.contact_section h3 {
    font-size: 3.5rem;
}
.contact_section p {
    margin: 2rem 0;
}
.logout {
    position: absolute;
    background: var(--black);
    width: 12rem;
    z-index: 3;
    top: 4rem;
    left: 100rem;
    transition: .4s .4s;
}
.topbar__user__container:nth-of-type(1):hover .logout{
    left: -10rem;
    transition: .4s;
}
.logout form {
    line-height: 3;
    padding: 1rem;
    text-align: center;
}
.logout a:hover {
    color: var(--secondary) !important;
}
.logout button:hover {
    color: var(--secondary) !important;
}
/* start media query  */
@media (max-width:1024px) {
    .splide__text h3 {
    font-size: 5rem;
}
}
@media (max-width:768px) {
    .splide__text h3 {
    font-size: 3rem;
}
.splide__text p {
    font-size: 1.5rem;
}
.splide__pagination__page {
    width: 1.5rem;
}
.ads__banner {
    background-position: center ;
}
.ads__banner__text {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
}
}

@media (320px <= width <= 426px) {
    .splide__text h3 {
    font-size: 1.5rem;
}
.splide__text p {
    font-size: 1rem;
}
.ads__banner__text {
    position: absolute;
    bottom: 2rem;
    left: 1rem;
}
.ads__banner__text h2 {
    font-size: 3rem;
}
.ads__banner__text p {
    font-size: 1.5rem;
}
}