/* =========================
   MODERN INDICATORS
========================= */

#carousel-software .carousel-indicators{
    margin:0;
    justify-content:flex-start;
    left:25px;
    bottom:22px;
    gap:10px;
}

#carousel-software .carousel-indicators button{
    width:12px;
    height:12px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.45);
    opacity:1;
    transition:0.35s ease;
}

#carousel-software .carousel-indicators .active{
    width:38px;
    border-radius:30px;
    background:#ffffff;
}

/* =========================
   MODERN CONTROLS
========================= */

#carousel-software .carousel-control-prev,
#carousel-software .carousel-control-next{
    top:auto;
    bottom:18px;
    width:52px;
    height:52px;
    border-radius:50%;
    opacity:1;

    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.25);

    transition:0.3s ease;
}

/* Hover */

#carousel-software .carousel-control-prev:hover,
#carousel-software .carousel-control-next:hover{
    background:#ffffff;
    transform:translateY(-3px);
}

/* Positions */

#carousel-software .carousel-control-prev{
    left:auto;
    right:85px;
}

#carousel-software .carousel-control-next{
    right:20px;
}

/* ICONS */

#carousel-software .carousel-control-prev-icon,
#carousel-software .carousel-control-next-icon{
    background-size:55% 55%;
    filter:brightness(0) invert(1);
}

/* Hover icon dark */

#carousel-software .carousel-control-prev:hover .carousel-control-prev-icon,
#carousel-software .carousel-control-next:hover .carousel-control-next-icon{
    filter:none;
}

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

@media (max-width:767px){

    #carousel-software .carousel-control-prev,
    #carousel-software .carousel-control-next{
        width:42px;
        height:42px;
        bottom:12px;
    }

    #carousel-software .carousel-control-prev{
        right:65px;
    }

    #carousel-software .carousel-control-next{
        right:12px;
    }

    #carousel-software .carousel-indicators{
        left:12px;
        bottom:16px;
        gap:8px;
    }

    #carousel-software .carousel-indicators button{
        width:10px;
        height:10px;
    }

    #carousel-software .carousel-indicators .active{
        width:28px;
    }

}
        /* SECTION */
        .hero-section{
            padding:80px 0;
        }

        /* LEFT CONTENT */

        .hero-content h2{
            font-size:3rem;
            font-weight:700;
            line-height:1.1;
            margin-bottom:24px;
        }

        .hero-content p{
            font-size:16px;
            color:#666;
            line-height:1.8;
            margin-bottom:30px;
        }

        .hero-btn{
            border-radius:50px;
            padding:12px 28px;
            font-weight:600;
        }

        /* CAROUSEL */

        #carousel-software{
            position:relative;
        }

        #carousel-software .carousel-inner{
            border-radius:24px;
            overflow:hidden;
        }

        #carousel-software .carousel-item{
            position:relative;
        }

        #carousel-software .carousel-item img{
            width:100%;
            height:600px;
            object-fit:cover;
        }

        /* Overlay */

        #carousel-software .carousel-item::before{
            content:"";
            position:absolute;
            inset:0;
            background:rgba(0,0,0,0.45);
            z-index:1;
        }

        /* Slide Content */

        .carousel-caption-custom{
            position:absolute;
            top:50%;
            left:8%;
            transform:translateY(-50%);
            z-index:2;
            color:#fff;
            max-width:500px;
        }

        .carousel-caption-custom h1{
            font-size:3rem;
            font-weight:700;
            line-height:1.1;
            margin-bottom:20px;
        }

        .carousel-caption-custom p{
            font-size:16px;
            line-height:1.8;
            margin-bottom:25px;
        }

        .carousel-caption-custom .btn{
            border-radius:50px;
            padding:12px 28px;
            font-weight:600;
        }

        /* Indicators */

        #carousel-software .carousel-indicators{
            margin:0;
            justify-content:flex-start;
            left:20px;
            bottom:15px;
        }

        /* Controls */

        #carousel-software .carousel-control-prev,
        #carousel-software .carousel-control-next{
            top:auto;
            bottom:15px;
            width:45px;
            height:45px;
            background:rgba(0,0,0,0.5);
            border-radius:50%;
            opacity:1;
        }

        #carousel-software .carousel-control-prev{
            left:auto;
            right:70px;
        }

        #carousel-software .carousel-control-next{
            right:15px;
        }

        /* MOBILE */

        @media (max-width:991px){

            .hero-content{
                text-align:center;
                margin-bottom:30px;
            }

            .hero-content h2{
                font-size:2.4rem;
            }

            .carousel-caption-custom h1{
                font-size:2.2rem;
            }

        }

        @media (max-width:767px){

            .hero-section{
                padding:60px 0;
            }

            .hero-content h2{
                font-size:2rem;
            }

            #carousel-software .carousel-item img{
                height:420px;
            }

            .carousel-caption-custom{
                left:5%;
                right:5%;
                max-width:100%;
            }

            .carousel-caption-custom h1{
                font-size:1.8rem;
            }

            .carousel-caption-custom p{
                font-size:14px;
            }

            #carousel-software .carousel-control-prev,
            #carousel-software .carousel-control-next{
                width:40px;
                height:40px;
                bottom:10px;
            }

            #carousel-software .carousel-control-prev{
                right:60px;
            }

            #carousel-software .carousel-indicators{
                left:10px;
                bottom:10px;
            }

        }