.jewellery-bar {
  scroll-behavior: smooth;
}

.jewellery-bar::-webkit-scrollbar {
  display: none;
}

.card-AR {
  flex-shrink: 0;
}

.a-inspector-loader {
    display: none;
}

#modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    border: 0px solid #ccc;
    z-index: 1000;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

#modal iframe {
    width: 100%;
    height: 100%;
    border: none;
    }

#warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5em;
    font-family: sans-serif;
    }

#warning-box {
    background: #313131;
    padding: 30px 40px;
    border-radius: 12px;
    text-align: center;
    }

#loading-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(100px);
    padding-top: 60px;
}

#loading-modal-content {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-black background */
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.centered-image {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message {
    color: #bfbfbf; /* Grey color for instruction text */
    font-size: 17px; /* Font size as specified */
    text-align: center;
    margin-top: 10px;
}

/* Adjusted progress bar styling */
.progress {
    background-color: #ccc;
    border-radius: 10px;
    height: 5px;
    width: 50%; /* Adjusted width */
    margin: 15px auto; /* Centering the progress bar */
}

.progress-bar {
    background-color: #555; /* Grey color for the progress bar */
    width: 0%;
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

.gradient-background__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(250px);
    filter: blur(250px);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.gradient-background__shape {
    mix-blend-mode: lighten;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    position: absolute;
    border-radius: 100%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
    animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}

.gradient-background__shape--1 {
    bottom: 0;
    left: 0;
    width: 700px;
    height: 700px;
    background: #8e7bff;
    mix-blend-mode: lighten;
    -webkit-transform: translate(-30%, 40%);
    transform: translate(-30%, 40%);
    -webkit-animation-name: gradientShapeAnimation1;
    animation-name: gradientShapeAnimation1;
}

.gradient-background__shape--2 {
    top: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: #44f2eb;
    -webkit-transform: translate(20%, -40%);
    transform: translate(20%, -40%);
    -webkit-animation-name: gradientShapeAnimation2;
    animation-name: gradientShapeAnimation2;
}

.gradient-background__noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100px;
}

@-webkit-keyframes gradientShapeAnimation1 {
    0% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg);
    }
    25% {
        -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
    }
    50% {
        -webkit-transform: translate(30%, -10%) rotate(180deg);
        transform: translate(30%, -10%) rotate(180deg);
    }
    75% {
        -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
        transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
    }
    100% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg);
    }
}

@keyframes gradientShapeAnimation1 {
    0% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg);
    }
    25% {
        -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
    }
    50% {
        -webkit-transform: translate(30%, -10%) rotate(180deg);
        transform: translate(30%, -10%) rotate(180deg);
    }
    75% {
        -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
        transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
    }
    100% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg);
    }
}

@-webkit-keyframes gradientShapeAnimation2 {
    0% {
        -webkit-transform: translate(20%, -40%) rotate(-20deg);
        transform: translate(20%, -40%) rotate(-20deg);
    }
    20% {
        -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
    }
    40% {
        -webkit-transform: translate(-40%, 50%) rotate(180deg);
        transform: translate(-40%, 50%) rotate(180deg);
    }
    60% {
        -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
        transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
    }
    80% {
        -webkit-transform: translate(10%, -30%) rotate(180deg);
        transform: translate(10%, -30%) rotate(180deg);
    }
    100% {
        -webkit-transform: translate(20%, -40%) rotate(340deg);
        transform: translate(20%, -40%) rotate(340deg);
    }
}

@keyframes gradientShapeAnimation2 {
    0% {
        -webkit-transform: translate(20%, -40%) rotate(-20deg);
        transform: translate(20%, -40%) rotate(-20deg);
    }
    20% {
        -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
    }
    40% {
        -webkit-transform: translate(-40%, 50%) rotate(180deg);
        transform: translate(-40%, 50%) rotate(180deg);
    }
    60% {
        -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
        transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
    }
    80% {
        -webkit-transform: translate(10%, -30%) rotate(180deg);
        transform: translate(10%, -30%) rotate(180deg);
    }
    100% {
        -webkit-transform: translate(20%, -40%) rotate(340deg);
        transform: translate(20%, -40%) rotate(340deg);
    }
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Rajdhani', sans-serif;
}

.btn-black {
    background-color: #000;
    color: #fff;
    border: none;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 16px;
}

