body {
    font-family: 'PT Sans', sans-serif;
    font-family: 'assistant', sans-serif;
}

a {
    color: unset;
    text-transform: unset;
    text-decoration: unset;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
}

.input {
    width: 300px;
    height: 30px;
    margin: 5px 10px;
    padding: 5px;
    background-color: white;
    color: black;
    border-radius: 3px;
    border: 1px solid #6b6b6b;
}
.page-blog-article-content-wrapper{
    padding: 1px 30px 0px 30px
}
.button {
    font-size: 16px;
    font-family: arial, sans-serif;
    background-color: #fff;
    color: #000;
    width: fit-content;
    height: 30px;
    margin: 0px 10px;
    padding: 5px 10px;
    border: 1px solid #dae1e8;
    border-radius: 3px;
    align-self: flex-start;
}

body {
    margin: 0;
    /* background-color: #f8f8f8; */
}
.headerStructure {
    padding: 0px 50px 0px 150px; /* Adds some padding inside the section */
    position: absolute;
    z-index: 1000;
    width: 100%;
    left: 0px;
    box-sizing: border-box;
    top: 0px;
    background-color: white;
}
.mainLogo {
    font-size: 30px;
    font-weight: 400;
    flex: 1;
    color: #254264;
    font-family: 'EB Garamond', serif;
    /* width: 300px; */
    white-space: nowrap;
    display: flex;
    /* margin-left: -26px; */
}

.mainNavBar {
    display: flex; /* Enables Flexbox for buttons */
    /* overflow-x: auto; */ /* Makes it scrollable horizontally */
    flex: 0;
}

.headerWrapper {
    display: flex; /* Enables Flexbox */
    justify-content: space-between; /* Distributes space between items */
    align-items: center; /* Aligns items vertically */
    padding: 0px 0px 0px 0px; /* Adds some padding inside the nav bar */
    cursor: pointer;
}

.navBarButton {
    min-width: 100px; /* Ensures a minimum width for each button */
    margin: 0 0px; /* Adds space between buttons */
    padding: 0px 11px; /* Adds padding inside each button */
    cursor: pointer; /* Changes cursor to pointer on hover */
    border: none; /* Removes border */
    color: #254264; /* Example background color */
    /* color: white; */ /* Text color */
    font-size: 16px; /* Sets font size */
    border-radius: 5px; /* Rounds corners of buttons */
    white-space: nowrap; /* Prevents text from wrapping */
    text-align: center;
    /* font-weight: 700; */
}

.navBarButton a {
    color: #254264;
    text-decoration: none;
    display: flex;
    font-weight: 500;
}

.navBarButton:hover {
    /* background-color: #f3f4f6; */
}

/* Desktop Navigation Dropdown Styles */
.navBarButton-dropdown {
    position: relative;
}

.navBarButton-dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
}

.navBarButton-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.navBarDropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 640px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 32px 64px rgba(15, 23, 42, 0.12),
        0 12px 24px rgba(15, 23, 42, 0.08),
        0 4px 12px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(148, 163, 184, 0.08);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    margin-top: 12px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.navBarButton-dropdown:hover .navBarDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-section {
    padding: 32px 28px;
}

.dropdown-section:first-child {
    border-right: 1px solid rgba(203, 213, 225, 0.3);
}

