@media (min-width: 601px) {

    .Gods-Name {
        color: #1440a7;
    }

    #mobile-content {
        display: none;
    }

    #desktop-content {
        margin: 0 15%;
    }

    .message {
        padding: 0 !important;
        width: 100%;
        color: rgb(43, 39, 36);
    }

    main {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
    }

    .quranPageMenu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .scalaMenu {
        display: flex;
        justify-content: center; /* center horizontally */
        align-items: center; /* align vertically */
    }

    .translationMenu {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .navigatorsMenu {
        display: flex;
        justify-content: center;
        /* CHANGE THIS: Align all children to the center */
        align-items: center;
    }

    .backgroundContainer {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin: 5px 0;
    }

    .buttonStyle_1 {
        font-size: 10px;
        transition: background-color 0.2s, transform 0.2s;
        margin-left: 3px;
        width: 36px;
        height: 35px;
        /*! font-family: 'MS Shell Dlg \32','Inter'; */
    }

        .buttonStyle_1:hover {
            background-color: rgba(163, 220, 220, 0.8);
            transform: translateY(-1px);
        }

        .buttonStyle_1 .icon {
            /*font-size: 1.2em;*/ /* Make the signs a bit bigger */
            /*margin-right: 5px;*/
        }

    .quran-page {
        /*width: 100%;  580px 880px flexible width #c4beb9  #bbb0a6*/
        width: 80%;
        min-width: 199px; /* won’t shrink smaller */
        max-width: 1800px; /* won’t grow bigger */
        margin: 0 auto; /*centers horizontally */

        height: auto; /* adjusts based on content */
        background-color: #FDFBF8;
        background-size: 120% 120%;
        background-position: -30px -30px;
        background-repeat: no-repeat;
        position: relative;
        box-sizing: border-box;
        margin-bottom: 30px;
        margin-top: 3px;
        border-radius: 3px;
        border: 1px solid #868695;
    } 

    .quranBanner {
        font-family: 'Times New Roman', 'Open Sans', serif;
    }

    .arabic-box {
        /* Remove float and fixed width/height */
        /*float: none;
        width: auto;*/ /* JS will handle width */
        /*height: auto;*/ /* JS will handle height */
        /*margin: 0;*/ /* remove margins, handled by JS */
        /*padding: 10px;
        border: 1px solid #ccc;*/
        /* Make sure positioning is relative to quran-page */
        box-sizing: border-box;
        position: absolute;
    }

    .mushafDiv {
        direction: rtl;
        color: #59464C;
    }

        .mushafDiv p {
            margin: 0;
            align-items: center;
            justify-content: center;
        }

    .mushaf-title {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    .mushaf-title-name {
        /*background-color: rgba(207, 155, 170, 0.54);*/
        margin-left: -2px;
        margin-right: -2px;
    }

    .mushaf-title-name-rect {
        /*border: 1px solid rgb(180, 172, 173);*/
    }

    .mushafLeftEdge {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mushafRightEdge {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        transform: scaleX(-1);
    }

    .mushafTopEdge {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        transform: scaleY(-1);
    }

    .mushafBottomEdge {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mushafLeftEdge, .mushafRightEdge, .mushafTopEdge, .mushafBottomEdge {
        /*background-color: #FFF6F7;*/
    }

    .mushaf_S_Bump {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        color: #202122;
        background-size: 100% 100%; /* stretch background fully */
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
    }

    .mushaf_NE_Bump {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #202122;
        background-size: 100% 100%; /* stretch background fully */
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
    }

    .mushaf_NW_Bump {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #202122;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
    }

    .mushaf-content {
        background-color: transparent;
        align-items: center;
        justify-content: center;
    }

    .divLeft {
        /*background-color: #ddd9ed;*/
    }

    .divRight {
        /*background-color: #daede7;*/
    }

    .translationverse-container {
        text-align: justify;
        text-justify: inter-word;
        letter-spacing: -0.05em;
        line-height: 0.95em !important;
        padding-left: 0px;
        padding-right: 1px;
        padding-bottom: 0.3em;
    }

    .translationverse-indexer {
        display: inline-block;
        width: 2.1em;
        text-align: right;
        margin-right: 0.2em;
        font-family: 'Times New Roman';
    }

    .translationverse-bold {
        font-weight: bold;
        font-style: normal;
        font-family: 'Times New Roman';
    }

    .translationverse-commentary {
        font-weight: normal;
        font-style: italic;
        opacity: 0.9;
        font-family: 'Liberation Serif V1';
    }

    .translationverse-regular {
        font-weight: normal;
        font-style: normal;
        font-family: 'Bookman Old Style', 'Times New Roman', sans-serif;
    }

    .translationIntro {
        width: 100%;
        color: rgb(32, 33, 34);
        font-family: 'Times New Roman', 'Open Sans', sans-serif;
    }

        .translationIntro span {
            display: block;
        }

    .translationIntro1 {
        border-bottom: 0.18em solid rgb(60, 66, 61);
        margin-bottom: 0.05em;
        width: 100%;
    }

    .translationIntro2 {
        text-align: center;
    }

    .translationIntro3 {
        border-top: 1px solid rgb(60, 66, 61);
        width: 100%;
    }

    .translationIntro4 {
        text-align: center;
        font-style: regular;
    }

    .translationIntro5 {
        text-align: center;
        font-style: regular;
    }

    .translationIntro6 {
        /* stays empty, just keeps height */
    }

    .rebuilt-line {
        text-align: justify;
        text-justify: inter-word;
    }

    .outer-border {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-style: solid;
        box-sizing: border-box;
    }

    .inner-border {
        position: absolute;
        border-style: solid;
        box-sizing: border-box;
    }

    .top-bump-left,
    .top-bump-right,
    .bottom-bump {
        position: absolute;
        background-color: #e5b1b4;
    }

    .top-bump-left {
        top: 0;
        transform-origin: bottom right;
        transform: rotate(-15deg);
    }

    .top-bump-right {
        top: 0;
        transform-origin: bottom left;
        transform: rotate(15deg);
    }

    .bottom-bump {
    }

    canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

    .ayatWordSpacer {
        /* Height is inherited from the parent's line-height, making it match the baseline height. */
        display: inline-block;
        /* width is set dynamically by the JS function */
        /* background: rgba(0, 128, 0, 0.05);  Light green for visualization, remove in production */
        margin: 0;
        padding: 0;
    }

    .verseNumberOrnament {
        color: rgb(93, 121, 203);
       /* rgb(205, 239, 223)*/
    }

    .comboBoxSelectorStyle {
        padding: 5px 10px;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
        background-color: #fff;
        color: #333;
        appearance: none; /* Remove default OS styling */
        -webkit-appearance: none; /* Safari/iOS */
        -moz-appearance: none; /* Firefox */
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 12px;
        padding-right: 30px; /* space for the arrow */
    }

        .comboBoxSelectorStyle:hover {
            box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
        }

        .comboBoxSelectorStyle:focus {
            outline: none;
            box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
        }

        .comboBoxSelectorStyle option {
            padding: 4px 8px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
        }

        .comboBoxSelectorStyle::-ms-expand { /* remove default arrow on IE/Edge */
            display: none;
        }

        .comboBoxSelectorStyle::after {
            content: "▼";
            position: absolute;
            right: 10px;
            pointer-events: none;
        }

        .comboBoxSelectorStyle:hover,
        .comboBoxSelectorStyle:focus {
            border-color: #007bff;
            outline: none;
        }



    .translationSelectorStyle {
        width: 200px;
    }

    .styleSelectorStyle {
        width: 130px;
        margin-top: 1em;
        margin-bottom: 2em;
    }

    .leftControlGroup {
        display: flex;
        align-items: center;
        gap: 5px; /* space between highlighter and select */
    }




    .highlighterLabel {
        display: inline-flex !important; 
        align-items: center;
        justify-content: center;
    
        width: 36px;
        height: 35px;
        margin-left: 3px;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.2s;
    
        /* Ensure no padding is pushing the image away */
        padding: 0; 
        box-sizing: border-box;
        border-radius: 2px;
    }

    .highlighterLabel:hover {
        background-color: rgba(163, 220, 220, 0.8);
        transform: translateY(-1px);
    }

    /* The actual Stabilo image */
    .highlighterIcon {
        width: 70%;
        height: 70%; 
        display: block;
        object-fit: contain;
    
        opacity: 0.5;
        transition: opacity 0.2s;
    }

    /* The Toggle Logic */
    #highlightToggle:checked + .highlighterIcon {
        opacity: 1; /* Fully visible when ON */
    }





    .highlightedVerse {
        background-color: rgba(146, 200, 177, 0.49); /*rgba(118, 97, 132, 0.35);*/
    }

    .scalaControl {
        width: 80px; 
        cursor: pointer;
    }

    .progressBar1 {
        position: fixed;
        top: 0; /* vertical position from JS */
        left: 0; /* will be updated in JS for right/left swipes */
        right: auto; /* used for left swipe */
        height: 20px;
        width: 0; /* controlled dynamically */
        border-radius: 12px;
        background: linear-gradient( 90deg, rgba(30, 144, 255, 0.2) 0%, rgba(30, 144, 255, 0.4) 25%, rgba(30, 144, 255, 0.6) 50%, rgba(30, 144, 255, 0.4) 75%, rgba(30, 144, 255, 0.2) 100% );
        box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
        backdrop-filter: blur(6px);
        opacity: 0;
        transition: width 0.05s ease, opacity 0.2s ease, top 0.05s ease;
        z-index: 9999;
        pointer-events: none;
    }

        /* Glow effect */
        .progressBar1::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: -8px;
            bottom: -8px;
            border-radius: 16px;
            background: radial-gradient( ellipse at center, rgba(30, 144, 255, 0.15) 0%, rgba(30, 144, 255, 0) 70% );
            pointer-events: none;
        }



}