body {
    background-color: #fffbe6;
}

/* 1st container */
.heading-1 {
    font-size: 50px;
    text-align: center;
    color: #d8830c;
}

.card-container-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-1 img {
    border-radius: 12px;
}

.card-1 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 12px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-1:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-1-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-1-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.title-description {
    font-size: 20px;
    font-family: EB Garamond;
    margin-top: 0px;
    color: black;
    text-align: center;
}

.btn-price {
    font-size: 20px;
    text-align: center;
}

.buy-now-btn {
    background-color: #31443b;
    color: white;
    border-radius: 10px;
    padding: 12px 22px;
    margin: 0px 70px;
    margin-bottom: 5px;
    margin-top: 0;
    font-size: 15px;
    cursor: pointer;
}

.buy-now-btn:hover {
    background-color: #192d1d;
}

.card-2 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-2:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-2-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-2-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-3 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-3:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-3-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-3-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-4 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-4:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-4-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-4-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/* 2nd container */
.card-container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-2 img {
    border-radius: 12px;
}

.card-5 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-5:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-5-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-5-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-6 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-6:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-6-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-6-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-7 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-7:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-7-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-7-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-8 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-8:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-8-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-8-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/* Earrings 3rs container*/
.heading-2 {
    font-size: 50px;
    text-align: center;
    color: #d8830c;
}

.card-container-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-3 img {
    border-radius: 12px;
}

.card-9 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-9:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-9-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-9-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-10 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-10:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-10-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-10-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-11 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-11:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-11-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-11-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-12 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-12:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-12-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-12-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/* 4th container */
.card-container-4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-4 img {
    border-radius: 12px;
}

.card-13 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-13:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-13-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-13-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-14 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-14:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-14-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-14-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-15 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-15:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-15-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-15-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-16 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-16:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-16-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-16-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/* Necklace 5th container*/
.heading-3 {
    font-size: 50px;
    text-align: center;
    color: #d8830c;
}

.card-container-5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-5 img {
    border-radius: 12px;
}

.card-17 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-17:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-17-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-17-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-18 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-18:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-18-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-18-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-19 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-19:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-19-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-19-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-20 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-20:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-20-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-20-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/* 6th container */
.card-container-6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-7 img {
    border-radius: 12px;
}

.card-21 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-21:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-21-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-21-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-22 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-22:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-22-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-22-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-23 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-23:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-23-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-23-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-24 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-24:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-24-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-24-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/*  Bracelate 7th container*/
.heading-4 {
    font-size: 50px;
    text-align: center;
    color: #d8830c;
}

.card-container-7 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-container-8 img {
    border-radius: 12px;
}

.card-25 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-25:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-25-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-25-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-26 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-26:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-26-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-26-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-27 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-27:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-27-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-27-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-28 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-28:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-28-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-28-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

/* 6th container */
.card-container-8 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.card-29 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-29:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-29-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-29-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-30 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-30:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-30-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-30-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-31 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-31:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-31-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-31-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

.card-32 {
    background-color: white;
    width: 260px;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #333333;
    border: 0.5px solid #737373;
    cursor: pointer;
}

.card-32:hover {
    box-shadow: 0px -1px 10px 3px #333333;
    transition: 0.5s;
    background-color: #effcef;
}

.card-32-img {
    height: 210px;
    width: 200px;
    display: block;
    margin: 10px auto;
    border: solid black 1px;
}

.card-32-title {
    margin-bottom: 10px;
    padding: 0;
    font-size: 30px;
    font-family: Copse;
    color: #03203A;
    text-align: center;
}

@media (max-width: 550px) {
    .heading-1 {
        margin-top: 70px;
    }
}

@media (max-width: 600px) {
    .heading-1 {
        padding-top: 30px;
    }
}

@media (max-width: 900px) {
    .heading-1 {
        padding-top: 30px;
    }
}

@media (max-width: 1100px) {
    .heading-1 {
        padding-top: 30px;
    }
}