/* Mobile devices (up to 767px) */
@media (max-width: 767px) {
    .product-highlight {
        padding: 30px 20px;
        text-align: center;
        margin-top: 1%;
    }

    .product-highlight .item.right-wrapper {
        position: relative;
        margin-top: 20px;
        min-height: auto;
        border-radius: 20px;
    }

    .product-highlight .item.right-wrapper>img {
        position: relative;
        width: 100%;
        height: auto;
    }

    .verify-box-btn {
        margin-top: 10px;
        width: 100%;
    }

    .verify-box {
        right: 0%;
        /* margin: 0px 6px; */
        border-radius: 0px;
        bottom: 0;
    }

    .main-wrapper {
        padding: 28px 20px;
    }

    .video-para {
        font-size: 18px;
    }

    .video-para-1 {
        font-size: 15px;
        margin-bottom: 0px;
    }

    .verify-note {
        font-size: 12px;
        margin-top: 10px;
    }

    .legacy-text p {
        font-size: 15px;
    }

    .gradient-title {
        font-size: 25px;
    }

    .sgl {
        font-size: 22px;
        margin-bottom: 5px !important;
    }

    .sgl-p {
        font-size: 15px;
    }

    .product-highlight .item.right-wrapper>.dia-screen-machines {
        right: auto;
    }

    .legacy-section {
        background-image: none;
        height: 100%;
    }

    .legacy-image {
        display: block;
    }

    .hero-text h1 {
        font-size: 35px;
    }

    .hero-text p {
        font-size: 22px;
    }

    #certInput {
        width: 100%;
    }

    .hero-video-section {
        height: calc(100vh - 91px);
    }

    .legacy-text h2 {
        margin-bottom: 10px !important;
        font-size: 25px;
    }

    .instrument-card h5 {
        font-size: 20px;
    }

    .dropdown-menu[data-bs-popper] {
        left: 0 !important;
    }

    .hero-banner {
        background: url('../images/mobile-banner/About-Us.png') no-repeat center center;
        background-size: cover;

    }

}


@media (max-width: 1024px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: relative;
        padding: 0;
        /* width: 375px; */
        width: 100%;
        background-color: #000;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: none;
    }
    

    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }

    .navbar-expand-lg .navbar-toggler {
        display: block !important;
        margin-right: 20px;
        position: absolute;
        right: 0;
    }

    .navbar-expand-lg.collapsing,
    .navbar-expand-lg .collapse.show {
        display: block !important;
    }

    #mainNav {
        justify-content: flex-end;
        align-content: center;
        gap: 20px;
        margin-right: 0;
        position: absolute;
        top: 100%;
        width: 100%;
        background: rgba(32, 32, 32, 0.9);
        backdrop-filter: blur(14px);
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        /* margin-left: 25px */
        padding: 15px;
    }

    .dropdown-submenu>.dropdown-menu {
        left: 0px;
    }

    .break-line {
        display: none;
    }

    .desktop-br {
        display: none;
    }


    #sglHeader {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
    }

    .navbar {
        border-radius: 0;
    }

    .break-line {
        display: none;
    }

    .dropdown-item:focus, .dropdown-item:hover{
        background: #000 !important;
        color: #fff !important;
    }
}




/* home page  */

/* Tablet (≤ 991px) */
@media (max-width: 1024px) {

    .carousel-caption {
        right: auto;
        left: 30px;
        padding-top: 1rem;
        padding-bottom: 3rem;
        font-size: 0.95rem;
    }

    .icon-title {
        flex-direction: row;
        align-items: center;
        text-align: center;
    }

    .icon-title h4 {
        margin-left: 0;
        font-size: 1.1rem;
        text-align: center;
    }

    .icon-title img {
        height: 80px;
    }

    .advantage-box {
        padding: 25px 15px;
    }

    .advantage-box p {
        font-size: 0.9rem;
        text-align: center;
    }

    .info-box h5 {
        font-size: 1rem;
    }

    .icon-wrapper {
        width: 100px;
        height: 100px;
        top: -4rem;
    }

    .info-card {
        padding: 0.5rem !important;
    }

    .tab-btn {
        padding: 12px 24px;
        font-size: 14px;
        flex: 1 1 auto;
    }

    .report-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: auto;
    }

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

    .report-content {
        display: none;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        padding: 0 15px;
        /* spacing on mobile sides */
    }

    .report-content.active {
        display: flex;
    }

    .report-item {
        width: 300px;
        text-align: center;
    }

    .report-item img {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .carousel-ind {
        bottom: 0%;
    }

    .dia-feature-section .feature-box-section h1 {
        font-size: 30px !important;
        font-weight: normal;
        text-align: center;
    }

    .dia-feature-section .feature-box-section p {
        font-size: 15px !important;
        text-align: center;
    }

    .dia-form-size {
        width: 100%;
        height: auto;
    }

    .dia-form h1 {
        font-size: 35px !important;

    }

    .topic-item h5 {
        font-size: 15px;
    }

    .topic-item p {
        font-size: 11px;
    }

    .about-card {
        margin-top: 4rem;
    }

    .hop p {
        font-size: 14px;
    }

    .dropdown-menu[data-bs-popper] {
        left: 0% !important;
    }
    

    .sgl-p{
        font-size: 18px;
    }

    .instrument-card h5{
        font-size: 20px;
    }

    .custom-card-body .card-title{
        font-size: 18px;
        margin: 0px;
    }

    .custom-card-body .card-text{
        font-size: 14px;
    }

    .hero-text h1{
        font-size: 45px;
    }

    .hero-text p{
        font-size: 24px;
    }

    .way-heading{
        font-size: 25px;
    }

    .way-para{
        font-size: 18px;
    }
}


