.logo-wrapper {

        top: 0px;
        left: 0px;
        transform: scale(0.4);
        /* Scale down the logo to make it smaller */
    }

    .logo-container {
        position: relative;
        width: 200px;
        height: 200px;
    }

    .horizontal-line {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #000;
        transform: translateY(-50%);
    }

    .diagonal-line {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 4px;
        background-color: #000;
        transform: translate(-50%, -50%) rotate(135deg);
        transform-origin: 50% 50%;
    }

    .dashed-line-left {
        position: absolute;
        top: 68%;
        left: -12%;
        width: 39%;
        height: 2px;
        border-top: 2px dashed #000;
        transform: translateY(-50%) rotate(68deg);
    }

    .dashed-line-right {
        position: absolute;
        top: 50%;
        right: 0;
        width: 39%;
        height: 2px;
        border-top: 2px dashed #000;
        transform: translateY(-50%) rotate(68deg);
        transform-origin: top right;
    }

    .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        border: 2px dashed #000;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .text {
        position: absolute;
        top: 38%;
        left: 20%;
        transform: translate(-50%, -50%);
        color: #000;
        font-size: 22px;
        font-family: Arial, sans-serif;
        letter-spacing: 2px;
    }


    /*    white*/

    .logo-wrapperw {
        position: relative;
        top: -100px;
        left: -100px;
        transform: scale(0.4);
        margin-bottom: -150px;
    }

    .logo-containerw {
        position: relative;
        width: 200px;
        height: 200px;
    }

    .horizontal-linew {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: white;
        transform: translateY(-50%);
    }

    .diagonal-linew {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 4px;
        background-color: white;
        transform: translate(-50%, -50%) rotate(135deg);
        transform-origin: 50% 50%;
    }

    .dashed-line-leftw {
        position: absolute;
        top: 68%;
        left: -12%;
        width: 39%;
        height: 2px;
        border-top: 2px dashed white;
        transform: translateY(-50%) rotate(68deg);
    }

    .dashed-line-rightw {
        position: absolute;
        top: 50%;
        right: 0;
        width: 39%;
        height: 2px;
        border-top: 2px dashed white;
        transform: translateY(-50%) rotate(68deg);
        transform-origin: top right;
    }

    .circlew {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        border: 2px dashed white;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .textw {
        position: absolute;
        top: 38%;
        left: 20%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 22px;
        font-family: Arial, sans-serif;
        letter-spacing: 2px;
        text-transform: lowercase !important;
    }