@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
.plus-jakarta-sans-fonts {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
:root {
    --main-font: 'Plus Jakarta Sans';
    --white-color: #ffffff;
    --black-color: #000;
    --header-color: #121318;
    --background-color: #fff;
    --box-bg-color: #1F2029;
    --line-color: #292A33;
    --font-secondary-color: #D3D3D3;
    --yello-color: #FFD764;
    --green-color: #6FC476;
    --red-color: #FF7067;
    --marque-box: #353743;
}

  
 

html {
    overflow-x: hidden !important;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: var(--main-font) !important;
    background-color: var(--background-color);
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--box-bg-color);
  }
  
  ::-webkit-scrollbar {
    height: 6px;
    width: 6px;
    background-color: var(--box-bg-color);
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--red-color);
  }

.container-fluid {
    width: 96% !important;
}

/* .header {
    background-color: var(--header-color);
    min-height: 180px;
    width: 100%;
} */

.logo img {
    width: 130px;
}

.btn-currency-change {
    padding: 0px !important;
    outline: none !important;
    color: var(--white-color);
    float: right;
    font-size: 20px;
}

.content-box {
    border-radius: 18px;
    
    width: 100%;
    min-height: 186px;
    margin-top: 0px;
}

.head-area {
    border-bottom: 1px solid #be965c;
    padding: 12px 0px;
}

.head-area h2 {
    color: var(--black-color);
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px;
}

.low-text {
   
    
    margin: 5px 0px 0px 0px;
    text-align: center;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.price-box h2 {
    color: var(--white-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.price-box h2 span {
    font-size: 12px;
}

.price-counting {
    width: 140px;
    height: 50px;
    background-color: #F55E60;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 8px;
}

.price-counting h3 {
    margin-bottom: 0px;
    color: #fff;
    font-size: 30px;
    font-weight:700;
    text-transform: uppercase;
}

.low-price {
    min-width: 100px;
    height: 28px;
    background: var(--white-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.low-price p {
    color: var(--box-bg-color);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.low-box {
    margin-top: 10px;
}

.area-spaces {
    margin: 2px 0px 0px;
}

.box-right-line {
    /*border-right: 1px solid var(--line-color);*/
}

.green-add {
    /*green color when starting*/
    background-color: rgb(74, 175, 97); 
}

.content-price-table {
   
    width: 100%;
    height: 370px;
    background: #ffffff96;
   
   
}

table.rounded-corners {
 border-spacing: 0;
 border-collapse: separate;
 border-radius: 10px;
 border: 1.44px solid #BE965C;
}

/* Apply a border to the right of all but the last column */
table.rounded-corners th:not(:last-child),
table.rounded-corners td:not(:last-child) {
 border-right: 1.44px solid #BE965C;
}

/* Apply a border to the bottom of all but the last row */
table.rounded-corners>thead>tr:not(:last-child)>th,
table.rounded-corners>thead>tr:not(:last-child)>td,
table.rounded-corners>tbody>tr:not(:last-child)>th,
table.rounded-corners>tbody>tr:not(:last-child)>td,
table.rounded-corners>tfoot>tr:not(:last-child)>th,
table.rounded-corners>tfoot>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>th,
table.rounded-corners>thead:not(:last-child),
table.rounded-corners>tbody:not(:last-child),
table.rounded-corners>tfoot:not(:last-child) {
 border-bottom: 1.44px solid #BE965C;
}
/* Apply background color to even rows */
table.rounded-corners tbody tr:nth-child(even) td {
  background-color: #d9d9d93b; /* Adjust this color as needed */
}

/* Align text to the left in the first column */
table.rounded-corners tbody tr td:first-child {
  text-align: left;
}
table.rounded-corners thead tr th:first-child {
  text-align: left;
  border-top-left-radius:10px;
}
table.rounded-corners thead tr th:last-child {
  text-align: left;
  border-top-right-radius:10px;
}
table, td, th {
  /*border: 1px solid #BE965C;*/
  
}

.bg-color-desable {
    background: none !important;
}

.owl-box {
    margin-top: 30px;
}

.owl-theme .owl-nav {
    display: none;
}

.owl-theme .owl-dots,
.owl-theme .owl-nav {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    margin-top: 9px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--yello-color);
}

.date-box .date {
    font-size: 24px;
    font-weight: 600;
    text-align: right;
    margin-bottom: -7px;
}

.date-box .date#printDate {
    color: #D3D3D3;
    font-size: 29px;
    font-weight: 500;
}

.date-box .date#printDay {
    color: #D3D3D3;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: -10px;
}

.date-box .date#printTime {
    color: var(--white-color);
    color: #FFF;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: -10px;
}

.owl-carousel .owl-item img {
    border-radius: 13px;
}


/* table */

.table-price {
    width: 100%;
    height:370px;
}
#commodityTableBody{
    text-transform: uppercase;
    font-size: 18px !important;
}
th {
    padding: 10px 20px 15px 50px;
    text-align: center;
    border-bottom: 1px solid #BE965C;
    background:#FFF1DE;
    
    margin: 10px 0px 0px 0px;
  }
   tr, td {
  padding: 10px 20px 15px 50px !important;
  text-align:center;
   
  }
  
   tr:nth-child(even) {
            background-color: #d9d9d900 !important;
        }

.table-price thead {
   
    color: #BC955C;
    font-size: 25px;
    text-transform: uppercase;
    font-weight:700;
}

.box-table-price {
    
    color: var(--black-color);
    font-size: 22px;
    margin-top: 15px;
}

.box-table-price td {
    padding: 15px 0px;
    color: #BC955C;
    font-size: 25px;
    text-transform: uppercase;
    font-weight:700;
}

table {
    border-collapse: separate;
    border-radius: 10px;
    border-spacing: 0 0px;
}

.gold-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-right: 8px;
    margin-left: 15px;
}