.btn-black:hover {
    background-color: #333;
    color: #fff;
}

.btn-action {
    background-color: #000;
    border: none;
    color: #fff;
    cursor: pointer;
}

.btn-action:hover {
    background-color: #333;
    color: #fff;
}

.bi-brightness-high-fill {
    color: #1a1a1a;
}

.bi-moon {
    color: #bebebe;
}

#a-sceneContainer {
    height: 100vh; /* Full-screen height */
    width: 100vw; /* Full-screen width */
    position: relative;
}

#sidebarContainer {
    height: 50vh; /* Adjust sidebar height as needed */
}

#applied_jewellery {
    background-color: rgb(255 255 255 / 0%) !important;
    border-radius: 8px;
    width: auto;
    overflow: hidden;
}

#applied_jewellery .image-container {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin: 2px;
    margin-bottom: 8px;
    background: #D9D9D9;
    cursor: pointer;
    position: relative;
}

.image-container {
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 1;
    transform: translateX(0);
}

.image-container.removing, clearButton.removing {
    opacity: 0;
    transform: translateX(-100%);
}

.image-container:nth-child(1) {
    transition-delay: 0s;
}

.image-container:nth-child(2) {
    transition-delay: 0.05s;
}

.image-container:nth-child(3) {
    transition-delay: 0.1s;
}

.image-container:nth-child(4) {
    transition-delay: 0.15s;
}

.image-container:nth-child(5) {
    transition-delay: 0.2s;
}

.CodeSection::-webkit-scrollbar {
    display: none;
}

.CodeSection {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.logo {
    position: relative;
    padding-top: 0px;
    z-index: auto;
    /*background: linear-gradient(55deg, #000000, #272625, #151411, #000000);*/
}

.headerai {
    margin-top: -6px !important;
}

.tabs {
    width: -webkit-fill-available;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tabs button {
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 8rem;
    padding: 4px;
    border: none;
    background: #313131;
    color: #a7a7a7;
}

.tabs button:active, .active {
    border: 1px solid #FCA311 !important;
    color: #FCA311 !important;
}

.setting-active {
    color: #FCA311 !important;
}

/*      .tabs button:hover {
    color: white;
  }*/
.active {
    display: block;
    color: #FCA311;
}

.a-enter-vr-button {
    display: none !important;
}

.hotspot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    pointer-events: none;
}

.hotspot[slot="hotspot-necklace3d_name"] {
    --min-hotspot-opacity: 0;
    background-color: white;
}

.annotation {
    background-color: rgba(120, 121, 121, 0.5);
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
    width: 125px
}

.btn-close {
    top: 10px;
    position: absolute;
    right: 10px !important;
    border-radius: 4px;
    font-size:0.8rem;
}

.slider-container {
    vertical-align: top;
    width: 100%;
    align-items: center;
    display: flex;
    height: 110px;
    margin-bottom: 3px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.slider-container::-webkit-scrollbar {
    display: none;
}

.slider-container .card-AR {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 90px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
    padding: 3px;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 20px;
}

.slider-AR .card-AR img {
    background: transparent;
    display: block;
    overflow: hidden;
    background-size: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.slider-AR .card-AR:hover {
    transform: scale(1.03);
}

.slider-AR .card-AR:active {
    transform: scale(1.14) !important;
}

.settings-offcanvas {
    width: auto !important;
    min-width: 300px;
    max-width: 90vw;
    background: #313131;
    border: none !important;
}

/* Remove backdrop overlay */
.offcanvas-backdrop {
    display: none !important;
}

/* Button transition */
.toggle-btn {
    transition: transform 0.4s ease-in-out !important;
    width: fit-content !important;
    background: none !important;
}

/* Click animations for all devices */
.toggle-btn:active {
    transform: rotate(120deg);
    right: calc(300px + -1rem);
    background: none !important;
    border: none !important;
}

/* State management for consistent rotation */
.toggle-btn.active {
    transform: rotate(120deg);
}

.toggle-btn.active:active {
    transform: rotate(-120deg);
}

.tab-settings {
    background: #313131;
}

#filterButton {
    padding: 6px;
    padding-bottom: 3px;
    background: none;
}

.jewellery-bar {
    scrollbar-width: none;
    margin-top: 3px;
}

.ar-buttons-disabled {
    cursor: default !important;
    background: none !important;
    border: none !important;
    color: grey !important;
}

.ar-buttons {
    width: fit-content;
    color: #a7a7a7;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: bottom 0.3s ease-in-out;
    font-size: 1.2rem !important;
    /* Ensure buttons don't shrink or grow unexpectedly */
    flex-shrink: 0;
    flex-grow: 0;
    /* Fix for Safari */
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

.ar-buttons:hover {
    background-color: #ffffff;
    color: #000;
}

#repositionButton img {
    position: relative;
    top: 1%;
    width: 23px;
    display: block;
}

#clearMesh img {
    width: 28px;
    display: block;
}

#imgScreenshot {
    width: 25px;
    display: block;
}

