/* =======================================
   ASTONISH CLAY — PREMIUM NATURAL THEME
======================================= */

:root{

    --primary:#7B8D6D;
    --primary-hover:#66795A;

    --background:#F5F3EE;
    --surface:#FFFFFF;

    --section:#D7C6A5;

    --text:#2F2F2F;
    --text-light:#6F757B;

    --border:#DDD8CF;

    --shadow:0 10px 30px rgba(0,0,0,.08);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--background);
    color:var(--text);
    font-family:'Montserrat',sans-serif;
    line-height:1.7;
    font-size:16px;
}

.container{
    width:90%;
    max-width:1250px;
    margin:auto;
}


.center{
    text-align:center;
}

.small{
    font-size:14px;
    color:var(--text-light);
}

.mt20{
    margin-top:20px;
}
/* =======================================
   HEADER
======================================= */

.site-header{

    position:sticky;
    top:0;
    z-index:999;

    background:rgba(245,243,238,.96);

    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--border);

    box-shadow:0 3px 12px rgba(0,0,0,.04);

    padding:18px 0;

}

.header-flex{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo a{

    text-decoration:none;

    font-size:30px;

    font-weight:800;

    color:var(--text);

}

.logo span{

    color:var(--primary);

}
/* =======================================
   NAVIGATION
======================================= */

.nav{

    display:flex;

    align-items:center;

    gap:28px;

}

.nav a{

    text-decoration:none;

    color:var(--text);

    font-weight:600;

    font-size:15px;

    transition:.3s;

    position:relative;

}

.nav a:hover,

.nav a.active{

    color:var(--primary);

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav a:hover::after,

.nav a.active::after{

    width:100%;

}

/* =======================================
   BUTTONS
======================================= */

.btn-primary,

.btn-outline{

    display:inline-block;

    padding:13px 28px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.35s ease;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    box-shadow:0 8px 18px rgba(123,141,109,.28);

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

    background:#fff;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:var(--text);

    font-size:30px;

    cursor:pointer;

}
/* =======================================
   HERO
======================================= */

.hero{

    position:relative;

    height:92vh;

    overflow:hidden;

}

.slider{

    position:absolute;

    inset:0;

}

.slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transition:opacity 1.2s ease;

}

.slide.active{

    opacity:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(rgba(30,35,30,.42),rgba(30,35,30,.42));

}

.hero-content{

    position:relative;

    z-index:2;

    top:50%;

    transform:translateY(-50%);

    text-align:center;

    color:#fff;

}

.hero-content h1{

    font-size:52px;

    max-width:900px;

    margin:auto;

    line-height:1.25;

    font-weight:800;

}

.tagline{

    display:block;

    margin-bottom:15px;

    color:#F5F3EE;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:14px;

}

.hero-subtext{

    max-width:760px;

    margin:28px auto;

    font-size:18px;

    color:#f1f1f1;

    line-height:1.8;

}

.hero-btns{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}
/* =======================================
   FEATURES
======================================= */

.features{

    background:var(--section);

    padding:70px 0;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:28px;

}

.feature-item{

    background:var(--surface);

    border-radius:16px;

    padding:30px;

    box-shadow:var(--shadow);

    transition:.35s;

    border-top:4px solid var(--primary);

}

.feature-item:hover{

    transform:translateY(-8px);

}

.feature-item h4{

    font-size:22px;

    margin-bottom:10px;

    color:var(--primary);

}

.feature-item p{

    color:var(--text-light);

    line-height:1.7;

}
/* =======================================
   PRODUCTS
======================================= */

.home-products{

    padding:80px 0;

    background:var(--background);

}

.home-products h2{

    text-align:center;

    font-size:38px;

    margin-bottom:45px;

    color:var(--text);

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.product-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform:translateY(-8px);

}

.product-img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.product-card h3{

    font-size:22px;

    padding:20px 20px 8px;

    color:var(--text);

}

.product-card p{

    padding:0 20px;

    color:var(--text-light);

    line-height:1.7;

    flex:1;

}

.product-card a{

    margin:20px;

}
/* =======================================
   INDUSTRIES
======================================= */

.industries{

    padding:80px 0;

    background:var(--section);

}

.industries h2{

    text-align:center;

    font-size:36px;

    margin-bottom:40px;

}

.industry-grid{
    
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    max-width:1100px;
    margin:40px auto;
}

.industry-grid img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    transition:.3s;
}

