.hero_section {
    width: 100%;
    height: 85vh;
    position: relative;

    .hero_Swiper {
        width: 100%;
        img {
            width: 100% !important;
            object-fit: cover;
            height: 85vh;
        }
    }
    
    .hero_details {
        position: absolute;
        top: 40%;
        right: 50%;
        transform: translate(50%, -50%);
        @include Flex;
        flex-direction: column;
        text-align: center;
        h1 {
            padding-bottom: 20px;
            font-size:var(--titleFsize) ;
            font-weight: bold;
            letter-spacing: 4px;
            color: var(--secondary);
        }
        
        h4 {    
            font-size: 3.8vw;
            color: var(--white);
            font-weight: bold;
        }
        
        p {
            color: var(--white);
            font-size: 1.2vw;
        }
        .button_container{
            width: 150px;
            font-size: 12px;
        }
    }
}

.ant-carousel .slick-dots-bottom{
    bottom: 40px !important;
}

.slick-active {
    button {
        &::after {
            height: 8px;
            border-radius: 30px;
            background: var(--secondary);
            border-color: var(--secondary) !important;
        }
    }
}

.ant-carousel .slick-dots li {
    width: 100px !important;
    padding-inline: 20px;
}



.checkout_our_new {
    width: 80%;
    margin-inline: auto;
    position: relative;
    padding-block: 0 100px;
    .checkout_button_tabs {
        width: 100%;
        display: flex;justify-content: end;
        gap: 1vw;
        button {
            outline: none;
            border: none;
            border-radius: 70px;
            padding: 0.4vw 2vw;
            font-size: 16px;
            font-weight: bold;
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            &:hover{
                background: var(--primary);
                color: var(--white);
            }
        }
        .Activebutton{
            background: var(--primary);
            color: var(--white);
            border: none;
        }
    }
    .checkout_single_tab{
        width: 100%;
        .details {
            width: 70%;
        }
        
        h1 {
            color: var(--primary);
            font-size: var(--titleFsize);
            letter-spacing: 4px;
        }
        
        h2 {
            font-weight: bold;
            font-size: 2.8vw;
        }
        
        p {
            font-size: 1.2vw;
            color: var(--gray);
        }
    }
    .checkout_Swiper,.mySwiper{
        padding-top: 50px;
        .swiper-button-prev:after, .swiper-button-next:after{
            @include Flex;
            width: 30px;height: 30px;
            border-radius: 50%;
            padding: 23px;
            font-size: 10px;
            font-weight: bold;
            color: var(--gray);
            @include Shadow;
        }
    }
    
}





.comprehensive_purchase {
    width: 80%;
    margin-inline: auto;
    margin-block: 100px;

    >h1 {
        color: var(--primary);
        font-size: var(--titleFsize);
        letter-spacing: 4px;
    }

    h4 {
        width: 70%;
        font-size: 3vw;
        font-weight: bold;
        letter-spacing: 2px;
        padding-bottom: 70px;
    }

    .first {
        width: 100%;
        margin-inline: auto;
        display: flex;
        justify-content: space-between;

        div {
            @include Flex;
            position: relative;
            width: 40%;
            cursor: pointer;
            transition: ease-in-out .3s;
            .products_link{
                width: 100%;
            }
            &:nth-child(1) {
                width: 60%;
            }
            img {
                width: 100%;
            }

            p {
                color: var(--white);
                left: 13%;
                bottom: 18%;
                position: absolute;
                font-size: 1.3vw;
                transition: ease-in-out .3s;
                margin-bottom: 10px;
            }

            h6 {
                position: absolute;
                font-size: 1,3vw;
                opacity: .7;
                color: var(--white);
                left: 13%;
                bottom: 30%;
                letter-spacing: 1.5px;
            }

            &:hover {
                transform: scale(1.05);

                p {
                    color: var(--secondary);
                }
            }
        }
    }

    .second {
        div {
            width: 60%;
            &:nth-child(1) {
                width: 40% !important;
            }
        }
    }
}


@media screen and (max-width:800px) {
    .hero_section {
        height: 55vh;    
        .hero_Swiper {
            img {
                height: 55vh;
            }
        }
        
        .hero_details {
            top: 40%;
            width: 80%;
            h1 {
                font-size:12px ;
            }
            
            h4 {    
                font-size: 28px;
            }
            
            p {
                font-size: 12px;
            }
            .button_container{
                width: 120px;
            }
        }
    }
    .slick-active {
        button {
            &::after {
                height: 8px;
            }
        }
    }
    
    .ant-carousel .slick-dots li {
        width: 60px !important;
        padding-inline: 3px;
    }
    
    
    
    .checkout_our_new {
        width: 90%;
        .checkout_button_tabs {
            width: 100%;
            display: flex;justify-content: end;
            gap: 1vw;
            button {
                font-size: 13px;
                margin-bottom: 20px;
                padding: 5px 14px;
            }
        }
        .checkout_single_tab{
            width: 100%;
            .details {
                width: 90%;
            }
            h1 {
                font-size: 12px;
            }
            
            h2 {
                font-size: 25px;
            }
            
            p {
                font-size: 12px;
            }
        }
        .checkout_Swiper,.mySwiper{
            padding-top: 20px;
            .swiper-button-prev:after, .swiper-button-next:after{
                padding: 0;
            }
        }
        
    }
    
    
    
    
    
    .comprehensive_purchase {
        width: 90%;
        margin-block: 50px;
    
        >h1 {
            font-size: 14px;
        }
    
        h4 {
            width: 90%;
            font-size: 22px;
        }
    
        .first {
            justify-content: space-between;
            div {
                width: 40%;
                &:nth-child(1) {
                    width:60%;
                }
                img {
                    width: 94%;
                }
    
                p {
                    left: 13%;
                    bottom: 18%;
                    font-size: 12px;
                }
    
                h6 {
                    font-size: 12px;
                    left: 13%;
                    bottom: 30%;
                }
    
                &:hover {
                    transform: scale(1.07);
    
                    p {
                        color: var(--secondary);
                    }
                }
            }
        }
    
        .second {
            div {
                width: 60%;
                &:nth-child(1) {
                    width: 40% !important;
                }
            }
        }
    }
}