#exitFullscreen {
    color: #a7a7a7;
    font-size: x-large;
    background: #313131;
}

.highlighted {
    border: 1px solid #FCA311;
    border-radius: 10px;
    transform: scale(1.2);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.zoom-button {
    transform: scale(0.7);
    background-color: rgb(255 255 255 / 79%);
    cursor: pointer;
    position: absolute;
    left: 77%;
}

/* Dark mode styles */
.modal-content.dark-mode {
    background-color: #1a1a1a !important;
    color: #bebebe !important;
}

.modal-content.dark-mode img {
    filter: brightness(0.8) contrast(1.2);
}

.modal-bg-dark{
    background-color: #313131!important;
}

/* Default position for the toggleDark icon */
.toggleDark {
    position: absolute;
    left: 2%;
    bottom: 2%;
    font-size: 25px;
}

.noJewDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 6rem;
    margin-bottom: 3px;
    border-radius: 16px;
    color: #ffffff;
    padding: 1.5rem;
}

.noJewDiv h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #f0f0f0;
}

.noJewDiv .p3 {
    font-size: 1rem;
    color: #e0e0e0;
    opacity: 0.9;
}

/* Custom styles for filter buttons overlay */
[style*="position: relative"] {
    z-index: 1040; /* Ensure the relative container is above other elements */
}

#settingDiv {
    bottom: 23%;
}

.filter-btn-group-overlay {
    top: 0px;
    position: fixed;
    z-index: 1111;
    background: rgba(0, 0, 0, 0.8);
    width: fit-content;
    border-radius: 4px;
    padding: 5px;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    min-width: max-content;
}

.filter-btn-group-overlay.show {
    opacity: 1;
    visibility: visible;
}

.filter-btn-group-overlay .btn {
    color: #a7a7a7;
    margin: 0 -1px;
    padding: 5px 8px !important;
    font-size: 0.6rem !important;
}

.filter-btn-group-overlay btn-check:checked + .btn {
    border-color: white;
    color: white;
}

.mode-btn-group-overlay {
    z-index: 0;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: max-content;
    width: max-content;
    height: auto;
    opacity: 0.9;
    padding: 5px 10px;
}

.mode-btn-group-overlay.show {
    opacity: 1;
    visibility: visible;
}

.mode-btn-group-overlay .btn {
    color: white;
    margin: 0 -1px;
    padding: 5px 8px !important;
    font-size: 0.6rem !important;
}

.mode-btn-group-overlay .btn-check:checked + .btn {
    color: white;
}

#carouselContainerModel {
    position: absolute; /* Position dynamically controlled */
    z-index: 1049;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
    width: max-content;
}


.model-carousel {
    display: flex;
    gap: 10px; /* Space between images */
    overflow-x: auto; /* Allow horizontal scrolling if images overflow */
    padding: 5px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    width: max-content; /* Set the width to fit content dynamically */
}

.model-carousel-item-wrapper {
    position: relative;
    display: inline-block;
}

.tick-mark {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}

.tick-mark::after {
    content: "✔";
    font-size: 14px;
    color: #000;
    display: block;
    text-align: center;
}

.model-carousel-item-wrapper.selected .tick-mark {
    display: flex; /* Show tick mark for selected item */
}

.model-carousel-item {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent; /* Default border */
}

.model-carousel-item-wrapper.selected .model-carousel-item {
    border: 2px solid white; /* Highlight border for selected item */
}

/* Default styling for the model viewer */
#myModelViewer {
    position: absolute;
    text-align: center;
    background-color: #C7C8CC;
    z-index: 5;
    width: 100%;
    height: 100%;
}

#modalContent2D {
    background-color: #C7C8CC;
}

.tooltip {
    font-size: .8rem !important;
    z-index: 4;
}

