body
{
margin-top:-20px;
background:#ffffff;
  width: 98vw;
  height: 100vh;
font-family: 'Arial', sans-serif;
font-size:1rem;
}



#top
{

color:#FFFGGG;
background:#EDB95E;
text-align:left;
padding-left:2%;
height:60px;
position: fixed;
  top: -10px;
  left: 0;
right: 0;
z-index:2;

}

#topright
{
    float:right;
    text-align:right;
    margin-top:-18px;
    padding-right:2%;
    
}

#topcenter
{
    margin-top:-50px;
    margin-left:-120px;
    text-align:center;

    
}


#logo
{
float:left;
position: fixed;
margin-top:-10px;
width:7%;
z-index:10;

}


#logo4
{
float:left;
position: fixed;
margin-top:-10px;
width:7%;
z-index:10;

}

#header
{
background:#CEECF5;
text-align:center;
text-position:center;
position: fixed;
margin-top:-23px;
left: 0;
right: 0;
z-index:2;

}

#subheader
{
background:#EDC893;
text-align:left;
Height:45px;
position: fixed;
margin-top:52px;
left: 0;
right: 0;
padding-left:0%;
z-index:2;
}

#subheaderright
{
    float:right;
    text-align:right;
  margin-top:10px;
    padding-right:2%;
    
}

#subheaderleft
{margin-top:-14px;
   
    padding-left:2%;

    
}



#tab
{display:inline-block;
 margin-left:120px;
}

#tab2
{display:inline-block;
 margin-left:25%;
}

#tab3
{display:inline-block;
 margin-left:5%;
}

#tab4
{display:inline-block;
 margin-left:50%;
}

#wrapper
{
width:0;
margin:0 auto;
position:relative;
display:block;
overflow:viscible;
}

a:link

{font-weight:bold;
text-decoration: none;
color:#540907;
}

a:visited
{
font-weight:bold
text-decoration: none;
color:#8A3D20;
}

a:hover
{
text-decorating:none;
color:#372F22;
}

#banner
{
text-ident:50px;
border:2px solid:#540907;
text-decoration: none;
background:#3399FF;

}

#sidebanner
{
text-ident:50px;
border:2px solid:#540907;
color:#fff8e1;
}

#sidebar
{
float:left;
margin-top:4%;
width: 10%;
background:#ffffff;


}

#img
{max-width:100%;
    height:auto;
    display:block;
}

#picturewords
{
float:right;

}

.heading
{
text-align: center;
}

#maincontent
{margin-top:80px;
    
background:#FFFFFC;
border-left:1%;
border-right:1%;
margin-left:1%;
margin-right:1%;
text-align:left;

}

#maincontent2
{
border:3px; 
border-style:solid; 
border-color:#CEECF5;"
}


#content 
{
  float: left ;
  margin-top:0%;
 width: 30%;
background:#ffffff;
padding-left: 2%; 
padding-right: 2%;

}


#adcontent 
{
  float: left;
margin-top:4.5%;
  width: 60%;
  padding-top:0%;
background:#ffffff;
z-index:150;
padding-right: 1%;
}


#adright
{
float:right;
margin-top:4%;
width: 10%;
background:#ffffff;


}


#content2 
{
  float: none ;
  margin-top:0%;
  width: 65%;
background:#ffffff;

}


#quizzcontent 
{
  float: left;
  width: 70%;
background:#ffffff;
}


#signin
{
float:right;
margin-top:80%;

background:#ffffff;
}


#tag1
{&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  
}

#tag2
{</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
}

#footer
{
background:#EDC893;
text-align:center;
position:absolute;
left:0;
right:0;
width:100%;
}

.footertext {
            color: #10b981;
           
}

#footerforxmart
{
background:#EDC893;
width:100%;
text-align:center;
position:absolute;
height: 220px;
left:0;
right:0;
}


#aboutxmart
{
    background:#EDC893;
text-align:left;
color: #10b981;
float:left;
padding-left: 1%;

    }
    
         #buyers
{
   background:#EDC893;
text-align:left;
color: #10b981;
float:left;
margin-left:180px;

    } 
    
       #sellers
{
    background:#EDC893;
text-align:left;
float:left;
margin-left:180px;

        
    }
      #Partners
{
     background:#EDC893;
text-align:left;
float:left;
margin-left:180px;
}
      
    
       #support
{
     background:#EDC893;
text-align:left;
float:right;
padding-right: 1%;
    }
    
      
       #copyright
{
     background:#EDC893;
text-align:center;


    }
    