.marque-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.marque-head {
    width: 10%;
    height: 70px;
    background-image: url(../images/arrow.svg);
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center right;
}

.marque-content {
    width: 100%;
    height: 45px;
   background: #fff;
    float: left;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #BC955C;
}

.marque-content div {
    display: block;
    width: 200%;
    height: 30px;
    position: absolute;
    overflow: hidden;
    animation: marquee 30s linear infinite;
}
.marque-head-sec{
      background-color: #BC955C;
   border: 1px solid #BC955C !important;
  text-align:right;
  
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
.marque-content-sec{

}
.marque-content span {
    float: left;
    width: 35%;
    font-size: 18px;
        color: #434343;
    font-weight: 800;
}

@keyframes marquee {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}

.marque-head h2 {
    color: var(--white-color);
    font-size: 27px;
    text-align: center;
    margin-bottom: 0px;
}

.btn-currency-change .btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:focus-within,
 :not(.btn-check)+.btn:active {
    color: var(--white-color) !important;
    border: none !important;
    outline: none !important;
}

.btn-currency-change:hover {
    color: var(--yello-color);
}

@media (max-width: 767px) {
    .hidden-mobile {
        display: none;
    }
}

.mobile-view {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    width: 100%;
    padding: 0px 30px;
}

.mobile-view img {
    width: 180px;
    margin: 0px auto;
    display: block;
}

.mobile-view h2 {
    color: #000;
    font-size: 18px;
    text-align: center;
    margin-top: 20px;
    line-height: 20px;
    font-weight:700;
}

.copy-right {
    font-size: 18px;
    color: #000;
    margin-bottom: 0px;
    padding-left: 36px;
    text-align:right;
    font-weight:700;
}

.copy-right-url a {
   
    color: #000 !important;
    font-size:18px;
    font-weight:700;
}

.bg-img-cls{
    background-image: url(../images/background-img.png);
    background-position: bottom;
    background-size: 100%;
    
}
.logo-date-time-cls{
    
    /*margin: 30px 0px 0px 60px;*/
}
.date-time-cls{
    margin: 0px 0px 0px 30px;
}
.day-cls{
    color: #434343;
    font-size: 14px;
    font-weight: 700;

}
.seperator{
    width: 1px;
    height: 18px;
    margin: 4px 10px;
    background: #434343
}
#time{
    color: #BC955C;
    font-weight: 700;
    font-size: 30px;
}
.head-section{
   background: linear-gradient(180deg, #ffffff7d 0%, rgb(255 255 255 / 14%) 100%)
}
.gold-box{
    border-radius: 30px;
    margin: 20px 0px 0px 0px;
    background: radial-gradient(circle, rgb(235 209 172) 0%, rgb(254 237 212 / 15%) 99%);
    border: 2px solid #00000033;
    width:100%;
}
.gold-head-area {
   
    padding: 12px 0px;
}

.gold-head-area h2 {
  color: #434343;
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px;
    font-weight: 700;
}
.gold-head-area h4 {
  color: #434343;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px;
    font-weight: 400;
}
.bid-cls h3{
    
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: #434343;

}
.ask-cls h3{
    
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: #434343;

}
.low-cls {
   font-weight: 800;
    font-size: 18px;
    color: #F55E60;
    padding:12px 0px 0px 0px;
}
.high-cls {
   font-weight: 800;
    font-size: 18px;
    color: #4AAF61;
    padding:12px 0px 0px 0px;
}
.low-span{
   font-weight: 800;
    font-size: 18px;
    color: #6C727F;
    padding:0px 0px 0px 10px;
}
.high-span{
   font-weight: 800;
    font-size: 18px;
    color: #6C727F;
    padding:0px 0px 0px 10px;
}
.vector-img{
    
    margin: 30px 0px 0px 0px;

}
.silver-box{
    border-radius: 30px;
    margin: 20px 0px 0px 0px;
    background: radial-gradient(circle, #BFBFBF 0%, rgb(255 255 255) 99%);
    border: 2px solid #00000033;
    width:100%;
}
.price-table-div{
width:100% !important;
}

.mt-5 {
    margin-top: 4.0rem !important;
}

.top-news{
    /*margin: 12px 0px 0px 0px;*/
}
.widget-cls{
    margin: 40px 0px 0px 0px;
}
.currency-small-cls{
        font-size: 14px;
    background: #BC955C;
    color: #fff;
    border-radius:3px;
    padding: 3px 8px 3px 8px;
}
.copy-right-sec{
    margin: 37px 0px 0px 0px;
    height: 45px;
}
.small-font {
    font-size: 17px; /* Adjust the font size as needed */
    font-weight:700;
   
}
.theme-switch-span{
    color: #000;
    font-weight: 700;
}
.marque-head-sec p{
    margin: 5px 0px 0px 0px;
}
@media only screen and (min-width: 1536px) and (max-width: 1536px) and (min-height: 470px) and (max-height: 730px) {
    /* Your styles here */
   .mt-5 {
    margin-top: 1.2rem !important;
}
.widget-cls {
    margin: 10px 0px 0px 0px;
}

.gold-head-area {
   
    padding: 0px 0px;
}

.gold-head-area h2 {
  
    font-size: 20px;
}
.gold-head-area h4 {
  
    font-size: 15px;
}
.bid-cls h3{
    
  
    font-size: 18px;

}
.ask-cls h3{
    
   
    font-size: 18px;

}
.area-spaces {
    margin: 0px 0px 0px;
}
.price-counting {
    width: 150px;
    height: 40px;
    
}
.price-counting h3{
    font-size:33px;
}
}

@media only screen and (min-width: 250px) and (max-width: 300px)  {
   .price-counting{width:110px}
 .price-counting h3{font-size:16px}
}