* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body{
    font-family: Sans-Serif;
    width: 100%;
    height: 100%;
    background: #360a36;
    background: #0d030d;
    background: radial-gradient(circle, rgba(13, 3, 13, 1) 0%, rgba(29, 3, 31, 1) 100%);
}



.pdalx{
    width: 90%;
    display: flex;
    margin: 0 auto;
    margin-top: 130px;
}

.boxdiperjacaya{
    padding: 10px;
    width: 100%;

    background-color: rgba(225,225,225,0.1);
    border: 1px solid #9E2CB2;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.boxdiperjacaya{
    color: #F5B7FF;
    font-size: 15px;
    font-weight: 500;
}

/* slider style */
.slider {
            position: relative;
            width: 100%;
            max-width: 1200px;
            height: 400px;
            margin: 30px auto;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .slides {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.6s ease-in-out;
        }

        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Overlay */
        .slide::after {
            content: "";
            position: absolute;
            inset: 0;
            
            );
        }

        /* Text */
        .caption {
            position: absolute;
            z-index: 2;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            max-width: 500px;
        }

        .caption h2 {
            font-size: 42px;
            margin-bottom: 12px;
        }

        .caption p {
            font-size: 18px;
            line-height: 1.5;
        }

        /* Button */
        .caption button {
            margin-top: 20px;
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            background: #ee4d2d;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
        }

        .caption button:hover {
            background: #d63c20;
            transform: translateY(-2px);
        }

        /* Navigation */
        .prev,
        .next {
            position: absolute;
            z-index: 5;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 50%;
            background: #8c149c;
background: linear-gradient(90deg, rgba(140, 20, 156, 1) 0%, rgba(175, 17, 214, 1) 100%); 
            color: #333;
            font-size: 25px;
            cursor: pointer;
            transition: 0.3s;
        }

        .prev {
            left: 15px;
            color: #ccc;
        }

        .next {
            right: 15px;
            color: #ccc;
        }

        .prev:hover,
        .next:hover {
            background: #F5B7FF;
            transform: translateY(-50%) scale(1.1);
            color: #000;
        }

        /* Dots */
        .dots {
            position: absolute;
            z-index: 5;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .dot {
            width: 10px;
            height: 10px;
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
            cursor: pointer;
            transition: 0.3s;
        }

        .dot.active {
            width: 25px;
            border-radius: 10px;
            background: #8c149c;
background: linear-gradient(90deg, rgba(140, 20, 156, 1) 0%, rgba(175, 17, 214, 1) 100%);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .slider {
                height: 180px;
                width: 90%;
            }

            .caption {
                left: 25px;
                right: 25px;
            }

            .caption h2 {
                font-size: 28px;
            }

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

            .caption button {
                padding: 9px 18px;
                font-size: 14px;
            }

            .prev,
            .next {
                width: 20px;
                height: 20px;
                font-size: 12px;
            }
        }
        
.bokrd{
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
        
.boxcard-apx{
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    gap: 10px;
    width: 90%;
}

.itmcaralx{
    background: rgba(225,225,225,0.1);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #3F0949;
}

.itmcaralx i{
    font-size: 27px;
    color: #B824D1;
}

.itmcaralx h5{
    font-size: 15px;
    color: #B824D1;
}

.itmcaralx p{
    font-size: 10px;
    color: #F9D6FF;
    font-weight: 500;
}


/* FOOTER */
.footer {
    background: transparent;
    color: #cbd5e1;
    padding: 50px 20px 20px;
}

.footer-container {
    max-width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.footer h2 {
    color: #F9D6FF;
    font-size: 25px;
    margin-bottom: 15px;
}

.footer h3 {
    color: #F9D6FF;
    font-size: 17px;
    margin-bottom: 18px;
}

.footer p {
    font-size: 14px;
    line-height: 1.8;
    color: #94a3b8;
}

.footer ul {
    list-style: none;
}

.footer ul li {
    margin-bottom: 12px;
}

.footer a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    transition: .3s;
}

.footer a:hover {
    color: #38bdf8;
    padding-left: 5px;
}

.footer-contact p {
    margin-bottom: 10px;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    transition: .3s;
    background: #ec3ed8;
background: linear-gradient(90deg, rgba(236, 62, 216, 1) 0%, rgba(130, 39, 179, 1) 100%);background: #ec3ed8;
background: linear-gradient(90deg, rgba(236, 62, 216, 1) 0%, rgba(130, 39, 179, 1) 100%);
color: #F9D6FF;
}

.footer-bottom {
    max-width: 1100px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid #263247;
    text-align: center;
}

.footer-bottom p {
    font-size: 13px;
}

.footer-bottom span {
    color: #38bdf8;
}

@media (max-width: 700px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer {
        padding: 35px 22px 20px;
    }
}