#footer2 
{
  float: left;
 
}

#footer3 
{
  float: right;
}

#footer4 
{
text-align: center;
text-position:center;
}

#next {
    float: right;
    background-color:silver;
    text-color:black;
    display: block;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
    width: relative;
    text-align:center;
}


#back {
    float: left;
    background-color:silver;
    text-color:black;
    display: block;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
    width: relative;
    text-align:center;
}

#quizzmaincontent
{
margin-top:120px;
text-ident:20px;
background:#f2f3f4;
border-left:40px;
border-right:40px;
margin-left:20px;
margin-right:20px;

text-align:left;
height:435px;
}

#block
{
display:block;
border:3px; 
border-style:solid; 
border-color:#540907;
}

#scaling-image 
{
    position: relative;
    width: 100%;
    min-width: 100%;
}

#index1
{
float:left;
width:40%
}

#index2
{
float:right;
width: 60%
}

#zoom
  {
    transition: transform 0.25s ease;
    transform-origin: left;
  
    transform: scale(3.0);
    position: relative;
    z-index: 10;
 
  cursor: pointer;
  display: block;
}


.search-bar {
  display: flex;
  gap: 8px;
  max-width: 1000px;
}

.search-bar input {
  flex: 1;
  min-width: 0;
  padding: 10px;
}

.search-bar select,
.search-bar button {
  padding: 10px;
}



.unknown
{
    border:2px solid #540907;
background:#3399ff;
background:#f2f3f4;

margin-top:-20px;
margin-left:40px;
margin-right:40px;
margin-bottom:40px;
padding-top:-20px;
padding-left:40px;
padding-right:40px;
padding-bottom:40px;
background:#f2f3f4;
text-align:center;


background:#f2f3f4;
image-position:center;

text-align:center;

border-style:solid;
border-color:#CEECF5;

#vertical-line {height:100px;  width:10px; background-color:#378; margin:0 auto;}


/* Container grid that scales smoothly from mobile to desktop */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* Individual card styling */
.product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Fixed size image container preview box */
.preview-box {
    width: 100%;
    height: 200px;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}

/* Forces the database thumbnail to completely fill the box without empty bars */
.card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.product-card:hover .card-thumbnail {
    transform: scale(1.05); /* Smooth subtle zoom trick on hover */
}

/* Placeholder box alignment */
.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* Inner card spacing layout */
.card-details {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title a {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
}

.card-title a:hover {
    color: #2563eb;
}

.card-description {
    font-size: 0.875rem;
    color: #64748b;
    margin: 8px 0 16px 0;
    line-height: 1.4;
    flex-grow: 1;
}

/* Footer layout inside card */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

.card-price {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.1rem;
}

.card-tag {
    font-size: 0.75rem;
    background: #e2e8f0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Container grid setup */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* Individual card container structure */
.product-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Absolute tracking box for stacking sibling image layers */
.preview-box {
    width: 100%;
    height: 220px;
    background: #f1f5f9;
    overflow: hidden;
    position: relative;
}

/* Base properties for all dynamic images inside the preview window */
.card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 0;
}

/* Force the primary image column to display clearly by default */
.img-layer-1 {
    opacity: 1;
    position: relative; /* Maintains structural layout volume */
}

/* Layout Tricks: Cross-fade to Image2 smoothly when hovering your mouse over the card */
.product-card:hover .img-layer-1 {
    opacity: 0;
    transform: scale(1.03);
}

.product-card:hover .img-layer-2 {
    opacity: 1;
    transform: scale(1.05);
}

/* Typography and interior spatial spacing */
.card-details {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title a {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
}

.card-title a:hover {
    color: #2563eb;
}

.card-description {
    font-size: 0.875rem;
    color: #64748b;
    margin: 8px 0 16px 0;
    line-height: 1.4;
    flex-grow: 1;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
    margin-top: auto;
}

.card-price {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.1rem;
}

.card-tag {
    font-size: 0.75rem;
    background: #e2e8f0;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    font-size: 0.875rem;
}