/* =====================================
RESET
===================================== */

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

html,
body{
width:100%;
overflow-x:hidden;
}

/* =====================================
BODY
===================================== */

body{
background:#ebf3fe;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
}

/* =====================================
MAIN WRAPPER
===================================== */

.main-wrapper{
width:100%;
max-width:1080px;
margin:0 auto;
background:#ffffff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =====================================
TABLE
===================================== */

table{
width:100%;
border-collapse:collapse;
border-spacing:0;
}

td{
vertical-align:top;
}

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

img,
.menu-img{
display:block;
width:100%;
max-width:100%;
height:auto;
border:0;
}

/* =====================================
CONTENT AREA
===================================== */

.content-box{
padding:50px 70px;
}

.content-box h1{
font-size:42px;
color:#0f172a;
margin-bottom:25px;
}

.content-box h2{
font-size:28px;
color:#0d6efd;
margin-top:30px;
margin-bottom:15px;
}

.content-box p{
font-size:18px;
line-height:1.9;
color:#334155;
max-width:850px;
}

/* =====================================
ABOUT PAGE
===================================== */

.about-layout{
width:95%;
margin:0 auto;
}

.about-image{
width:100%;
max-width:450px;
margin:0 auto;
}

.about-text{
padding:40px 50px;
}

.about-text h5{
color:#0d6efd;
font-size:14px;
letter-spacing:2px;
margin-bottom:12px;
}

.about-text h2{
font-size:40px;
color:#0f172a;
line-height:1.3;
margin-bottom:25px;
}

.about-text p{
font-size:18px;
line-height:1.9;
color:#334155;
margin-bottom:18px;
}

/* =====================================
STATS
===================================== */

.stats-table{
width:auto;
margin-top:30px;
}

.stats-table td{
padding-right:30px;
}

.number{
font-size:34px;
font-weight:700;
color:#0d6efd;
}

.label{
font-size:14px;
color:#64748b;
}

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

.btn-area{
margin-top:35px;
}

.about-btn{
display:inline-block;
padding:14px 28px;
background:#0d6efd;
color:#fff;
text-decoration:none;
border-radius:50px;
font-weight:700;
transition:.3s;
}

.about-btn:hover

/* =====================================
FORM
===================================== */

.form-control{
width:100%;
padding:12px 15px;
border:1px solid #dbe2ea;
border-radius:10px;
margin-bottom:15px;
font-size:16px;
}

textarea.form-control{
min-height:140px;
resize:vertical;
}

/* =====================================
SERVICES
===================================== */

.section-title{
text-align:center;
margin-bottom:50px;
}

.section-title h1{
font-size:48px;
color:#0f172a;
margin-bottom:15px;
}

.section-title p{
max-width:700px;
margin:0 auto;
color:#334155;
font-size:18px;
line-height:1.9;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:40px;
}

.service-card{
background:#fff;
border-radius:22px;
padding:30px;
border:1px solid #e5e7eb;
box-shadow:0 8px 25px rgba(0,0,0,.05);
transition:.35s;
}

.service-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.service-icon{
font-size:48px;
margin-bottom:15px;
}

.service-card h3{
font-size:24px;
color:#0f172a;
margin-bottom:12px;
}

.service-card p{
color:#334155;
line-height:1.8;
}

/* =====================================
TEMPLATE GALLERY
===================================== */

.template-banner{
background:linear-gradient(135deg,#0d6efd,#1e40af);
color:#fff;
padding:80px 40px;
text-align:center;
border-radius:25px;
margin-bottom:50px;
box-shadow:0 15px 40px rgba(13,110,253,.25);
}

.template-banner h2{
font-size:56px;
font-weight:800;
color:#fff;
line-height:1.15;
margin-bottom:20px;
letter-spacing:-1px;
text-shadow:
0 3px 8px rgba(0,0,0,.25),
0 6px 18px rgba(0,0,0,.15);
}

.template-banner p{
font-size:20px;
color:#f8fafc;
line-height:1.9;
max-width:750px;
margin:0 auto;
}

.template-title{
text-align:center;
margin-bottom:50px;
}

.template-title h1{
font-size:48px;
color:#0f172a;
margin-bottom:15px;
}

.template-title p{
max-width:700px;
margin:0 auto;
color:#334155;
font-size:18px;
line-height:1.9;
}

.gallery-wrap{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.product-frame{
background:#fff;
border-radius:22px;
padding:12px;
border:1px solid #e5e7eb;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.06);
transition:.35s;
}

.product-frame:hover{
transform:translateY(-8px);
border-color:#0d6efd;
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.product-frame img{
border-radius:14px;
transition:.35s;
}

.product-frame:hover img{
transform:scale(1.03);
}

.template-info{
padding:15px 10px;
text-align:center;
}

.template-info h3{
font-size:22px;
color:#0f172a;
margin-bottom:10px;
}

.template-info p{
font-size:16px;
color:#334155;
line-height:1.8;
}

.template-btn{
display:inline-block;
margin-top:15px;
padding:10px 22px;
background:#0d6efd;
color:#fff;
text-decoration:none;
border-radius:50px;
font-size:14px;
font-weight:700;
}

.template-btn:hover

/* =====================================
CTA
===================================== */

.cta-box{
margin-top:60px;
text-align:center;
padding:50px 30px;
border-radius:25px;
background:linear-gradient(135deg,#0d6efd,#2563eb);
}

.cta-box h2{
color:#fff;
}

.cta-box p{
color:#f1f5f9;
margin-bottom:25px;
}

/* =====================================
MOBILE
===================================== */

@media screen and (max-width:768px){

```
body{
    padding:8px;
}

.main-wrapper{
    border-radius:15px;
}

.content-box{
    padding:25px 20px;
}

.about-layout,
.about-layout tbody,
.about-layout tr,
.about-layout td{
    display:block;
    width:100% !important;
}

.about-image{
    max-width:260px;
    margin:0 auto 20px;
}

.about-text{
    padding:20px;
}

.about-text h2,
.content-box h1,
.section-title h1,
.template-title h1{
    font-size:32px;
}

.content-box h2{
    font-size:22px;
}

.about-text p,
.content-box p,
.template-info p{
    font-size:16px;
    line-height:1.8;
}

.service-grid,
.gallery-wrap{
    grid-template-columns:1fr;
}

.template-banner{
    padding:50px 20px;
}

.template-banner h2{
    font-size:34px;
}

.template-banner p{
    font-size:16px;
}

.stats-table{
    width:100%;
}

.stats-table td{
    width:33.33%;
    text-align:center;
    padding-right:0;
}
```

}

/* =====================================
Template Info Box
===================================== */

.template-info{
background:#f8fafc;
padding:20px;
margin-top:12px;
border-radius:14px;
border:1px solid #e2e8f0;
text-align:center;
}

.template-info h3{
font-size:22px;
font-weight:700;
color:#0f172a;
margin-bottom:10px;
}

.template-info p{
font-size:16px;
color:#334155;
line-height:1.8;
margin-bottom:15px;
}

/* =====================================
Template Button
===================================== */

.template-btn{
display:inline-block;
padding:10px 22px;
background:#0d6efd;
color:#fff;
text-decoration:none;
border-radius:50px;
font-size:14px;
font-weight:700;
transition:.3s;
}

.template-btn:hover

/* =====================================
CTA Bottom Section
===================================== */

.cta-box{
margin-top:60px;
padding:60px 40px;
text-align:center;
border-radius:25px;
background:linear-gradient(135deg,#0d6efd,#1e40af);
box-shadow:0 15px 40px rgba(13,110,253,.25);
}

.cta-box h2{
color:#ffffff;
font-size:36px;
font-weight:700;
margin-bottom:15px;
}

.cta-box p{
color:#f8fafc;
font-size:18px;
line-height:1.9;
max-width:700px;
margin:0 auto 25px;
}

/* =====================================
Mobile
===================================== */

@media screen and (max-width:768px){

```
.template-info{
    padding:15px;
}

.template-info h3{
    font-size:20px;
}

.template-info p{
    font-size:15px;
}

.cta-box{
    padding:40px 20px;
}

.cta-box h2{
    font-size:28px;
}

.cta-box p{
    font-size:16px;
}
```

}

.template-info{
    padding:20px;
    text-align:center;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    margin-top:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}