.industry-grid img:hover{
    transform:scale(1.03);
}
.industry-card{

    background:#FFFFFF;
    border-radius:16px;
    height:95px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:700;
    color:#2F2F2F;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}
@media(max-width:768px){

    .industry-grid{
        grid-template-columns:1fr;
    }

}

.industry-description{
    margin-top:28px;
    text-align:center;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
    color:#5F6368;
    line-height:1.9;
    font-size:18px;
}

.industry-card:hover{

    transform:translateY(-6px);

}
/* =======================================
   ABOUT
======================================= */

.about-preview{

    padding:90px 0;

    background:var(--background);

}

.about-preview h2{

    font-size:40px;

    margin-bottom:25px;

    color:var(--text);

}

.about-preview p{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:18px;

}

.about-preview ul{

    padding-left:22px;

    margin:20px 0;

}

.about-preview li{

    margin-bottom:10px;

    color:var(--text-light);

}

/* DATASHEET BOX */

.datasheet-box{

    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-left: 5px solid #7B8D6D;
    border-radius: 16px;
    padding: 35px;
    margin-top: 35px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.datasheet-box h3 {
    margin-bottom: 20px;
    color: #7B8D6D;
    font-size: 28px;
}
.datasheet-box p{
    color:#5F6368;
    line-height:1.9;
}

.datasheet-box ul{
    color:#5F6368;
    line-height:1.9;
}

.datasheet-box li{
    margin-bottom:10px;
}
/* =======================================
   FOOTER
======================================= */

.site-footer{

    background:#2F3437;

    padding:70px 0 25px;

    color:#fff;

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:35px;

}

.footer-sec h3,

.footer-sec h4{

    margin-bottom:15px;

    color:#fff;

}

.footer-sec p{

    color:#d8d8d8;

    line-height:1.8;

}

.footer-sec a{

    display:block;

    color:#D7C6A5;

    text-decoration:none;

    margin-bottom:10px;

    transition:.3s;

}

.footer-sec a:hover{

    color:#fff;

}

.footer-bottom{

    margin-top:40px;

    text-align:center;

    color:#ccc;

    font-size:14px;

}

.iso-footer{

    margin-top:15px;

    color:#fff;

    font-weight:600;

}
/* =======================================
   WHATSAPP
======================================= */

.whatsapp-float{

    position:fixed;

    bottom:25px;

    right:25px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 10px 25px rgba(37,211,102,.35);

    transition:.3s;

    z-index:999;

}

.whatsapp-float:hover{

    transform:scale(1.08);

}

.whatsapp-float img{

    width:36px;

}
/* =======================================
   RESPONSIVE
======================================= */

@media(max-width:820px){

.menu-toggle{

display:block;

}

.nav{

display:none;

position:absolute;

top:75px;

right:0;

width:260px;

background:#fff;

border-left:1px solid var(--border);

box-shadow:0 15px 35px rgba(0,0,0,.08);

padding:30px;

flex-direction:column;

gap:20px;

height:100vh;

}

.nav.active{

display:flex;

}

.sm-hide{

display:none;

}

.hero{

height:80vh;

}

.hero-content h1{

font-size:34px;

}

.hero-subtext{

font-size:16px;

}

.hero-btns{

flex-direction:column;

align-items:center;

}

.product-grid,

.feature-grid,

.industry-grid,

.footer-grid{

grid-template-columns:1fr;

}

.about-preview h2,

.home-products h2,

.industries h2{

font-size:30px;

}

}
/* =======================================
   GLOBAL TYPOGRAPHY
======================================= */

h1,h2,h3,h4,h5,h6{
    color:var(--text);
    font-weight:700;
    line-height:1.3;
}

h1{
    font-size:52px;
}

h2{
    font-size:38px;
    margin-bottom:20px;
}

h3{
    font-size:28px;
    margin-bottom:15px;
}

p{
    color:var(--text-light);
    line-height:1.8;
}

section{
    padding:80px 0;
}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}
/* =======================================
   IMAGES
======================================= */

img{

    max-width:100%;

    display:block;

}

.product-img,
.product-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:14px 14px 0 0;

    transition:.45s ease;

}