.a-canvas {
    z-index: -1;
}

#nosering_position {
    background-color: #1f1d1d96;
    width: fit-content;
    margin-inline: auto;
}

.nosering_label {
    font-size: 0.9rem;
}

#toggle-l-label, #toggle-r-label {
    color: #a7a7a7;
}

#jewelleryOptions {
    background: #ffffff38;
    max-height: 35vh;
}

.a-canvas, .a-video, #model-img {
    position: absolute !important;
    object-fit: fill !important;
}

.offcanvas.show {
    transform: translateX(0);
}

#setting-offcanvas-div {
    overflow: hidden;
    transform: translateZ(0); /* Create new stacking context */
    will-change: transform; /* Optimize for animations */
    height: 3.5rem;
}

.settings-offcanvas {
    /* Ensure the offcanvas has a specific width */
    width: fit-content;
    min-width: max-content;
    /* Add containment */
    contain: layout paint;
}


.settings-offcanvas.offcanvas-end {
    position: absolute !important;
    height: auto !important;
    width: auto !important;
    inset: auto !important;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.34, 0.54, 0.76, 1.12), visibility 0s 0.3s !important;
    backface-visibility: hidden; /* Prevent rendering glitches */
}

.settings-offcanvas.offcanvas-end:not(.show) {
    transform: translateX(130%) !important;
    visibility: hidden !important;
}

/* Force GPU acceleration and prevent layout shifts */
.settings-offcanvas .offcanvas-body {
    padding: 0;
    overflow: visible;
    transform: translateZ(0);
    backface-visibility: hidden;
}

#settingButtons {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* Set a max-width if needed */
    max-width: 100%;
    /* Prevent overflow */
    overflow: hidden;
    /* Enable hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#toggle-sidebar-btn {
    width: fit-content;
}

#toggle-sidebar-btn.collapsed {
    transform: translate(0, -50%);
}

#toggle-sidebar-btn.rotated .fa-chevron-up {
    transform: rotate(180deg);
}

#tabs-btn::-webkit-scrollbar {
    display: none !important;
}

#tabs-btn {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    font-size: 16px;
}

#toggle-sidebar-btn {
    width: fit-content;
}

#toggle-sidebar-btn.collapsed {
    transform: translate(0, -50%);
}

#toggle-sidebar-btn.rotated .fa-chevron-up {
    transform: rotate(180deg);
}

.card-svg {
    position: absolute;
    left: 53%;
    top: -13px;
}

.modal-backdrop {
    position: relative !important;
}

.store-logo {
    position: fixed;
    height: 3rem;
    right: 0rem;
    z-index: 10;
    border-radius: 4px;
}

#recording-controls button {
    font-size: 14px;
    border: none;
    color: #ff5252;
    cursor: pointer;
}

#recording-controls button:disabled {
    background-color: #d3d3d3;
    cursor: not-allowed;
}

#recording-controls button span.material-symbols-outlined {
    font-size: 18px;
}

/* Recording Controls Container */
.recording-controls {
    z-index: 3;
    align-items: center;
    background: #313131;
    min-width: max-content;
    width: max-content;
    margin-left: -42px;
    height: auto;
    display: flex;
}

/* Button Styling */
.recording-button {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
}

.start-button {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
}

.stop-button {
    display: none;
    align-items: center;
    gap: 5px;
    background: transparent;

}

.recording-timer {
    display: none;
    font-size: 14px;
    color: white;
}

/* MEDIA Query Starts */

@media only screen and (max-width: 320px) {
    .slider-container .slider-AR .card-AR {
        width: 78px !important;
        height: 70px !important;
    }

    .slider-AR {
        white-space: nowrap;
    }

    #clearButton {
        margin-left: 2px !important;
        font-size: small;
    }

    #raiseIssuedFormDiv, #feedbackFormDiv {
        max-height: 50%;
    }
}

@media only screen and (min-width: 360px) and (max-width: 376px) {
    .slider-AR {
        white-space: nowrap;
    }

    .slider-container .card-AR {
        width: 73px !important;
        height: 70px !important;
    }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    #raiseIssuedFormDiv, #feedbackFormDiv {
        max-height: 85%;
    }

    #menuIcon, #backArrowicon {
        font-size: 16px !important;
    }

    .slider-AR {
        white-space: nowrap;
    }

    .toggleDark {
        position: absolute;
        top: 85% !important;
        left: 15px;
        font-size: 20px;
    }

    .separator {
        border-bottom: 1px solid #ccc;
        margin: 5px 0;
    }

    .btn-group .btn {
        font-size: 0.7rem;
    }

    .toggle-btn-group .btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.80rem;
    }
}

