section.video {
    background-color: #000;
}

.overlay {
    border-radius: 32px;
    color: #fff;
    position: absolute;
    text-align: center;
    margin: auto;
    left: 0px;
    right: 0px;
    bottom: 60px;
    max-width: 545px;
    height: fit-content;
    z-index: 100;
}

.overlay h1 {
    text-shadow: 0px 6px 10px #000000;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 545px;
    margin: auto;
}

.overlay p {
    color: #fff;
    text-shadow: 0px 6px 10px #000000;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 545px;
}

#customisations .my-card {
    width: fit-content;
    display: flex;
    background-color: #fff !important;
    box-shadow: 0px 3px 15px 0px #00000014;
}

#customisations .my-card .title {
    color: #000;
}

#customisations .my-card.active {
    background-color: #773DBD !important;
}

#customisations .my-card.active path {
    stroke: #fff;
}

#customisations .my-card.active .title {
    color: #fff !important;
}

span.swiper-pagination-bullet {
    background-color: #FFAD5F;
    opacity: 1;
    width: 8px;
    height: 8px;
    border-radius: 16px;
    transition: all 0.5s ease;
}

span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #F15B2B;
    width: 64px;
    height: 8px;
    border-radius: 16px;
}



@media (max-width: 576px) {
    .overlay h1 {
        font-size: 28px;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .dot--one {
        transform: rotate(328deg);
    }

    .dot--one:hover .container {
        transform: rotate(32.5deg) !important;
    }

    .dot--two {
        transform: rotate(340.8deg);
    }

    .dot--two:hover .container {
        transform: rotate(19.5deg) !important;
    }

    .dot--three {
        transform: rotate(353.6deg);
    }

    .dot--three:hover .container {
        transform: rotate(6.5deg) !important;
    }

    .dot--four {
        transform: rotate(6.4deg);
    }

    .dot--four:hover .container {
        transform: rotate(-6.4deg) !important;
    }

    .dot--five {
        transform: rotate(19.2deg);
    }

    .dot--five:hover .container {
        transform: rotate(-19.2deg) !important;
    }

    .dot--six {
        transform: rotate(32deg);
    }

    .dot--six:hover .container {
        transform: rotate(-32deg) !important;
    }
}

@media (min-width: 700px) and (max-width: 899px) {
    .dot--one {
        transform: rotate(336deg);
    }

    .dot--one:hover {
        z-index: 1;
    }

    .dot--one:hover .container {
        transform: rotate(24deg) !important;
    }

    .dot--two {
        transform: rotate(345.6deg);
    }

    .dot--two:hover {
        z-index: 1;
    }

    .dot--two:hover .container {
        transform: rotate(14.4deg) !important;
    }

    .dot--three {
        transform: rotate(355.2deg);
    }

    .dot--three:hover {
        z-index: 1;
    }

    .dot--three:hover .container {
        transform: rotate(4.5deg) !important;
    }

    .dot--four {
        transform: rotate(4.8deg);
    }

    .dot--four:hover {
        z-index: 1;
    }

    .dot--four:hover .container {
        transform: rotate(-4.5deg) !important;
    }

    .dot--five {
        transform: rotate(14.4deg);
    }

    .dot--five:hover {
        z-index: 1;
    }

    .dot--five:hover .container {
        transform: rotate(-14.4deg) !important;
    }

    .dot--six {
        transform: rotate(24deg);
    }

    .dot--six:hover {
        z-index: 1;
    }

    .dot--six:hover .container {
        transform: rotate(-24deg) !important;
    }
}

@media (max-width: 699px) {
    .dot--one {
        transform: rotate(350deg);
    }

    .dot--one:hover {
        z-index: 1;
    }

    .dot--one:hover .container {
        transform: rotate(10deg) !important;
    }

    .dot--two {
        transform: rotate(354deg);
    }

    .dot--two:hover {
        z-index: 1;
    }

    .dot--two:hover .container {
        transform: rotate(6deg) !important;
    }

    .dot--three {
        transform: rotate(358deg);
    }

    .dot--three:hover {
        z-index: 1;
    }

    .dot--three:hover .container {
        transform: rotate(2deg) !important;
    }

    .dot--four {
        transform: rotate(2deg);
    }

    .dot--four:hover {
        z-index: 1;
    }

    .dot--four:hover .container {
        transform: rotate(-2deg) !important;
    }

    .dot--five {
        transform: rotate(6deg);
    }

    .dot--five:hover {
        z-index: 1;
    }

    .dot--five:hover .container {
        transform: rotate(-6deg) !important;
    }

    .dot--six {
        transform: rotate(10deg);
    }

    .dot--six:hover {
        z-index: 1;
    }

    .dot--six:hover .container {
        transform: rotate(-10deg) !important;
    }
}