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

body,
html {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Tajawal', sans-serif;
    background-color: #000;
}

.content-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: block;
    line-height: 0;
}

.bg-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 
   Zone Calibration Values:
   Mobile:  Bottom 36.6%, Width 85.6%, Gap 5%
   Desktop: Bottom 36.6%, Width 47.3%, Gap 7.8%
*/

/* Mobile View */
@media (max-width: 768px) {
    .buttons-container {
        position: absolute;
        bottom: 36.6%;
        top: auto;
        left: 50%;
        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        width: 85.6%;
        gap: 5%;

        padding: 0;
        line-height: normal;
    }

    .btn-link {
        flex: 1;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .btn-img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 1;
    }
}

/* Desktop View */
@media (min-width: 769px) {
    .buttons-container {
        position: absolute;
        bottom: 36.6%;
        top: auto;
        left: 50%;
        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        width: 47.3%;
        gap: 7.8%;

        line-height: normal;
    }

    .btn-link {
        flex: 1;
        display: flex;
        justify-content: center;
        position: relative;
    }

    .btn-img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 1;
    }
}

.btn-link {
    display: inline-block;
    text-decoration: none;
}

.btn-img:hover {
    transform: scale(1.05);
}