@media (max-width: 1025px) {
    /* For tablets and below devices */
    .settings-offcanvas.offcanvas-end:not(.show) {
        transform: translateX(250%) !important;
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
    .btn-group .btn {
        font-size: 0.7rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .checkbox {
        top: 11px;
        left: 13rem;
    }

    .slider-AR {
        white-space: nowrap;
    }

    .tabs button.tablink:hover {
        transform: scale(1);
    }

    .modal-form {
        padding: 20px;
    }

    .severity-option {
        flex: 1 0 100%;
    }

    .btn-group .btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }

    .toggle-btn-group .btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.78rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

    .tabs button.tablink:hover {
        transform: scale(1.09);
        color: #FFFFFF;
    }

}

@media only screen and (min-width: 2560px) {
    #exampleModal .modal-dialog {
        --bs-modal-width: 1100px !important;
    }

    #exampleModal2D .modal-dialog {
        --bs-modal-width: 1100px !important;
    }

    #exampleModal2D .modal-body {
        height: 831px;
    }

    #modalPreviewVideo {
        max-height: 65vh !important;
    }

    #modalPreviewImage {
        height: inherit !important;
    }

}

/* Hover effects only for desktop/larger screens */
@media (min-width: 768px) {
    .toggle-btn:hover {
        transform: rotate(80deg);
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .toggleDark {
        position: absolute;
        left: 15px;
        font-size: 20px;
    }

    .tabs {
        padding-inline-start: 3px;
    }
}

/* Additional specific fix for iPhone */
@media screen and (max-width: 428px) and (-webkit-min-device-pixel-ratio: 2) {
    .ar-buttons {
        width: auto !important;
        min-width: max-content;
        padding: 0.5rem;
    }
}

/* Safari-specific styles */
@supports (-webkit-touch-callout: none) {
    #close_sp {
        color: black;
    }

    #settingButtons {
        gap: 0.25rem !important; /* Force smaller gap for iOS Safari */
        /* Alternative method using margins if gap isn't working consistently */
        margin: 0 -0.125rem;
    }

    .ar-buttons {
        width: auto !important; /* Override any fixed width */
        min-width: max-content;
        padding: 0.5rem; /* Add some padding instead of fixed width */
        height: auto !important; /* Override any fixed height */
        min-height: max-content;
    }

    .ar-buttons span {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #toggleSettings {
        border: none !important;
    }
}

/* Additional specific fix for iOS devices */
@supports (-webkit-overflow-scrolling: touch) {
    #settingButtons {
        gap: 0.25rem !important;
    }

    #toggleSettings {
        border: none !important;
    }
}

/* MEDIA QUERY END */

.btn-check:checked + .btn {
    color: #FCA311 !important;
    border: 0px;
}

.selected-nose-ring {
    color: #FCA311 !important;
    /*background-color: rgba(252, 163, 17, 0.2); */
    border: 0px;
}


.image-fit-content {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.golden_border {
    border: 1px solid goldenrod;
    transform: scale(1.2);
    margin-bottom: 3px;
    margin-top: 10px !important;
}

.thumbs-up-fs {
    font-size: 3rem;
}

.modal-dialog-width {
    max-width: 500px;
}

#comment {
    height: 100px;
}

.close-form-btn {
    background: none;
    font-size: 24px;
}

.form-content {
    background-color: #313131;
    color: white;
    padding: 10px;
}

.form-control, .form-select{
    background-color: #313131;
    border: 1px solid #5e5e5e;
    color: #a7a7a7;
}
::placeholder{
    color: #727171 !important;
}
::-webkit-file-upload-button{
    background-color: transparent !important;
    color: #a7a7a7 !important;
}
.form-control:focus, .form-select:focus{
    background-color: #313131;
    border: 1px solid #5e5e5e;
    box-shadow: 0 0 0 0 rgba(13,110,253,.25);
     color: #a7a7a7;
}
.btn-close:focus{
    box-shadow: 0 0 0 0 rgba(13,110,253,.25);
}
#deleteJewellery {
    top: 15vh;
    position: fixed;
    left: 0;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    box-shadow: none !important;
}

