body {
    max-width: 100%;
    overflow-x: hidden;
}

.group1 {
    width: 150.015px;
    height: 32px;
    flex-shrink: 0;
}

.header {
    display: flex;
    width: auto;
    /* padding: 20px 70px; */
    padding: 20px 20px;
    justify-content: space-between;
    align-items: center;
    max-width: 100vw;
}

.group2 {
    border-radius: 4px;
    border: 1px solid var(--Font-Mixer-Gray-200, #EEE);
    background: var(--Font-Mixer-White, #FFF);
    display: flex;
    width: 400px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.group2para {
    color: var(--Primary-Black, #181C14);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
    line-height: 18px;
    /* 128.571% */
    width: 100%;
    padding: 8px 12px;
    border: none;
}

.headerdropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Ensure the SVG does not interfere with clicks */
}

/*style the arrow inside the select element:*/
.headerdropdownpara:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

.headerdropdownpara {
    color: var(--Font-Mixer-Gray-800-Icon, #424242);
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    outline: none;
    line-height: 16px;
    margin-bottom: 0px;
    /* 133.333% */
    appearance: none;
    /* Hides default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    /* Ensures no background overlaps */
    border: none;
    width: 100%;
    /* padding-right: 24px; */
    /* Add space for custom SVG */
}

.headerdropdownsvg {
    display: none;
}

.headerbtn1 {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 2px solid var(--Font-Mixer-Primary-900-Base, #00179E);
    background-color: transparent;
    color: var(--Font-Mixer-Primary-900-Base, #00179E);

    /* Button V1 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    /* 114.286% */
}

.headerbtn2 {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    color: var(--Font-Mixer-Primary-900-Base, #00179E);
    background: var(--Font-Mixer-White, #FFF);
    /* Button V1 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    text-decoration: none;
    font-weight: 600;
    border: white;
    line-height: 16px;
    /* 114.286% */
}

.group3 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rectangle {
    width: 1px;
    align-self: stretch;
    background: var(--Font-Mixer-Gray-200, #EEE);
}

.signupbtn {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 2px solid var(--Font-Mixer-Primary-900-Base, #00179E);
    background: var(--Font-Mixer-Primary-900-Base, #00179E);
    color: var(--Font-Mixer-White, #FFF);

    /* Button V1 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    /* 114.286% */
}

.homebanner {
    display: flex;
    width: auto;
    margin: 0 auto;
    height: 344px;
    padding: 56px 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid #D0DAFB;
    /* background: linear-gradient(0deg, rgba(246, 248, 254, 0.80) 0%, rgba(246, 248, 254, 0.80) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat, url(<path-to-image>) lightgray 1280px 525.829px / -100% -231.645% no-repeat; */
    background-blend-mode: normal, soft-light, normal;
    background-color: rgb(117, 117, 228);
    /* max-width: min-content; */
}

.homebannertexth {
    align-self: stretch;
    color: var(--Font-Mixer-Primary-900-Base, #00179E);
    text-align: center;
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    margin-bottom: 0px;
    /* 144.444% */
}

.homebannertextp {
    color: var(--Primary-Black, #181C14);
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    align-self: stretch;
}

.homebannerbtn {
    display: flex;
    align-items: center;
    gap: 16px;
}

.homebannertext {
    display: flex;
    width: 839px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.dotmenu {
    display: flex;
    width: 24px;
    height: 24px;
    padding: 2px 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 0px transparent;
    background-color: transparent;
}

.fontcategories {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.selectedchip {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    background: #D0DAFB;
}

.selectedchippara {
    color: var(--Font-Mixer-Primary-900-Base, #00179E);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 0px;
    /* 114.286% */
}

.homebannermain {
    padding: 20px;
}

.selectionchip {
    display: flex;
    /* padding: 6px 12px; */
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: var(--Font-Mixer-Gray-200, #EEE);
}

.selectionchippara {
    -webkit-text-stroke-width: 1;
    -webkit-text-stroke-color: var(--Font-Mixer-Gray-800-Icon, #424242);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;

    line-height: 16px;
    /* 114.286% */
}

.selectiontab-dropdown {
    display: flex;
    padding: 6px 8px 6px 12px;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid var(--Font-Mixer-Primary-900-Base, #00179E);
    background: var(--Font-Mixer-Primary-50, #E8EAFA);
    /* width: 146px; */
}

.anoption {
    left: -10% !important;
}

.selectiontab-dropdown p {
    color: var(--Font-Mixer-Primary-900-Base, #00179E);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 0px;
    /* 114.286% */
}

.selectiontabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Responsive styles */
@media (max-width: 1200px) {
    .group2 {
        width: 300px;
        /* Reduce the search bar size on medium screens */
    }

    .homebanner {
        padding: 40px 100px;
        /* Adjust padding for smaller screens */
        height: auto;
        /* Allow flexible height */
    }

    .homebannertext {
        width: 100%;
        /* Make text container full-width */
        text-align: center;
    }
}

@media (max-width: 768px) {


    .group1 {
        margin-bottom: 10px;
        /* Add spacing for stacked elements */
    }

    .group2 {
        width: 100%;
        /* Full-width search bar */
    }

    .homebanner {
        padding: 20px;
    }

    .homebannertext {
        align-items: center;
    }

    .homebannerbtn {
        justify-content: center;
        gap: 10px;
        /* Reduce button gap */
    }
}

@media (max-width: 480px) {


    .headerbtn1,
    .headerbtn2,
    .signupbtn {
        font-size: 12px;
        /* Adjust button text size */
        padding: 6px 8px;
        /* Reduce button padding */
    }

    .homebannertexth {
        font-size: 24px;
        /* Reduce font size for heading */
        line-height: 32px;
    }

    .homebannertextp {
        font-size: 14px;
        /* Reduce font size for paragraph */
        line-height: 20px;
    }
}

.headerdropbtn {
    border: none;
    background-color: transparent;
    margin: 0px;
    padding: 0px;
}

/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.custom-select select {
    /* display: none; */
    /*hide original SELECT element:*/
}

.select-selected {
    color: black;
}

/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 0px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: black transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent black transparent;
    top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
    color: black;
    padding: 8px 16px;
    /* border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; */
    cursor: pointer;
    user-select: none;
    background-color: white;
}

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.hthree {
    font-family: Poppins;
    font-size: 27px;
    font-weight: 600;
    line-height: 44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 331px;
    height: 44px;
    top: 558px;
    left: 80px;
    gap: 0px;
    opacity: 0px;
    color: rgba(8, 130, 149, 1);
}

.fontpaircards {
    padding: 20px;
    max-width: -webkit-fill-available;
}

.fontcard1 {
    width: 100%;
    height: auto;
    top: 622px;
    left: 80px;
    padding: 32px 0px 0px 0px;
    /* gap: 32px; */
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    padding: 32px;
    margin-top: 30px;
    display: grid;
    text-decoration: none;
}

.fontcard1:nth-child(4n + 1) {
    background-color: #F9F9F9;
}

.fontcard1:nth-child(4n + 2) {
    background-color: #F6F9FE;
}

.fontcard1:nth-child(4n + 3) {
    background-color: #FEF6FE;
}

.fontcard1:nth-child(4n + 4) {
    background-color: #F6FEFC;
}

.fontpairsrow .col-md-6 {
    width: 49%;
    /* padding: 0px; */
}

.variant-modal {
    border-radius: 24px !important;
}

.dot-menu {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 24px;
}

.menu-content {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 150px;
    border-radius: 5px;
}

.menu-content a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black;
    font-family: Poppins;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    vertical-align: bottom;

}

.menu-content a:hover {
    background-color: #f0f0f0;
}

.fontcard2 {
    width: 100%;
    height: auto;
    top: 622px;
    left: 80px;
    padding: 32px 0px 0px 0px;
    /* gap: 32px; */
    border-radius: 8px;
    border: 1px;
    opacity: 0px;

    padding: 32px;
    margin-top: 30px;
    display: grid;
    background-color: rgba(246, 249, 254, 1);
    text-decoration: none;
}

.fontcard3 {
    width: 100%;
    height: auto;
    top: 622px;
    left: 80px;
    padding: 32px 0px 0px 0px;
    /* gap: 32px; */
    border-radius: 8px;
    border: 1px;
    opacity: 0px;

    padding: 32px;
    margin-top: 30px;
    display: grid;
    background-color: rgba(254, 246, 254, 1);
    text-decoration: none;
}

.fontcard4 {
    width: 100%;
    height: auto;
    top: 622px;
    left: 80px;
    padding: 32px 0px 0px 0px;
    /* gap: 32px; */
    border-radius: 8px;
    border: 1px;
    opacity: 0px;

    padding: 32px;
    margin-top: 30px;
    display: grid;
    background-color: rgba(246, 254, 252, 1);
    text-decoration: none;

}


.fonttags {
    width: auto;
    height: auto;
    gap: 12px;
    opacity: 0.5px;
    display: flex;
}

.fonttag1 {
    width: auto;
    height: auto;
    padding: 6px 8px 6px 8px;
    gap: 4px;
    border-radius: 4px;
    border: 1px 0px 0px 0px;
    border: 1px solid rgba(33, 33, 33, 1);
    color: gray;
    opacity: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
}

.fonttag2 p,
.fonttag1 p {
    margin-bottom: 0px;
}

.fonttag2 {
    width: auto;
    height: auto;
    padding: 6px 8px 6px 8px;
    gap: 4px;
    border-radius: 4px;
    border: 1px 0px 0px 0px;
    border: 1px solid rgba(33, 33, 33, 1);
    color: gray;
    opacity: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    align-items: center;


}

.fontpairsrow {
    padding-right: 10px;
    padding-left: 10px;
    gap: 2%;
}

.fontcardtext h3 {
    width: auto;
    height: auto;
    gap: 0px;
    opacity: 0px;
    font-family: Playfair Display;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: left;
    text-underline-position: from-font;
    color: rgba(8, 130, 149, 1);
    text-decoration-skip-ink: none;

}

.fontcardtext p {
    width: auto;
    height: auto;
    gap: 0px;
    opacity: 0px;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: black;

}

.actionbar {
    width: auto;
    height: auto;
    gap: 0px;
    justify-content: space-between;
    opacity: 0px;
    display: flex;
}

.actionbuttons {
    width: auto;
    height: Hug (24px)px;
    gap: 16px;
    opacity: 0px;
    display: flex;
    align-items: center;
}

/* #pageNumbers button{
    
    margin: 0px 7px;
} */

#saveModal {
    justify-content: center !important;
    align-items: center !important;
    margin-top: auto;
    margin-bottom: auto;
    /* width: max-content; */
    /* height: auto; */
    /* margin: 0 auto;*/
}

#saveModal .modal-content {
    width: fit-content;
}


#nextPage,
#prevPage {
    border: none;
    background: transparent;
    margin: 0ox;
    padding: 0px;
    display: flex;
}

#pageNumbers .active {
    width: 32px;
    height: 32px;
    padding: 10px 10px 10px 10px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;
    background-color: rgba(16, 56, 188, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
}

#pageNumbers {
    display: flex;

}

#pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#pageNumbers button {
    border: none;
    color: rgba(16, 56, 188, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 0px;
    background: transparent;
}

#pageNumbers button {
    width: 32px;
    height: 32px;
    padding: 10px 10px 10px 10px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.actionbuttons img {
    width: 24px;
    height: 24px;
    padding: 2px 4px 2px 4px;
    gap: 10px;
    opacity: 0px;
    padding: 0px;

}

.variantsbutton {
    width: auto;
    height: auto;
    gap: 8px;
    opacity: 0px;
    display: flex;
    align-items: center;

}

.variantsbutton p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
}

.variantsbutton img {
    width: 24px;
    height: 24px;
    padding: 2px 4px 2px 4px;
    gap: 10px;
    opacity: 0px;
    padding: 0px;

}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#savefont,
#savedfont {
    display: inline-block;
    transition: opacity 300ms ease-out;
    cursor: pointer;
}

.actionbuttons .card {
    border: none;
    background-color: transparent;
}

.pagination {
    width: auto;
    height: auto;
    margin-top: 20px;
    gap: 12px;
    opacity: 0px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.arrowleft {
    width: Hug(32px) px;
    height: Hug(32px) px;
    /* padding: 8px 0px 0px 0px; */
    gap: 10px;
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-paginationbutton {
    width: 32px;
    height: 32px;
    padding: 10px 10px 10px 10px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;
    background-color: rgba(16, 56, 188, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.selected-paginationbutton span {
    color: rgba(255, 255, 255, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 0px;

}


.paginationbutton {
    width: 32px;
    height: 32px;
    padding: 10px 10px 10px 10px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.paginationbutton span {
    color: rgba(16, 56, 188, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    padding: 0px;

}

.sponsor {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.footer {
    width: auto;
    height: auto;
    top: 3944px;
    /* padding: 32px 80px 32px 80px; */
    padding: 32px 20px 32px 20px;
    gap: 24px;
    border: 1px;
    opacity: 0px;

}

.footer-top {
    width: auto;
    height: auto;
    gap: 0px;
    display: flex;
    justify-content: space-between;
    opacity: 0px;

}

.footer-top {
    width: auto;
    height: auto;
    gap: 8px;
    opacity: 0px;

}

.footer-top a {
    width: auto;
    height: auto;
    padding: 8px 12px 8px 12px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;

    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-decoration: none;
    color: rgba(0, 23, 158, 1);
}

.top-two {
    gap: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-two p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
    color: rgba(0, 23, 158, 1);
}

.top-two button {
    width: auto;
    height: auto;
    padding: 8px 12px 8px 12px;
    gap: 8px;
    border-radius: 4px;
    border: 1px;
    opacity: 0px;
    color: rgba(255, 255, 255, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    background-color: rgba(8, 130, 149, 1);
}

.footer-rectangle {
    width: auto;
    height: 1px;
    gap: 0px;
    opacity: 0px;
    background-color: rgba(238, 238, 238, 1);
    margin-top: 20px;
    margin-bottom: 20px;
}

.footer-bottom {
    width: auto;
    height: auto;
    gap: 0px;
    display: flex;
    justify-content: space-between;
    opacity: 0px;
    margin-top: 20px;
}

.bottom-one {
    display: flex;
    align-items: center;
}

.bottom-one p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(66, 66, 66, 1);
    margin: 0px;
    padding-left: 12px;
}

.bottom-two {
    width: auto;
    height: auto;
    gap: 16px;
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-two img {
    width: 20px;
    height: 20px;
    gap: 0px;
    opacity: 10px;

}

.bottom-three {
    width: auto;
    height: auto;
    padding: 8px 16px 8px 16px;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid rgba(238, 238, 238, 1);
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.bottom-three p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(66, 66, 66, 1);
    margin: 0px;

}

.burgermenu {
    display: none;
    padding: 20px;

}

.burgermenu button {
    margin-left: auto;
}

.burgericon {
    background-color: transparent;
    border: none;
    border-radius: 4px;
    display: flex;
}


@media(max-width:1100px) {
    .sponsor img {
        width: 900px;
        height: 300px;
    }
}

@media(max-width:1024px) {
    .group2para {
        font-size: 10px;
    }

    .select-selected {
        font-size: 10px;
    }

    .group2 {
        width: 280px;
        padding: 0px 12px;
    }

    .headerbtn1 {
        font-size: 10px;
    }

    .headerbtn2 {
        font-size: 10px;
    }

    .signupbtn {
        font-size: 10px;
    }
}

@media(max-width:950px) {
    .group3 {
        gap: 8px;
    }
}

@media(max-width:900px) {
    .logo {
        width: 125px;
        height: 30px;
    }

    .group1 {

        height: 30px;
        margin: 0px;
    }

    .group3 {
        gap: 0px;
    }

    .sponsor img {
        width: 725px;
        height: 250px;
    }
}

@media(max-width:768px) {
    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: flex !important;
    }

    .group2 {
        width: 425px;
    }

    .sponsor img {
        width: 630px;
        height: 200px;
    }

    .group1 {
        width: auto;
    }
}

@media(max-width:700px) {
    .group2 {
        width: 360px;
    }

    .group3 {
        gap: 5px;
    }

    .sponsor img {
        width: 500px;
        height: 156px;
    }

    .fontcard1,
    .fontcard2,
    .fontcard3,
    .fontcard4 {
        width: 100%;
    }
}

@media(max-width:600px) {
    .group2 {
        width: 300px;
    }

    .selectiontabs {
        display: block;
    }
}

.mobile-menu {
    display: none;
}

.mobile-search {
    display: none;
}

.burgericon img {
    width: 24px;
    height: 24px;
    border: 2px solid #00179E;
    padding: 2px;
    border-radius: 4px;
}

.chipfilter {
    display: none;
}

@media(max-width:550px) {
    .group2 {
        display: none;
    }

    .mobile-search {
        display: flex;

    }

    .mobile-search img {
        width: 20px;
        height: 20px;
    }

    .sponsor img {
        width: 430px;
        height: 130px;
    }

    .top-two button {
        text-align: center;
    }

    .fontcard1,
    .fontcard2,
    .fontcard3,
    .fontcard4 {
        font-size: 12px;
    }
}

@media(max-width:600px) {
    .footer-top {
        display: block !important;
        justify-content: center;
        align-items: center;
    }

    .mobilefottag {
        display: flex;
    }

    .top-two {
        justify-content: space-around;
    }
}

@media(max-width:440px) {
    .sponsor img {
        width: 350px;
        height: 109px;
    }

    .mobchip {
        display: none;
    }

    .headerdropdownsvg {
        width: 16px;
        height: 16px;
        background-color: transparent;
        display: flex;
        border: none;
    }

    .top-one {
        display: block;
    }

    .selectedchip {
        display: flex;
    }

    .selectiontabs {
        display: flex;
    }

    .mobile-menu {
        position: sticky;
        top: 0;
        overflow: hidden;
        background-color: white;
        z-index: 9;
        border-bottom: 1px solid gray;
    }

    .selectiontabs {
        position: sticky;
        top: 70.5px;
        overflow: hidden;
        background-color: white;
        z-index: 9;
        height: 50px;
        border-bottom: 1px solid gray;
    }

    .fontcategories {
        margin: 0px !important;
    }

    .footer-top {
        display: block;
    }

    .footer-top a {
        padding: 8px 7px 8px 7px;
        font-size: 12px;
    }

    .footer {
        padding: 32px 10px 0px 10px;
    }

    .top-two {
        padding: 0px 11px 0px 11px;

    }

    .top-two p {
        font-size: 12px;
    }

    .top-two button {
        font-size: 12px;
    }

    .mobile-rect {
        display: block !important;
    }

    .mobile-footer-bottom {
        display: block !important;
    }

    .dekstop-footer-bottom {
        display: none;
    }

    .bottom-one p {
        margin: 0 auto;
        text-align: center;
        padding: 20px;
    }

    .bottom-group1 {
        display: flex;
        justify-content: space-between;
        padding: 0px 11px 0px 11px;
    }
}

.mobile-rect {
    display: none;
}

.mobile-footer-bottom {
    display: none;
}

@media(max-width:360px) {
    .sponsor img {
        width: 290px;
        height: 95px;
    }

    .mobpagbtn {
        display: none;
    }

    .hthree {
        font-size: 20px;
        margin-bottom: -20px;
    }

    .footer-top a {
        padding: 7px 6px 7px 6px;
    }
}

@media(max-width:375px) {

    .footer-top a {
        padding: 7px 11px 7px 11px;
    }

    .mobilefottag {
        display: inline;
    }

    .mobilefottag2 {
        display: inline-block;
    }
}

.burgermenu {

    overflow: hidden;
    position: sticky;
    top: 63px;
    z-index: 999;
    background: white;
}

.signupbtn:hover {
    background-color: rgba(16, 56, 188, 1);
    border-color: rgba(16, 56, 188, 1);
    color: white;
    transition: 0.5s;
}

.top-two button:hover {
    background-color: #00179E;
    border-color: #00179E;
    transition: 0.5s;
}

.dropdown .btn:focus {
    outline: none;
    box-shadow: none;
}

.gro2 select:focus {
    outline: none;
    box-shadow: none;
}

.group2 input:focus {
    outline: none;
    box-shadow: none;
}

.fontactiondropdown:focus {
    outline: none;
    box-shadow: none;
}

.bsoff:focus {
    outline: none;
    box-shadow: none;
}

.bsoff:hover {
    color: #00179E;
}

.fornow:focus {
    outline: none;
    box-shadow: none;
}

.password-form-fields:focus {
    outline: none;
    box-shadow: none;
}

.variantsbtn:focus {
    outline: none;
    box-shadow: none;
}

.signupbtn:focus {
    outline: none;
    box-shadow: none;
}

.selectiontab-dropdown select:focus {
    outline: none;
    box-shadow: none;
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
}

.dropdownicons {
    margin-right: 4px;
}

.fornow {
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    width: auto;

}



.custom-dropdown {
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    background: transparent;
    padding: 0px;
    position: relative;
    width: 100%;
}

.selected-option {
    display: flex;
    align-items: center;
    gap: 2px;
}

.selected-option img {
    width: 14px;
    height: 14px;
}

.dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* width: 100%; */
    width: 127%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1000;
    padding: 0px;
}

.dropdown-options img {
    width: 14px;
    height: 14px;
}

.dropdown-options li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
}

.dropdown-options li:hover {
    background: #f0f0f0;
}

.dropdownicons {
    width: 20px;
    height: 20px;
}


/* new */

.modal-heading {
    font-family: Poppins;
    font-size: 21px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);
}

.variants {
    background-color: white !important;
    border: 1px solid rgba(238, 238, 238, 1);
    /* padding: 20px !important; */
    padding: 0px;
    background-color: transparent !important;
}

.variantsbutton:hover {

    background-color: transparent !important;
}

.variants:hover h3 {
    color: white !important;
    /* Change color on hover */
}

.varmod:hover {
    background-color: black !important;
}

.varmod {
    border-radius: 8px;
    margin: 4px;
    padding: 24px;
    width: 545px;
}

.variants:hover p {
    color: white !important;
}

.signup-modal-heading {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);
}

.signup-container {
    gap: 16px;
    display: grid;
    padding: 15px;
}

.signup-top {
    gap: 16px;
    display: grid;
}

.email-field {
    gap: 8px;
    display: grid;

}

.email-field p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 0, 0, 1);
    margin: 0px;
}

.form-fields {
    width: 100%;
    height: auto;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    /* color: rgba(255, 255, 255, 1); */
    border: 1px solid rgba(194, 194, 194, 1);
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.password-form-fields {
    width: 100%;
    height: auto;

    gap: 12px;
    padding: 12px 16px 12px 16px;
    border: 1px;
    opacity: 0px;
    /* color: rgba(255, 255, 255, 1); */
    border-radius: 8px;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;


}

.join {
    border-radius: 8px;
    border: 1px solid rgba(194, 194, 194, 1);
}

.join img {
    padding-right: 10px;
}

.password-field {
    gap: 8px;
    display: grid;

}

.password-field p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 0, 0, 1);
    margin: 0px;
}

.signup-btn {
    width: auto;
    height: auto;
    padding: 16px 12px 16px 12px;
    gap: 8px;
    border-radius: 4px;
    border: 1px;
    opacity: 0px;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 23, 158, 1);
    border: 1px solid rgba(0, 23, 158, 1);
    display: flex;
    justify-content: center;
}

.google-btn {
    width: auto;
    height: auto;
    padding: 16px 12px 16px 12px;
    gap: 8px;
    border-radius: 4px;
    border: 1px;
    opacity: 0px;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: black;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(194, 194, 194, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.rectangle-1 {
    border: 1px solid rgba(158, 158, 158, 1);
    height: 1px;
    width: 45%;

}

.rectangle-2 {
    border: 1px solid rgba(158, 158, 158, 1);
    height: 1px;
    width: 45%;

}

.saperation-line {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.saperation-line p {
    margin: 0px;
}

.existing-account {
    padding: 16px;
    border-radius: 8px;
    background-color: rgba(245, 245, 245, 1);
    display: grid;
    width: 416px;
    height: 77px;
    justify-content: center;
    align-content: center;
}

.existing-account p {
    color: rgba(24, 28, 20, 1);
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;

}

.existing-account button {
    color: rgba(0, 23, 158, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    background-color: transparent;
    border: none;

}

.forgot-password {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);
}

.subnav-top-1 {
    width: auto;
    height: auto;
    top: 98px;
    left: 80px;
    gap: 16px;
    opacity: 0px;
}

.subnav-top-1 h4 {
    font-family: Poppins;
    font-size: 23px;
    font-weight: 600;
    line-height: 36px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);
    margin: 0px;
}

.variants-btn {
    width: auto;
    height: auto;
    gap: 8px;
    opacity: 0px;
}

.variants-btn p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    /* color: black; */
    margin: 0px;
}

.variants-btn button {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.subnav-top-1 {
    display: flex;
    align-items: center;
}

.subnav {
    padding: 20px;
}

.lightmode {
    width: auto;
    height: auto;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    border-radius: 4px 0px 0px 4px;
    border: 1px 0px 1px 1px;
    opacity: 0px;
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(189, 189, 189, 1);
}

.darkmode {
    width: auto;
    height: auto;
    padding: 6px 8px 6px 8px;
    gap: 10px;
    border-radius: 0px 4px 4px 0px;
    border: 1px 1px 1px 0px;
    opacity: 0px;
    color: rgba(189, 189, 189, 1);
    border: 1px solid rgba(189, 189, 189, 1);
}

.colormode-toggle {
    display: flex;
}

.selectedcolormode {
    border: 1px solid rgba(189, 189, 189, 1);
    /* Highlight the active button */
    background-color: white;
}

body.light-mode {
    background-color: #fff;
    color: #000;
}

body.dark-mode {
    background-color: #000;
    color: #fff;
}

.light-selected,
.dark-selected {
    display: inline-block;
    /* Show selected images */
}

.light-unselected,
.dark-unselected {
    display: none;
    /* Hide unselected images */
}

.color-mode {
    /* color: white; */
}

.dark-mode {
    color: black;
}

body.light-mode .btnlets p {
    color: black !important;
}

body.dark-mode .btnlets p {
    color: white !important;
}

body.dark-mode .header {
    background-color: white;
}

.colortoggle {
    display: flex;
    align-items: center;
    gap: 14px;
}

.save-button2 {
    width: fit-content;
    display: flex;
    height: auto;
    top: 98px;
    left: 1189px;
    padding: 0px 10px 0px 10px;
    gap: 8px;
    border-radius: 0px 4px 4px 0px;
    border: 1px solid rgba(0, 23, 158, 1);
    opacity: 0px;
    align-items: center;
    gap: 10px;
    border-left: none;
}

.save-main {
    display: flex;
}

.save-button {
    width: fit-content;
    display: flex;
    background-color: transparent;
    height: auto;
    top: 98px;
    left: 1189px;
    padding: 0px 0px 0px 10px;
    gap: 8px;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid rgba(0, 23, 158, 1);
    opacity: 0px;
    align-items: center;
    gap: 10px;
    border-right: none;
}

.save-button p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);
    margin: 0px;
}

.rectangle-save-btn {
    width: 1px;
    height: 40px;
    gap: 0px;
    opacity: 0px;
    color: rgba(0, 23, 158, 1);
    background-color: rgba(0, 23, 158, 1);
}

.subnav-top-2 {
    display: flex;
    gap: 14px;
}

.subnav-top {
    display: flex;
    justify-content: space-between;
}

.rectangle-subnav-actionbar {
    width: 1px;
    height: 24px;
    background-color: rgba(238, 238, 238, 1);
}

.subnav-bottom-actionbar {
    display: flex;
    gap: 16px;
}

.subnav-bottom {
    border-top: 1px solid rgba(238, 238, 238, 1);
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.fonts-action h3 {
    font-family: Poppins;
    font-size: 27px;
    font-weight: 600;
    line-height: 44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);
}

.fonts-action {
    margin: 20px;
    margin-top: 0px;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    background-color: rgba(250, 250, 250, 1);
    border: 1px solid rgba(179, 234, 247, 1);
}

.fontactiondropdown {
    width: 160px;
    height: 40px;

    gap: 0px;
    border-radius: 4px;
    border: 1px solid rgba(189, 189, 189, 1);
    justify-content: space-between;
    display: flex;

    opacity: 0px;

}

.powered-by {
    width: auto;
    height: auto;
    padding: 8px 16px 8px 16px;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid rgba(238, 238, 238, 1);
    opacity: 0px;
    display: flex;
    align-items: center;
    max-width: fit-content;
}

.powered-by p {
    margin: 0px;
}

.action-2 {
    gap: 40px;
    align-items: center;
    display: flex;
}

.first-design {
    gap: 40px;
    width: auto;
    height: auto;
    display: flex;
    padding: 20px;
    justify-content: center;
}

.action-button {
    border: none;
    background-color: transparent;
    padding: 0px;
}

.first-design-sideone {
    width: auto;
    height: auto;
    padding: 30px;
    gap: 40px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    opacity: 0px;
}

.first-design-sideone img {
    width: 354px;
    height: 354px;
    gap: 0px;
    border-radius: 9px 0px 0px 0px;
    opacity: 0px;

}

.sideone-texts-buttons {
    width: auto;
    height: auto;
    gap: 21.33px;
    opacity: 0px;

}

.tittle-discription {
    width: auto;
    height: auto;
    gap: 13.33px;
    opacity: 0px;

}

.tittle-discription h2 {
    font-family: Playfair Display;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(26, 26, 26, 1);
}

.tittle-discription p {
    font-family: Montserrat;
    font-size: 10.67px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(26, 26, 26, 1);
}

.sideone-texts-buttons button {
    width: auto;
    height: auto;
    padding: 8px;
    gap: var(--Padding15x);
    border-radius: 3px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    color: white;
    border: none;
}

.side-two {
    width: 290px;
    height: 355.28px;
    padding: 16px 20px 16px 20px;
    gap: 9.63px;
    border-radius: 12px;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
}

.dropdown-sidetwo-selected {
    width: Fill (250px)px;
    height: Hug (53.88px)px;
    padding: 14px 19px 14px 19px;
    gap: 10px;
    border-radius: 8px;
    border: 0px 0px 1.2px 0px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    color: white;
}

.dropdown-sidetwo {
    width: Fill (250px)px;
    height: Hug (53.88px)px;
    padding: 14px 19px 14px 19px;
    gap: 10px;
    border: 0px 0px 1.2px 0px;
    opacity: 0px;
    border-bottom: 1.2px solid rgba(194, 194, 194, 1)
}

.dropdown-sidetwo p {
    margin: 0px;
}

.dropdown-sidetwo-selected p {
    margin: 0px
}

.secound-design {
    width: auto;
    height: auto;
    gap: 40px;
    display: flex;
    padding: 20px;
    opacity: 0px;
    justify-content: center;
}

.secound-design-sideone {
    width: 350px;
    height: auto;
    padding: 24px;
    gap: 24px;
    border-radius: 12px;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    display: grid;
    align-items: center;
    margin: 0 auto;
}

.secound-design-sideone img {
    width: 300px;
    height: 200px;
    gap: 0px;
    border-radius: 4px;
    opacity: 0px;
}

.secound-designtext {
    gap: 8px;
}

.secound-designtext h3 {
    font-family: Playfair Display;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(21, 37, 54, 1);
    margin-top: 10px;
}

.bn {
    border: none;
}

.secound-designtext p {

    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(21, 37, 54, 1);

}

.secound-design-sidetwo {
    width: auto;
    height: auto;
    gap: 48px;
    opacity: 0px;
    display: grid;

}

.secound-design-sidetwo-top {
    width: auto;
    height: auto;
    gap: 39px;
    opacity: 0px;
    display: flex;

}

.secound-design-sidetwo-top-one {
    width: auto;
    height: auto;
    padding: 32px;
    gap: 14px;
    border-radius: 16px;
    display: grid;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);


}

.design-form {
    width: auto;
    height: auto;
    gap: 8px;
    display: grid;
}

.design-form h3 {
    font-family: Playfair Display;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(26, 26, 26, 1);
}

.design-form p {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
    color: rgba(26, 26, 26, 1);
}

.design-form-fields {
    display: flex;
    gap: 10px;
}

.design-form-fields-one {
    width: 280px;
    height: auto;
    padding: 14px;
    gap: 10px;
    border-radius: 32px;
    border: 1px solid rgba(218, 218, 218, 1);
    opacity: 0px;
    background-color: rgba(245, 245, 245, 1);

}

.secound-design-sidetwo-top-one button {
    width: 176px;
    height: 36px;

    padding: 8px 20px 8px 20px;
    gap: 8px;
    border-radius: var(--CornersButtonsFull);
    opacity: 0px;
    background-color: rgba(0, 39, 45, 1);
    border-radius: 32px;
    color: white;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secound-design-sidetwo-top-one img {
    width: 258px;
    height: 40px;
}

.secound-design-sidetwo-top-two {
    width: auto;
    height: auto;
    display: grid;
    gap: 20px;
    opacity: 0px;

}

.project {
    width: 180px;
    height: auto;
    padding: 32px 20px 32px 20px;
    gap: 20px;
    border-radius: 16px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);

}

.project h3 {
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(255, 255, 255, 1);

}

.project p {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(255, 255, 255, 1);
    margin: 0px;
}

.support {
    width: 180px;
    height: auto;
    padding: 32px 20px 32px 20px;
    gap: 20px;
    border-radius: 16px;
    opacity: 0px;
    background-color: rgba(0, 39, 45, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);

}

.support h3 {
    font-family: Montserrat;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(255, 255, 255, 1);

}

.support p {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
    color: rgba(255, 255, 255, 1);
}

.secound-design-sidetwo-bottom {
    width: auto;
    height: auto;
    padding: 16px 32px 16px 32px;
    gap: 0px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);

}

.secound-design-sidetwo-bottom-sideone {
    width: auto;
    height: auto;
    gap: 24px;
    display: flex;
    align-items: center;
    opacity: 0px;

}

.secound-design-sidetwo-bottom-sideone p {

    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(26, 26, 26, 1);
    margin: 0px;
}

.secound-design-sidetwo-bottom-sideone button {
    width: Hug (120px)px;
    height: Hug (44px)px;
    padding: 12px 24px 12px 24px;
    gap: 8px;
    border-radius: 8px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    color: white;
    border: none;
}

.secound-design-sidetwo-bottom-sidetwo {
    gap: 32px;
    display: flex;
    align-items: center;

}

.secound-design-sidetwo-bottom-sidetwo img {
    width: 32px;
    height: 32px;
}

.third-design {
    background: url(../../assets/images/design-image.png);
    width: auto;
    height: 550px;
    padding: 20px;
    border-radius: 4px;
    margin: 20px;
    display: flex;
    align-items: center;
    padding-left: 110px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.text-buts-title {
    gap: 16px;

}

.edditsettings{
    gap: 8px;
    opacity: 1;
    border-radius: 4px;
    border-width: 1px;
    padding-right: 10px;
    padding-left: 10px;
    margin: 0 auto;
    align-items: center;
    display: flex;
    border: 1px solid #00179E;
}

.edditsettings p{
    color: #00179E;
}
.text-buts-title h3 {
    font-family: Playfair Display;
    font-size: 55.78px;
    font-weight: 700;
    line-height: 74.35px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(255, 255, 255, 1);
}

.text-buts-title p {
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    line-height: 21.33px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
    color: rgba(255, 255, 255, 1);
}

.text-buts button {
    border: 1px solid rgba(255, 255, 255, 1);
    padding: 15px;
    gap: 12px;
    border-radius: 4px;
    color: white;
    opacity: 0px;
    background-color: rgba(9, 21, 9, 1);
    width: 290px;
    height: 50px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-buts {
    gap: 30px;
    display: grid;
    width: 650px;
}

.fourth-design {
    gap: 40px;
    display: flex;
}

.fourth-login-form {
    width: 400px;
    height: 421px;
    padding: 40px 30px 40px 30px;
    gap: 24px;
    border-radius: 12px;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    display: grid;
}

.fouth-form-top {
    gap: 4px;
    display: grid;
}

.fouth-form-top h3 {
    font-family: Playfair Display;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(21, 37, 54, 1);

}

.fouth-form-top p {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
    line-height: 17.07px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(123, 123, 123, 1);
}

.fouth-form-bottom {
    gap: 42px;
    display: grid;
}

.fourth-fields {
    gap: 0px;
    display: grid;
}

.fourth-field-1 {
    gap: 2px;
    display: grid;
}

.fourth-design {
    padding: 20px;
}

.fourth-field-1 span {
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(126, 126, 126, 1);
}

.fourth-field-2 span {
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(126, 126, 126, 1);
}

.fourth-field-1 p {
    width: auto;
    height: auto;
    background-color: rgba(245, 245, 245, 1);

    padding: 8px 12px 8px 12px;
    gap: 12px;
    border-radius: 4px;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: black;
    opacity: 0px;

}

.fourth-field-2 p {
    width: auto;
    height: auto;
    background-color: rgba(245, 245, 245, 1);

    padding: 8px 12px 8px 12px;
    gap: 12px;
    border-radius: 4px;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: black;
    opacity: 0px;

}

.fourth-fields p {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
    line-height: 17.07px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(123, 123, 123, 1);

}

.fourth-login-form button {
    width: 176px;
    height: auto;
    padding: 8px 20px 8px 20px;
    gap: 8px;
    border-radius: 32px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    color: white;
    border: none;
}

.testimonial-card {
    width: 288px;
    height: auto;
    padding: 24px 24px 24px 24px;
    gap: 32px;
    border-radius: 12px;
    opacity: 0px;
    border: 1px solid rgba(204, 204, 204, 1);
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);

}

.quote {
    gap: 12px;
    display: grid;
}

.quote img {
    width: 40px;
    height: 40px;
}

.quote p {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.save button{
    border: none;
    background: none;
    padding: 0px;
}

.sayer {
    gap: 16px;
    display: flex;
    align-items: center;
}

.text-raiting {
    gap: 8px;
    display: grid;
}

.text-raiting h3 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
}

.pricing-card {
    width: 180px;
    height: auto;
    padding: 24px;
    gap: 24px;
    border-radius: 12px;
    border: 1px;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(227, 227, 227, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);

}

.pricing-card-top {
    gap: 8px;
}

.pricing-card-top h6 {
    font-family: Playfair Display;
    font-size: 16px;
    font-weight: 700;
    line-height: 17px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);

}

.pricing-card-details h3 {
    font-family: Playfair Display;
    font-size: 48px;
    font-weight: 700;
    line-height: 63.98px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(21, 37, 54, 1);

}

.pricing-card-details p {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.pricing-card-top button {
    width: 126px;
    height: auto;
    padding: 8px 24px 8px 24px;
    gap: 8px;
    border-radius: 8px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    border: none;
    color: white;
}

.fourth-user-comments {
    gap: 30px;
    display: grid;
}

.fourth-user-comments-top {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.fourth-user-comments-button1 {
    width: 239px;
    height: auto;
    padding: 16px;
    gap: 12px;
    border-radius: 40px;
    opacity: 0px;
    background-color: rgba(8, 130, 149, 1);
    color: white;
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    border: none;
}

.fourth-user-comments-button2 {
    width: 239px;
    height: auto;
    padding: 16px;
    gap: 12px;
    border-radius: 4px;
    opacity: 0px;
    border: 1px solid rgba(8, 131, 149, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    background-color: transparent;
}

.top-buttons {
    gap: 30px;
    display: flex;
}

.fourth-user-comments-button3 {
    width: 239px;
    height: auto;
    padding: 16px;
    gap: 12px;
    border-radius: 4px;
    opacity: 0px;
    background-color: rgba(0, 39, 45, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    color: white;
    border: none;
}

.fourth-user-comments-button4 {
    width: 239px;
    height: auto;
    padding: 16px;
    gap: 12px;
    border-radius: 4px;
    opacity: 0px;
    background-color: rgba(105, 179, 190, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    color: white;
    border: none;
}

.bottom-button {
    gap: 30px;
    display: flex;
}

.fourth-user-comments-bottom {
    gap: 22px;
    display: grid;
}

.fourth-cart {
    width: 290px;
    height: auto !important;
    gap: 0px;
    border-radius: 8px;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.12);
    height: 421px;
}

.cart-option {
    padding: 16px;
    gap: 24px;
}
.sayerimg{
    width: 54px;
    height: 54px;
}
.option-details {
    gap: 16px;
    display: flex;
}

.option-details img {
    width: 56px;
    height: 56px;
    gap: 0px;
    opacity: 0px;

}

.cart-text {
    gap: 8px;
    display: grid;
}

.cart-text h4 {
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(26, 26, 26, 1);
    margin: 0px;
}

.prices h6 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);
    margin: 0px;
}

.prices p {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(108, 108, 108, 1);
    margin: 0px;
}

.prices {
    display: flex;
    gap: 8px;
}

.cart-option {
    border-bottom: 1px solid rgba(108, 108, 108, 1);
}

.cart-last-checkout {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-chackout {
    gap: 4px;
    display: grid;
}

.total-chackout p {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
}

.total-chackout h5 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);
    margin: 0px;

}

.cart-last-checkout button {
    width: 96px;
    height: auto;
    padding: 8px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;
    color: white;
    background-color: rgba(0, 39, 45, 1);
    border: none;
    font-family: Inter;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.other-like-headings {
    background-color: rgba(232, 234, 250, 1);
    top: 2398px;
    padding: 48px 20px 48px 20px;
    gap: 20px;
    opacity: 0px;


}

.other-like-paragraph {
    background-color: rgba(225, 247, 252, 1);
    top: 2398px;
    padding: 48px 20px 48px 20px;
    gap: 20px;
    opacity: 0px;


}

.other-like-both {
    background-color: rgba(250, 250, 250, 1);
    top: 2398px;
    padding: 48px 20px 48px 20px;
    gap: 20px;
    opacity: 0px;


}


.top-header {
    display: flex;
    justify-content: space-between;
}

.top-header h3 {
    font-family: Poppins;
    font-size: 27px;
    font-weight: 600;
    line-height: 44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);

}

.top-header a {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-decoration: none;
    color: black;
}

.selection-tab-one a {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(33, 33, 33, 1);
    margin: 0px;
    text-decoration: none;
}

.selection-tab-one {
    gap: 24px;
    display: flex;
}

.selection-tab {
    padding: 20px;
}

.selection-tab-two a {
    text-decoration: none;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 88px;
    padding: 8px 12px 8px 12px;
    gap: 4px;
    border-radius: 4px;
    border: 2px;
    opacity: 0px;
    color: rgba(0, 23, 158, 1);
    border: 2px solid rgba(0, 23, 158, 1);
    display: flex;
    align-items: center;
}

.selection-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.my-collecitons {
    top: 169px;
    left: 80px;
    gap: 40px;
    opacity: 0px;

}

.my-collection-list-top h4 {
    font-family: Poppins;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);

}

.p20 {
    padding: 20px;
}

.my-collection-tab-selected {
    width: 300px;
    padding: 12px;
    gap: 16px;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    border: 1px solid rgba(0, 23, 158, 1);
    background-color: rgba(232, 234, 250, 1);
    display: flex;
    align-items: center;

}

.w30 {
    width: 30%;
}

.my-collection-tab-selected p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
}

.mylikes-tab-selected {
    color: #00179E !important;

}

.my-collection-tab {
    width: 300px;
    padding: 12px;
    gap: 16px;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;

}

.my-collection-tab p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0px;
}

.my-collection-list-bottom {
    gap: 24px;
    display: grid;
}
#font-settings-dropdown{
    height: 75vh;
    overflow-y: scroll;
    top: 0px;
}
.my-collection-list {

    padding: 32px;
    gap: 32px;
    max-height: 628px;
    overflow-x: hidden;
    border-radius: 12px;
    border: 1px;
    opacity: 0px;
    background: rgba(250, 250, 250, 1);
    border: 1px solid rgba(224, 224, 224, 1);
    height: fit-content;
    align-items: center;
    display: grid;
    justify-content: center;
}

.mycollection-row {
    --bs-gutter-x: 0rem;
}


.m24 {
    margin-bottom: 24px;
}

.collection-card-headings {
    font-family: Playfair Display;
    font-size: 40px;
    font-weight: 700;
    line-height: 53.32px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(8, 130, 149, 1);

}

.collection-card-para {
    font-size: 12px !important;
}

.collection-font-card {
    width: 100%;
    height: auto;
    top: 622px;
    left: 80px;
    padding: 32px 0px 0px 0px;
    /* gap: 32px; */
    border-radius: 8px;
    border: 1px;
    opacity: 0px;

    padding: 32px;
    margin-top: 30px;
    display: grid;
    background-color: rgba(255, 255, 255, 1);
    text-decoration: none;
    border: 1px solid rgba(238, 238, 238, 1)
}

.save-date {
    text-align: right;
    margin-bottom: 0px;
    margin-top: 10px;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: right;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(117, 117, 117, 1);

}

.mylikes-heading h2 {
    font-family: Poppins;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);

}

.mylikes-heading p {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(97, 97, 97, 1);
    margin-bottom: 0px;
}

.mylikes-searchbar input {
    width: 509px;
    height: 44px;
    padding: 12px 12px 12px 50px;
    /* Adjust padding-left for text to leave space for the icon */
    border-radius: 4px;
    border: 1px solid rgba(238, 238, 238, 1);
    background: url('../../assets/images/search-font-icon.png') no-repeat;
    background-size: 20px 20px;
    /* Adjust the size of the image */
    background-position: 15px center;
    /* Add padding to the left and center vertically */
    font-size: 14px;
    /* Adjust font size if needed */
}

.mylikes-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.likedcard {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);
    width: 100%;
    height: auto;
    top: 622px;
    left: 80px;
    padding: 32px 0px 0px 0px;
    /* gap: 32px; */
    border-radius: 8px;
    opacity: 0px;
    padding: 32px;
    margin-top: 30px;
    display: grid;
    text-decoration: none;
}

.liked-cards .row {
    row-gap: 16px;
    column-gap: 0px;
}

.profile-info {

    padding: 32px;
    gap: 48px;
    border-radius: 12px;
    border: 1px;
    opacity: 0px;
    border: 1px solid rgba(224, 224, 224, 1);
    display: grid;
    color: rgba(250, 250, 250, 1);

}

.profile-heading h2 {
    font-family: Poppins;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);

}

.profile-heading p {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(97, 97, 97, 1);
}

.profileimage {
    display: grid;
    align-items: center;
    justify-content: center;
}

.profileimage img {
    margin: 0 auto;
}

.profile-info .col-md-6 input {
    width: -webkit-fill-available;
    height: 44px;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    display: grid;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    border: 1px solid rgba(194, 194, 194, 1);
    background-color: rgba(255, 255, 255, 1);

}

.profile-info .col-md-12 input,
.profile-password .col-md-12 input {
    width: -webkit-fill-available;
    height: 44px;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    display: grid;
    border: 1px solid rgba(194, 194, 194, 1);
    background-color: rgba(255, 255, 255, 1);

}

.ml10 {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.profile-info .col-md-12,
.profile-password .col-md-12 {
    padding: 0px;
}

.profile-info .col-md-6 {
    padding: 0px;
}

.profile-info {
    color: rgba(0, 0, 0, 1);
    background-color: rgba(250, 250, 250, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.profile-password {
    width: 470px;
    height: 493px;
    padding: 32px;
    gap: 24px;
    border-radius: 12px;
    opacity: 0px;
    background-color: rgba(250, 250, 250, 1);
    border: 1px solid rgba(224, 224, 224, 1);

}

.profile-password button,
.profile-info button {
    width: 173px;
    height: 40px;
    padding: 12px 24px 12px 24px;
    gap: 8px;
    border-radius: 4px;
    border: 1px;
    opacity: 0px;
    border: 1px solid rgba(0, 23, 158, 1);
    background-color: rgba(0, 23, 158, 1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;

}

.profile-password .row {
    gap: 20px;
}

.profile-info .row {
    row-gap: 20px;
}

.profile-updation-row {
    --bs-gutter-x: 0rem;
    justify-content: space-between;
}

#font-settings-dropdown {
    position: absolute;
    right: 0;
    margin: 10px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding-left: 0px;
    padding-right: 0px;
}

.nav-item {
    width: 180px;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.dropdown-content {
    width: 400px;
    padding: 16px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: Arial, sans-serif;
}

.nav-tabs {
    margin-bottom: 16px;
    border-bottom: none;
}

.nav-tabs .nav-item .nav-link {
    color: rgba(0, 23, 158, 1);
    border: none;
    padding: 8px 12px;
    font-weight: bold;
    cursor: pointer;
}

.nav-tabs .nav-link.active {
    border: 2px solid rgba(0, 23, 158, 1);
    border-radius: 4px;
    color: rgba(0, 23, 158, 1);
}

.font-settings {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.font-settings th,
.font-settings td {
    border: 1px solid #ddd;
    padding: 8px;

    text-align: center;
}

.font-settings th {
    background-color: rgba(225, 247, 252, 1);
    font-weight: bold;
    color: rgba(8, 130, 149, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    height: 48px;
    border: none;
}

.font-settings select {
    width: 100%;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.actions {
    display: flex;
    justify-content: end;
    gap: 8px;
    margin-top: 16px;
}

.actions .btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.actions .btn-primary {
    background-color: rgba(0, 23, 158, 1);
    color: #fff;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.actions .btn-secondary {

    color: rgba(0, 23, 158, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    background-color: transparent;

}

.style-name {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left !important;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);
    width: 100px
}

.style-data td {
    border: none !important;
    border-bottom: 1px solid rgba(238, 238, 238, 1) !important;
    border-bottom: 1px solid black;
}

.style-data select {
    background-color: rgba(232, 234, 250, 1);
    border: 1px solid rgba(0, 23, 158, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: rgba(0, 23, 158, 1);

}

.style-data select:focus {
    outline: none;
    box-shadow: none;
}





.font-assignment {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    background-color: transparent;

    border: none;
    font-family: Arial, sans-serif;
}

.font-assignment th,
.font-assignment td {
    border: 1px solid #ddd;
    padding: 12px 8px;
    text-align: left;
}

.font-assignment th {
    background-color: rgba(225, 247, 252, 1);
    font-weight: bold;
    color: rgba(8, 130, 149, 1);
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    height: 48px;
    border: none;
}

.font-assignment select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}



.actions .btn {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.info-img {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    /* Background color */
    z-index: 1000;
    transition: box-shadow 0.3s ease;
    /* Smooth transition for shadow */
}

.header.scrolled {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


body {
    margin: 0;
    padding-top: 80px;
    /* Match the header height */
}

#secondary-bar.fixed {
    background-color: white;
}

.subnav {
    position: sticky;
    top: 0;
}

.fontcard1:hover {
    background-color: rgba(33, 33, 33, 1);
}

.fontcard1:hover h3 {
    color: white;
}

.fontcard1:hover .fontcardtext p {
    color: white;
}

.fontcard1:hover .fonttag1 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard1:hover .fonttag2 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard1:hover .fonttag1 {
    color: rgba(158, 158, 158, 1);
}

.fontcard1:hover .fonttag2 {
    color: rgba(158, 158, 158, 1);
}

.fontcard1:hover .variantsbutton p {
    color: rgba(158, 158, 158, 1);
}



.fontcard2:hover {
    background-color: rgba(33, 33, 33, 1);
}

.fontcard2:hover h3 {
    color: white;
}

.fontcard2:hover .fontcardtext p {
    color: white;
}

.fontcard2:hover .fonttag1 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard2:hover .fonttag2 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard2:hover .fonttag1 {
    color: rgba(158, 158, 158, 1);
}

.fontcard2:hover .fonttag2 {
    color: rgba(158, 158, 158, 1);
}

.fontcard2:hover .variantsbutton p {
    color: rgba(158, 158, 158, 1);
}

.fontcard3:hover {
    background-color: rgba(33, 33, 33, 1);
}

.fontcard3:hover h3 {
    color: white;
}

.fontcard3:hover .fontcardtext p {
    color: white;
}

.fontcard3:hover .fonttag1 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard3:hover .fonttag2 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard3:hover .fonttag1 {
    color: rgba(158, 158, 158, 1);
}

.fontcard3:hover .fonttag2 {
    color: rgba(158, 158, 158, 1);
}

.fontcard3:hover .variantsbutton p {
    color: rgba(158, 158, 158, 1);
}

.fontcard4:hover {
    background-color: rgba(33, 33, 33, 1);
}

.fontcard4:hover h3 {
    color: white;
}

.fontcard4:hover .fontcardtext p {
    color: white;
}

.fontcard4:hover .fonttag1 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard4:hover .fonttag2 {
    border-color: rgba(158, 158, 158, 1);
}

.fontcard4:hover .fonttag1 {
    color: rgba(158, 158, 158, 1);
}

.fontcard4:hover .fonttag2 {
    color: rgba(158, 158, 158, 1);
}

.fontcard4:hover .variantsbutton p {
    color: rgba(158, 158, 158, 1);
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

.fontpaircards {
    padding: 16px 32px;
}

#existingCollectionInput {
    width: 480px;
    height: auto;
    padding-top: 48px;
    gap: 24px;
    border-radius: 8px 8px 0px 0px;
    opacity: 0px;

}

#existingCollectionForm,
.conta {
    padding-right: 32px;
    padding-left: 32px;
}

.savemod-btn {
    width: -webkit-fill-available;
    width: 480px;
    height: 78px;
    padding: 20px 16px 20px 16px;
    gap: 10px;
    border-radius: 0px 0px 8px 8px;
    border: 1px;
    background: #00179E;
    border: 1px solid #00179E;
    color: white;
    opacity: 0px;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#saveModal .modal-content {
    border-radius: 9px;
}

.savemodal-crossvec {
    width: 16px;
    height: 16px;
    border: none;
    display: flex;
    align-items: center;
    width: -webkit-fill-available;
    justify-content: end;

    background: transparent;
}

.savemodal-crossvec img {
    width: 16px;
    height: 16px;
}

#existingCollectionsList {
    height: 300px;
    overflow: auto;
}

#existingCollectionInput h2 {
    font-family: Poppins;
    font-size: 24px;
    margin: 0px;
    font-weight: 600;
    line-height: 48px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

#existingCollectionInput span {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.collection-item {
    width: auto;
    height: 64px;
    padding: 12px;
    gap: 16px;
    border-radius: 8px;
    border: 1px 0px 0px 0px;
    opacity: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #C4C9F2;
}

.conta-top h3 {
    font-family: Poppins;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

#newCollectionInput {
    width: 480px;
    /* height: 522px; */
    top: 5117px;
    left: 17142px;
    padding: 32px;
    gap: 16px;
    border-radius: 12px;
    opacity: 0px;
    display: grid;
}

.newcolsavebtn {
    width: 196px;
    height: 52px;
    padding: 16px;
    gap: 12px;
    border-radius: 4px;
    opacity: 0px;
    background: #00179E;
    color: white;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    border: none;
}

.newcolcancelbtn {
    width: 196px;
    height: 52px;
    padding: 16px;
    gap: 12px;
    border-radius: 4px;
    opacity: 0px;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    border: 1px solid #00179E;
    color: #00179E;
    background: transparent;
}

.newcolbuttons {
    display: flex;
    justify-content: space-between;
}

#collectionName {
    width: 416px;
    height: 50px;
    padding: 16px;
    gap: 12px;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    border: 1px solid #C2C2C2;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #181C14;


}

.name-inputfield {
    gap: 8px;
    display: grid;
}

.descp-inputfield {
    gap: 8px;
    display: grid;
}

.descp-inputfield textarea {
    width: 416px;
    height: 144px;
    padding: 16px;
    gap: 12px;
    border-radius: 8px;
    border: 1px;
    opacity: 0px;
    border: 1px solid #C2C2C2
}

.collection-item button {
    display: flex;
    /* color: wheat; */
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #FFFFFF;
    align-items: center;
    border: 1px solid #00179E;
    justify-content: center;
    width: 60px;
    height: 36px;
    padding: 8px 12px 8px 12px;
    gap: 8px;
    border-radius: 4px;
    border: 1px;
    background: #00179E;
    border: 1px solid #00179E
}

#existingCollectionsList {
    gap: 16px;
    display: flex;
    flex-direction: column;
}

.success-modal-bod h4 {
    font-family: Poppins;
    font-size: 28px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.success-modal-bod button {

    width: 236px;
    height: 52px;
    padding: 12px;
    gap: 8px;
    border-radius: 4px;
    opacity: 0px;
    border: 1px solid #2547F0;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.5px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #2547F0;
}

.success-modal-bod button:hover {
    background-color: transparent;
    color: #2547F0;
}

.gro2 select {
    border: none;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.selectionchip .selected {
    background: #D0DAFB;
    color: #00179E;

}

.chipsel {
    padding: 6px 12px;

}

.fontpaircard-anch {
    color: inherit;
    text-decoration: none;
}

#variantsModal {
    /* align-items: center; */
    padding: 20px;
}

#variantsModal:hover {
    color: inherit;
}

.collection-noitem h3 {
    font-family: Poppins;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0%;
    color: #000000;

}

.collection-noitem span {
    font-family: Poppins;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #616161;

}