@media (max-width: 1400px) {
    .shape-section .image-wrapper {
        height: 250px;
    }
    .shape-section .image-wrapper img {
        width: 350px;
    }

    #products .product-card .product-info .product-title {
        font-size: 14px;
        line-height: 18px;
    }
}

@media (max-width: 1200px) {
    .contact-info span {
        gap: 1px;
        margin-right: 3px;
    }

    .design-card .card-title {
        font-size: 28px;
    }
    .design-card .card-text {
        min-height: 40px;
    }
    .design-card .btn-craft {
        font-size: 14px;
        gap: 4px;
    }
    .design-card .design-cart-arrow-icon {
        width: 20px;
        height: 20px;
    }

    .shape-section .image-wrapper {
        height: 214px;
    }
    .shape-section .image-wrapper img {
        width: 314px;
    }
    .shape-name {
        font-size: 16px;
    }

    .title {
        font-size: 42px;
        line-height: 52px;
    }
    .other-jewelry .title {
        font-size: 42px;
        line-height: 52px;
    }

    .edu-title {
        line-height: 56px;
    }

    .customize-section .btn-custom-green,
    .customize-section .btn-custom-yellow {
        height: 75px;
    }

    #products .product-card .product-info .product-title {
        height: 60px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .product-gallery__thumb {
        width: 100%;
        height: auto;
    }
    .product-gallery-arrow {
        width: 58px;
    }

    #products .product-card .product-info .d-included {
        font-size: 9px;
    }
}