#deleteJewellery.removing {
    opacity: 0;
    visibility: hidden;
}

/* Transition for nosering position element */
#nosering_position {
    transition: opacity 0.1s ease-out;
    opacity: 1;
}

#clearButton {
    background-color: #00000000;
    width: -webkit-fill-available;
    color: #a7a7a7;
    font-size: x-large;
}

.badge, .popup-body-text {
    color: #a7a7a7 !important;
}

#toggleOffcanvasBtn {
    z-index: 2;
    cursor: pointer;
    padding: 10px 11px;
    background: #313131;
    color: #a7a7a7;
    border: none;
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 4px 4px 0;
    min-height: 60px;
}

#customOffcanvas {
    width: auto;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    background: #313131;
    box-shadow: none !important;
}

#customOffcanvas.collapsed {
    transform: translateX(-100%);
}

/* Rotate icon animation */
.fa-angle-left {
    transition: transform 0.3s ease-in-out;
}

.rotate-icon {
    transform: rotate(180deg);
}

.offcanvas {
    visibility: visible !important;
}

.brand-name {
    color: #a9a9a9;
    font-size: medium;
}

.footer_text {
    color: #a7a7a7;
    font-size: small;
    background: #313131;
}

#menuButton svg g {
    mix-blend-mode: normal !important;
}

.scrollbar-width-none {
    scrollbar-width: none;
}

.custom-radio {
    width: 14px;
    height: 14px;
    border: 2px solid #a7a7a7;
    border-radius: 50%;
}

.custom-radio span {
    width: 10px;
    height: 10px;
}

.card-svg {
    width: 50px;
    height: 50px;
}

.hidden-rect {
    stroke: none;
    stroke-width: 1;
    stroke-dasharray: none;
    stroke-linecap: butt;
    stroke-dashoffset: 0;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
    fill: rgb(255, 255, 255);
    fill-rule: nonzero;
    opacity: 1;
    visibility: hidden;
}

.card-svg-circle {
    stroke: rgb(0, 0, 0);
    stroke-width: 0;
    fill: rgb(255, 253, 253);
    fill-opacity: 0.89;
    fill-rule: nonzero;
    opacity: 1;
}

.text-badge {
    fill: rgb(6, 5, 5);
    stroke: none;
    stroke-width: 1;
    stroke-dasharray: none;
    stroke-linecap: butt;
    stroke-dashoffset: 0;
    stroke-linejoin: miter;
    stroke-miterlimit: 4;
    fill: rgb(6, 5, 5);
    fill-rule: nonzero;
    opacity: 1;
    white-space: pre;
}

.pointer-event-auto {
    pointer-events: auto;
}

.questionDiv-content {
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

#raiseIssueFeedbackdiv {
    display: none;
    justify-content: center;
    align-items: center;
}

#error-message {
    display: none;
}

.high-z-index {
    z-index: 1050;
}

#JewSet img {
    border-radius: 10px;
}

.ribbon {
    width: 45px;
    height: 45px;
    overflow: hidden;
    top: -1px;
    left: -1px;
    z-index: 1;
    pointer-events: none;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 104px;
    padding: 1px 0;
    background-color: #ffead5b5;
    box-shadow: 0 2px 5px rgba(0 0 0 / 60%);
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #585858;
    transform: rotate(-45deg);
    top: 3px;
    left: -40px;
    pointer-events: none;
}

#applied_jewellery img {
    width: 35px !important;
    height: 35px !important;
    margin: 5px;
}

.image-container:hover img {
    opacity: 0.7;
    transform: scale(1.3);
}

.delete-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e826311c;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.1s cubic-bezier(0.44, 0.01, 1, 0.84);
    pointer-events: none; /* Allow clicks to pass through by default */
}

.image-container:hover .delete-overlay {
    opacity: 1;
    pointer-events: auto; /* Enable clicks when visible */
}

.delete-icon {
    color: #E82631;
    font-size: 1.2rem;
    transform: scale(1);
    transition: transform 2s cubic-bezier(0.4, 0.03, 1, 0.72);
}

.image-container:hover .delete-icon {
    transform: scale(1);
}

/* Animation for removal */
.jewellery-remove {
    animation: removeItem 0.3s cubic-bezier(0.12, -0.31, 0.64, 0.9) forwards;
}