.dropdown-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 20px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-section-title svg {
    color: #64748b;
    opacity: 0.7;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: #1e293b;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 4px;
    border: 1px solid transparent;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: rgba(148, 163, 184, 0.15);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.dropdown-item-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dropdown-item:hover .dropdown-item-icon-wrap {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dropdown-item-icon-wrap svg {
    width: 22px;
    height: 22px;
}

.di-natural {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.1);
}
.di-natural svg { stroke: #2563eb; }

.di-lab {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.1);
}
.di-lab svg { stroke: #16a34a; }

.di-prices {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #ca8a04;
    border: 1px solid rgba(202, 138, 4, 0.1);
}
.di-prices svg { stroke: #ca8a04; }

.di-rings {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #db2777;
    border: 1px solid rgba(219, 39, 119, 0.1);
}
.di-rings svg { stroke: #db2777; }

.di-necklace {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #9333ea;
    border: 1px solid rgba(147, 51, 234, 0.1);
}
.di-necklace svg { stroke: #9333ea; }

.di-earring {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.1);
}
.di-earring svg { stroke: #0284c7; }

.dropdown-item-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 3px;
    text-align: left;
    color: #0f172a;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.dropdown-item:hover .dropdown-item-title {
    color: #264264;
}

.dropdown-item-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    text-align: left;
    font-weight: 400;
}

.dropdown-shapes-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 12px 8px;
    margin-top: 12px;
    border-top: 1px solid rgba(203, 213, 225, 0.25);
    display: none;
}

.dropdown-shape-chip {
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.dropdown-shape-chip:hover {
    background: #264264;
    color: #ffffff;
    border-color: #264264;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(38, 66, 100, 0.2);
}

.dropdown-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #264264;
    text-decoration: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(38, 66, 100, 0.1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-view-all:hover {
    background: linear-gradient(135deg, #264264 0%, #1e3650 100%);
    color: #ffffff;
    border-color: #264264;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(38, 66, 100, 0.25);
}

.dropdown-view-all svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-view-all:hover svg {
    transform: translateX(3px);
}

.dropdown-footer {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid #f0f0f5;
    margin-top: 8px;
}

.dropdown-footer-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
    text-decoration: none;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dropdown-footer-link:hover {
    background-color: #eff6ff;
    color: #1d4ed8;
}

/* The <div> carries the button's look; the <a> inside must carry its HIT AREA.
 *
 * Previously all the padding lived on the div and the <a> had no rule at all, so
 * it stayed an inline box hugging the text - only the six glyphs of "Search" were
 * clickable and the entire padded pill around them was dead. This is the primary
 * CTA in the header, so that dead area was costing real clicks.
 *
 * The padding moves to the <a> (now a block that fills the pill), and the width
 * absorbs it - 100px content + 40px padding = 140px - so the rendered box is
 * pixel-identical to before. The only thing that changes is what you can click. */
.headerCTA_button {
    padding: 0;
    cursor: pointer;
    background: #264264;
    color: white;
    font-size: 1em;
    border-radius: 50px;
    width: 140px;
    float: right;
    text-align: center;
    border: 1px solid #264264;
}

.headerCTA_button a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}


.section1 {
    display: flex;
    /* height: calc(100vh - 50px); */
    padding-top: 63px;
    /* max-width: 1512px; */
    /* padding: 0px 95px 0px 100px; */
    padding: 0px 50px 0px 150px;
}

.col-2 {
    flex: 1; /* Takes up half the space in the container */
    /* padding: 0px 50px 0px 150px; */ /* Adds some padding inside the section */
}


.section1 .sub-title {
    /* font-size: 12px; */
    /* background-color: white; */
    /* padding: 5px 20px 5px 20px; */
    /* display: inline-block; */
    /* border-radius: 100px 100px 100px 0px; */
    margin-top: 148px;
    /* text-transform: uppercase; */
    /* font-weight: 200; */
    /* color: #274265; */
    /* border: 1px solid #2d85e24a; */
    /* opacity: 0; */
    margin-bottom: 5px;
}

.headerCTA {
    flex: 0;
}

.title-1 {
    font-size: 50px;
    font-weight: 600;
    width: 588px;
    margin-top: 4px;
    line-height: 54px;
    color: #254264;
    padding-bottom: 0px;
    margin-bottom: 0px;
    /* font-family: 'EB Garamond', serif; */
    /* font-family: 'Inter', sans-serif; */
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
}

.desc-1 {
    font-size: 24px;
    color: #254264;
    margin: 30px 0px 20px 0px;
    /* font-family: 'Inter', sans-serif; */
    font-size: 17px;
    /* color: #8a7a6e; */
    margin: 0 0 28px 0;
    line-height: 1.7;
    /* max-width: 460px; */
}

.button-1 {
    background-color: #264264;
    color: white;
    border-radius: 100px;
    display: flex;
    /* padding: 5px 35px 20px 70px; */
    position: relative;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    gap: 13px;
    border: 1.5px solid rgb(39 66 101);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.divider {
    height: 1px;
    /* background-color: #e8e8e8; */
    margin: 39px 0px 20px 0px;
}

.companies-logos {
    /* display: flex; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: none;
}

.company-logo-thumb {
    display: flex;
    padding: 0px 20px 0px 20px;
    flex: 1;
}

.company-logo-thumb img {
    width: 100%;
}
.jewelry-video-1 {
    position: relative;
    width: 100%;
    /* height: 400px; */
    /* overflow: hidden; */
    /* border-radius: 15px; */
    /* top: 40px; */
    right: 0px;
    border-radius: 400px;
    max-width: 700px;
    /* transform: scale(1.5); */
    /* float: left; */
    /* z-index: -1; */
    margin: 0 auto;
    /* display: none; */
}

.jewelry-video-1 video {
    width: 100%;
    z-index: -2;
    position: relative;
}
.notification-box {
    background-color: white;
    width: 100%;
    border-radius: 8px;
    height: 123px;
    position: relative;
    z-index: 99999;
    text-align: left;
    padding: 8px 10px 10px 27px;
    box-sizing: border-box;
    margin-bottom: 9px;
    /* box-shadow: 0px 0px 9px 3px #0000001a; */
    border: 1px solid #00000012;
    /* bottom: -141px; */
    /* max-width: 50%; */
    /* bottom: -102px; */
    clear: both;
    opacity: .6;
}

.notification-box .title {
    font-size: 15px;
    font-weight: 300;
    margin: 0px;
}

.notification-box .price {
    font-size: 39px;
    font-weight: 700;
    margin-top: 4px;
}

.notification-box .message {
    background-color: #d6ffe2;
    display: inline-block;
    padding: 8px 15px 8px 15px;
    border-radius: 26px;
    font-weight: 700;
    position: relative;
    color: #1b6f34;
}

.notification-box-1 {
    /* right: 5%; */
    /* bottom: 185px; */
    z-index: 10;
    /* opacity: 0.9; */
    right: -50px;
    bottom: unset;
    left: unset;
    top: 50px;
    width: 287px;
    box-shadow: unset;
    border: unset;
    background-color: transparent;
    position: absolute;
    opacity: 1;
    /* display: none; */
}

.notification-box-2 {right: -20px;/* bottom: -142px; *//* background-color: #ffffffd6; */}

.notification-box-3 {
    /* left: -5px; */
    /* top: 469px; */
    /* z-index: 11; */
    /* opacity: 1; */
    /* right: 90px; */
    /* bottom: -142px; */
    /* margin-right: -80px; */
}

.notification-box-1 .message {
    padding-left: 38px;
    padding-right: 20px;
    /* background-color: #112f6a; */
    /* color: white; */
    font-size: 28px;
    padding: 8px 25px 8px 59px;
    margin-left: -11px;
}

.notification-box-2 .message {
    background-color: #eaeaea;
    color: #000000;
    background-color: #ff4242;
    color: white;
}

.check-icon img {
    width: 42px;
    position: absolute;
    bottom: 7px;
    left: 9px;
}

.notification-box-3 .message {
    background-color: #ebebeb;
    color: black;
    /* background-color: #ff4242; */
    /* color: white; */
}

.button-1 .arrow img {
    width: 34px;
    position: relative;
    top: 10px;
    left: 8px;
}

.button-1 .arrow {margin-left: 10px;}

.grey-box {
    position: absolute;
    z-index: -1;
    background-color: #f0f0f06b;
    width: 100%;
    height: 300px;
    top: 604px;
    left: 0px;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    display: none;
}

.notification-box .image {
    width: 135px;
    height: 110px;
    overflow: hidden;
    float: left;
}

.notification-box .image img {
    width: 115px;
}


.section1 .jewelry-image-1 {
    /* width: 100%; */
    z-index: -2;
    position: relative;
    /* margin-bottom: -100px; */
    transition: all .3s ease;
    /* min-width: 600px; */
    max-height: 466px;
}

.jewelry-message-1 {
    background-color: #d6ffe2;
    display: inline-block;
    padding: 8px 28px 8px 60px;
    border-radius: 26px;
    font-weight: 700;
    /* position: relative; */
    font-size: 31px;
    bottom: 36px;
    right: 0px;
    position: absolute;
}

.notification-box-1 .title {
    display: none;
}

.notification-box-1 .price {
    color: #1b6f34;
    font-size: 59px;
    /* text-shadow: 0px 0px 16px #d6ffe2; */
}

.dots-box {
    background-image: url("/assets/circle.png");
    background-size: 15px;
    width: 100%;
    height: 131px;
    position: absolute;
    z-index: -1;
    right: 0px;
    bottom: -31px;
}


.carousel {
    overflow: hidden;
    flex: 1;
}

.carousel-track-container {
    width: 100%; /* Adjust based on parent container */
    margin: auto;
}

.carousel-track {
    display: flex;
    animation: scroll 50s linear infinite; /* Adjust time for different speeds */
    display: flex;
    flex-wrap: nowrap; /* Adjust as needed, might be nowrap or wrap */
    /* overflow-x: auto; */
    padding-left: 0px;
    height: 64px;
}

.carousel-track li {
    list-style: none; /* Removes bullet points from list items */
    margin-right: 35px; /* Spacing between logos */
    width: 25%; /* As 4 logos at a time, each takes 25% width */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
ul.carousel-track img {
    /* width: 100px; */
    max-height: 27px;
    min-width: 106px;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.carousel-wrapper {
    /* display: flex; */
    display: grid;
    /* box-shadow: inset 48px 0px 20px -24px #ff0000; */
}

/* ============================================
   TRUST LOGOS BAR (INFINITE SCROLL) - Homepage
   Same as jewelry homepage carousel
   ============================================ */
.jewelry-trust-logos-bar {
    background: #ffffff;
    padding: 40px 0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #eaeaea;
}

.jewelry-logos-track {
    display: flex;
    width: fit-content;
    animation: scrollLogos 40s linear infinite;
    gap: 0px;
}

.jewelry-logos-slide {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 0 17px;
}

.jewelry-company-logo {
    max-height: 15px;
    min-width: 106px;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.jewelry-company-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause animation on hover */
.jewelry-trust-logos-bar:hover .jewelry-logos-track {
    animation-play-state: paused;
}

.carousel, .sibling-element {
        flex-basis: 100%; /* Stacks elements on smaller screens */
    }
    .mainLogo img {
        width: 18px;
    }
    .title-2 {
        font-size: 62px;
        font-weight: 600;
        /* width: 50%; */
        margin-top: 11px;
        line-height: 66px;
        text-transform: capitalize;
        text-align: center;
        /* background: linear-gradient(94.97deg, #F2583C 12.49%, #9214C4 75.18%, #1E71ED 85.93%); */
        /* -webkit-background-clip: text; */
        /* -webkit-text-fill-color: transparent; */
        /* background-clip: text; */
        color: #7B8DAB;
    }
    
    .col-box {
        /* text-align: center; */
        max-width: 600px;
        margin-top: -50px;
        margin-bottom: 350px;
        margin: 0 auto;
        margin-bottom: 50px;
    }
    
    .col-1 {
        /* display: flex; */
        /* display: flex; */ /* Enables Flexbox */
        justify-content: center; /* Centers content horizontally */
        align-items: center;
        display: block;
        width: 100%;
    }
    .section-quote .lines {
        background-image: url("/assets/line1.png");
        background-size: 80px;
        width: 100%;
        height: 500px;
        background-repeat: repeat;
        /* margin-left: 50px; */
        box-shadow: inset 0px 100px 0px 0px #f9f9f957, inset 0px 200px 0px 0px #f9f9f982;
    }
    
    .col-quote span {
        /* color: #254264; */
    }
    .notification-box-cards-structure {
        width: 650px;
        height: 250px;
        overflow: hidden;
        position: absolute;
        top: 604px;
        display: none;
    }
    
    .notification-box-cards-wrapper {
        /* display: flex; */
        animation: scroll-y 100s linear infinite; /* Adjust time for different speeds */
        /* display: flex; */
        /* flex-wrap: nowrap; */ /* Adjust as needed, might be nowrap or wrap */
    }
    @keyframes scroll-y {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100%);
        }
    }
    .notification-box-cards-title h3 {
        position: relative;
        top: 0px;
        z-index: 10;
        flex: 1;
        text-align: center;
        /* display: flex; */
        margin: 0 auto;
        display: inline-block;
        width: 100%;
        background-color: white;
        font-size: 20px;
        font-weight: 200;
        /* border-bottom: 1px solid #e8e8e8; */
        box-shadow: inset 0px -1px 0px #e8e8e8,inset 1px 0px 0px #e8e8e8,inset -1px 0px 0px #e8e8e8;
        padding-bottom: 7px;
        text-transform: capitalize;
        color: #254264;
    }
    
    span.blue-span {
        /* color: 7B8DAB; */
    }
    
    .bold-span {
        font-weight: 700;
    }
    .inset-shadow-grey {
        position: absolute;
        bottom: 0px;
        width: 100%;
        background-color: #f9f9f9;
        height: 100px;
        background: #f9f9f9;
        background: linear-gradient(0deg, rgb(249 249 249) 0%, rgb(249 249 249 / 0%) 90%);
    }
    
    .section2 {
        /* display: flex; */
        width: 100%;
        background-color: white;
        z-index: 20;
        position: relative;
        padding-top: 50px;
        padding-bottom: 50px;
        text-align: center;
        min-height: 100vh;
    }
    .col-quote {
        margin-top: -270px;
        color: #dfdfdf;
    }
    .main-tool .title {
        font-size: 37px;
        font-weight: 600;
        text-align: left;
        text-transform: capitalize;
    }
    
    .title {}
    
    .main-tool .title {
        border-radius: 7px;
        font-size: 23px;
        text-transform: capitalize;
        text-align: left;
        /* background-color: #f6f6f6; */
        /* padding: 26px; */
        /* margin-bottom: -30px; */
        color: #264264;
        margin-bottom: 15px;
    }
    
    .main-tool-step-1 {
        display: flex;
        /* justify-content: center; */
        align-items: center;
        flex-wrap: wrap;
        /* height: 400px; */
        /* border: 1px solid #ececec; */
    }
    
    .main-tool {
        /* width: 100%; */
        /* max-width: 1000px; */
        margin: 0 auto;
        border: 1px solid #ececec;
        background-color: #fcfcfc;
        position: relative;
    }
    
    .main-tool-step.main-tool-step-type.main-tool-step-1 {}
    
    .main-tool-big-radio {
        background-color: #ffffff;
        /* max-width: 100%; */
        width: 185px;
        margin: 10px;
        /* margin-bottom: 53px; */
        /* margin-top: 0px; */
        height: 185px;
        box-sizing: border-box;
        padding: 4%;
        border: 2px solid #f1f1f1;
        border-radius: 15px;
        cursor: pointer;
        position: relative;
    }
    
    .section2 .lines {
        background-image: url(/line1.png);
        background-size: 80px;
        width: 100%;
        height: 500px;
        background-repeat: repeat;
        /* margin-left: 50px; */
        box-shadow: inset 0px 100px 0px 0px #f9f9f957, inset 0px 200px 0px 0px #f9f9f982;
        position: absolute;
        z-index: -1;
        top: 0px;
    }
    
    .underline-span {
        text-decoration: underline;
    }
    
    .main-tool-big-radio-value {
        font-size: 35px;
        font-weight: 600;
    }
    
    .section.section-values {
        display: block;
        clear: both;
        width: 100%;
        /* background-color: white; */
        position: relative;
        z-index: 30;
        text-align: center;
        /* padding-top: 20px; */
        padding-bottom: 20px;
        margin-top: 75px;
        margin-bottom: 75px;
        clear: both;
    }
    
    .section.section-values img {
        width: 100%;
        max-width: 930px;
    }
    
  
    
    .main-tool-big-radio-icon img {
        width: 90px;
    }
    
    .main-tool-big-radio:hover {
        /* filter: brightness(1.05); */
        /* color: white; */
        background-color: #f9f9f9;
        /* text-shadow: 0px 0px 1px black; */
    }
    
    .main-tool-content {
        max-width: 1300px;
        display: inline-block;
        margin: 0 auto;
        width: 100%;
    }
    
    .steps-progress-bar-value {
        height: 5px;
        width: 20px;
        height: 8px;
        border-radius: 8px;
        -webkit-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        background-color: #ECECEC;
        margin-left: 5px;
        /* border: 1px solid white; */
        /* margin-bottom: 28px; */
    }
    
    .steps-progress-bar-wrapper {
        display: flex;
        /* flex: 1 1 0%; */
    }
    
    .steps-progress-bar-value-current {
        background-color: #7B8DAB;
        width: 40px;
    }
    
    .steps-progress-bar-structure {
        margin-bottom: 20px;
        position: relative;
    }
    
    .main-tool-button-next {
        /* float: right; */
        /* margin-right: 43px; */
        margin-top: -15px;
        background-color: rgb(37, 66, 100);
        width: 400px;
        transition: all .3s ease;
    }
    
    .main-tool-button-next:hover {
        background-color: rgb(37, 66, 100);
    }
    
    .main-tool-button-steps {
        /* text-align: right; */
        /* float: right; */
        /* margin-right: 40px; */
        /* margin-top: -82px; */
        /* position: absolute; */
        right: 0px;
        bottom: 150px;
        width: 100%;
        margin-top: 50px;
        margin-bottom: 200px;
        height: 40px;
    }
    
    .main-tool-big-radio-selected {
        background-color: white!important;
        border-color: #7B8DAB;
    }
    .main-tool-button-disabled {
        color: #8f9098!important;
        background-color: #c5c6cc!important;
    }
    
    
    .main-tool-button-disabled .arrow {opacity: 0.2;}
    
    .main-tool-button-next .black-arrow {
        display: none;
    }
    
    .main-tool-button-disabled .white-arrow {
        display: none;
    }
    
    .main-tool-button-disabled .black-arrow {
        display: inline;
    }
    .main-tool-first-button-tooltip {
        position: absolute;
        font-size: 14px;
        width: 100%;
        left: 0px;
        bottom: -43px;
        font-weight: 200;
        color: rgb(37, 66, 100);
        display: none;
    }
    .jewelry-image-1-structure:hover .jewelry-image-1 {/* transform:scale(1.05); */}
    .main-tool-step-values {
        max-width: 50%;
        flex: 1;
    }
    
    .main-tool-step-description {
        width: 50%;
        background-color: white;
        /* border-radius: 15px; */
        position: relative;
        overflow: hidden;
    }
    
    .main-tool-step-wrapper {
        display: flex;
        min-height: 400px;
        width: 100%;
        /* margin-bottom: 45px; */
        /* margin-bottom: 200px; */
    }
    
    .main-tool-step-description img {
    }
    
    .main-tool-step-description-next-button {width: 100%;display: flex;text-align: center;font-size: 31px;margin: 0 auto;top: 50%;position: relative;margin-top: -50px;color: white;background-color: #00000073;text-align: center;justify-content: center;align-items: center;height: 140px;}
    
    .main-tool-step-description-next-button-structure {
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #000000ab;
        width: 100%;
        height: 100%;
        display: none;
    }
    
    .main-tool-step-description-next-button .arrow img {
        width: 42px;
    }
    
    .main-tool-step-description-next-button .arrow {
        margin-left: 16px;
    }
    .main-tool-step-description-image {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        /* padding-top: 15px; */
        /* padding-bottom: 23px; */
        /* align-items: center; */
        /* border: 1px solid #ececec; */
    }
    
    .section-values-title {
        font-size: 20px;
        font-size: 43px;
        text-transform: capitalize;
        text-align: left;
        font-size: 21px;
        /* margin: 30px 0px 52px 0px; */
        text-align: center;
        font-weight: 500;
        padding: 36px 36px 10px 36px;
        color: #254264;
        /* font-style: italic; */
    }
    
    .section.section-values svg {
        width: 320px;
        margin-top: 20px;
        /* margin-bottom: 150px; */
    }
    
    .section-how-it-works {
        text-align: center;
        /* background-color: #f9f9f9; */
        /* margin-top: 50px; */
        height: 500px;
        /* padding-top: 50px; */
    }
    
    .section-how-it-works .title,.top-deals .title {
        font-size: 43px;
        font-weight: 700;
        text-align: left;
        text-transform: capitalize;
        text-align: left;
        margin-top: 20px;
        color: #254264;
    }
    
    .middle-line {
        background-image: url(assets/line-wh-bg.png);
        background-size: 38px;
        width: 100%;
        height: 300px;
        background-repeat: repeat-y;
        /* margin-left: 50px; */
        margin-top: -0px;
        /* box-shadow: inset 0px 100px 0px 0px #ffffffab, inset 0px 200px 0px 0px #ffffffb3; */
        background-position: center;
    }
    
    .middle-line {}
    
    .section.section-quote {
        clear: both;
        /* margin-bottom: 130px; */
        /* display: inline; */
        height: 500px;
        max-width: 100%;
        padding: unset;
    }
    
    .black-span {
        color: black;
    }
    
    .footer {
        clear: both;
        width: 100%;
        /* height: 110px; */
        background-color: #000000;
        /* margin-top: -5px; */
        /* margin-top: -33px; */
        border-top: 1px solid #efefef;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
        z-index: 900;
        position: relative;
        padding-bottom: 70px;
    }
    
    .footer .mainLogo {
        text-align: left;
        top: 46px;
        position: relative;
        color: white;
        /* float: left; */
        /* margin-top: 38px; */
        /* width: 100px; */
        flex: 1;
        cursor: pointer;
        height: fit-content;
    }
    
    .footer .mainLogo img {
        opacity: 0.2;
    }
    .blog-section .title, .section-people .title, .faq-section .title {
        font-size: 44px;
        font-weight: 300;
        text-align: left;
        text-transform: capitalize;
        text-align: center;
        margin-top: 0px;
        color: #254264;
        margin-bottom: 20px;
    }
    
    .section-people .image img,.section-people .image svg {
        width: 100%;
        height: unset;
        border-radius: 10px;
    }
    
    .main-tool-step-shape {
        display: flex;
    }
    span.bg-span {
        background: linear-gradient(94.97deg, #F2583C 12.49%, #9214C4 75.18%, #1E71ED 85.93%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .main-tool-step-content {
        display: none;
        width: 100%;
    }
    
    .main-tool-step-active {
        display: flex;
    }
    .main-tool-step-values-title {
        text-align: left;
        font-weight: 600;
        font-size: 23px;
        margin-bottom: 20px;
    }
    
    input:focus {
      outline: none;
    }
    
    .main-tool-step-input-number {
        width: 100px;
        text-align: center;
        border-radius: 5px;
        border: 2px solid #c5c6cc;
        font-weight: 700;
        float: left;
        font-size: 29px;
        padding: 8px;
    }
    
    .main-tool-step-input form {
        clear: both;
        padding-top: 20px;
        width: 100%;
    }
    .diamond-prop-description .diamond-prop-description-image {
        border-width: 1px;
        border-radius: 5px;
        --tw-border-opacity: 1;
        border: 1px solid black;
        height: 100px;
        width: 100px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        transition: all .3s ease;
        background-color: white;
        }
    
    .diamond-prop-description {
        display: flex;
        padding-left: 50px;
        padding-right: 50px;
        background-color: #fcfcfc;
    }
    
    span.diamond-prop-description-dynamic {
        display: block;
        font-weight: 700;
        font-size: 23px;
        /* text-transform: capitalize; */
    }
    
    .diamond-prop-description-text {
        padding: 21px;
    }
    
    .diamond-prop-description-carat {
        padding-top: 100px;
    }

.diamond-prop-description .diamond-prop-description-image svg {
    transition: all .3s ease;
}
.main-tool-step-values-wrapper {
    display: flex;
    width: 100%;
    border: 1px solid #ececec;
    margin-bottom: 19px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 22px;
    background-color: #fcfcfc;
}

.main-tool-step-values-structure {
    width: 100%;
    position: relative;
}
.diamond-prop-description-color {
    padding-top: 60px;
}
.main-tool-step-values-main-props .main-tool-step-input {
    width: 100%;
    display: flex;
}

.main-tool-step-values-main-props .main-tool-big-radio-value {
    font-size: 20px;
}

.main-tool-step-mainProps .main-tool-big-radio {
    padding: 15px 10px 20px 10px;
    height: 73px;
}

.main-tool-big-radio-value-tooltip {
    letter-spacing: 6px;
    position: relative;
    top: 0px;
    color: #c5c6cc;
    font-weight: 700;
    font-size: 11px;
}
.main-tool-step-values-main-props .diamond-prop-description-image img {
    width: 66px;
}
.main-tool-big-radio-selected .main-tool-big-radio-value-tooltip {
    color: #264264;
}

.main-tool-big-radio-selected .main-tool-big-radio-value {
    color: #264264;
}
.main-tool-step-values-clarity .main-tool-big-radio-value-tooltip {
    letter-spacing: 1px;
}
.diamond-prop-description-clarity {
    padding-top: 70px;
}
.main-loader-results-loading-animation {
    /* width: 100%; */
    /* height: 100%; */
    position: relative;
    margin: 0 auto;
    width: 450px;  /* Full width of the container */
    height: 0;    /* Reset the default height */
    padding-bottom: 450px;
}

.main-tool-step-results-loading {
    margin: 0 auto;
    transition: all .3s ease;
    opacity: 1;
}

.main-tool-step-results-loading-title-structure {
    /* font-size: 26px; */
    font-weight: 700;
    font-size: 34px;
    text-transform: capitalize;
}

.main-tool-step-results-loading-animation {
}

.main-tool-step-results-loading-title-1 {
    /* font-weight: 700; */
    /* font-size: 34px; */
}

.main-tool-step-results-loading-title-2 {
    font-size: 28px;
    color: #254264;
    font-weight: 500;
}
.world-circle img {
    opacity: 1;
    width: 50%;
    padding-top: 50%;
    margin-top: -110px;
    position: relative;
    z-index: 1;
    transition: all .3s ease;
}
.diamond-prop-description-shape {
    border: 2px solid #f1f1f1;
    border-radius: 15px;
    position: absolute;
    width: 100%;
    bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    right: 0px;
    background-color: #ffffff91;
    border: unset;
    max-width: 450px;
    transform: translate(-50%);
    left: 50%;
}
.diamond-prop-description-shape .diamond-prop-description-text {
    padding-top: 7px;
    padding-bottom: 0px;
}

.main-tool-step-1 .main-tool-step-description-image img {
    padding-bottom: 11px;
    margin-top: -101px;
    padding-top: 0px;
    padding-bottom: 27px;
}
span.diamond-prop-description-dynamic-val {
    background: linear-gradient(94.97deg, #F2583C 12.49%, #9214C4 75.18%, #1E71ED 85.93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.main-tool-big-radio-recommended-tooltip {
    background-color: #d6ffe2e6;
    color: #1b6f34;
    font-weight: 700;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 1px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -35px;
    /* max-width: 200px; */
    width: 100%;
    box-sizing: border-box;
    min-width: 110px;
}
.col-3 {
    flex: 1;
    margin: 28px;
    margin-top: 0px;
}

.col-wrapper {
    display: flex;
    width: 100%;
    text-align: center;
    /* overflow-x: scroll; */
    /* overflow-y: hidden; */
    padding-bottom: 2px;
    position: relative;
}

.section2 .title-1, .how-it-works-summary .title-1, .top-deals .title-1 {
    text-align: center;
    width: 100%;
    margin-bottom: 0px;
    font-size: 32px;
    font-weight: 200;
    color: #7B8DAB;
    letter-spacing: -1px;
}

.section-logos-carousel {
    /* margin-top: 150px; */
    /* margin-bottom: 100px; */
    padding: 0px 95px 0px 100px;
    /* display: inline; */
}

.section2 .sub-title,.how-it-works-summary .sub-title ,.top-deals .sub-title {
    width: 100%;
    text-align: center;
    font-size: 44px;
    font-weight: 300;
    /* width: 388px; */
    margin-top: 0px;
    line-height: 66px;
    color: #254264;
    margin-bottom: 41px;
    margin-top: -14px;
}

.how-it-works-summary .col-title {
    font-size: 23px;
    font-weight: 700;
    /* padding-top: 15px; */
    /* padding-bottom: 10px; */
    /* min-height: 60px; */
    display: grid;
    align-items: center;
    min-height: 48px; /* or any height */
    /* padding-top: 8px; */
    line-height: 25px;
    color: #254264;
}

.how-it-works-summary .col-description {
    font-size: 18px;
    clear: both;
    padding-left: 17px;
    color: #254264;
}

.how-it-works-summary .col-number {
    font-size: 40px;
    color: #2d85e2;
    border: 1px solid #2d85e2;
    display: inline-block;
    width: 52px;
    border-radius: 100px;
    font-weight: 700;
    margin-bottom: 34px;
    display: none;
}
.how-it-works-summary .col-logo img {
    width: 50px;
    /* margin-left: -20px; */
    display: none;
}
.how-it-works-summary .col-logo {
    /* margin-bottom: 20px; */
    float: left;
    margin-right: 20px;
    /* margin-left: 20px; */
    margin-top: 8px;
}
.how-it-works-summary .col-3 {
    text-align: left;
    padding: 25px;
    position: relative;
    margin-bottom: 0px;
    border-radius: 5px;
    cursor: pointer;
    /* padding-bottom: 0px; */
    transition: all .3s ease;
}
.how-it-works-summary .image img {
    width: 100%;
}
.small-title {
    font-size: 24px;
}
.section2 .title-1 {
    width: 100%;
    text-align: center;
    /* margin-top: 100px; */
    position: relative;
    letter-spacing: -1px;
}
.main-tool-step-shape .main-tool-step-description {
    flex: 1;
    border: 1px solid #ececec;
    padding-top: 20px;
    /* max-width: 500px; */
    max-height: 366px;
    margin-top: 12px;
    width: 50%;
}

.diamond-prop-description-preview-active {
    background-color:white!important;
    opacity:0.2!important;

}


.diamond-prop-description .diamond-prop-description-image svg,.diamond-prop-description .diamond-prop-description-image img {
background-color: white;
border-radius: 100px;
}

.main-tool-step-back-button {
    display: inline-block;
    position: relative;
    top: 0px;
    right: 15px;
    font-size: 19px;
    font-weight: 200;
    float: right;
    margin-bottom: 12px;
    padding-left: 2px;
    /* border: 1px solid black; */
    /* padding: 9px; */
    cursor: pointer;
    color: #264264;
    background-color: #ececec;
    border-radius: 5px;
    padding: 2px 12px 3px 0px;
    cursor: pointer;
    /* transition: all .3s ease; */
    z-index: 99;
    display: none;
    font-weight: 400;
}

.main-tool-step-back-button svg {
    width: 21px;
    float: left;
    height: unset;
    position: relative;
    top: 3px;
    left: 1px;
    /* fill: red; */
}

.main-tool-step-back-button:hover {
    /* opacity: 0.9; */
    /* background-color: #499df5; */
}


.button-1.main-tool-button-next:hover {background-color: rgb(35 66 101);}
.main-tool-big-radio-num {
    position: absolute;
    top: -14px;
    left: -15px;
    background-color: white;
    padding: 6px;
    border-radius: 100px;
    width: 35px;
    font-size: 18px;
    height: 35px;
    color: rgb(37, 66, 100);
    box-sizing: border-box;
    font-weight: 700;
    border: 1px solid rgb(241 241 241);
    display: none;
}

.main-tool-big-radio-selected .main-tool-big-radio-num {
    color: white;
    background-color: rgb(37, 66, 100);
}
.main-tool-logo-bg svg {
    width: 100px;
    height: unset;
    /* transform: rotate(45deg); */
    top: -40px;
    position: relative;
}

.main-tool-logo-bg svg path {
    fill: #ececec;
}

.main-tool-logo-bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    z-index: 0;
    top: 50px;
    text-align: center;
    left: 0px;
    /* transform: rotate(45deg); */
    /* overflow: hidden; */
    display: none;
}
.nav-bar-structure {
    font-size: 15px;
    float: right;
    display: flex;
    position: relative;
    top: 13px;
    color: #254264;
}

.nav-bar-button {
    margin: 10px;
    margin-right: 40px;
    margin-top: 38px;
    font-weight: 200;
    cursor: pointer;
}

.col-quote .title-2 {
    font-weight: 200;
    /* display: none; */
    width: 100%;
}
span.sub-logo-rights {
    font-size: 12px;
    font-weight: 200;
    margin-left: 13px;
}

.faq-question {
    font-weight: bold;
    cursor: pointer;
    margin-bottom: -3px;
    /* Additional styling */
    padding: 11px;
    padding-bottom: 4px;
    padding-top: 17px;
    position: relative;
    /* border: 1px solid #e5e7eb; */
    border-radius: 10px;
    margin-bottom: 10px;
}

.faq-answer {
    
    /* Additional styling */
    padding: 5px 25px 20px 22px;
    max-width: 900px;
    color: rgb(107,114,128);
    margin-top: -10px;
    font-size: 16px;
    display: none;
}

.faq-question-arrow svg {width: 16px;height:unset;/* fill: #2d85e2; */}

.faq-question-arrow {
    display: inline-block;
    transition: transform 0.3s ease; /* Animation for the arrow rotation */
    position: absolute;
    right: 18px;
    top: 24px;
}

/* Class to apply when the answer is visible */
.faq-question--down {
    transform: rotate(90deg); /* Rotates the arrow to point downwards */
}


span.faq-question-content {
    font-size: 18px;
    font-weight: 200;
    margin-left: 10px;
    color: #000000;
    font-weight: 600;
    display: block;
}

.faq-section {
    /* padding-bottom: 50px; */
    /* clear: both; */
}

.faq-question-structure {
    /* border: 1px solid #f1f1f1; */
    margin: 5px;
    /* padding: 10px; */
    border-radius: 5px;
    background-color: white;
    font-size: 21px;
    font-weight: 200;
    transition: all .3s ease;
    margin-top: 0px;
    border: 1px solid #e5e7eb;
    /* min-height: 30px; */
}

.faq-question-arrow svg path {
    /* fill: black; */
}

.faq-questi {}

.faq-question-structure:hover {
    /* background-color: #26426408; */
}
.title {}

.blog-article-structure {
    display: flex;
    width: 100%;
    flex-wrap: wrap; /* Wrap articles to the next line if there are more than 4 */
    justify-content: space-between; /* Space evenly between articles */
}

article.blog-article {
    /* flex: 1; */
    width: calc(25%); /* Adjust the width to fit 4 articles in a row with spacing */
    /* margin-right: 35px; */
    /* border: 25px solid black; */
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all .3s ease;
}

article.blog-article img {
    width: 100%;
    /* height: 200px; */
    width: 100%; /* Stretch the image to cover the entire width of the container */
    height: 100%; /* Stretch the image to cover the entire height of the container */
    object-fit: cover; /* This makes the image cover the area, maintaining aspect ratio */
    position: absolute; /* Position absolutely within the container */
    top: 50%; /* Align the image to the center vertically */
    left: 50%; /* Align the image to the center horizontally */
    transform: translate(-50%, -50%);
}

h3.article-title {
    background-color: #000000;
    margin-top: 0px;
    color: white;
    padding: 10px 16px 14px 17px;
    width: 100%;
    font-weight: 700;
    margin-bottom: 0px;
    box-sizing: border-box;
    line-height: 25px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 64px;
}

a.read-more-button {
    padding-top: 29px;
    font-size: 18px;
    /* position: absolute; */
    right: 0px;
    font-weight: 400;
    text-decoration: underline;
    /* width: 100%; */
    float: right;
    text-transform: none;
    cursor: pointer;
}

.blog-section .title {
    text-align: left;
    margin-top: 0px;
    padding-top: 32px;
}

p.article-date {
    color: #ffffff;
    font-size: 13px;
    margin: 0px 0px 0px 0px;
    text-align: right;
    /* position: absolute; */
    /* top: 0px; */
    /* margin-top: -40px; */
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #000000ab;
    padding: 10px;
    border-radius: 0px 0px 0px 7px;
}

p.article-description {
    background-color: #f9f9f9;
    margin: 0px;
    width: 100%;
    color: black;
    padding: 10px;
    color: #000000;
    box-sizing: border-box;
    height: unset;
    max-height: 71px;
    line-height: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 10px 16px 10px 17px;
}

.section.blog-section {
    background-color: #f9f9f9;
    padding-bottom: 20px;
    padding-top: 0px;
    clear: both;
    /* padding: 0px 15px 0px 15px; */
    padding-bottom: 50px;
}

a.cta-button {
    font-weight: 700;
    text-align: left;
    width: 100%;
    display: block;
    /* background-color: white; */
    /* padding: 10px 16px 10px 17px; */
}

article.blog-article:hover {
    opacity: 0.8;
}
.col-progress-bar {
    height: 4px;
    width: 0%;
    background-color: #7B8DAB;
    margin-top: 30px;
    border-radius: 0px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.how-it-works-row-active {
    background-color: #7b8dab21 !important;
}
.how-it-works-row-active .col-progress-bar{
    width: 100%;
    transition: all 10s linear;
}
.how-it-works-col-content {
    padding: 0px 0px 0px 0px;
}

.how-it-works-row-active  .col-description {
    color: #254264;
}

.how-it-works-row-active .col-title {
    color: #254264;
}
.how-it-works-row:hover {
    background-color: rgba(243, 244, 246, 0.5);
}
.how-it-works-col-image-row {
    display: none;
}
.how-it-works-col-image-row-active{
    display: block;
}
.how-it-works-col-image-svg{
    max-width:400px;
    margin: 0 auto;
}

.how-it-works-col-image-row-2 .how-it-works-col-image-svg{
    max-width:400px;
}
.how-it-works-col-image-row-3 .how-it-works-col-image-svg{
    max-width:450px;
}
.section-people-animate {
    margin-top: -100px;
    z-index: 100;
    position: relative;
    display: none;
}
.section.section-people {
    margin-bottom: 50px;
}

.faq-section .title {
    /* margin-bottom: 50px; */
    text-align: left;
    margin-top: 10px;
}

.section.faq-section {
    margin-top: 50px;
    display: inline-block;
    width: 100%;
    padding-bottom: 0px;
    background-color: white;
    padding-top: 50px;
    border-top: 1px solid #ececec;
    padding-bottom: 100px;
    box-sizing: border-box;
}
.section2 .main-tool .sub-title{
    position: relative;
    display: inline-block;
    width: unset;
}
.main-tool .small-title {
    background-color: #d6ffe2;
    /* display: inline-block; */
    color: #1b6f34;
    border-radius: 5px;
    padding: 13px;
    padding-top: 0px;
    padding-bottom: 0px;
    /* position: absolute; */
    right: -66px;
    width: 131px;
    top: -20px;
    font-size: 16px;
    /* margin-top: -33px; */
    /* margin-bottom: 27px; */
    line-height: 25px;
    /* transform: rotate(5deg); */
    margin: 0 auto;
    margin-bottom: 11px;
    display: none;
}
.blog-article-image-structure {
    text-align: center;
    background-color: #264264;
    overflow: hidden;
    position: relative;
    height: 200px;
    border-radius: 9px 2px 2px 2px;
}
.section.section-newsletter {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

img.section-newsletter-bg {
    width: 100%;
    position: absolute;
    left: 0px;
    min-width: 100%;
    z-index: 0;
}

.newsletter-title {
    font-size: 45px;
    font-weight: 700;
    color: #080a13;
}

.section-newsletter-structure {
    text-align: center;
    color: black;
    position: relative;
    z-index: 1;
    padding: 80px;
    box-sizing: border-box;
}

.newsletter-subtitle {
    font-size: 20px;
    margin-bottom: 30px;
    margin-top: 10px;
    color: #999999;
}

.newsletter-input input {
    width: 100%;
    /* max-width: 350px; */
    padding: 15px;
    border-radius: 50px;
    border: 1px solid white;
}

.newsletter-input-structure {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.newsletter-input-button {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: #085cff;
    color: white;
    height: 44px;
    padding-top: 11px;
    box-sizing: border-box;
    border-radius: 100px;
    width: 129px;
}
.footer-row-1 {
    display: flex;
    padding-bottom: 100px;
    padding-top: 50px;
}

.footer-menu-structure {
    flex: 3;
    display: flex;
    padding-top: 50px;
    width: 100%;
    flex-wrap: wrap;
    gap: 24px 30px;
}

.footer-menu-row {flex: 1;flex: 0 0 25%;}

.footer-newsletter-title,.footer-menu-title {text-transform: uppercase;font-weight: 700;font-size: 14px;letter-spacing: 1px;color: #ffffff;margin-bottom: 5px;}

.footer-menu-pages-row {
    color: white;
    font-weight: 400;
    margin-bottom: 2px;
    text-transform: capitalize;
    cursor: pointer;
    transition: all .3s ease;
}

.footer-menu-pages-structure {
    padding-top: 2px;
    font-size: 14px;
}

.footer-newsletter-title {margin-bottom: 0px;}

.footer-newsletter-input input {
    width: 100%;
    /* max-width: 350px; */
    padding: 15px;
    border-radius: 50px;
    border: 1px solid #1e2635;
    background-color: #1e2635;
    margin-top: 12px;
    margin-left: -6px;
    color: white;
}

.footer-row-2 {
    display: flex;
}

.footer-newsletter-input {
    /* max-width: 300px; */
}

.footer-newsletter-input-button svg {
    width: 16px;
    height: unset;
}

.footer-newsletter-input-structure {
    position: relative;
    max-width: 400px;
}

.footer-newsletter-input-button {
    position: absolute;
    top: 15px;
    right: 9px;
    background-color: #7B8DAB;
    color: white;
    height: 42px;
    padding-top: 13px;
    box-sizing: border-box;
    border-radius: 100px;
    width: 42px;
    text-align: center;
    cursor: pointer;
}

.footer-newsletter-input-button path {
    fill: white;
}

.footer-newsletter-structure {
    flex: 1;
}

.footer-newsletter-input-subtitle {
    color: #67738c;
    font-size: 13px;
    margin-top: 6px;
    margin-left: 6px;
}

.footer-social-logo svg {
    width: 20px;
    height: unset;
}

.footer-rights-social {
    display: flex;
    text-align: right;
    padding-top: 44px;
}

.footer-social-logos-structure {
    display: flex;
    margin-left: 38px;
}

.footer-social-logo {
    margin-right: 16px;
}

.footer-social-logo svg path {
    fill: #67738c;
}
.footer-rights-title {
    color: #67738c;
    font-size: 15px;
    position: relative;
    top: 3px;
}
.footer-menu-pages-row:hover {
    color: #ffffff;
    /* font-weight: 700; */
    text-decoration: underline;
}
.faq-questions-title-wrapper .sub-title {
    font-size: 17px;
    color: #7B8DAB;
}

.faq-section .col-2 {
    /* display: flex; */
    padding: 50px 0px 0px 0px;
    width: 100%;
    box-sizing: border-box;
}

.faq-questions-title-wrapper {
    flex: 1;
    padding-right: 50px;
    box-sizing: border-box;
    padding-bottom: 20px;
}

.faq-questions-wrapper {
    width: 100%;
}

.faq-questions-title-wrapper .description {
    font-size: 16px;
    color: #4b5568;
    line-height: 27px;
}
span.span-underline {
    text-decoration: underline;
    font-weight: 700;
}

.faq-answer ul,.faq-answer p {
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 15px;
}

.blog-section-title svg {
    width: 25px;
    height: unset;
    position: relative;
    top: 1px;
    left: -3px;
    display: none;
}

.blog-section-title {
    float: left;
    cursor: pointer;
}
.main-tool-step-values.main-tool-step-1 {
    flex: 1;
    max-width: unset;
}
h1, h2, h3, h4,p {
    margin: inherit;
    font-size: inherit;
    margin-block-start: inherit;
    margin-block-end: inherit;
    font-weight: inherit;
    margin-inline-start: inherit;
    margin-inline-end: inherit;
}
.diamond-prop-description-dynamic p {
    font-size: 17px;
    font-weight: 400;
}
.underline-span{
    text-decoration: underline;
}
.faq-question-structure:first-of-type .faq-answer {
    display: block;
}

.footer-company-info {
    /* font-size: 13px; */
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    text-align: right;
}
.navBarButton a {
    padding: 20px;
}
img[lazy-type="mobile"] {
display: none;
}

img[lazy-class="lazyLoadingAsset"] {
    transition: all 0s ease;
    opacity:0;
}

.lazy-loading-transition {
    transition: all .3s ease!important;
    opacity:1!important;
}

.blog-article a.cta-button p {
    /* display: block; */
    font-weight: 200;
}
.blog-article a.cta-button .cta-title {
    padding-left: 16px;
    padding-top: 5px;
    font-weight: 500;
    text-decoration: underline;
}

.mainLogo svg {
    /* width: 210px; */
    /* margin-left: -33px; */
}
.top-deals-structure {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: nowrap;
    justify-content: start;
    margin-top: 12px;
}

.diamond-item {
    width: 250px;
    border: 1px solid #ededed;
    border-radius: 5px;
}

.diamond-item-image {
    height: 200px;
    border-bottom: 1px solid #e7e7e7;
    /* border-radius: 5px; */
    position: relative;
}

.diamond-item-image img {
    height: 100%;
    width: unset;
}

.diamond-item-content {
    padding: 10px;
    padding-top: 10px;
}

.diamond-item-row {
    display: flex;
    justify-content: space-between;
}

.diamond-item-title {
    text-align: left;
    font-size: 12px;
}

.diamond-item-price {
    font-size: 28px;
    font-weight: 700;
}

.top-deals .notification-box .title {
    display: block;
}

.top-deals .notification-box img {
    height: 17px;
    top: 9px;
    left: 9px;
    width: 18px;
}

.top-deals .notification-box-1 .message {
    font-size: 16px;
    padding-left: 31px;
    padding-right: 15px;
    padding: 7px 15px 8px 31px;
    margin-left: unset;
    right: 0px;
    position: absolute;
}

.top-deals .check-icon {
}

.top-deals .notification-box {
    width: 100%;
    height: 50px;
    bottom: 0px;
    top: unset;
}

.top-deals .diamond-item-company-logo {
    width: 100px;
    display: flex;
    justify-items: center;
    height: 36px;
}

.top-deals .diamond-item-company-logo img {
    width: 100%;
    height: fit-content;
}

.top-deals .diamond-item-button {
    text-align: center;
    /* width: 100%; */
    font-size: 12px;
    margin-top: 20px;
    background-color: #264264;
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px;
    border-radius: 100px;
    padding: 10px 20px 10px 20px;
    color: white;
    font-weight: 200;
    cursor: pointer;
    transition: all .3s ease;
}

.top-deals .diamond-item-button span {
    font-weight: 700;
}
.top-deals span.button-arrow svg {
    width: 20px;
    height: unset;
    margin-top: -10px;
    position: relative;
    top: 6px;
    right: -7px;
}

.top-deals span.button-arrow svg path {
    fill: white;
}

.top-deals .diamond-item-button:hover {
    background-color: #3a587c;
}
.top-deals .diamond-item-button span svg {
    width: 20px;
    height: unset;
    margin-top: -10px;
    position: relative;
    top: 6px;
    left: 5px;
}

.top-deals .diamond-item-button span svg path {
    fill: white;
}
span.footer-company-mail {
    margin-bottom: 3px;
}
section.section.top-deals {
    /* display: none; */
    margin-top: 40px;
    /* display: contents; */
    /* padding: 0px; */
    border-top: 2px solid #f9f9f9;
    border-bottom: 2px solid #f9f9f9;
    padding-top: 50px;
    padding-bottom: 50px;
}
.mainLogoSvg svg {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%;
    aspect-ratio: 395/54;
    object-fit: contain;
    height: 33px;

}


.mainLogoSvg svg path {
    fill: #254264;
}
.how-it-works-col-video-wrapper {
    border-radius: 15px;
    overflow: hidden; /* Ensures the video gets clipped to the border */
    display: inline-block; /* Keeps it contained */
}

.how-it-works-col-video-wrapper video {
    width: 100%; /* Ensures the video scales correctly */
    height: auto;
    display: block; /* Removes any extra spacing */
}
.how-it-works-col-video-middle {
    display: flex;
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally if needed */
    height: 100%; /* Ensures it takes full height */
}
.headerCTA_button-mobile{
    display: none;
}
.headerCTA_button-mobile svg {
    height: unset;
    width: 26px;
}

.headerCTA_button-mobile svg path {
    fill: #264264;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger-menu svg {
    width: 28px;
    height: 28px;
    stroke: #264264;
}

/* Mobile Sidebar Overlay */
.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(4px);
}

.mobile-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Mobile Sidebar */
.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    background-color: #ffffff;
    z-index: 999999;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-sidebar.active {
    right: 0;
}

/* Mobile Sidebar Header */
.mobile-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-sidebar-logo svg {
    height: 30px;
    width: 40px;
}

.mobile-sidebar-close {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-sidebar-close svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

/* Mobile Sidebar Navigation */
.mobile-sidebar-nav {
    flex: 1;
    overflow-y: scroll;
    padding: 10px 0 0px 0px;
}
.mobile-nav-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #264264;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 16px;
    font-weight: 700;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #264264;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 16px;
    font-weight: 500;
}

.mobile-nav-item:hover {
    background-color: #f3f4f6;
}

.mobile-nav-item svg {
    flex-shrink: 0;
}

/* Mobile Sidebar Secondary Links */
.mobile-sidebar-secondary {
    padding: 15px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-secondary-link {
    display: block;
    padding: 5px 6px;
    /* background-color: #f3f4f6; */
    color: #6b7280;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* border-bottom: 1px solid #e6e7eb; */
    border-radius: 0px;
}

.mobile-secondary-link:hover {
    background-color: #e5e7eb;
    color: #4b5563;
}

/* Mobile Sidebar Footer */
.mobile-sidebar-footer {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
}

.mobile-cta-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: #264264;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.mobile-cta-button:hover {
    background-color: #1a2f47;
}
.how-it-works-page,.calculator-page {
    padding-top: 50px;
}

.displayHidden{
    display: none;
}
.main-tool-step-back-button.main-tool-start-again-button {
    /* top: -29px; */
}
.testimonials-videos .video-container {
    display: flex;
    gap: 10px; /* Light border effect */
    background: white;
    padding: 10px;
    border-radius: 20px; /* Rounded Frame */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.testimonials-videos .video-wrapper {
    flex: 1; /* Makes sure all videos take equal space */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Ensures videos follow border-radius */
    border: 2px solid #ddd; /* Light border */
}

.testimonials-videos .video-wrapper video {
    width: 100%;
    height: auto; /* Ensures it keeps aspect ratio */
    display: block;
}

.testimonials-videos-wrapper {
    font-family: 'Inter', sans-serif;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}
.main-tool-results-row-item-5 .main-tool-results-col-item-company-logo img {
    opacity: 1;
    /* display: block; */
}
.steps-progress-buttons-structure {
    position: absolute;
    top: -15px;
    right: -15px;
}

.main-tool-step-back-button path {
    fill: #264264!important;
}
.steps-progress-bar-structure[activestep="2"] .steps-progress-buttons-structure .main-tool-start-again-button {
    display: none;
}

.steps-progress-bar-structure[activestep="1"] .steps-progress-buttons-structure .main-tool-step-back-main-button {
    display: none;
}

.desc-1-small {
    margin: 0px 0px 30px 0px;
    font-size: 16px;
    font-weight: 700;
    display: none;
}
.light-span{
    font-weight: 200;
}

.button-1 .arrow svg {
    position: relative;
    top: 11px;
    left: 5px;
}
.mainLogoSvg {
    width: 184px;
    display: block;
    position: relative;
}
.faq-question span.blue-span {
    color: #274265;
}
.footer .mainLogo svg path {
    fill: white;
}
.section-title {
    width: 100%;
    font-size: 36px;
    font-weight: 500;
    color: #254264;
    letter-spacing: -0.32px;
    min-height: 58px;
}

.center-title {
    text-align: center;
}

section.section.section-logos-carousel {
    background-color: #f0f0f06b;
    width: 100%;
    height: 300px;
    border-bottom: 1px solid #eaeaea;
    border-top: 1px solid #eaeaea;
    display: block;
    margin-top: 0px;
}

.carousel-structure-strip {
    width: 40%;
    /* padding-left: 100px; */
}
section.section.section2 {
    /* padding: 0px 95px 0px 100px; */
    display: inline;
}
.section.section-shapes-strip, .how-it-works-summary, .section2 {
  padding-top: 0px;
  padding: 50px 75px 0px 74px;
  /* display: inline; */
}

.section.how-it-works-summary {
    padding-top: 50px;
}
tr.main-tool-results-row-item.main-tool-results-row-item-5.odd th {
    font-weight: 700!important;
}
.section2 .col-2 {
    padding: 50px 95px 0px 100px;
}

.col-2.section1-image {
    padding: 0px 50px 0px 140px;
    display: flex;
    align-items: end;
}

.col-2.how-it-works-col-video {
    padding: 50px 95px 0px 100px;
}
.section-home-3 .radar-container {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
}

.section-home-3 section.section.section-logos-carousel {
    overflow: hidden;
    padding: 0px;
    padding-top: 45px;
    background-color: #ffffff;
    border-top: unset;
    margin-top: -45px;
}

.section-home-3 section.section.section-logos-carousel {
}

.section-home-3 .radar-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(249, 250, 251, 0) 54.76%);
    z-index: -1;
    /* Add this */
    box-shadow: inset 0px 0px 80px 0px #d6d6d6;
}

.section-home-3 .circle-1 {
    width: 200px;
    height: 200px;
}

.section-home-3 .circle-2 {
    width: 320px;
    height: 320px;
}

.section-home-3 .circle-3 {
    width: 460px;
    height: 460px;
}

.section-home-3 .search-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    background-color: rgb(216 216 216 / 90%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.section-home-3 .logo {
    display: flex;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: white;
    overflow: hidden;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
}

@keyframes orbit1 {
from {
transform: rotate(0deg) translateX(110px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(110px) rotate(-360deg);
}
}

@keyframes orbit1-reverse {
from {
transform: rotate(0deg) translateX(110px) rotate(0deg);
}
to {
transform: rotate(-360deg) translateX(110px) rotate(360deg);
}
}

@keyframes orbit2 {
from {
transform: rotate(0deg) translateX(160px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(160px) rotate(-360deg);
}
}

@keyframes orbit2-reverse {
from {
transform: rotate(0deg) translateX(160px) rotate(0deg);
}
to {
transform: rotate(-360deg) translateX(160px) rotate(360deg);
}
}

@keyframes orbit3 {
from {
transform: rotate(0deg) translateX(230px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(230px) rotate(-360deg);
}
}

@keyframes orbit3-reverse {
from {
transform: rotate(0deg) translateX(230px) rotate(0deg);
}
to {
transform: rotate(-360deg) translateX(230px) rotate(360deg);
}
}

.section-home-3 .logo img {
    width: 100%;
}

.section-home-3 .section1-radar-logos-structure {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 99;
}

.section-home-3 .search-icon svg {
    width: 24px;
    height: unset;
}

.section-home-3 .search-icon svg path {
    fill: white;
}
.section-home-3  .col-2.section1-radar-structure {
background-color: #f9f9f9;
border-top: 1px solid #eaeaea;
}
section.section.section-logos-carousel.section-logos-carousel-7 {
    height: 95px;
}

.section-logos-carousel-7 .carousel-structure-strip {
    width: calc(100% - 180px);
}

img.jewelry-image-1 {}

img.jewelry-image-1 {}
span.newline-span {
    font-weight: 600;
}
.apiRoute-hot-deals-hidden {
    display: none!important;
}
.top-deals-strip-structure{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: nowrap;
    justify-content: start;
    margin-top: 12px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-right: 80px;
    padding-bottom: 20px;
}
.top-deals-strip-lazy-loading-structure {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: nowrap;
    justify-content: start;
    margin-top: 12px;
}
.col-main-cta-button-structure {
    margin-top: 11px;
    text-align: center;
}

.col-main-cta-button-structure .button-1 {
    text-align: center;
    padding: 9px 25px 11px 25px;
}

.col-main-cta-button-structure .button-1 .arrow {
    display: none;
}
.top-deals-strip-shadow {
    background: #2f486a;
    height: 100%;
    width: 0px;
    position: absolute;
    right: 0px;
    z-index: 9999999999999999999;
    /* display: block; */
    top: 0px;
    box-shadow: 0px 0px 100px 100px #ffffff;
}
.view-more-container {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 20px;
}

.view-more-button {
    display: inline-flex;
    align-items: center;
    color: #254264;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.view-more-button:hover {
    background-color: #60a9ff21;
    border-color: #4d85c738;
}

.arrow-icon {
    margin-left: 8px;
}
.browse-button {
    display: block;
    background-color: #254264;
    border: 1px solid #254264;
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.browse-button:hover {
    background-color: #3c6ba3;
    /* color: #254264; */
    border: 1px solid #4d85c738;
}
.market-card-header[name="market-card-price-cushion-1"] .buy-indicator, .market-card-header[name="market-card-price-oval-1"] .buy-indicator,.market-card-header[name="market-card-price-emerald-1"] .buy-indicator {
    background-color: #f8f9fa;
    color: #666666;
}
span.index-title-link-icon svg {
    width: 14px;
    height: unset;
}
.mobile-sidebar-logo {
    display: flex;
}

.mobile-sidebar-logo-title {
    gap: 12px;
    padding: 2px 0px;
    color: #264264;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 25px;
    font-weight: 400;
    margin-top: -4px;
    margin-left: -3px;
}

/* Mobile Navigation Sections */
.mobile-nav-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-nav-section:last-child {
    border-bottom: none;
}

.mobile-nav-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 8px 20px;
    margin-bottom: 8px;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #1f2937;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 15px;
}

.mobile-nav-item:hover {
    background-color: #f3f4f6;
    color: #2563eb;
}

.mobile-nav-item svg {
    margin-right: 12px;
    flex-shrink: 0;
    color: #6b7280;
    transition: color 0.2s ease;
}

.mobile-nav-item:hover svg {
    color: #2563eb;
}

.mobile-nav-item span {
    flex: 1;
}
p.section-subtitle {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
}
.section.section.section2 p.section-subtitle {
    margin-bottom: 0px;
    margin-top: -20px;
}
.pillar-hero{
        padding: 120px 20px!important;
        background:#254264!important;
}
.button-1.button-2 {
    background-color: transparent;
    color: #274265;
    font-weight: 500;
    border: 1.5px solid rgb(39 66 101 / 20%);
    padding: 0px 35px 0px 35px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-2 .arrow {
    display: none;
}
/* Hero Trust Row */
.jewelry-hero-trust-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.jewelry-hero-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #254264;
    font-weight: 500;
}

.jewelry-hero-trust-item svg {
    flex-shrink: 0;
}
.main-buttons-structure {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 60px;
}

.main-buttons-structure .button-1 {height: 100%;}

span.sec-line {
    display: block;
    font-weight: 700;
}

span.first-line {
    font-weight: 400;
}
span.jewelry-hero-eyebrow {
    display: none;
}
.button-1:hover {
    background: #192c43;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgb(55 78 102 / 44%);
}
.button-1.button-2:hover {
    background: transparent;
    transform: translateY(-2px);
    box-shadow: unset;
}
.calculator-button {
    padding: 0px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 57px;
    border: unset;
    width: 200px;
    gap: 1px;
}

.calculator-button .arrow img {
    top: 2px;
    width: 30px;
}

.calculator-button span.arrow {
    margin-left: 0px;
}

.button-1.main-tool-button-next.calculator-button {}
.jewelry-categories {
    padding: 80px 0;
}

.jewelry-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0px;
}

.jewelry-category-card {
    text-decoration: none;
    display: block;
    border-radius: 0px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}


.jewelry-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.jewelry-category-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--jewelry-bg-light);
    width: 100%;
    height: 180px;
}

.jewelry-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.jewelry-category-card:hover .jewelry-category-image img {
    transform: scale(1.05);
}

.jewelry-category-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #614534, transparent);
    padding: 24px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 40px;
    display: flex;
    align-items: flex-end;
}

.jewelry-category-card:hover .jewelry-category-overlay {
    opacity: 1;
}

.jewelry-category-cta {
    color: var(--jewelry-white);
    font-weight: 500;
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.jewelry-category-info {
    /* padding: 20px; */
    /* text-align: center; */
    /* border-right: 1px solid var(--jewelry-border); */
    /* border-bottom: 1px solid var(--jewelry-border); */
    padding: 16px;
    text-align: center;
}

.jewelry-category-name {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: #264264;
}

.jewelry-category-count {
    font-size: 14px;
    color: var(--jewelry-text-light);
    margin: 0;
    display: none;
}

section.section.section-jewelry-category-strip {
    margin-top: 50px;
}


.prices-dropdown .dropdown-item-icon-wrap {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HORIZONTAL-OVERFLOW CONTAINMENT (2026-07-14)
 *
 * The homepage scrolled sideways on every viewport below ~1477px - including a
 * 1366x768 laptop, one of the most common screens in use. Measured cause (headless
 * Chrome, DOM walk): `.notification-box-1`, an absolutely-positioned decorative
 * price bubble on the hero image. It sits at left:362px with width:287px inside a
 * container that ends before that, so its right edge lands at exactly 1477px and
 * drags the document width with it. Its `left` overrides are commented out in the
 * media block, so it has no responsive positioning at all.
 *
 * `overflow-x: clip` and NOT `hidden`, deliberately:
 *   - `hidden` turns the element into a scroll container, which breaks
 *     `position: sticky` descendants (our article rail) and can hijack anchor
 *     scrolling.
 *   - `clip` only clips. Crucially it also PERMITS `overflow-y: visible`, which
 *     `hidden` does not - so vertical scrolling and the sticky rail are untouched.
 *
 * This contains any decorative overflow on any page, not just this one box - which
 * is the point: the class of bug, not the instance.
 * ═══════════════════════════════════════════════════════════════════════════ */
.mainStructure {
    overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DIAMONDS NAV DROPDOWN (2026-09-07) — AI Diamond Finder promotion
 *
 * The nav bar was full at six items, so the Finder became a second entry under
 * "Diamonds" rather than a seventh slot. That reuses the existing Prices
 * dropdown machinery (.navBarButton-dropdown / .navBarDropdown / .dropdown-item)
 * unchanged; only two things genuinely differ and both are declared here:
 *
 *   1. .navBarDropdown is hard-coded to a two-column, 640px-minimum mega grid.
 *      With one column that renders as a half-empty 640px slab with a stray
 *      divider down the middle of nothing. --single collapses it to one column
 *      at a width sized to the content.
 *   2. The "New" pill, which the Prices dropdown has no equivalent of.
 *
 * Nothing above is modified, so the Prices dropdown is byte-for-byte unaffected.
 * ═══════════════════════════════════════════════════════════════════════════ */
.navBarDropdown--single {
    grid-template-columns: 1fr;
    min-width: 348px;
}

/* The divider only exists to separate two columns; there is no second column. */
.navBarDropdown--single .dropdown-section:first-child {
    border-right: none;
}

.navBarDropdown--single .dropdown-section {
    padding: 22px 18px;
}

.navBarDropdown--single .dropdown-section-title {
    margin-bottom: 14px;
}

.navBarDropdown--single .dropdown-item:last-child {
    margin-bottom: 0;
}

/* Icon tints, matching the di-* set already defined for the Prices dropdown:
   the classic search stays in the neutral brand navy, the Finder carries the
   gold the Finder page itself uses as its only accent. */
.di-search {
    background: linear-gradient(135deg, #eef2f7 0%, #dfe7f1 100%);
    color: #264264;
    border: 1px solid rgba(38, 66, 100, 0.1);
}
.di-search svg { stroke: #264264; }

.di-finder {
    background: linear-gradient(135deg, #fdf8e8 0%, #f7edcd 100%);
    color: #a8871c;
    border: 1px solid rgba(201, 162, 39, 0.18);
}
.di-finder svg { stroke: #a8871c; }

/* "New" pill. Small, gold, and set in the same uppercase micro-type as the
   section titles so it reads as a system label rather than a sticker. */
.dropdown-item-new {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #c9a227;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 1.5px;
    line-height: 1.4;
}

/* Mobile sidebar equivalent. `.mobile-nav-item span { flex: 1 }` already exists
   and is (0,1,1) specificity - HIGHER than a bare `.mobile-nav-new` - so it wins
   on specificity regardless of source order and stretches the pill across the
   whole row and out past the sidebar edge (observed, not theorised). The
   selector is qualified with the parent to outrank it; source order alone is
   not enough here. The label span keeps flex:1, which is what right-aligns the
   pill without needing a margin. */
.mobile-nav-item .mobile-nav-new {
    flex: 0 0 auto;
    align-self: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: #c9a227;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
}