.product-card{

    overflow:hidden;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-card:hover .product-img{

    transform:scale(1.05);

}
/* =======================================
   ANIMATIONS
======================================= */

.product-card,
.feature-item,
.industry-card,
.datasheet-box{

    transition:.35s ease;

}

.product-card:hover,
.feature-item:hover,
.industry-card:hover,
.datasheet-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.btn-primary,
.btn-outline{

    transition:.3s;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-outline:hover{

    transform:translateY(-3px);

}
/* =======================================
   TABLES
======================================= */

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

th{

    background:var(--primary);

    color:#fff;

    padding:15px;

    text-align:left;

}

td{

    padding:14px;

    border-bottom:1px solid var(--border);

    color:var(--text);

}

tr:hover{

    background:#F8F7F3;

}
/* =======================================
   CONTACT FORM
======================================= */

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:18px;

    box-shadow:var(--shadow);

    max-width:850px;

    margin:40px auto;

}

.contact-form h2{

    text-align:center;

    margin-bottom:30px;

}

.contact-form input,
.contact-form textarea,
.contact-form select{

    width:100%;

    padding:16px 18px;

    margin-bottom:20px;

    border:1px solid var(--border);

    border-radius:10px;

    background:#fff;

    color:var(--text);

    font-size:15px;

    transition:.3s;

}

.contact-form textarea{

    min-height:170px;

    resize:vertical;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(123,141,109,.15);

}
/* =======================================
   GALLERY
======================================= */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.gallery-grid img{

    width:100%;

    height:240px;

    object-fit:cover;

    border-radius:14px;

    transition:.4s;

    box-shadow:var(--shadow);

}

.gallery-grid img:hover{

    transform:scale(1.04);

}
/* =======================================
   DATASHEETS
======================================= */

.datasheet-box{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.datasheet-box .btn-primary{

    width:max-content;

}
/* =======================================
   SCROLLBAR
======================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EFEDE8;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-hover);

}
/* =======================================
   PREMIUM EFFECTS
======================================= */

::selection{

    background:var(--primary);

    color:#fff;

}

a{

    transition:.3s;

}

button{

    font-family:'Montserrat',sans-serif;

}

iframe{

    width:100%;

    border-radius:14px;

}

img{

    user-select:none;

}

html{

    overflow-x:hidden;

}

body{

    overflow-x:hidden;

}











/* =========================
   DATASHEET DESIGN
========================= */

.datasheet-box{
    background:#FFFFFF;
    border:1px solid #D8D8D8;
    border-left:5px solid #7B8D6D;
    border-radius:16px;
    padding:35px;
    margin-top:35px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.datasheet-box h3{
    color:#7B8D6D;
    font-size:28px;
    margin-bottom:20px;
    font-weight:700;
}

.datasheet-box p{
    color:#5F6368;
    line-height:1.9;
    font-size:18px;
}

.datasheet-box ul{
    color:#5F6368;
    line-height:1.9;
    margin-left:20px;
}

.datasheet-box li{
    margin-bottom:10px;
}

.spec-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.spec-table th{
    background:#7B8D6D;
    color:#FFFFFF;
    padding:14px;
    border:1px solid #D8D8D8;
}

.spec-table td{
    background:#FFFFFF;
    color:#2F2F2F;
    padding:12px;
    border:1px solid #D8D8D8;
    text-align:center;
}

.spec-table tr:nth-child(even){
    background:#F5F3EE;
}