*
{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	text-decoration: none;
	/***font-family: 'Nanum Gothic', sans-serif;***/
	font-family: 'Montserrat', sans-serif;
	transition: 0.4s;
}
:root{
	--red-clr:#011526;
	--whit-clr:#fff;
	--blac-clr:#131313;
	--tint-clr:#F2E0C9;
	}
.divbg-color
{
	width: 100%;
	background-color: var(--tint-clr);
}
.main-container
{
	width: 98%;
	margin: 0px auto;
}
.post-heading
{
	font-size: 1.5rem;
	padding-top: 8px;
	color: var(--blac-clr);
	text-decoration: none;
	padding-bottom: 5px;
	font-family:'Nanum Gothic', sans-serif; 
}
.nav-bg
{
	background-color: var(--red-clr) !important;
}
.nav-link
{
	color: var(--whit-clr) !important;
	font-size: 0.9rem !important;
}
.dropdown-menu
{
	padding: 0 0 !important;
	border:none !important;
}
.dropdown-item
{
	background-color: none !important;
	color: var(--whit-clr) !important;
	border-bottom: 1px solid#fff !important;
	text-transform: uppercase !important;
	font-size: 0.9rem !important;
	padding-bottom: 8px !important;
	padding-top:8px !important;
}
.dropdown-item:hover
{
	background-color: var(--whit-clr) !important;
	color: var(--red-clr) !important;
}

.bannertext
{
	left: 0px;
	bottom: -1.5rem;
	z-index: 10;
	padding: 12px 10px;
	position: absolute;
}
.bannerheading
{
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--blac-clr);
	font-family: 'Nanum Gothic', sans-serif; 
}
.bannerpra
{
	font-size: 0.9rem;
	color: var(--blac-clr);
}
.anchor
{
	text-decoration: none;
}
.new-pro
{
	width: 100%;
	position: relative;
	background-color: #000;
	cursor: pointer;
	overflow: hidden;
}
.new-pro:hover >img
{
	transform: scale(1.1);
}
.new-pro-text
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 111;
	background: linear-gradient(180deg, rgb(248 248 250 / 65%) 0%, rgb(154 154 163 / 4%) 0%, rgb(8 9 9 / 94%) 100%)
}
.new-pro-text h1
{
	font-size: 1rem;
	position: absolute;
	bottom: 15px;
	color: var(--whit-clr);
	padding: 0px 5px;
}
.new-pro-text span
{
	color: var(--whit-clr);
	position: absolute;
	bottom: 2px;
	font-size: 0.7rem;
	padding: 0px 5px;

}
.new-pro-text span i
{
	padding-right: 8px;
}
.h-category
{
	width: fit-content;
	padding: 8px 8px;
	background-color: var(--red-clr);
}
.h-category strong
{
	font-size: 1rem;
	color: var(--whit-clr);
	text-transform: uppercase;
	font-weight: 400;
}
.borderbottom
{
	border-bottom:2px solid var(--red-clr);
}
.post-box
{
	width: 100%;
}
.post-title
{
	font-size: 1.4rem;
	overflow: hidden;
}
.post-title a
{
	font-size: 1rem;
	text-decoration: none;
	color: var(--blac-clr);
}
.post-title a:hover
{
	font-size: 1.1rem;
	color: var(--red-clr);
	text-decoration: none;
}
.post-date
{
	width: 100%;
	font-size: 0.8rem;
}
.post-date li
{
	display: inline;
	padding-right: 5px;
}
.post-date-text
{
	font-size: 0.8rem;
}
.post-date-text i
{
	padding-right: 5px;
}
.post-content
{
	font-size: 0.9rem;
	bottom: -19.8rem;
}
.category-label
{
	padding: 6px 6px;
	font-size: 0.8rem;
	background-color: var(--red-clr);
	text-decoration: none;
	color: var(--whit-clr);
}
.category-label:hover
{
	text-decoration: none;
	color: var(--whit-clr);
	padding: 5px 5px;
}
/*********/
.post-box2
{
	width: 100%;
	position: relative;
	margin-bottom: 3rem;
}
.post-box-body
{
	width: 100%;
	display: flex;
	text-decoration: none;
	color: var(--blac-clr);
}
.post-box-body:hover
{
	color: var(--blac-clr);
	text-decoration: none;
}
.post-box2 a
{
	text-decoration: none;
}
.post-box2 img
{
	width: 50%;
}
.post-box2-title
{
	font-size: 1rem;
	font-weight:500; 
	padding-left: 6px;
	font-family: 'Nanum Gothic', sans-serif;

}
.post-box2-title:hover
{
	font-size: 1.1rem;
	color: var(--red-clr);
}
.post-box2-date
{
	width: 100%;
	position: absolute;
	font-size: 0.8rem;
	bottom: -2.5rem;
}
.post-box2-date li
{
	display: inline;
	padding-right: 5px;
}
.post-box2-text
{
	font-size: 0.8rem;
}
.post-box2-text:hover
{
	color: var(--red-clr);
}
.post-box2-text i
{
	padding-right: 5px;
}
.add-box
{
	width: 100%;
}
.categrory-box
{
	width: 100%;
	margin-top: 1rem;
}
.categories-list
{
	width: 100%;

}
.categories-list li
{
	list-style: none;
	padding: 5px 0px 5px 0px;
	border-bottom: 1px solid#e7e7e7;
}
.categories-list li a
{
	color: var(--blac-clr);
	font-size: 0.9rem;
}
.categories-list li a:hover
{
	color: var(--red-clr);
	font-size: 1rem;
	text-decoration: none;
}
/*********table*******/
.products{
	margin-top: 30px;
   text-align: center;
}
.products .product-title{
	font-size: 35px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: underline;
	letter-spacing: 1px;
	margin: 40px 0;
}