@keyframes removeItem {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
        height: 0;
        padding: 0;
        margin: 0;
    }
}

.fullscreen-transition {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.8s ease-out;
}

.fullscreen-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

.user-carousel-fade {
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

.user-carousel-fade.fadeout {
    opacity: 0;
}

.btn-bg-transparent {
    background-color: unset !important;
}

/* THEME */
[data-bs-theme="dark"] {
    .card-AR {
        background-color: #2e2e2e;
    }

    .logo {
        background: linear-gradient(55deg, #000000, #272625, #151411, #000000);
    }

    .tabs button {
        border: 1px solid #000000;
        background: #3e3b3b59 !important;
        color: #ebca69;
        font-size: unset !important;
    }

    .tabs button:active, .tabs button:hover, .active {
        background: #242424 !important;
        border: 1px solid #ae6d35 !important;
    }

    .tabs button:active {
        background: #242424 !important;
    }

    #questionDiv {
        background-color: #212529;
        color: white !important;
    }
}

[data-bs-theme="light"] {
    .CodeSection, body, .tabs {
        background-color: #ffffff00;
    }

    .card-AR {
        background-color: #313131;
        border-radius: 16px;
    }

    .logo {
        background: #1e1e1e;
    }

    #instructionText span {
        color: #ffffff;
    }
}

#questionDiv {
    display: block;
    background-color: #313131;
    padding: 20px;
    border-radius: 7px !important;
    color: black;
    top: 25%;
    max-width: 360px;
}

.star {
    font-size: 3vh;
    cursor: pointer;
}

.one, .two, .three, .four, .five {
    font-size: 3vh;
    color: rgb(255, 215, 0);
}

#raiseIssuedFormDiv, #feedbackFormDiv {
    display: block;
    overflow-y: auto;
    position: fixed;
    top: 6%;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#raiseIssuedFormDiv, #feedbackFormDiv {
    top: 6%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: none;
    background-color: #313131;
}

#description {
    height: 60px;
}

.close {
    position: absolute;
    top: 0px;
    right: 8px;
    font-size: 25px;
    border: none;
    background: none;
    cursor: pointer;
}

#close_sp {
    color: black;
}

.move-right {
    display: block;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

.parent-container {
    display: flex;
    justify-content: flex-end;
}

.overlay-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(56 56 56 / 44%); /* This will dim the rest of the screen */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
}

.option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.option-label:hover {
    background-color: rgba(52, 58, 64, 0.1);
}

.option-label input:checked + .custom-radio .inner-circle {
    opacity: 1;
}

.option-label input:checked + .custom-radio {
    border-color: #343a40;
}

.bi-hand-thumbs-up {
    font-size: 4vh;
}

#data-analysis {
    color: white;
    font-size: x-large;
    position: absolute;
    left: 16rem;
}

/* CSS for modal transitions */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.fade .modal-dialog {
    transform: translateY(-100px);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* Targeting the anchor (a) tags within the .social-icons container */
.social-icons a.social-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    font-size: 24px;
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease;
    cursor: pointer;
    justify-content: center;
}

/* Facebook icon style */
.social-icons a.social-icon.facebook {
    background-color: #3b5998;
}

/* Twitter icon style */
.social-icons a.social-icon.twitter {
    background-color: #1da1f2;
}

/* LinkedIn icon style */
.social-icons a.social-icon.linkedin {
    background-color: #0077b5;
}

/* Instagram icon style */
.social-icons a.social-icon.instagram {
    background-color: #e4405f;
}

.social-icons a.social-icon.download {
    background-color: #b2b2b2;
}

/* Hover effect */
.social-icons a.social-icon:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Ensure icon stays centered */
.social-icons a.social-icon i {
    font-size: 1.5rem;
}

.selected-images {
    margin-top: 20px;
}

.selected-card {
    border: 2px solid #007bff;
}


#toggle3D {
    background: #00000078;
    color: white;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

#toggle2D {
    background: #00000078;
    color: white;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}


.badge-3d {
    display: inline-block;
    padding: 10px 15px;
    font-size: 1.25rem;
    font-weight: bold;
    color: black;
    background-color: white;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15), -2px -2px 5px rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

 #severity {
    appearance: auto;
    }

#severity::-ms-expand {
    color: #a7a7a7;
}

#internet-speed-indicator{
position: fixed;
font-size: 16px;
color: #313131;
margin-left: 10px;
top: 0;
}