﻿/* Hero Section Main Layout */
.hero-slider-section {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 0;
    overflow: hidden;
    margin-bottom:50px;
}

.slider-container {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Slide Styling */
.slide {
    display: none;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.slide.active {
    display: block;
}

.banner-wrapper {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Image Full Width & Centered Fix */
.hero-full-img, 
.slide img {
    width: 100% !important;     /* इमेज पूरी चौड़ाई लेगी */
    height: auto !important;
    display: block !important;  /* नीचे का गैप खत्म करेगी */
    margin: 0 auto !important;
}

/* Slider Dots Styling */
.slider-dots {
    text-align: center;
    position: absolute;
    bottom: 15px;
    width: 100%;
    z-index: 10;
    line-height: 1; /* डॉट्स का टेक्स्ट-अलाइनमेंट सही रखने के लिए */
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #ffffff;
    border: 1px solid #717171;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot.active, .dot:hover {
    background-color: #d9534f;
}

/*-------------------------------*/
/*==================================================
        HERO SLIDER RESPONSIVE CSS
==================================================*/

/* Large Desktop */
@media (min-width:1400px){

    .hero-slider-section{
        width:100%;
    }

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
        object-fit:cover;
    }

    .slider-dots{
        bottom:25px;
    }

    .dot{
        width:14px;
        height:14px;
    }

}

/* Laptop */
@media (max-width:1199px){

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
    }

    .slider-dots{
        bottom:20px;
    }

    .dot{
        width:12px;
        height:12px;
    }

}

/* Tablet Landscape */
@media (max-width:991px){

    .hero-slider-section{
        overflow:hidden;
    }

    .slider-container{
        width:100%;
    }

    .banner-wrapper{
        width:100%;
    }

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
        object-fit:cover;
    }

    .slider-dots{
        bottom:15px;
    }

    .dot{
        width:11px;
        height:11px;
        margin:0 4px;
    }

}

/* Tablet Portrait */
@media (max-width:768px){

    .hero-slider-section{
        width:100%;
    }

    .slide{
        width:100%;
    }

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
        object-fit:cover;
    }

    .slider-dots{
        bottom:12px;
    }

    .dot{
        width:10px;
        height:10px;
        margin:0 4px;
    }

}

/* Mobile */
@media (max-width:576px){

    .hero-slider-section{
        width:100%;
    }

    .slider-container{
        width:100%;
    }

    .banner-wrapper{
        width:100%;
    }

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
        display:block;
        object-fit:cover;
    }

    .slider-dots{
        bottom:8px;
    }

    .dot{
        width:9px;
        height:9px;
        margin:0 3px;
    }

}

/* Small Mobile */
@media (max-width:480px){

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
    }

    .slider-dots{
        bottom:6px;
    }

    .dot{
        width:8px;
        height:8px;
        margin:0 3px;
    }

}

/* Extra Small Devices */
@media (max-width:360px){

    .hero-full-img,
    .slide img{
        width:100%;
        height:auto;
    }

    .slider-dots{
        bottom:5px;
    }

    .dot{
        width:7px;
        height:7px;
        margin:0 2px;
    }

}

#scrollTop {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #0104a8;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
    z-index: 999;
}