body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
}

/* page background */

.bg-wrapper{
background:linear-gradient(#0b7c05,#9ed39e);
padding:30px 0;
min-height:100vh;
}

/* main container */

.container{
width:900px;
margin:auto;
background:#45a81d;
border-radius:12px;
padding-bottom:20px;
box-shadow:0 0 0 2px #7ed957 inset;
position:relative;
}

/* curved bottom */

.container::after{
content:"";
display:block;
height:60px;
background:linear-gradient(#45a81d,#138800);
border-bottom-left-radius:200px;
border-bottom-right-radius:200px;
margin-top:20px;
}

/* top menu */

.top-links{
text-align:right;
padding:6px 15px;
font-size:13px;
color:#ffff66;
}

.top-links a{
color:#ffff66;
text-decoration:none;
}

/* header */

.header{
display:flex;
justify-content:space-between;
align-items:center;
background:#1a8d00;
padding:14px 28px;
}

/* shared striped text */

.logo,
.milton{
font-family: Arial Black, Arial, sans-serif;
font-weight:900;
color:#ffd400;
letter-spacing:1.5px;

/* thicker stripes */
background: repeating-linear-gradient(
to bottom,
#ffd400 0px,
#ffd400 4px,
#1a8d00 4px,
#1a8d00 8px
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* main title */

.logo{
font-size:40px;
}

/* right title */

.milton{
font-size:34px;
letter-spacing:1px;
}

/* page title */

.page-title{
background:#69c21a;
color:white;
padding:8px 15px;
font-weight:bold;
}

/* hero */

.hero{
display:flex;
gap:20px;
padding:20px;
}

.hero-left{
background:#e6e6e6;
padding:10px;
}

.hero-left img{
width:500px;
display:block;
}

.hero-right{
background:#f4ea00;
border-radius:20px;
padding:18px;
width:280px;
}

.hero-right h3{
margin-top:0;
font-size:16px;
}

.hero-right p{
font-size:13px;
line-height:20px;
}

.read-more{
text-align:right;
font-size:13px;
}

/* navigation */

.nav{
display:grid;
grid-template-columns:repeat(5,1fr);
margin:0 20px;
}

.nav div{
background:#e6e3a0;
border:2px solid #6da400;
padding:8px;
text-align:center;
font-size:14px;
font-weight:500;
}

/* product section */

.product-area{
display:flex;
gap:20px;
padding:20px;
}

/* left */

.product-left{
flex:2;
}

.product-left h4{
color:#ffea00;
margin:0 0 5px 0;
font-weight:bold;
letter-spacing:1px;
}

.dash{
border-bottom:2px dashed #ffea00;
margin-bottom:15px;
}
/* product grid */

.product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.product-grid a{
background:#dce79a;
border:1px solid #6f9c00;
padding:7px;
text-align:center;
font-size:14px;
display:block;
text-decoration:none;
color:#000;
}

/* more */

.more{
text-align:right;
font-size:13px;
margin-top:5px;
color:#0033cc;
}

/* quick contact */

.product-right{
flex:1;
}

.quick-title{
text-align:center;
background:#f4ea00;
padding:6px;
border-top-left-radius:18px;
border-top-right-radius:18px;
font-weight:bold;
}

.quick-box{
background:#efe98f;
border:5px solid #f4ea00;
padding:15px;
font-size:13px;
}
/* IMAGE SECTION */

.hero-left{
background:white;
padding:20px;
width:520px;
}

/* grid for images */

.product-images{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
justify-items:center;
align-items:center;
}

/* images */

.product-images img{
width:130px;
height:auto;
object-fit:contain;
}
/* footer */

.footer{
text-align:center;
font-size:13px;
padding:20px;
color:#003366;
}
a{
text-decoration:none;
}
.footer span{
color:#0066cc;
}

/* ABOUT PAGE */

.about-section{
padding:30px;
}

.about-box{
background:#e6e600;
padding:25px;
border-radius:25px;
}

.about-box h3{
margin-top:0;
font-size:16px;
}

.about-content{
background:#e5e5e5;
border:1px solid #000080;
padding:20px;
font-size:13px;
line-height:18px;
}

.about-content h4{
color:#008000;
margin-top:15px;
margin-bottom:5px;
}
/* inquiry page */

.inquiry-section{
padding:30px;
}

.inquiry-box{
background:#e6e600;
padding:30px;
border-radius:25px;
}

.inquiry-box h3{
margin-top:0;
font-size:16px;
color:#006600;
}

.inquiry-form-box{
background:#e5e5e5;
border:1px solid #000080;
padding:25px;
}

/* table layout */

.form-table{
width:100%;
font-size:13px;
border-collapse:collapse;
}

.form-table td{
padding:6px 8px;
vertical-align:top;
}

/* label column */

.form-table td:first-child{
width:180px;
font-weight:bold;
color:#006600;
}

/* input fields */

.form-table input{
width:280px;
height:22px;
border:1px solid #888;
}

/* textarea */

.form-table textarea{
width:420px;
height:110px;
border:1px solid #888;
}

/* buttons */

.form-buttons{
padding-top:10px;
}

.form-buttons button{
padding:3px 10px;
font-size:13px;
margin-right:5px;
}
/* CONTACT PAGE */

.contact-section{
padding:30px;
}

.contact-box{
background:#e6e600;
padding:30px;
border-radius:25px;
}

.contact-box h3{
margin-top:0;
font-size:16px;
color:#006600;
}

.contact-content{
background:#e5e5e5;
border:1px solid #000080;
padding:20px;
display:flex;
justify-content:space-between;
align-items:center;
}

.contact-left{
font-size:13px;
line-height:18px;
}

.contact-left b{
color:#006600;
}

.contact-right img{
width:320px;
height:auto;
}
.header{
display:flex;
justify-content:space-between;
align-items:center;
background:#1b8f00;
padding:14px 30px;
border-top-left-radius:12px;
border-top-right-radius:12px;
}

/* both logos same height */

.logo,
.milton{
height:55px;
object-fit:contain;
}
.footer{
color:#0000EE;   /* same blue color for text */
}

.footer a{
color:#0000EE;

}

.footer a:hover{
color:#0000EE;
text-decoration:underline;
}
#product-images{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;   /* horizontal center */
    align-items:center;       /* vertical center */
    align-content:center;     /* multi-row center */
    gap:30px;
    height:100%;
    min-height:350px;        /* adjust if needed */
}
/* Ensure the container cuts off the images sliding out */
.hero-left {
    overflow: hidden; 
    position: relative;
    height: 350px; /* Fixed height to keep layout stable during transition */
    display: flex;
    align-items: center;
}

/* This class activates after 2 seconds */
#product-images.sliding-mode-double {
    display: grid !important;
    /* Create 2 rows of 130px height */
    grid-template-rows: repeat(2, 130px); 
    /* Force items to fill columns horizontally instead of rows */
    grid-auto-flow: column; 
    gap: 30px;
    width: max-content;
    animation: slide-left 20s linear infinite; /* Adjust time for speed */
}

/* The animation movement */
@keyframes slide-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Moves exactly half the width of the doubled images for a perfect loop */
        transform: translateX(-50%); 
    }
}

/* Ensure images don't shrink */
#product-images.sliding-mode-double img {
    flex-shrink: 0;
}