.products .card-wrapper{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.products .card-wrapper .cards:hover img{
	transform: scale(1.2);
}



.products .card-wrapper .cards{
	position: relative;
	overflow: hidden; 
	width: 300px;
	height: 200px;
    border-radius: 20px;
	border: 1px solid var(--blac-clr);
	cursor:pointer;
	transition: all 500ms linear;
}
.products .card-wrapper .cards img{
	width: 100%;
	height: 200px;
	object-fit: fill;
	/* object-position: center; */
	border-radius: 20px;
}

.products .buy-btn{
	margin-top: 30px;
	margin-right: 90px;
	font-weight: 500;
}


.tproduct-able
{
	width: 100%;
}
.main-table
{
	width: 100%;
	border:1px solid var(--tint-clr);
	border-collapse: collapse;
	text-align: center;
}

.main-table tr th
{
	padding: 8px 8px;
	border:2px solid var(--tint-clr);
}

.main-table tr td.grid-box{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1rem;

}
.main-table tr td
{
	padding: 8px 8px;
	width: 100px;
	text-align: center;
	border:1px solid var(--tint-clr);
}
.maintable-topborder
{
	background-color: var(--red-clr);
	color: var(--whit-clr);
}
.main-table-font
{
	font-size: 1rem;
	font-family: 'Nanum Gothic', sans-serif;
}
.table-btn
{
	padding: 10px 15px;
	background-color: var(--red-clr);
	color: var(--whit-clr);
	font-size: 1.2rem;
	outline: none;
	border-radius: 10px;
	border:none;
	margin-top: 8%;
}


.table-image
{
	width: 100%;
	
	height: inherit;
}
.table-btn:hover
{
	text-decoration:none;
	color: var(--red-clr);
	background-color: var(--tint-clr);
}
/****FOOTER*****/
.ft-frm
{
	width: 100%;
	padding: 2px 2px;
}
.ft-frm input
{
	width: 100%;
	font-size: 0.8rem;
	padding: 8px 8px;
	border:none;
	outline: none;

}
.footerfont
{
	font-size: 0.9rem;
	line-height: 1.5rem;
}
.ft-btn
{
	padding: 8px 8px;
	background-color: var(--red-clr);
	color: var(--whit-clr);
	font-size: 0.9rem;
	border:none;
	margin-top: 8%;
}
.ft-btn:hover
{
	background-color: var(--whit-clr);
	color: var(--blac-clr);
}
.copyright
{
	font-size: 0.9rem;
	color: var(--blac-clr);
}
.copyright a
{
	text-decoration: none;
	color:var(--blac-clr);
}
.copyright a:hover
{
	text-decoration: none;
	color: var(--red-clr);
}


.akame-btn {
  font-family: "Playfair Display", serif;
  position: relative;
  z-index: 1;
  min-width: 150px;
  height: 42px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
  padding: 0 35px;
  text-align: center;
  text-transform: uppercase;
  background-color: #fa7862;
  color: #fff; 
  border: 1px solid #fa7862;
  border-radius: 60px;
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms; }
  .akame-btn:focus, .akame-btn:hover {
    border-color: #fa7862;
    font-weight: 400;
    font-size: 14px;
    background-color: #fa7862;
    color: #ffffff;
    -webkit-box-shadow: 0 2px 40px 8px rgba(15, 15, 15, 0.15);
    box-shadow: 0 2px 40px 8px rgba(15, 15, 15, 0.15); }
  .akame-btn.active {
    border-color: #fa7862;
    background-color: #fa7862;
    color: #ffffff; }
    .akame-btn.active:focus, .akame-btn.active:hover {
      border-color: #252525;
      background-color: #252525;
      color: #ffffff; }