@media (max-width: 991px) {
    .mid-header .contact-info {
        display: none;
    }
    .mid-header .header-icons .search-header {
        display: none;
    }
    .mid-header .header-icons .profile-header {
        display: none;
    }

    .hero h1 {
        font-size: 54px;
    }
    .hero p.lead {
        font-size: 16px;
    }

    .reviews-section h2 {
        font-size: 38px;
        line-height: 48px;
    }
    .craft-header h2 {
        font-size: 38px;
        line-height: 48px;
    }

    .shape-card {
        margin-bottom: 25px;
    }

    .shape-section .image-wrapper {
        height: 290px;
    }
    .shape-section .image-wrapper img {
        width: 370px;
    }

    .customize-section .btn-custom-green,
    .customize-section .btn-custom-yellow {
        height: 100px;
    }

    .footer-top {
        padding-right: 25px;
        padding-left: 25px;
    }

    /*===== MOBILE MENU =====*/
    .desktop-nav { display: none !important; }

    /* Force mega-menu to behave like accordion on mobile */
    .mobile-menu-nav .nav-menu { display: block; flex-direction: column; }
    .mobile-menu-nav .nav-menu > li { width: 100%; }

    .mobile-menu-nav .mega-menu {
        display: none;
        position: static !important;    /* Remove absolute positioning */
        width: 100% !important;
        background: #f7f7f9;
        box-shadow: none;
        z-index: 10;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding: 0;
    }

    /* Show mega-menu when parent is open */
    .mobile-menu-nav .has-mega-menu.open > .mega-menu {
        display: block;
    }

    .mobile-menu-nav .mega-inner {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 10px 20px !important;
        max-width: 100% !important;
    }

    .mobile-menu-nav .menu-column {
        min-width: 0 !important;
        gap: 0;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

    .mobile-menu-nav .menu-column h4 {
        margin: 7px 0 4px 0;
        font-size: 1em;
    }

    .mobile-menu-nav .menu-column a {
        padding: 7px 16px;
        font-size: 16px;
        font-family: 'Metropolis', sans-serif;
        font-weight: 400;
    }

    .mobile-menu-nav .image-column img {
        width: 100%;
        max-width: 100%;
        margin: 10px 0 0 0;
    }
    .mobile-menu-nav .image-column { display: block; }

    /* Hide default desktop shadow/hover */
    .mobile-menu-nav .mega-menu::before { display: none; }

    /* Product View */
    .product-gallery-arrow {

    }
    .product-gallery-arrow.go-up {
        top: 30px;
        left: -30px;
        transform: rotate(-90deg);
    }
    .product-gallery-arrow.go-down {
        top: 30px;
        right: -30px;
        transform: rotate(-90deg);
        bottom: auto;
        left: auto;
    }
    .product-gallery__thumbs {
        margin-top: 20px;
        position: relative;
        padding-left: 25px;
        overflow: hidden;
    }
    .product-gallery__main {
        width: 100%;
    }
    .need-help {
        width: 100%;
    }

    .product-gallery-arrow.go-up {
        top: 50px;
    }
    .product-gallery-arrow.go-down {
        top: 50px;
        right: -32px;
    }
    .product-gallery-thumbs {
        position: relative;
        overflow: hidden;
    }

    #products .product-card .product-info .product-badges .badge {
        font-size: 12px;
    }

    #products .product-card .product-info .d-included {
        font-size: 9px;
        line-height: 12px;
    }

    .mobile-filter-container {
        display: block;
    }
    .product-list-filters-container {
        display: none !important;
    }

    .footer .footer-menu-col-box {
        margin-bottom: 25px;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .design-card .card-body {
        padding: 15px;
    }
    .design-card .card-title {
        font-size: 18px;
        line-height: 28px;
    }
    .design-card .card-text {
        font-size: 14px;
        line-height: 18px;
        min-height: 36px;
    }
    .btn-craft {
        padding: 15px;
        font-size: 11px;
        gap: 2px;
    }

    .btn-craft .design-cart-btn-icon {
        display: none;
    }

    .educational-section .edu-title {
        font-size: 30px;
        line-height: 32px;
    }
    .educational-section .edu-card .btn-one {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    .educational-section .edu-card .btn-two {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .other-jewelry .btn-shop {
        font-size: 12px;
        line-height: 1;
    }
    .other-jewelry .card-info p {
        font-size: 14px;
        line-height: 16px;
    }
    .other-jewelry .card-info h5 {
        font-size: 20px;
        line-height: 26px;
    }

    .design-card .btn-craft {
        font-size: 12px;
        gap: 1px;
    }

    .shape-section .image-wrapper img {
        left: -20px;
    }

    .customize-section-content .title {
        font-size: 30px;
        line-height: 36px;
    }

    .why-card .card-title {
        font-size: 18px;
        line-height: 20px;
    }

    .values-section .values-title {
        font-size: 18px;
    }
    .values-section .values-desc {
        font-size: 14px;
    }

}

@media (max-width: 767px) {
    .hero h1 {
        font-size: 42px;
    }

    .promo-bar-text {
        font-size: 14px;
        line-height: 16px;
    }

    .shape-section .image-wrapper {
        height: 250px;
    }
    .shape-section .image-wrapper img {
        width: 335px;
    }

    .values-section .values-title {
        font-size: 20px;
        line-height: 24px;
    }

    .values-section .values-desc {
        font-size: 16px;
        line-height: 19px;
    }

    .craft-section .design-card {
        margin-bottom: 25px;
    }

    .predesign-section .title {
        font-size: 36px;
        line-height: 40px;
    }

    .educational-section .hide-on-mobile {
        display: none;
    }
    .educational-section .hide-on-desktop {
        display: block;
    }
    .educational-section .edu-image-placeholder {
        min-height: 250px;
    }

    .customize-section .hide-on-mobile {
        display: none;
    }
    .customize-section .hide-on-desktop {
        display: block;
    }
    .customize-section .video-box {
        height: 250px;
        margin: 0 0 20px 0;
    }

    .customize-section .btn-custom-green,
    .customize-section .btn-custom-yellow {
        height: 77px;
    }

    /* Product View */
    .product-info__select {
        width: 70%;
    }
    .measure-title {
        font-size: 34px;
        line-height: 38px;
    }

    .trustpilot-section .trustpilot-title {
        font-size: 28px;
        line-height: 32px;
    }

    #products .product-card .product-info .d-included {
        font-size: 10px;
    }

}

@media (min-width: 567px) and (max-width: 767px) {
    .other-jewelry .btn-shop {
        font-size: 12px;
        line-height: 1;
    }
    .other-jewelry .card-info p {
        font-size: 14px;
        line-height: 16px;
        min-height: 50px;
    }
    .other-jewelry .card-info h5 {
        font-size: 20px;
        line-height: 26px;
    }
    .hero .btn-green,
    .hero .btn-yellow {
        font-size: 14px;
    }
    .shape-section .image-wrapper img {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    #chatra {
        display: none;
    }
    .shape-section .image-wrapper img {
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

@media (max-width: 566px) {
    .header-icons {
        gap: 20px;
        margin-right: 10px;
    }

    .shape-section .image-wrapper img {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .gemstone-card-img-container {
        height: 300px;
    }
    .gemstone-section .title {
        font-size: 32px;
        line-height: 38px;
    }
    .gemstone-section .card-label {
        font-size: 16px;
        line-height: 18px;
    }

    .other-jewelry .card-holder {
        margin-bottom: 25px;
    }

    .mid-header .logo img {
        width: 210px;
    }
    .hero h1 {
        font-size: 36px;
        padding: 0 20px;
    }
    .hero p.lead {
        padding: 0 25px;
    }

    .hero-section-btns {
        padding-left: 25px;
        padding-right: 25px;
    }
    .predesign-section .hide-on-mobile {
        display: none !important;
    }
    .predesign-section .hide-on-desktop {
        display: block;
    }

    .craft-header .craft-title {
        font-size: 32px;
        line-height: 38px;
        text-align: center;
    }
    .craft-header .craft-subtitle {
        text-align: center;
    }

    .predesign-section .title {
        font-size: 32px;
        line-height: 38px;
    }

    .shape-section-header {
        margin-bottom: 25px;
    }
    .shape-section-header .shape-title {
        font-size: 32px;
        line-height: 38px;
    }

    .customize-section-content {
        padding: 25px;
    }
    .customize-section-content h2 {
        font-size: 32px;
        line-height: 38px;
    }

    .customize-section-btns a {
        text-align: center;
    }

    .other-jewelry .title {
        font-size: 32px;
        line-height: 38px;
    }

    .why-aofj .title {
        font-size: 32px;
        line-height: 38px;
    }

    .why-card .card-icon svg {
        width: 100%;
    }

    .edu-card {
        padding: 25px;
    }
    .edu-card .edu-title {
        font-size: 32px;
        line-height: 38px;
    }
    .edu-card .btn-one {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }
    .edu-card .btn-two {
        width: 100%;
        height: auto;
    }

    .values-section .values-title {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 3px;
    }
    .values-section .values-desc {
        font-size: 14px;
        line-height: 16px;
    }

    .newsletter {
        padding: 100px 25px;
    }
    .newsletter .newsletter-title {
        font-size: 32px;
        line-height: 38px;
    }

    .footer .transparent-text.text-center {
        margin-bottom: 3rem;
    }
    .footer-social-mobile {
        display: block;
    }
    .footer-social.hide-on-mobile {
        display: none;
    }

    .hero .btn-yellow {
        width: 100%;
    }
    .hero .btn-green {
        width: 100%;
        margin-bottom: 15px;
        margin-right: 0;
    }

    .sale-section-mobile {
        display: inline-block;
    }
    .sale-section {
        display: none;
    }

    .other-jewelry .nav-tabs .nav-link {
        font-size: 15px;
        padding: 0.75rem;
        border-bottom: 4px solid #EBEBEB;
        border-top: 0 none;
        border-left: 0 none;
        border-right: 0 none;
        border-radius: 0;
        color: #000;
    }
    .other-jewelry .nav-tabs .nav-link.active {
        border-color: #000;
    }
    .other-jewelry .card-holder {
        margin-bottom: 1.5rem;
    }
    .other-jewelry .hide-on-mobile {
        display: none;
    }

    .shape-section .shape-card {
        max-width: 300px;
        margin: 0 auto;
        text-align: center;
    }
    .shape-section .image-wrapper img {
        width: 100%;
        height: auto;
    }

    .shape-section .carousel-indicators {
        bottom: -50px;
    }
    .shape-section .carousel-indicators [data-bs-target] {
        background-color: #16423C;
    }

    .predesign-section .carousel-indicators {
        bottom: -30px;
    }
    .predesign-section .carousel-indicators [data-bs-target] {
        background-color: #16423C;
    }

    .customize-section .btn-custom-green,
    .customize-section .btn-custom-yellow {
        height: auto;
        width: 100%;
    }

    /* Product View */
    .product-gallery__thumbs {
        width: 100%;
        overflow: hidden;
    }
    .product-info-container {
        margin-left: 0;
    }
    .measure-title {
        font-size: 28px;
        line-height: 32px;
    }
    .product-info__title {
        font-size: 20px;
    }
    .product-info__select {
        width: 62%;
    }

    .need-help__actions {
        display: block;
    }
    .need-help__action {
        display: block;
        width: 100%;
        margin-bottom: 13px;
    }

    .product-view-promo-section.promo-bar {
        padding: 10px;
    }

    .predesign-section.product-view-carousel-section .title {
        font-size: 28px;
        line-height: 32px;
    }

    .trustpilot-section {
        padding: 60px 25px;
        gap: 30px;
    }
    .trustpilot-carousel {
        gap: 25px;
    }

    .trustpilot-section .trustpilot-meta .star-rating-txt {
        font-family: 'Metropolis', sans-serif;
        font-weight: 500;
        font-size: 18px;
        line-height: 26px;
        display: block;
        margin: 0 0 5px
    }
    .trustpilot-section .trustpilot-meta {
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        display: block;
        text-align: center;
    }
    .trustpilot-section .trustpilot-meta .trustpilot-google-stars {
        display: inline-block;
        width: 100%;
        height: auto;
    }
    .trustpilot-section .trustpilot-meta .trustpilot-cta {
        background-color: #fff;
        border-radius: 10px;
        color: #16423C;
        border: 1px solid #16423C;
        padding: 0 24px;
        margin: 14px 0 0 0;
    }
    .trustpilot-section .trustpilot-meta .g-reviews-amount {

    }

    #products .product-card .product-info .variant-colors .color-dot {
        width: 15px;
        height: 15px;
    }
    #products .product-card .product-info .product-title {
        line-height: 16px;
        height: 70px;
    }

    #products .product-card .product-info .d-included {
        font-size: 12px;
        margin-top: -10px;
    }

    #products .product-card .wishlist-btn i {
        font-size: 15px;
    }
    .breadcrumbs__link, .breadcrumbs__sep, .breadcrumbs__current {
        font-size: 12px;
    }

    .catalog-page-mobile-filters {
        width: 100%;
    }

    .filter-available-items {
        display: none;
    }

    .footer .footer-logo {
        margin-bottom: 40px;
    }

    .footer .footer-menu-col-box {
        padding: 0;
        margin: 0 20px 40px 20px;
    }

    .footer .footer-cols-section .row .col-12:last-child > .footer-menu-col-box {
        margin-bottom: 0;
    }

    .footer-social-mobile {
        width: 100%;
    }

    .footer .footer-copy {
        text-align: center;
        display: inline-block;
        width: 100%;
        margin-bottom: 7px;
    }

    .footer .footer-bottom-nav {
        text-align: center;
        margin-bottom: 7px;
    }

}

@media (max-width: 479px) {
    .gemstone-card-img-container {
        height: 207px;
    }
}