/* Mobile (≤ 767px) */
@media (max-width: 767px) {

    .carousel-caption {
        font-size: 0.85rem;
        padding: 0.75rem;
        right: 3%;
        left: 3%;
    }

    .text-heading {
        margin-top: 10px;
    }

    .text-heading .para {
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        padding: 0 10px;
    }

    .icon-title {
        flex-direction: row;
        gap: 8px;
    }

    .icon-title img {
        height: 90px;
        width: auto;
    }

    .icon-title h4 {
        font-size: 1.2rem;
        margin-left: 8px;
        text-align: left;
    }

    .advantage-box {
        padding: 20px 10px;
    }

    .advantage-box p {
        font-size: 0.85rem;
        text-align: left;
    }

    .info-box h5 {
        font-size: 1rem;
    }

    .icon-wrapper {
        width: 100px;
        height: 100px;
        top: -2rem;
    }

    .text-container {
        padding-top: 20%;
    }

    .about-card-section {
        margin-top: 0px !important;
    }

    .info-card {
        padding: 0.5rem !important;
    }

    .report-item {
        width: 100%;
    }

    .hearts-arrows {
        padding: 30px 15px 30px 15px;
    }

    .laser-inscription {
        padding: 30px 15px 30px 15px;
    }

    .sealing-section ul {
        display: block;
        text-align: left !important;
    }

    .hero-banner {
        max-width: 100%;
        /* height: auto; */
        display: block;
    }

    .diamond-banner {
        background: url('../images/mobile-banner/Diamond-Repot.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .lab-grown-banner {
        background: url('../images/mobile-banner/lab-Grown-Diamond-Report.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .jewellery-banner {
        background: url('../images/mobile-banner/Jewellry-Report.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .lab-grown-jewellery-banner {
        background: url('../images/mobile-banner/lab-Grown-Jewellry-Report.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .gemstone-banner {
        background: url('../images/mobile-banner/Genstone-Report.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .triple-shield-banner {
        background: url('../images/mobile-banner/Triple-Shield.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .ecoassure-banner {
        background: url('../images/mobile-banner/Ecoassure.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .originassure-banner {
        background: url('../images/mobile-banner/Originassure.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .blockchain-banner {
        background: url('../images/mobile-banner/Blockchain-Enable-Report.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .heats-arrows-banner {
        background: url('../images/mobile-banner/Heats-&-Arrows.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .laser-increption-banner {
        background: url('../images/mobile-banner/Laser-Inscription.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .education-banner {
        background: url('../images/mobile-banner/Education.png') no-repeat center center;
        background-size: cover;
        height: 600px;
    }

    .dai-banner {
        max-width: 100%;
        height: auto;
        display: block;
    }
/* 
    .col-md-6.mobile-banner {
        position: absolute;
        top: 15%;
        color: #000;
    } */

    .All-banner{
        font-size: 30px;
    }

    .hero-banner h1 {
        font-size: 38px;
        text-shadow: none;
    }

    .hero-banner h3 {
        font-size: 24px;
        font-weight: 100 !important;
        margin-top: 5px;
    }

    .hero-banner p {
        font-size: 18px;
        text-shadow: none;
        line-height: 1.6;
    }

    .dia-screen-feature {
        margin-top: 15%;
    }

    .carousel-ind {
        bottom: -5%;
    }

    .dia-feature-section .feature-box-section h1 {
        font-size: 30px !important;
        font-weight: normal;
        text-align: center;
    }

    .dia-feature-section .feature-box-section p {
        font-size: 15px !important;
        text-align: center;
    }

    .dia-form-size {
        width: 100%;
        height: auto;
    }

    .dia-form h1 {
        font-size: 30px !important;
        margin-top: 38px;

    }

    .hoa {
        display: flex;
        flex-direction: column-reverse;
    }

    .dai-section {
        padding: 0px;
    }

    .hero-text {
        position: absolute;
        bottom: 0%;
        left: 0%;
        color: #fff;
        width: 100%;
        max-width: 900px;
        margin-left: 0%;
        padding: 10px;
    }


    .way-heading {
        font-size: 25px;
    }

    .way-para {
        font-size: 18px;
    }


    .background-image-container {
        order: 1;
        background-image: url(../images/home/color.png);
        background-size: cover;
        background-position: center;
        min-height: 160px;
    }

    .text-content {
        background-color: none;
        order: 2;
        padding: 0px !important;
        margin-top: 5px;
    }

    .card-title {
        margin: 0px;
        font-size: 25px;
    }

    .card-text {
        margin: 0px;
        font-size: 18px;
    }

    .custom-card {
        border-radius: 0rem;
        overflow: hidden;
        box-shadow: none;
        background-color: white;
        margin-top: 0px;
    }

    .main-wrapper-sgl-way {
        padding: 20px 20px;
    }
}


@media (min-width: 1025px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
    }
}